From dbd7bd326fabdeffa06cdd94b4879dacc8d69dd5 Mon Sep 17 00:00:00 2001 From: xz8la8 <174785876@qq.com> Date: Wed, 31 Mar 2021 17:57:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(QueryForm):=20=E5=A2=9E=E5=8A=A0QueryForm?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=B8=8E=E5=85=B6=E4=BB=96=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E7=BB=93=E6=9E=9C=E7=B1=BB=E7=BB=84=E4=BB=B6=EF=BC=88?= =?UTF-8?q?=E4=BE=8B=E5=A6=82=E8=A1=A8=E6=A0=BC=EF=BC=89=E7=BB=84=E5=90=88?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20-=20sula@1.2.0-beta.41?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en-US.md | 2 +- README.md | 2 +- docs/query-form/basic.jsx | 54 ++++++++++++ docs/query-form/hook.tsx | 55 ++++++++++++ docs/query-form/other.tsx | 69 +++++++++++++++ docs/sula-template/query-form.md | 8 ++ packages/sula/package.json | 2 +- packages/sula/src/form/Field.tsx | 1 + .../src/template-query-table/QueryFields.tsx | 60 ++++--------- .../src/template-query-table/QueryForm.tsx | 45 ++++++++++ .../src/template-query-table/QueryTable.tsx | 85 +++++++++++++------ .../sula/src/template-query-table/index.ts | 7 +- 12 files changed, 312 insertions(+), 78 deletions(-) create mode 100644 docs/query-form/basic.jsx create mode 100644 docs/query-form/hook.tsx create mode 100644 docs/query-form/other.tsx create mode 100644 docs/sula-template/query-form.md create mode 100644 packages/sula/src/template-query-table/QueryForm.tsx diff --git a/README.en-US.md b/README.en-US.md index a39e32d..f501e93 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -41,5 +41,5 @@ import { Form, Table, CreateForm, QueryTable, StepForm, StepQueryTable } from 's ## Discuss
- +
\ No newline at end of file diff --git a/README.md b/README.md index 0f700ac..56c2546 100644 --- a/README.md +++ b/README.md @@ -83,5 +83,5 @@ import { Form, Table, CreateForm, QueryTable, StepForm, StepQueryTable } from 's ## 讨论群
- +
diff --git a/docs/query-form/basic.jsx b/docs/query-form/basic.jsx new file mode 100644 index 0000000..4c29f40 --- /dev/null +++ b/docs/query-form/basic.jsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { QueryForm } from 'sula'; + +const queryFields = Array(10) + .fill(0) + .map((_, index) => { + return { + name: `input${index}`, + label: `Input${index}`, + field: 'input', + }; + }); + +export default class BasicDemo extends React.Component { + state = {}; + + componentDidMount() {} + + changevisibleFieldsCount = (v) => { + this.setState({ visibleFieldsCount: v }); + }; + + render() { + const { visibleFieldsCount } = this.state; + return ( +
+ + + +
+ { + console.log('ctx: ', ctx); + console.log('fieldsValue', ctx.form.getFieldsValue()); + }, + }, + ]} + /> +
+
+ ); + } +} diff --git a/docs/query-form/hook.tsx b/docs/query-form/hook.tsx new file mode 100644 index 0000000..df7c257 --- /dev/null +++ b/docs/query-form/hook.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { useForm, QueryForm } from 'sula'; + +const queryFields = Array(10) + .fill(0) + .map((_, index) => { + return { + name: `input${index}`, + label: `Input${index}`, + field: 'input', + }; + }); + +const BasicDemo = () => { + const [form] = useForm(); + return ( +
+ +
+ { + console.log('allValues: ', allValues); + }} + fields={queryFields} + actionsRender={[ + { + type: 'button', + props: { + type: 'primary', + children: '查一下', + }, + action: (ctx) => { + console.log('ctx: ', ctx); + console.log('fieldsValue', ctx.form.getFieldsValue()); + }, + }, + ]} + /> +
+
+ ); +}; + +export default BasicDemo; diff --git a/docs/query-form/other.tsx b/docs/query-form/other.tsx new file mode 100644 index 0000000..66b5f8c --- /dev/null +++ b/docs/query-form/other.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { FormInstance, QueryForm } from 'sula'; + +const queryFields = Array(10) + .fill(0) + .map((_, index) => { + return { + name: `input${index}`, + label: `Input${index}`, + field: 'input', + }; + }); + +export default class BasicDemo extends React.Component { + formRef = React.createRef(); + + render() { + return ( +
+ +
+ { + console.log('allValues: ', allValues); + }} + fields={queryFields} + ctxGetter={() => { + return { + table: { + refreshTable: () => { + console.log('刷新表格') + } + } + } + }} + actionsRender={[ + { + type: 'button', + props: { + type: 'primary', + children: '查一下' + }, + action: [ + { type: 'validateQueryFields', resultPropName: '$queryFieldsValue' }, + (ctx) => { + return new Promise((resolve, reject) => { + // mock + setTimeout(() => { + ctx.table?.refreshTable(); + resolve('ok'); + }, 2000); + }) + }, + ], + }, + ]} + /> +
+
+ ); + } +} diff --git a/docs/sula-template/query-form.md b/docs/sula-template/query-form.md new file mode 100644 index 0000000..e0e6aae --- /dev/null +++ b/docs/sula-template/query-form.md @@ -0,0 +1,8 @@ +--- +title: QueryForm +order: 4 +--- + + + + \ No newline at end of file diff --git a/packages/sula/package.json b/packages/sula/package.json index 71ed038..dc8b2ac 100644 --- a/packages/sula/package.json +++ b/packages/sula/package.json @@ -1,6 +1,6 @@ { "name": "sula", - "version": "1.2.0-beta.38", + "version": "1.2.0-beta.41", "module": "./es/index.js", "main": "./es/index.js", "types": "./es/index.d.ts", diff --git a/packages/sula/src/form/Field.tsx b/packages/sula/src/form/Field.tsx index c204b8e..11247a3 100644 --- a/packages/sula/src/form/Field.tsx +++ b/packages/sula/src/form/Field.tsx @@ -362,6 +362,7 @@ export default class Field extends React.Component { const subFormContext = { formContext, parentGroupName, + layout, }; return ( diff --git a/packages/sula/src/template-query-table/QueryFields.tsx b/packages/sula/src/template-query-table/QueryFields.tsx index af93265..6a83a06 100644 --- a/packages/sula/src/template-query-table/QueryFields.tsx +++ b/packages/sula/src/template-query-table/QueryFields.tsx @@ -3,18 +3,18 @@ import DownOutlined from '@ant-design/icons/DownOutlined'; import cx from 'classnames'; import { getItemSpan } from '../form/utils/layoutUtil'; import FieldGroupContext from '../form/FieldGroupContext'; -import { FieldGroup, Field, FormAction, FieldProps, FormInstance } from '../form'; +import { FieldGroup, Field, FormAction, FieldProps, FormInstance, FormProps } from '../form'; import './style/query-fields.less'; import LocaleReceiver from '../localereceiver'; -import { ItemLayout, Layout } from '../form/FieldGroup'; +import { toArray } from '../_util/common'; -interface QueryFieldsProps { +export interface QueryFieldsProps { fields: FieldProps[]; - visibleFieldsCount: number | true; - itemLayout: ItemLayout; - layout: Layout; + visibleFieldsCount?: number | true; + hasBottomBorder?: boolean; + actionsRender: FormProps['actionsRender'], + /** @private */ getFormInstance: () => FormInstance; - hasActionsRender: boolean; } export default class QueryFields extends React.Component { @@ -29,18 +29,18 @@ export default class QueryFields extends React.Component { collapsed: true, }; - getVisibleFieldsCount = () => { + getVisibleFieldsCount = (): number => { if (this.props.visibleFieldsCount === true) { return this.props.fields.length; } - return this.props.visibleFieldsCount; + return this.props.visibleFieldsCount!; }; renderFields = () => { - const { fields, itemLayout } = this.props; + const { fields } = this.props; - const { matchedPoint } = this.context; + const { matchedPoint, itemLayout } = this.context; const fieldsNameList = []; @@ -84,40 +84,10 @@ export default class QueryFields extends React.Component { } renderFormAction = (locale) => { - const { layout } = this.props; + const { layout } = this.context; const { collapsed } = this.state; const actionsRender = [ - { - type: 'button', - props: { - type: 'primary', - children: locale.queryText, - }, - action: [ - { type: 'validateQueryFields', resultPropName: '$queryFieldsValue' }, - { - type: 'refreshTable', - args: [{ current: 1 }, '#{result}'], - }, - ], - }, - { - type: 'button', - props: { - children: locale.resetText, - }, - action: [ - 'resetFields', - { - type: 'resetTable', - args: [false], - }, - { - type: 'refreshTable', - args: [{ current: 1 }, '#{form.getFieldsValue(true)}'], - }, - ], - }, + ...(toArray(this.props.actionsRender)), ...(this.hasMoreQueryFields() ? [ { @@ -175,7 +145,7 @@ export default class QueryFields extends React.Component { }; render() { - const { hasActionsRender } = this.props; + const { hasBottomBorder } = this.props; return ( {(locale) => { @@ -185,7 +155,7 @@ export default class QueryFields extends React.Component { type: 'div', props: { className: cx(`sula-template-query-table-fields-wrapper`, { - [`sula-template-query-table-fields-divider`]: hasActionsRender, + [`sula-template-query-table-fields-divider`]: hasBottomBorder, }), }, }} diff --git a/packages/sula/src/template-query-table/QueryForm.tsx b/packages/sula/src/template-query-table/QueryForm.tsx new file mode 100644 index 0000000..93e4706 --- /dev/null +++ b/packages/sula/src/template-query-table/QueryForm.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { Form, FormInstance, FormProps } from '../form'; +import QueryFields, { QueryFieldsProps } from './QueryFields'; + +export interface QueryFormProps + extends Omit, + Omit {} + +const QueryForm: React.ForwardRefRenderFunction = (props, ref) => { + const { + layout, + itemLayout = { + cols: 3, + }, + fields, + initialValues, + visibleFieldsCount, + actionsRender, + hasBottomBorder, + ...restProps + } = props; + const [form] = Form.useForm(restProps.form); + + React.useImperativeHandle(ref, () => form); + + return ( +
+ form} + hasBottomBorder={hasBottomBorder} + actionsRender={actionsRender} + /> + + ); +}; + +export default React.forwardRef(QueryForm); diff --git a/packages/sula/src/template-query-table/QueryTable.tsx b/packages/sula/src/template-query-table/QueryTable.tsx index 04901ce..001b139 100644 --- a/packages/sula/src/template-query-table/QueryTable.tsx +++ b/packages/sula/src/template-query-table/QueryTable.tsx @@ -1,14 +1,15 @@ import React from 'react'; import assign from 'lodash/assign'; import cx from 'classnames'; -import { Form, FormProps } from '../form'; +import { FormProps } from '../form'; import { RequestConfig } from '../types/request'; import { TableInstance, TableProps } from '../table/Table'; import { FormInstance } from '../types/form'; import { Table } from '../table'; -import QueryFields from './QueryFields'; import warning from '../_util/warning'; import './style/query-table.less'; +import QueryForm from './QueryForm'; +import LocaleReceiver from '../localereceiver'; type FormPropsPicks = 'fields' | 'initialValues' | 'layout' | 'itemLayout'; type TablePropsPicks = @@ -34,9 +35,6 @@ const defaultProps = { tableProps: {}, fields: [], columns: [], - itemLayout: { - cols: 3, - }, autoInit: true, }; @@ -69,29 +67,58 @@ export default class QueryTable extends React.Component { ); }; - renderForm = () => { + renderForm = (locale) => { const { formProps, layout, itemLayout, fields, initialValues, visibleFieldsCount } = this.props; return ( -
{ - return { table: this.tableRef.current }; + return { + table: this.tableRef.current, + }; }} - > - this.formRef.current} - hasActionsRender={this.hasActionsRender()} - /> - + ref={this.formRef} + hasBottomBorder={this.hasActionsRender()} + layout={layout} + itemLayout={itemLayout} + fields={fields} + initialValues={initialValues} + visibleFieldsCount={visibleFieldsCount} + actionsRender={[ + { + type: 'button', + props: { + type: 'primary', + children: locale.queryText, + }, + action: [ + { type: 'validateQueryFields', resultPropName: '$queryFieldsValue' }, + { + type: 'refreshTable', + args: [{ current: 1 }, '#{result}'], + }, + ], + }, + { + type: 'button', + props: { + children: locale.resetText, + }, + action: [ + 'resetFields', + { + type: 'resetTable', + args: [false], + }, + { + type: 'refreshTable', + args: [{ current: 1 }, '#{form.getFieldsValue(true)}'], + }, + ], + }, + ]} + /> ); }; @@ -129,10 +156,16 @@ export default class QueryTable extends React.Component { render() { return ( - - {this.props.fields && this.props.fields.length ? this.renderForm() : null} - {this.renderTable()} - + + {(locale) => { + return ( + + {this.props.fields && this.props.fields.length ? this.renderForm(locale) : null} + {this.renderTable()} + + ); + }} + ); } } diff --git a/packages/sula/src/template-query-table/index.ts b/packages/sula/src/template-query-table/index.ts index 81ef9cb..7835174 100644 --- a/packages/sula/src/template-query-table/index.ts +++ b/packages/sula/src/template-query-table/index.ts @@ -1,5 +1,4 @@ -import { default as _QueryTable, QueryTableProps as _QueryTableProps } from './QueryTable'; +import { default as QueryTable, QueryTableProps } from './QueryTable'; +import { default as QueryForm, QueryFormProps } from './QueryForm'; -export interface QueryTableProps extends _QueryTableProps {}; - -export const QueryTable = _QueryTable; \ No newline at end of file +export { QueryTable, QueryForm, QueryTableProps, QueryFormProps };