Merge branch 'master' into dependabot/npm_and_yarn/react-dnd-16.0.1

.dumirc.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'dumi';
+import path from 'path';
+
+const isProdSite =
+  // 不是预览模式 同时是生产环境
+  process.env.PREVIEW !== 'true' && process.env.NODE_ENV === 'production';
+
+const name = 'field-form';
+
+export default defineConfig({
+  alias: {
+    'rc-field-form$': path.resolve('src'),
+    'rc-field-form/es': path.resolve('src'),
+  },
+  mfsu: false,
+  favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+  themeConfig: {
+    name: 'FieldForm',
+    logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  },
+  base: isProdSite ? `/${name}/` : '/',
+  publicPath: isProdSite ? `/${name}/` : '/',
+});

.fatherrc.ts

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  runtimeHelpers: true,
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '16'
 
       - name: cache package-lock.json
         uses: actions/cache@v2
@@ -41,7 +41,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
+        run: npm i
 
   lint:
     runs-on: ubuntu-latest

.gitignore

@@ -19,9 +19,11 @@
 .DS_Store
 .vscode
 .idea
+~*
 
 # umi
 .umi
 .umi-production
 .umi-test
 .env.local
+.dumi/

docs/demo/basic.md

@@ -1,4 +1,4 @@
 ## basic
 
 
-<code src="../examples/basic.tsx" />
+<code src="../examples/basic.tsx"></code>

docs/demo/component.md

@@ -1,3 +1,3 @@
 ## component
 
-<code src="../examples/component.tsx" />
+<code src="../examples/component.tsx"></code>

docs/demo/context.md

@@ -1,3 +1,3 @@
 ## context
 
-<code src="../examples/context.tsx" />
+<code src="../examples/context.tsx"></code>

docs/demo/deps.md

@@ -1,4 +1,4 @@
 ## deps
 
 
-<code src="../examples/deps.tsx" />
+<code src="../examples/deps.tsx"></code>

docs/demo/initialValues.md

@@ -1,4 +1,4 @@
 ## initialValues
 
 
-<code src="../examples/initialValues.tsx" />
+<code src="../examples/initialValues.tsx"></code>

docs/demo/layout.md

@@ -1,3 +1,3 @@
 ## layout
 
-<code src="../examples/layout.tsx" />
+<code src="../examples/layout.tsx"></code>

docs/demo/list.md

@@ -1,3 +1,3 @@
 ## list
 
-<code src="../examples/list.tsx" />
+<code src="../examples/list.tsx"></code>

docs/demo/preserve.md

@@ -1,4 +1,4 @@
 ## preserve
 
 
-<code src="../examples/preserve.tsx" />
+<code src="../examples/preserve.tsx"></code>

docs/demo/redux.md

@@ -1,3 +1,3 @@
 ## redux
 
-<code src="../examples/redux.tsx" />
+<code src="../examples/redux.tsx"></code>

docs/demo/renderProps.md

@@ -1,3 +1,3 @@
 ## renderProps
 
-<code src="../examples/renderProps.tsx" />
+<code src="../examples/renderProps.tsx"></code>

docs/demo/reset.md

@@ -1,3 +1,3 @@
 ## reset
 
-<code src="../examples/reset.tsx" />
+<code src="../examples/reset.tsx"></code>

docs/demo/stateForm-list-draggable.md

@@ -1,3 +1,3 @@
 ## stateForm-list-draggable
 
-<code src="../examples/stateForm-list-draggable.tsx" />
+<code src="../examples/stateForm-list-draggable.tsx"></code>

docs/demo/useForm.md

@@ -1,3 +1,3 @@
 ## useForm
 
-<code src="../examples/useForm.tsx" />
+<code src="../examples/useForm.tsx"></code>

docs/demo/useWatch-list.md

@@ -1,3 +1,3 @@
 ## useWatch-list
 
-<code src="../examples/useWatch-list.tsx" />
+<code src="../examples/useWatch-list.tsx"></code>

docs/demo/useWatch.md

@@ -1,3 +1,3 @@
 ## useWatch
 
-<code src="../examples/useWatch.tsx" />
+<code src="../examples/useWatch.tsx"></code>

docs/demo/validate-perf.md

@@ -1,3 +1,3 @@
 ## validate-perf
 
-<code src="../examples/validate-perf.tsx" />
+<code src="../examples/validate-perf.tsx"></code>

docs/demo/validate.md

@@ -1,3 +1,3 @@
 ## validate
 
-<code src="../examples/validate.tsx" />
+<code src="../examples/validate.tsx"></code>

docs/demo/validateOnly.md

@@ -0,0 +1,3 @@
+## validateOnly
+
+<code src="../examples/validateOnly.tsx"></code>

docs/examples/basic.tsx

@@ -2,16 +2,28 @@ import Form, { Field } from 'rc-field-form';
 import React from 'react';
 import Input from './components/Input';
 
