From 04578366dfebf3056b63563485bda7623ffc4275 Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 22 Jun 2020 20:12:01 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=9C=9F=E9=9A=90=E8=97=8F=E4=BC=98?= =?UTF-8?q?=E5=8C=96+demo+validate=E5=8A=A0=E4=B8=AA=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/App.jsx | 6 + examples/components/CRUD/HeaderHide.jsx | 718 ++++++++++++++++++++++++ scss/components/_table.scss | 18 + src/renderers/Form/Control.tsx | 18 +- src/renderers/Table.tsx | 27 +- 5 files changed, 768 insertions(+), 19 deletions(-) create mode 100644 examples/components/CRUD/HeaderHide.jsx diff --git a/examples/components/App.jsx b/examples/components/App.jsx index aab2995a..72742cf4 100644 --- a/examples/components/App.jsx +++ b/examples/components/App.jsx @@ -61,6 +61,7 @@ import FootableCrudSchema from './CRUD/Footable'; import NestedCrudSchema from './CRUD/Nested'; import MergeCellSchema from './CRUD/MergeCell'; import HeaderGroupSchema from './CRUD/HeaderGroup'; +import HeaderHideSchema from './CRUD/HeaderHide'; import LoadOnceTableCrudSchema from './CRUD/LoadOnce'; import SdkTest from './Sdk/Test'; import JSONSchemaForm from './Form/Schem'; @@ -331,6 +332,11 @@ const navigations = [ path: 'crud/header-group', component: makeSchemaRenderer(HeaderGroupSchema) }, + { + label: '表头隐藏', + path: 'crud/header-hide', + component: makeSchemaRenderer(HeaderHideSchema) + }, { label: '带边栏', path: 'crud/aside', diff --git a/examples/components/CRUD/HeaderHide.jsx b/examples/components/CRUD/HeaderHide.jsx new file mode 100644 index 00000000..b833e87a --- /dev/null +++ b/examples/components/CRUD/HeaderHide.jsx @@ -0,0 +1,718 @@ +export default { + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '当 column 每一项的 label 值都为空字符时，可以隐藏表头', + body: [ + { + type: 'table', + data: { + items: [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'B' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 95+', + version: '4', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '3', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'B' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'C' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + } + ] + }, + columns: [ + { + name: 'engine', + label: '' + }, + { + name: 'browser', + label: '' + }, + { + name: 'platform', + label: '' + }, + { + name: 'version', + label: '' + }, + { + name: 'grade', + label: '' + } + ] + }, + { + type: 'divider' + }, + '

搭配合并单元格和列上配置 isHead 可以实现超级表头放在左侧

', + { + type: 'table', + data: { + items: [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'B' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 95+', + version: '4', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '3', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'B' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'C' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + } + ] + }, + combineNum: 1, + columns: [ + { + name: 'engine', + label: '', + isHead: true + }, + { + name: 'browser', + label: '' + }, + { + name: 'platform', + label: '' + }, + { + name: 'version', + label: '' + }, + { + name: 'grade', + label: '' + } + ] + }, + { + type: 'divider' + }, + '

还可以继续使用超级表头

', + { + type: 'table', + data: { + items: [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'B' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 95+', + version: '4', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '3', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'B' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'C' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + } + ] + }, + combineNum: 1, + columns: [ + { + name: 'engine', + label: '', + groupName: 'A', + isHead: true + }, + { + name: 'browser', + label: '', + groupName: 'A' + }, + { + name: 'platform', + label: '', + groupName: 'B' + }, + { + name: 'version', + label: '', + groupName: 'B' + }, + { + name: 'grade', + label: '' + } + ] + } + ] +}; diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 77756952..be12539d 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -68,6 +68,15 @@ > .#{$ns}Table-wrapper { border-top: $Table-borderWidth solid $Table-borderColor; } + + &.is-fakeHide { + > .#{$ns}Table-fixedLeft, + > .#{$ns}Table-fixedRight, + > .#{$ns}Table-wrapper { + visibility: hidden; + position: absolute; + } + } } &-heading { @@ -251,6 +260,10 @@ > tbody > tr { border-top: $Table-borderWidth solid $Table-borderColor; + > th { + background-color: $Table-thead-bg; + } + > td { padding: $TableCell-paddingY $TableCell-paddingX; vertical-align: top; @@ -740,6 +753,11 @@ &-table > tbody > tr.is-drop-allowed .#{$ns}Table-dragBtn { visibility: visible; } + + .fake-hide { + visibility: hidden; + position: absolute; + } } .#{$ns}OperationField { diff --git a/src/renderers/Form/Control.tsx b/src/renderers/Form/Control.tsx index 63d775d6..a4c2e28c 100644 --- a/src/renderers/Form/Control.tsx +++ b/src/renderers/Form/Control.tsx @@ -28,7 +28,7 @@ export interface ControlProps extends RendererProps { unique?: boolean; pipeIn?: (value: any, data: any) => any; pipeOut?: (value: any, originValue: any, data: any) => any; - validate?: (value: any, values: any) => any; + validate?: (value: any, values: any, name: string) => any; } & Schema; formStore: IFormStore; store: IIRendererStore; @@ -158,13 +158,15 @@ export default class FormControl extends React.PureComponent< const formItem = this.model as IFormItemStore; if (formItem && validate) { let finalValidate = promisify(validate.bind(formItem)); - this.hook2 = function() { + this.hook2 = function () { formItem.clearError('control:valdiate'); - return finalValidate(form.data, formItem.value).then((ret: any) => { - if ((typeof ret === 'string' || Array.isArray(ret)) && ret) { - formItem.addError(ret, 'control:valdiate'); + return finalValidate(form.data, formItem.value, formItem.name).then( + (ret: any) => { + if ((typeof ret === 'string' || Array.isArray(ret)) && ret) { + formItem.addError(ret, 'control:valdiate'); + } } - }); + ); }; addHook(this.hook2); } @@ -312,10 +314,10 @@ export default class FormControl extends React.PureComponent< if (control && control.validate && this.model) { const formItem = this.model as IFormItemStore; let validate = promisify(control.validate.bind(control)); - this.hook = function() { + this.hook = function () { formItem.clearError('component:valdiate'); - return validate(form.data, formItem.value).then(ret => { + return validate(form.data, formItem.value, formItem.name).then(ret => { if ((typeof ret === 'string' || Array.isArray(ret)) && ret) { formItem.setError(ret, 'component:valdiate'); } diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 02e1cd5d..8592359c 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1323,9 +1323,14 @@ export default class Table extends React.Component { renderAffixHeader(tableClassName: string) { const {store, affixHeader, render, classnames: cx} = this.props; + const hideHeader = store.filteredColumns.every(column => !column.label); return affixHeader ? ( -
+
{this.renderHeading()} {this.renderHeader(false)}
@@ -1398,6 +1403,7 @@ export default class Table extends React.Component { render, data } = this.props; + const hideHeader = store.filteredColumns.every(column => !column.label); return ( { })} ) : null} - + {columns.map(column => this.renderHeadCell(column, { 'key': column.index, @@ -1867,6 +1873,7 @@ export default class Table extends React.Component { store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName ); + const hideHeader = store.filteredColumns.every(column => !column.label); return (
{ ))}
) : null} - - {store.filteredColumns.some(column => !!column.label) - ? store.filteredColumns.map(column => - this.renderHeadCell(column, { - 'data-index': column.index, - 'key': column.index - }) - ) - : null} + + {store.filteredColumns.map(column => + this.renderHeadCell(column, { + 'data-index': column.index, + 'key': column.index + }) + )}