p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

表土隐藏优化+demo+validate加个参数

This commit is contained in:
rickcole 2020-06-22 20:12:01 +08:00
parent 19134eac64
commit 04578366df
5 changed files with 768 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/components/App.jsx
View File

@ -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',

718
examples/components/CRUD/HeaderHide.jsx Normal file
View File

@ -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'
},
'<h4>搭配合并单元格和列上配置 isHead 可以实现超级表头放在左侧</h4>',
{
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'
},
'<h4>还可以继续使用超级表头</h4>',
{
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: ''
}
]
}
]
};

18
scss/components/_table.scss
View File

@ -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 {

14
src/renderers/Form/Control.tsx
View File

@ -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) => {
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');
}

19
src/renderers/Table.tsx
View File

@ -1323,9 +1323,14 @@ export default class Table extends React.Component<TableProps, object> {
renderAffixHeader(tableClassName: string) {
const {store, affixHeader, render, classnames: cx} = this.props;
const hideHeader = store.filteredColumns.every(column => !column.label);
return affixHeader ? (
<div className={cx('Table-fixedTop')}>
<div
className={cx('Table-fixedTop', {
'is-fakeHide': hideHeader
})}
>
{this.renderHeading()}
{this.renderHeader(false)}
<div className={cx('Table-fixedLeft')}>
@ -1398,6 +1403,7 @@ export default class Table extends React.Component<TableProps, object> {
render,
data
} = this.props;
const hideHeader = store.filteredColumns.every(column => !column.label);
return (
<table
@ -1425,7 +1431,7 @@ export default class Table extends React.Component<TableProps, object> {
})}
</tr>
) : null}
<tr>
<tr className={hideHeader ? 'fake-hide' : ''}>
{columns.map(column =>
this.renderHeadCell(column, {
'key': column.index,
@ -1867,6 +1873,7 @@ export default class Table extends React.Component<TableProps, object> {
store.combineNum > 0 ? 'Table-table--withCombine' : '',
this.props.tableClassName
);
const hideHeader = store.filteredColumns.every(column => !column.label);
return (
<div
@ -1889,15 +1896,13 @@ export default class Table extends React.Component<TableProps, object> {
))}
</tr>
) : null}
<tr>
{store.filteredColumns.some(column => !!column.label)
? store.filteredColumns.map(column =>
<tr className={hideHeader ? 'fake-hide' : ''}>
{store.filteredColumns.map(column =>
this.renderHeadCell(column, {
'data-index': column.index,
'key': column.index
})
)
: null}
)}
</tr>
</thead>
<tbody>