From 50e457e7276499d95e1d2705ad3ff265573cc17f Mon Sep 17 00:00:00 2001 From: xz8la8 <174785876@qq.com> Date: Tue, 27 Apr 2021 11:22:04 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20CreateForm/modalForm=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20preserveInitialValues=20-=20sula@1.2.0-beta.57?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/create-form/basic.jsx | 5 +++++ docs/create-form/customActions.jsx | 9 ++++++++- docs/modalform/basic.jsx | 5 +++++ packages/sula/package.json | 5 ++++- packages/sula/src/action-plugin/index.ts | 4 ++++ packages/sula/src/action-plugin/lang.ts | 11 +++++++++++ packages/sula/src/action-plugin/validateFields.ts | 6 +++--- packages/sula/src/modalform/ModalForm.tsx | 10 ++++++---- .../sula/src/template-create-form/CreateForm.tsx | 12 ++++++++++++ 9 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 packages/sula/src/action-plugin/lang.ts diff --git a/docs/create-form/basic.jsx b/docs/create-form/basic.jsx index d54abd3..6f97a95 100644 --- 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 index fe2823c..810868c 100644 --- 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 index 18ce7e4..24a7e73 100644 --- 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 index 1ef1a6e..edd73b1 100644 --- 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 index 28c8ef8..6b151f6 100644 --- 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 new file mode 100644 index 0000000..ebe0954 --- /dev/null +++ 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); + }, {}); +}; \ No newline at end of file diff --git a/packages/sula/src/action-plugin/validateFields.ts b/packages/sula/src/action-plugin/validateFields.ts index 2879703..4401da4 100644 --- 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 index ad33120..d2acb32 100644 --- 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 { @@ -28,7 +29,7 @@ export default class ModalForm extends React.Component { 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 { { 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 index 06398d5..ff0eea0 100644 --- 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 { @@ -48,6 +50,8 @@ export default class CreateForm extends React.Component { backButtonProps, actionsPosition, actionsRender, + initialValues, + preserveInitialValues, ...formProps } = this.props; const { mode, itemLayout } = formProps; @@ -70,6 +74,8 @@ export default class CreateForm extends React.Component { backButtonProps, mode, actionsRender, + initialValues, + preserveInitialValues, }, locale, ); @@ -78,6 +84,7 @@ export default class CreateForm extends React.Component {
{ @@ -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), ], };