@nhuson/react-dynamic-forms - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/components/Chooser.js

@@ -31,2 +31,4 @@ "use strict";
 
+require("../css/boostrap.css");
+
 var _reactVirtualizedSelect = require("react-virtualized-select");
@@ -33,0 +35,0 @@

package.json

 {
-    "name": "@nhuson/react-dynamic-forms",
-    "version": "1.0.3",
-    "description": "Dynamic forms library for React",
-    "keywords": [
-        "forms",
-        "dynamic",
-        "react"
-    ],
-    "main": "lib/index.js",
-    "author": "ESnet SEG <[e-mail]>",
-    "bugs": {
-        "url": "https://github.com/esnet/esnet-react-forms/issues"
-    },
-    "scripts": {
-        "docs": "echo \"*** Building API docs\n\" && react-docgen src/components -x js -o ../website/src/api/docs.json --pretty",
-        "lint": "eslint src/components/*.js",
-        "test": "npm run lint",
-        "build": "echo \"*** Building lib\n\" && rm -rf lib/* && babel src/components --optional runtime --stage 0 --out-dir lib/components && mkdir lib/css && cp ./src/css/*.css ./lib/css/ && babel src/js --optional runtime --stage 0 --out-dir lib/js && babel src/index.js --optional runtime --stage 0 --out-file lib/index.js",
-        "start-website": "react-scripts start",
-        "build-website": "echo \"*** Building website\n\" && rm -rf docs && react-scripts build && mv build docs",
-        "precommit": "lint-staged",
-        "prettier": "prettier --print-width 100 --tab-width 4 --write \"src/**/*.js\""
-    },
-    "lint-staged": {
-        "*.js": [
-            "prettier --print-width 100 --tab-width 4 --write",
-            "git add"
-        ]
-    },
-    "pre-commit": [
-        "lint",
-        "build"
-    ],
-    "license": "BSD-3-Clause-LBNL",
-    "peerDependencies": {
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0"
-    },
-    "dependencies": {
-        "classnames": "^2.1.3",
-        "deepcopy": "^0.6.3",
-        "flexbox-react": "^4.2.1",
-        "immutable": "^3.8.1",
-        "invariant": "^2.2.3",
-        "keymirror": "^0.1.1",
-        "moment": "^2.21.0",
-        "react-datepicker": "^1.2.2",
-        "react-transition-group": "^1.0.0",
-        "react-virtualized": "^9.18.5",
-        "react-virtualized-select": "^3.1.3",
-        "revalidator": "^0.3.1",
-        "underscore": "^1.8.3"
-    },
-    "devDependencies": {
-        "babel-cli": "^6.5.1",
-        "babel-core": "^6.5.2",
-        "babel-loader": "^7.1.4",
-        "babel-plugin-transform-class-properties": "^6.22.0",
-        "babel-preset-es2015": "^6.5.0",
-        "babel-preset-react": "^6.5.0",
-        "babel-preset-stage-0": "^6.5.0",
-        "chance": "^1.0.6",
-        "enzyme": "3.3.0",
-        "enzyme-to-json": "3.3.1",
-        "eslint-config-prettier": "^2.9.0",
-        "eslint-config-react-app": "^2.1.0",
-        "lint-staged": "^7.0.0",
-        "prettier": "^1.11.1",
-        "prop-types": "^15.6.1",
-        "react": "^16.2.0",
-        "react-docgen": "^2.20.1",
-        "react-dom": "^16.2.0",
-        "react-scripts": "^1.1.1",
-        "react-select": "^1.2.1",
-        "react-test-renderer": "^16.2.0"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    }
+  "name": "@nhuson/react-dynamic-forms",
+  "version": "1.0.4",
+  "description": "Dynamic forms library for React",
+  "keywords": [
+    "forms",
+    "dynamic",
+    "react"
+  ],
+  "main": "lib/index.js",
+  "author": "ESnet SEG <[e-mail]>",
+  "bugs": {
+    "url": "https://github.com/esnet/esnet-react-forms/issues"
+  },
+  "scripts": {
+    "docs": "echo \"*** Building API docs\n\" && react-docgen src/components -x js -o ../website/src/api/docs.json --pretty",
+    "lint": "eslint src/components/*.js",
+    "test": "npm run lint",
+    "build": "echo \"*** Building lib\n\" && rm -rf lib/* && babel src/components --optional runtime --stage 0 --out-dir lib/components && mkdir lib/css && cp ./src/css/*.css ./lib/css/ && babel src/js --optional runtime --stage 0 --out-dir lib/js && babel src/index.js --optional runtime --stage 0 --out-file lib/index.js",
+    "start-website": "react-scripts start",
+    "build-website": "echo \"*** Building website\n\" && rm -rf docs && react-scripts build && mv build docs",
+    "precommit": "lint-staged",
+    "prettier": "prettier --print-width 100 --tab-width 4 --write \"src/**/*.js\""
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --print-width 100 --tab-width 4 --write",
+      "git add"
+    ]
+  },
+  "pre-commit": [
+    "lint",
+    "build"
+  ],
+  "license": "BSD-3-Clause-LBNL",
+  "peerDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.1.3",
+    "deepcopy": "^0.6.3",
+    "flexbox-react": "^4.2.1",
+    "immutable": "^3.8.1",
+    "invariant": "^2.2.3",
+    "keymirror": "^0.1.1",
+    "moment": "^2.21.0",
+    "react-datepicker": "^1.2.2",
+    "react-transition-group": "^1.0.0",
+    "react-virtualized": "^9.18.5",
+    "react-virtualized-select": "^3.1.3",
+    "revalidator": "^0.3.1",
+    "underscore": "^1.8.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.5.1",
+    "babel-core": "^6.5.2",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.22.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "chance": "^1.0.6",
+    "enzyme": "3.3.0",
+    "enzyme-to-json": "3.3.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-react-app": "^2.1.0",
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.11.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-docgen": "^2.20.1",
+    "react-dom": "^16.2.0",
+    "react-scripts": "^1.1.1",
+    "react-select": "^1.2.1",
+    "react-test-renderer": "^16.2.0"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  }
 }

