Merge pull request #431 from reactioncommerce/feat-aldeed-latest-reac…

…to-form feat: update to latest reacto-form and react pkgs
reactioncommerce · Aug 13, 2019 · 77d7ae0 · 77d7ae0
2 parents 3c4214d + e3be63f
commit 77d7ae0
Show file tree

Hide file tree

Showing 9 changed files with 403 additions and 376 deletions.
diff --git a/package.json b/package.json
@@ -91,13 +91,13 @@
   "dependencies": {
     "@babel/polyfill": "~7.2.5",
     "@reactioncommerce/components-context": "~1.2.0",
-    "lodash": "4.17.14",
-    "prop-types": "~15.6.2",
-    "react": "~16.4.2",
+    "lodash": "~4.17.15",
+    "prop-types": "~15.7.2",
+    "react": "~16.9.0",
     "react-container-query": "~0.11.0",
-    "react-dom": "~16.4.2",
+    "react-dom": "~16.9.0",
     "react-stripe-elements": "~2.0.1",
-    "reacto-form": "~0.0.2",
+    "reacto-form": "~1.4.0",
     "styled-components": "~3.3.3"
   },
   "devDependencies": {
@@ -131,7 +131,7 @@
     "case-sensitive-paths-webpack-plugin": "~2.1.2",
     "chalk": "~1.1.3",
     "check-prop-types": "~1.1.2",
-    "composable-form-tests": "~1.0.0",
+    "composable-form-tests": "~1.0.1",
     "css-loader": "~0.28.11",
     "dotenv": "~4.0.0",
     "dotenv-expand": "~4.0.1",
@@ -159,9 +159,9 @@
     "postcss-loader": "~2.0.8",
     "promise": "~8.0.2",
     "raf": "~3.4.1",
-    "react-dev-utils": "~7.0.1",
-    "react-styleguidist": "9.1.11",
-    "react-test-renderer": "~16.7.0",
+    "react-dev-utils": "~9.0.1",
+    "react-styleguidist": "~9.1.14",
+    "react-test-renderer": "~16.9.0",
     "replace-in-files": "~1.1.4",
     "rimraf": "~2.6.3",
     "semantic-release": "~15.13.3",

diff --git a/package/package.json b/package/package.json
@@ -30,7 +30,7 @@
     "lodash.isequal": "~4.5.0",
     "lodash.uniqueid": "~4.0.1",
     "mdi-material-ui": "~5.8.0",
-    "react-is": "~16.4.1",
+    "react-is": "~16.9.0",
     "react-select": "~2.4.0"
   },
   "devDependencies": {
@@ -60,7 +60,7 @@
     "babel-plugin-styled-components": "~1.10.0",
     "chalk": "~1.1.3",
     "check-prop-types": "~1.1.2",
-    "composable-form-tests": "~1.0.0",
+    "composable-form-tests": "~1.0.1",
     "dotenv": "~4.0.0",
     "dotenv-expand": "~4.0.1",
     "enzyme": "~3.8.0",
@@ -79,9 +79,9 @@
     "object-assign": "~4.1.1",
     "promise": "~8.0.2",
     "raf": "~3.4.1",
-    "react-dev-utils": "~7.0.1",
+    "react-dev-utils": "~9.0.1",
     "react-styleguidist": "~6.5.3",
-    "react-test-renderer": "~16.7.0",
+    "react-test-renderer": "~16.9.0",
     "replace-in-files": "~1.1.4",
     "rimraf": "~2.6.3",
     "semantic-release": "~15.13.3",
@@ -92,11 +92,11 @@
   },
   "peerDependencies": {
     "@reactioncommerce/components-context": "~1.2.0",
-    "prop-types": "~15.6.2",
-    "react": "~16.4.2",
+    "prop-types": "~15.7.2",
+    "react": "~16.9.0",
     "react-container-query": "~0.11.0",
     "react-stripe-elements": "~2.0.1",
-    "reacto-form": "~0.0.2",
+    "reacto-form": "~1.4.0",
     "styled-components": "~3.3.3"
   }
 }
diff --git a/package/src/components/ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm.js b/package/src/components/ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm.js
@@ -1,6 +1,6 @@
-import React, { Component } from "react";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { Form } from "reacto-form";
+import { useReactoForm } from "reacto-form";
 import { uniqueId } from "lodash";
 import { withComponents } from "@reactioncommerce/components-context";
 import { CustomPropTypes } from "../../../utils";
@@ -11,7 +11,7 @@ import { CustomPropTypes } from "../../../utils";
  * @param {Object} Form object
  * @returns {Object} Transformed object
  */