+type FormData = {
+  name?: string;
+  password?: string;
+  password2?: string;
+};
+
 export default () => {
   const [form] = Form.useForm();
 
   return (
-    <Form form={form} preserve={false}>
-      <Field name="name">
+    <Form
+      form={form}
+      preserve={false}
+      onFieldsChange={fields => {
+        console.error('fields:', fields);
+      }}
+    >
+      <Field<FormData> name="name">
         <Input placeholder="Username" />
       </Field>
 
-      <Field dependencies={['name']}>
+      <Field<FormData> dependencies={['name']}>
         {() => {
           return form.getFieldValue('name') === '1' ? (
             <Field name="password">
@@ -26,12 +38,14 @@ export default () => {
           const password = form.getFieldValue('password');
           console.log('>>>', password);
           return password ? (
-            <Field name="password2">
+            <Field<FormData> name={['password2']}>
               <Input placeholder="Password 2" />
             </Field>
           ) : null;
         }}
       </Field>
+
+      <button type="submit">Submit</button>
     </Form>
   );
 };

docs/examples/components/LabelField.tsx

@@ -9,7 +9,7 @@ interface ErrorProps {
   children?: React.ReactNode[];
 }
 
-const Error = ({ children, warning }: ErrorProps) => (
+const Error: React.FC<ErrorProps> = ({ children, warning }) => (
   <ul style={{ color: warning ? 'orange' : 'red' }}>
     {children.map((error: React.ReactNode, index: number) => (
       <li key={index}>{error}</li>

docs/examples/components/useDraggable.ts

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import { DragObjectWithType, useDrag, useDrop } from 'react-dnd';
+import type { DragObjectWithType } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 
 type DragWithIndex = DragObjectWithType & {
   index: number;

docs/examples/renderProps.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import Form from 'rc-field-form';
 import Input from './components/Input';
@@ -45,7 +44,6 @@ export default class Demo extends React.Component {
                   </div>
                 )}
               </Field>
-
               {list.map((_, index) => (
                 <Field key={index} name={`list_field_${index}`}>
                   <Input placeholder={`list_field_${index}`} />

docs/examples/useWatch.tsx

@@ -13,6 +13,7 @@ type FieldType = {
   demo2?: string;
   id?: number;
   demo1?: { demo2?: { demo3?: { demo4?: string } } };
+  hidden?: string;
 };
 
 const Demo = React.memo(() => {
@@ -48,12 +49,13 @@ export default () => {
   const demo4 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4'], form);
   const demo5 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4', 'demo5'], form);
   const more = Form.useWatch(['age', 'name', 'gender'], form);
-  console.log('main watch', values, demo1, demo2, main, age, demo3, demo4, demo5, more);
+  const hidden = Form.useWatch(['hidden'], { form, preserve: true });
+  console.log('main watch', values, demo1, demo2, main, age, demo3, demo4, demo5, more, hidden);
   return (
     <>
       <Form
         form={form}
-        initialValues={{ id: 1, age: '10', name: 'default' }}
+        initialValues={{ id: 1, age: '10', name: 'default', hidden: 'here' }}
         onFinish={v => console.log('submit values', v)}
       >
         no render
@@ -115,6 +117,7 @@ export default () => {
       <button onClick={() => setVisible(c => !c)}>isShow name</button>
       <button onClick={() => setVisible3(c => !c)}>isShow initialValue</button>
       <button onClick={() => setVisible2(c => !c)}>isShow demo2</button>
+      <button onClick={() => form.setFieldsValue({ hidden: `${form.getFieldsValue(true).hidden || ''}1` })}>change hidden field</button>
     </>
   );
 };

docs/examples/validate.tsx

@@ -6,7 +6,11 @@ import Input from './components/Input';
 
 const { Field } = Form;
 
-const Error = ({ children }) => (
+interface ErrorProps {
+  children?: React.ReactNode[];
+}
+
+const Error: React.FC<ErrorProps> = ({ children }) => (
   <ul style={{ color: 'red' }}>
     {children.map((error, i) => (
       <li key={i}>{error}</li>
@@ -19,14 +23,7 @@ const FieldState = ({ form, name }) => {
   const validating = form.isFieldValidating(name);
 
   return (
-    <div
-      style={{
-        color: 'green',
-        position: 'absolute',
-        marginTop: -35,
-        left: 200,
-      }}
-    >
+    <div style={{ color: 'green', position: 'absolute', marginTop: -35, left: 200 }}>
       {touched ? <span>Touched!</span> : null}
       {validating ? <span>Validating!</span> : null}
     </div>

docs/examples/validateOnly.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/prop-types, @typescript-eslint/consistent-type-imports */
+
+import React from 'react';
+import Form from 'rc-field-form';
+import type { FormInstance } from 'rc-field-form';
+import Input from './components/Input';
+import LabelField from './components/LabelField';
+
+function useSubmittable(form: FormInstance) {
+  const [submittable, setSubmittable] = React.useState(false);
+  const store = Form.useWatch([], form);
+
+  React.useEffect(() => {
+    form
+      .validateFields({
+        validateOnly: true,
+      })
+      .then(
+        () => {
+          setSubmittable(true);
+        },
+        () => {
+          setSubmittable(false);
+        },
+      );
+  }, [store]);
+
+  return submittable;
+}
+
+export default () => {
+  const [form] = Form.useForm();
+
+  const canSubmit = useSubmittable(form);
+
+  const onValidateOnly = async () => {
+    const result = await form.validateFields({
+      validateOnly: true,
+    });
+    console.log('Validate:', result);
+  };
+
+  return (
+    <>
+      <Form form={form}>
+        <LabelField
+          name="name"
+          label="Name"
+          rules={[
+            { required: true },
+            // { warningOnly: true, validator: () => Promise.reject('Warn Name!') },
+          ]}
+        >
+          <Input />
+        </LabelField>
+        <LabelField
+          name="age"
+          label="Age"
+          rules={[
+            { required: true },
+            // { warningOnly: true, validator: () => Promise.reject('Warn Age!') },
+          ]}
+        >
+          <Input />
+        </LabelField>
+        <button type="reset">Reset</button>
+        <button type="submit" disabled={!canSubmit}>
+          Submit
+        </button>
+      </Form>
+      <button type="button" onClick={onValidateOnly}>
+        Validate Without UI update
+      </button>
+    </>
+  );
+};