README.md

 
+import {
+    Form,
+    Schema,
+    Field,
+    Chooser,
+    TextEdit,
+    formGroup,
+    formList,
+    FormEditStates
+} from "@nhuson/react-dynamic-forms";
+
+class EmailForm extends React.Component {
+    static defaultValues = { id: 2, amount: 1 };
+
+    static schema = (
+        <Schema>
+            <Field
+                name="amount"
+                defaultValue=""
+                label="amount"
+                required={true}
+            />
+            <Field name="id" defaultValue={1} label="Type" required={true} />
+        </Schema>
+    );
+
+    emailTypes() {
+        return Immutable.fromJS([{ id: 1, label: "Onion" }, { id: 2, label: "Lemon" }]);
+    }
+
+    emailTypeLabel() {
+        let result;
+        this.emailTypes().forEach(obj => {
+            if (obj.id === this.props.value.get("id")) {
+                result = obj.label;
+            }
+        });
+        return result;
+    }
+
+    render() {
+        const {
+            onChange,
+            onMissingCountChange,
+            value = EmailForm.defaultValues
+        } = this.props;
+        const callbacks = { onChange, onMissingCountChange };
+        if (this.props.edit) {
+            return (
+                <Form
+                    name={this.props.name}
+                    schema={EmailForm.schema}
+                    value={value}
+                    edit={FormEditStates.ALWAYS}
+                    labelWidth={50}
+                    {...callbacks}
+                >
+                    <Chooser
+                        field="id"
+                        choiceList={this.emailTypes()}
+                        disableSearch={false}
+                        width={150}
+                        value={1}
+                    />
+                    <TextEdit field="amount" width={300} />
+                </Form>
+            );
+        } else {
+            return (
+                <Form
+                    name={this.props.name}
+                    schema={EmailForm.schema}
+                    value={value}
+                    edit={FormEditStates.TABLE}
+                    labelWidth={50}
+                    {...callbacks}
+                >
+                    <TextEdit field="amount" width={250} />
+                    <Chooser
+                        field="id"
+                        choiceList={this.emailTypes()}
+                        disableSearch={false}
+                        width={250}
+                        value={1}
+                    />
+                </Form>
+            );
+        }
+    }
+}
+
+const EmailList = formList(EmailForm);
+const Ingredients = formGroup(EmailList);

src/components/Chooser.js

@@ -20,2 +20,3 @@ /**
 import 'react-virtualized-select/styles.css'
+import '../css/boostrap.css'
 
@@ -22,0 +23,0 @@ import VirtualizedSelect from "react-virtualized-select";

No alert changes

Improved metrics

Total package byte prevSize

643355

increased by82.86%

Number of package files

66

increased by3.13%

Lines of code

20735

increased by199.51%

Number of lines in readme file

95

increased by4650%

No dependency changes