-function buildResult({ amount, fullName }) {
+function buildResult({ amount, fullName = null }) {
   let floatAmount = amount ? parseFloat(amount) : null;
   if (isNaN(floatAmount)) floatAmount = null;
 
@@ -22,128 +22,145 @@ function buildResult({ amount, fullName }) {
   };
 }
 
-class ExampleIOUPaymentForm extends Component {
-  static propTypes = {
-    /**
-     * You can provide a `className` prop that will be applied to the outermost DOM element
-     * rendered by this component. We do not recommend using this for styling purposes, but
-     * it can be useful as a selector in some situations.
-     */
-    className: PropTypes.string,
-    /**
-     * If you've set up a components context using
-     * [@reactioncommerce/components-context](https://github.com/reactioncommerce/components-context)
-     * (recommended), then this prop will come from there automatically. If you have not
-     * set up a components context or you want to override one of the components in a
-     * single spot, you can pass in the components prop directly.
-     */
-    components: PropTypes.shape({
-      /**
-       * Pass either the Reaction ErrorsBlock component or your own component that
-       * accepts compatible props.
-       */
-      ErrorsBlock: CustomPropTypes.component.isRequired,
-      /**
-       * Pass either the Reaction Field component or your own component that
-       * accepts compatible props.
-       */
-      Field: CustomPropTypes.component.isRequired,
-      /**
-       * Pass either the Reaction TextInput component or your own component that
-       * accepts compatible props.
-       */
-      TextInput: CustomPropTypes.component.isRequired
-    }),
-    /**
-     * Pass true while the input data is in the process of being saved.
-     * While true, the form fields are disabled.
-     */
-    isSaving: PropTypes.bool,
-    /**
-     * Called as the form fields are changed
-     */
-    onChange: PropTypes.func,
-    /**
-     * When this action's input data switches between being
-     * ready for saving and not ready for saving, this will
-     * be called with `true` (ready) or `false`
-     */
-    onReadyForSaveChange: PropTypes.func,
-    /**
-     * Called with an object value when this component's `submit`
-     * method is called. The object may have `data`, `displayName`,
-     * and `amount` properties.
-     */
-    onSubmit: PropTypes.func
-  }
+/**
+ * @summary ExampleIOUPaymentForm component
+ * @param {Object} props Props
+ * @param {Object} ref Ref
+ * @return {Object} React render
+ */
+function ExampleIOUPaymentForm(props, ref) {
+  const lastDocRef = useRef();
+  const isReadyRef = useRef();
 
-  static defaultProps = {
-    onChange() {},
-    onReadyForSaveChange() {},
-    onSubmit() {}
-  };
+  const [uniqueInstanceIdentifier, setUniqueInstanceIdentifier] = useState();
+  if (!uniqueInstanceIdentifier) {
+    setUniqueInstanceIdentifier(uniqueId("ExampleIOUPaymentForm"));
+  }
 
-  uniqueInstanceIdentifier = uniqueId("ExampleIOUPaymentForm");
+  const {
+    className,
+    components: {
+      ErrorsBlock,
+      Field,
+      TextInput
+    },
+    isSaving,
+    onChange,
+    onReadyForSaveChange,
+    onSubmit
+  } = props;
 
-  submit() {
-    if (this.form) this.form.submit();
-  }
+  const {
+    getErrors,
+    getInputProps,
+    submitForm
+  } = useReactoForm({
+    isReadOnly: isSaving,
+    onChange(formData) {
+      const resultDoc = buildResult(formData);
+      const stringDoc = JSON.stringify(resultDoc);
+      if (stringDoc !== lastDocRef.current) {
+        onChange(resultDoc);
+      }
+      lastDocRef.current = stringDoc;
 
-  handleChange = (doc) => {
-    const { onChange, onReadyForSaveChange } = this.props;
+      const isReady = !!formData.fullName;
+      if (isReady !== isReadyRef.current) {
+        onReadyForSaveChange(isReady);
+      }
+      isReadyRef.current = isReady;
+    },
+    onSubmit: (formData) => onSubmit(buildResult(formData))
+  });
 
-    const resultDoc = buildResult(doc);
-    const stringDoc = JSON.stringify(resultDoc);
-    if (stringDoc !== this.lastDoc) {
-      onChange(resultDoc);
+  useImperativeHandle(ref, () => ({
+    submit() {
+      submitForm();
     }
-    this.lastDoc = stringDoc;
+  }));
 
-    const isReady = !!doc.fullName;
-    if (isReady !== this.lastIsReady) {
-      onReadyForSaveChange(isReady);
-    }
-    this.lastIsReady = isReady;
-  }
+  const fullNameInputId = `fullName_${uniqueInstanceIdentifier}`;
+  const amountInputId = `amount_${uniqueInstanceIdentifier}`;
 
-  handleSubmit = (doc) => {
-    const { onSubmit } = this.props;
-    return onSubmit(buildResult(doc));
-  }
+  return (
+    <div className={className}>
+      <Field name="fullName" errors={getErrors(["fullName"])} label="Full name" labelFor={fullNameInputId}>
+        <TextInput id={fullNameInputId} {...getInputProps("fullName")} />
+        <ErrorsBlock errors={getErrors(["fullName"])} />
+      </Field>
+      <Field name="amount" errors={getErrors(["amount"])} label="Amount (optional)" labelFor={amountInputId}>
+        <TextInput id={amountInputId} {...getInputProps("amount")} />
+        <ErrorsBlock errors={getErrors(["amount"])} />
+      </Field>
+    </div>
+  );
+}
 
-  render() {
-    const {
-      className,
-      components: {
-        ErrorsBlock,
-        Field,
-        TextInput
-      },
-      isSaving
-    } = this.props;
+// There is currently some issue with combining hoist-non-react-statics (used by
+// withComponents) with forwardRef. Until that's resolved, reassigning
+// ExampleIOUPaymentForm to the wrapped component here, before setting the statics.
+/* eslint-disable-next-line no-func-assign */
+ExampleIOUPaymentForm = withComponents(forwardRef(ExampleIOUPaymentForm));
 
-    const fullNameInputId = `fullName_${this.uniqueInstanceIdentifier}`;
-    const amountInputId = `amount_${this.uniqueInstanceIdentifier}`;
+ExampleIOUPaymentForm.propTypes = {
+  /**
+   * You can provide a `className` prop that will be applied to the outermost DOM element
+   * rendered by this component. We do not recommend using this for styling purposes, but
+   * it can be useful as a selector in some situations.
+   */
+  className: PropTypes.string,
+  /**
+   * If you've set up a components context using
+   * [@reactioncommerce/components-context](https://github.com/reactioncommerce/components-context)
+   * (recommended), then this prop will come from there automatically. If you have not
+   * set up a components context or you want to override one of the components in a
+   * single spot, you can pass in the components prop directly.
+   */
+  components: PropTypes.shape({
+    /**
+     * Pass either the Reaction ErrorsBlock component or your own component that
+     * accepts compatible props.
+     */
+    ErrorsBlock: CustomPropTypes.component.isRequired,
+    /**
+     * Pass either the Reaction Field component or your own component that
+     * accepts compatible props.
+     */
+    Field: CustomPropTypes.component.isRequired,
+    /**
+     * Pass either the Reaction TextInput component or your own component that
+     * accepts compatible props.
+     */
+    TextInput: CustomPropTypes.component.isRequired
+  }),
+  /**
+   * Pass true while the input data is in the process of being saved.
+   * While true, the form fields are disabled.
+   */
+  isSaving: PropTypes.bool,
+  /**
+   * Called as the form fields are changed
+   */
+  onChange: PropTypes.func,
+  /**
+   * When this action's input data switches between being
+   * ready for saving and not ready for saving, this will
+   * be called with `true` (ready) or `false`
+   */
+  onReadyForSaveChange: PropTypes.func,
+  /**
+   * Called with an object value when this component's `submit`
+   * method is called. The object may have `data`, `displayName`,
+   * and `amount` properties.
+   */
+  onSubmit: PropTypes.func
+};
 
-    return (
-      <Form
-        className={className}
-        isReadOnly={isSaving}
-        onChange={this.handleChange}
-        onSubmit={this.handleSubmit}
-        ref={(formRef) => { this.form = formRef; }}
-      >
-        <Field name="fullName" label="Full name" labelFor={fullNameInputId}>
-          <TextInput id={fullNameInputId} name="fullName" />
-          <ErrorsBlock names={["fullName"]} />
-        </Field>
-        <Field name="amount" label="Amount (optional)" labelFor={amountInputId}>
-          <TextInput id={amountInputId} name="amount" />
-          <ErrorsBlock names={["amount"]} />
-        </Field>
-      </Form>
-    );
-  }
-}
+ExampleIOUPaymentForm.defaultProps = {
+  isSaving: false,
+  onChange() {},
+  onReadyForSaveChange() {},
+  onSubmit() {}
+};
 
-export default withComponents(ExampleIOUPaymentForm);
+export default ExampleIOUPaymentForm;
diff --git a/package/src/components/ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm.test.js b/package/src/components/ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm.test.js
@@ -42,8 +42,7 @@ test("calls onChange on mount and change", () => {
     </ComponentsProvider>
   ));
 
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith({
+  expect(onChange).toHaveBeenCalledWith({
     amount: null,
     data: { fullName: null },
     displayName: null

diff --git a/.../src/components/ExampleIOUPaymentForm/v1/__snapshots__/ExampleIOUPaymentForm.test.js.snap b/.../src/components/ExampleIOUPaymentForm/v1/__snapshots__/ExampleIOUPaymentForm.test.js.snap
@@ -1,11 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`basic snapshot 1`] = `
-<div
-  className={null}
-  style={Object {}}
->
-  Field({"name":"fullName","label":"Full name","labelFor":"fullName_ExampleIOUPaymentForm1","children":"[Object]"})
-  Field({"name":"amount","label":"Amount (optional)","labelFor":"amount_ExampleIOUPaymentForm1","children":"[Object]"})
+<div>
+  Field({"name":"fullName","errors":"[Object]","label":"Full name","labelFor":"fullName_ExampleIOUPaymentForm1","children":"[Object]"})
+  Field({"name":"amount","errors":"[Object]","label":"Amount (optional)","labelFor":"amount_ExampleIOUPaymentForm1","children":"[Object]"})
 </div>
 `;