feat: CreateForm/modalForm 增加 preserveInitialValues

- [email protected]
umijs · Apr 27, 2021 · 50e457e · 50e457e
1 parent 856e024
commit 50e457e
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 9 deletions.
diff --git a/docs/create-form/basic.jsx b/docs/create-form/basic.jsx
@@ -21,7 +21,9 @@ export default class BasicDemo extends React.Component {
           key={mode}
           initialValues={{
             gender: ['male'],
+            nihao: 'cat',
           }}
+          preserveInitialValues
           fields={[
             {
               name: 'name',
@@ -47,6 +49,9 @@ export default class BasicDemo extends React.Component {
           submitButtonProps={{
             icon: 'appstore',
           }}
+          back={() => {
+            console.log('back')
+          }}
           submit={{
             url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
             method: 'POST'

diff --git a/docs/create-form/customActions.jsx b/docs/create-form/customActions.jsx
@@ -46,11 +46,18 @@ export default class BasicDemo extends React.Component {
               },
               action: [
                 'validateFields',
+                { type: 'assign', args: [{ nihao: 'kitty' }] },
                 {
                   url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
                   method: 'POST',
+                  params: ({ result }) => {
+                    return result;
+                  },
+                },
+                (ctx) => {
+                  console.log(ctx);
+                  console.log('Finished!!!');
                 },
-                () => console.log('Finished!!!')
               ],
             },
           ]}

diff --git a/docs/modalform/basic.jsx b/docs/modalform/basic.jsx
@@ -25,6 +25,11 @@ export default () => {
                   field: 'input',
                 },
               ],
+              initialValues: {
+                nihao: 'cat',
+                input1: '未知'
+              },
+              preserveInitialValues: true,
               submitButtonProps: {
                 icon: 'appstore',
               },

diff --git a/packages/sula/package.json b/packages/sula/package.json
@@ -22,5 +22,8 @@
   "files": [
     "es"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@types/lodash": "^4.14.168"
+  }
 }
diff --git a/packages/sula/src/action-plugin/index.ts b/packages/sula/src/action-plugin/index.ts
@@ -10,6 +10,7 @@ import { refreshTable, resetTable } from './refreshTable';
 import { modalform, drawerform, modalOk, modalCancel } from './modalform';
 import { request } from './request';
 import { back, forward, route } from './history';
+import { assignResult } from './lang';
 import { ActionImpl } from '../types/plugin';
 
 function registerActionPlugin(pluginName: string, actionPlugin: ActionImpl) {
@@ -50,6 +51,9 @@ function registerActionPlugins() {
   registerActionPlugin('route', (ctx, config) => {
     return route(ctx, config);
   });
+
+  // ================= lang =====================
+  registerActionPlugin('assign', assignResult);
 }
 
 export { request, registerActionPlugins, registerActionPlugin };
diff --git a/packages/sula/src/action-plugin/lang.ts b/packages/sula/src/action-plugin/lang.ts
@@ -0,0 +1,11 @@
+import assign from 'lodash/assign';
+
+export const assignResult = (ctx, config) => {
+  if(!config.args || !config.args.length) {
+    return ctx.result;
+  }
+
+  return config.args.reduce((memo, arg) => {
+    return assign(memo, arg, ctx.result);
+  }, {});
+};
diff --git a/packages/sula/src/action-plugin/validateFields.ts b/packages/sula/src/action-plugin/validateFields.ts
@@ -2,10 +2,10 @@ import { rejectSTOP } from '../rope';
 
 // TODO: FormCtx
 
-export const validateFields = (ctx) => {
+export const validateFields = (ctx, config) => {
   const validateFn = ctx.form.validateFields;
 
-  return validateFn().then((values) => values, rejectSTOP);
+  return validateFn.apply(ctx.form, config.args).then((values) => values, rejectSTOP);
 };
 
 export const validateGroupFields = (ctx, config) => {
@@ -30,4 +30,4 @@ export const resetFields = (ctx) => {
 
 export const getFieldsValue = (ctx) => {
   return ctx.form.getFieldsValue();
-}
+};
diff --git a/packages/sula/src/modalform/ModalForm.tsx b/packages/sula/src/modalform/ModalForm.tsx
@@ -8,11 +8,12 @@ import { Form, FormAction, FieldGroup, FormProps } from '../form';
 import { renderActions } from '../template-create-form/CreateForm';
 
 export interface ModalFormProps extends FormProps {
-  isDrawer: boolean;
+  isDrawer?: boolean;
   visible: boolean;
-  modal: any;
+  modal?: any;
   title: string;
-  width: string;
+  width?: number;
+  preserveInitialValues?: boolean;
 }
 
 export default class ModalForm extends React.Component<ModalFormProps> {
@@ -28,7 +29,7 @@ export default class ModalForm extends React.Component<ModalFormProps> {
     const { props = {} } = modal;
 
     // 存在 type 说明是插件场景
-    const { type, title, width = isDrawer ? 550 : undefined, props: modalProps = {}, ...formProps } = props;
+    const { type, title, width = isDrawer ? 550 : undefined, props: modalProps = {}, preserveInitialValues, ...formProps } = props;
 
     const {
       actionsRender,
@@ -125,6 +126,7 @@ export default class ModalForm extends React.Component<ModalFormProps> {
                             {
                               submitBack: modalCtxGetter().modal.modalOk,
                               back: modalCtxGetter().modal.modalCancel,
+                              preserveInitialValues,
                             },
                             formProps,
                           ),

diff --git a/packages/sula/src/template-create-form/CreateForm.tsx b/packages/sula/src/template-create-form/CreateForm.tsx
@@ -16,6 +16,8 @@ export interface CreateFormProps extends FormProps {
   submitBack?: ActionPlugin;
   submitButtonProps?: ButtonProps;
   backButtonProps?: ButtonProps;
+  /** 提交时是否携带额外的 initialValues（未有对应的field） */
+  preserveInitialValues?: boolean;
 }
 
 export default class CreateForm extends React.Component<CreateFormProps> {
@@ -48,6 +50,8 @@ export default class CreateForm extends React.Component<CreateFormProps> {
       backButtonProps,
       actionsPosition,
       actionsRender,
+      initialValues,
+      preserveInitialValues,
       ...formProps
     } = this.props;
     const { mode, itemLayout } = formProps;
@@ -70,6 +74,8 @@ export default class CreateForm extends React.Component<CreateFormProps> {
                     backButtonProps,
                     mode,
                     actionsRender,
+                    initialValues,
+                    preserveInitialValues,
                   },
                   locale,
                 );
@@ -78,6 +84,7 @@ export default class CreateForm extends React.Component<CreateFormProps> {
                   <Spin spinning={loading}>
                     <Form
                       {...formProps}
+                      initialValues={initialValues}
                       actionsRender={finalActionsRender}
                       actionsPosition={finalActionsPosition}
                       onRemoteValuesStart={() => {
@@ -114,6 +121,8 @@ export function renderActions(props, locale) {
     mode = 'create',
     submitButtonProps = {},
     backButtonProps = {},
+    initialValues,
+    preserveInitialValues,
   } = props;
   const actionsRender = [];
 
@@ -144,6 +153,9 @@ export function renderActions(props, locale) {
         type: 'validateFields',
         resultPropName: '$fieldsValue',
       },
+      ...(preserveInitialValues === true && initialValues
+        ? [{ type: 'assign', args: [initialValues] }]
+        : []),
       ...transformSubmit(submit, submitBack || back),
     ],
   };