Merge pull request #3 from reeli/develop

reeli · Apr 9, 2019 · 52701ac · 52701ac
2 parents 5fda44f + 2b90c29
commit 52701ac
Show file tree

Hide file tree

Showing 24 changed files with 2,771 additions and 3,019 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-rx/form",
-  "version": "0.1.5",
+  "version": "1.0.0",
   "description": "rx form for react, use typescript for development",
   "main": "lib/index.js",
   "module": "module/index.js",
@@ -78,25 +78,26 @@
     ]
   },
   "dependencies": {
-    "lodash": "^4.17.10",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "rxjs": "^6.3.1"
+    "@emotion/is-prop-valid": "^0.7.3",
+    "lodash": "^4.17.11",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "rxjs": "^6.4.0"
   },
   "devDependencies": {
-    "lodash-es": "^4.17.10",
-    "@types/lodash": "^4.14.116",
-    "@types/lodash-es": "4.17.1",
-    "@types/react-dom": "^16.0.7",
-    "@material-ui/core": "3.8.1",
-    "@material-ui/icons": "3.0.1",
+    "@material-ui/core": "3.9.2",
+    "@material-ui/icons": "3.0.2",
     "@types/axios-mock-adapter": "1.10.0",
     "@types/config": "0.0.34",
-    "@types/enzyme": "3.1.15",
+    "@types/enzyme": "3.1.17",
     "@types/highlight.js": "9.12.3",
     "@types/html-webpack-plugin": "3.2.0",
     "@types/jest": "23.3.11",
-    "@types/react-redux": "6.0.12",
+    "@types/lodash": "^4.14.120",
+    "@types/lodash-es": "4.17.1",
+    "@types/react": "16.8.2",
+    "@types/react-dom": "^16.8.0",
+    "@types/react-redux": "7.0.1",
     "@types/react-router": "4.4.3",
     "@types/react-router-dom": "4.3.1",
     "@types/redux-actions": "2.3.1",
@@ -107,15 +108,16 @@
     "config": "3.0.1",
     "css-loader": "2.1.0",
     "enzyme": "3.8.0",
-    "enzyme-adapter-react-16": "1.7.1",
+    "enzyme-adapter-react-16": "1.9.1",
     "file-loader": "3.0.1",
-    "highlight.js": "9.13.1",
+    "highlight.js": "9.14.2",
     "html-webpack-plugin": "4.0.0-alpha",
     "husky": "1.3.1",
     "jest": "23.6.0",
-    "lint-staged": "8.1.0",
-    "markdown-loader": "4.0.0",
-    "prettier": "1.15.3",
+    "lint-staged": "8.1.3",
+    "lodash-es": "^4.17.11",
+    "markdown-loader": "5.0.0",
+    "prettier": "1.16.4",
     "raw-loader": "1.0.0",
     "react-redux": "6.0.0",
     "react-router": "4.3.1",
@@ -125,10 +127,10 @@
     "redux-logger": "3.0.6",
     "style-loader": "0.23.1",
     "ts-jest": "23.10.5",
-    "ts-loader": "5.3.2",
-    "ts-node": "7.0.1",
-    "tslint": "5.12.0",
-    "typescript": "3.2.2",
+    "ts-loader": "5.3.3",
+    "ts-node": "8.0.2",
+    "tslint": "5.12.1",
+    "typescript": "3.3.3",
     "uglifyjs-webpack-plugin": "2.1.1",
     "webpack": "4.28.3",
     "webpack-cli": "3.2.0",

diff --git a/src-examples/FieldArrayForm.tsx b/src-examples/FieldArrayForm.tsx
@@ -69,52 +69,54 @@ export class FieldArrayForm extends React.Component {
         {({ handleSubmit }) => (
           <form onSubmit={handleSubmit(this.onSubmit)}>
             <FieldArray name={"members"} initLength={1}>
-              {({ fields, add, remove }) => (
-                <ul>
-                  <li>
-                    <button type="button" onClick={() => add()}>
-                      Add member
-                    </button>
-                  </li>
-                  {fields.map((member, idx) => (
-                    <li key={member}>
-                      <h3>{`member${idx + 1}`}</h3>
-                      <Field name={`${member}.firstName`} validate={required()}>
-                        {({ name, value = "", onChange, meta: { error } }) => (
-                          <div>
-                            <input
-                              name={name}
-                              value={value}
-                              onChange={(e) => onChange(e.target.value)}
-                              type="text"
-                              placeholder={`First Name${idx}`}
-                            />
-                            {error && <div style={{ color: "red" }}>{error}</div>}
-                          </div>
-                        )}
-                      </Field>
-                      <Field name={`${member}.lastName`} validate={required()}>
-                        {({ name, value = "", onChange, meta: { error } }) => (
-                          <div>
-                            <input
-                              name={name}
-                              value={value}
-                              onChange={(e) => onChange(e.target.value)}
-                              type="text"
-                              placeholder="Last Name"
-                            />
-                            {error && <div style={{ color: "red" }}>{error}</div>}
-                          </div>
-                        )}
-                      </Field>
-                      <button type="button" onClick={() => remove(idx)}>
-                        Remove members
+              {({ fields, add, remove }) => {
+                return (
+                  <ul>
+                    <li>
+                      <button type="button" onClick={() => add()}>
+                        Add member
                       </button>
-                      {this.renderHobbies(member)}
                     </li>
-                  ))}
-                </ul>
-              )}
+                    {fields.map((member, idx) => (
+                      <li key={member}>
+                        <h3>{`member${idx + 1}`}</h3>
+                        <Field name={`${member}.firstName`} validate={required()}>
+                          {({ name, value = "", onChange, meta: { error } }) => (
+                            <div>
+                              <input
+                                name={name}
+                                value={value}
+                                onChange={(e) => onChange(e.target.value)}
+                                type="text"
+                                placeholder={`First Name${idx}`}
+                              />
+                              {error && <div style={{ color: "red" }}>{error}</div>}
+                            </div>
+                          )}
+                        </Field>
+                        <Field name={`${member}.lastName`} validate={required()}>
+                          {({ name, value = "", onChange, meta: { error } }) => (
+                            <div>
+                              <input
+                                name={name}
+                                value={value}
+                                onChange={(e) => onChange(e.target.value)}
+                                type="text"
+                                placeholder="Last Name"
+                              />
+                              {error && <div style={{ color: "red" }}>{error}</div>}
+                            </div>
+                          )}
+                        </Field>
+                        <button type="button" onClick={() => remove(idx)}>
+                          Remove members
+                        </button>
+                        {this.renderHobbies(member)}
+                      </li>
+                    ))}
+                  </ul>
+                );
+              }}
             </FieldArray>
             <Button type="submit">Submit</Button>
           </form>

diff --git a/src-examples/PrefillForm.tsx b/src-examples/PrefillForm.tsx
@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button/Button";
 import FormControl from "@material-ui/core/FormControl/FormControl";
 import { Field, FormValues, RxForm } from "@react-rx/form";
-import * as React from "react";
+import React from "react";
 import { CustomCheckbox } from "src-components/CustomCheckbox";
 import { CustomInput } from "src-components/CustomInput";
 import { DebounceInput } from "../src-components/DebounceInput";
@@ -13,28 +13,19 @@ export class PrefillForm extends React.Component {
   }
 
   form: any;
-  formValues: any;
-  ref: any = React.createRef();
   onSubmit = (values: any) => {
     alert(JSON.stringify(values, null, 2));
   };
 
   componentDidMount() {
-    console.log(this.form.getFormValues(), "this.form.formState");
-    console.log(this.ref.current.getFormValues(), "this.formValues");
     // setTimeout(() => {
     //   alert("hehaha");
     // }, 2000);
   }
 
   render() {
     return (
-      <RxForm
-        initialValues={{ firstName: "rui", lastName: "li" }}
-        ref={(ref: any) => {
-          this.form = ref;
-        }}
-      >
+      <RxForm initialValues={{ firstName: "rui", lastName: "li" }}>
         {({ handleSubmit }) => (
           <form onSubmit={handleSubmit(this.onSubmit)}>
             <div>
@@ -47,7 +38,7 @@ export class PrefillForm extends React.Component {
               <Field name="email">
                 {(fieldProps) => <CustomInput {...fieldProps} type="email" placeholder="Email" />}
               </Field>
-              <FormValues ref={this.ref}>
+              <FormValues>
                 {({ formValues, updateFormValues }) => (
                   <>
                     <div>{JSON.stringify(formValues)}</div>

diff --git a/src-examples/SubmitValidationForm.tsx b/src-examples/SubmitValidationForm.tsx
@@ -10,7 +10,6 @@ export class SubmitValidationForm extends React.Component {
   }
 
   onSubmit = (values: any, onSubmitError: any) => {
-    console.log(values, "values on Submit");
     const errors = {} as any;
 
     if (values.username.length === 0) {