diff --git a/scss/_variables.scss b/scss/_variables.scss index 2274fe57..316968c4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -507,6 +507,10 @@ $TableCell-sortBtn-width: px2rem(8px) !default; $TableCell-sortBtn--default-opacity: 0 !default; $TableCell-sortBtn--default-onActive-opacity: 1 !default; +$TableCell-searchBtn--onActive-color: $primary !default; +$TableCell-filterBtn--onActive-color: $primary !default; +$TableCell-sortBtn--onActive-color: $primary !default; + // Cards $Cards-fixedTop-boxShadow: $boxShadow !default; $Cards-toolbar-paddingY: 0 !default; diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 745af683..2face37d 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -549,10 +549,16 @@ &.is-active { color: $text--muted-color; &:hover { - color: $icon-onHover-color; + color: $text-color; } } } + &--up, + &--down { + &.is-active { + color: $TableCell-sortBtn--onActive-color; + } + } } &Cell-searchBtn { @@ -572,6 +578,9 @@ &:hover { color: $text-color; } + &.is-active { + color: $TableCell-searchBtn--onActive-color; + } } &Cell-searchPopOver { @@ -602,6 +611,10 @@ color: $text-color; } + &.is-active { + color: $TableCell-filterBtn--onActive-color; + } + .#{$ns}Remark { display: inline; } diff --git a/src/locale/en.ts b/src/locale/en.ts index 5f262c78..650ba3de 100644 --- a/src/locale/en.ts +++ b/src/locale/en.ts @@ -205,5 +205,6 @@ register('en', { '保存并下一步': 'Save & Next', '完成': 'Finish', '点击选择图片或者将图片拖入该区域': - 'Click to select the picture or drag the picture into the area' + 'Click to select the picture or drag the picture into the area', + '重置': 'Reset' }); diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 8592359c..0710649c 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1108,10 +1108,19 @@ export default class Table extends React.Component { className={cx('TableCell-sortBtn')} onClick={() => { if (column.name === store.orderBy) { - store.setOrderByInfo( - column.name, - store.orderDir === 'desc' ? 'asc' : 'desc' - ); + if (store.orderDir === 'desc') { + // 降序之后取消排序 + store.setOrderByInfo( + '', + 'asc' + ); + } else { + // 升序之后降序 + store.setOrderByInfo( + column.name, + 'desc' + ); + } } else { store.setOrderByInfo(column.name as string, 'asc'); } @@ -2175,6 +2184,7 @@ export class HeadCellSearchDropDown extends React.Component< isOpened: false }; + formItems: Array = []; constructor(props: HeadCellSearchProps) { super(props); @@ -2249,11 +2259,26 @@ export class HeadCellSearchDropDown extends React.Component< } if (schema) { + const formItems = []; + if (schema.controls) { + for (let item of schema.controls) { + if (item.name) { + formItems.push(item.name); + } + } + } + this.formItems = formItems; schema = { ...schema, type: 'form', wrapperComponent: 'div', actions: [ + { + type: 'button', + label: __('重置'), + actionType: 'reset' + }, + { type: 'button', label: __('取消'), @@ -2296,9 +2321,32 @@ export class HeadCellSearchDropDown extends React.Component< return; } + if (action.actionType === 'reset') { + this.close(); + this.handleReset(); + return; + } + onAction && onAction(e, action, ctx); } + handleReset() { + const {onQuery, data, name} = this.props; + const values = {...data}; + for (let item of this.formItems) { + if (item !== 'orderBy' && item !== 'orderDir') { + if (values[item]) { + values[item] = undefined; + } + } + } + if (values.orderBy && values.orderBy === name) { + values.orderBy = ''; + values.orderDir = 'asc'; + } + onQuery(values); + } + handleSubmit(values: any) { const {onQuery, name} = this.props; @@ -2314,6 +2362,21 @@ export class HeadCellSearchDropDown extends React.Component< onQuery(values); } + isActive() { + const {data, name} = this.props; + if (data.orderBy === name) { + return true; + } + for (let item of this.formItems) { + if (item !== 'orderBy' && item !== 'orderDir') { + if (data[`${item}`]) { + return true; + } + } + } + return false; + } + render() { const { render, @@ -2326,8 +2389,11 @@ export class HeadCellSearchDropDown extends React.Component< classPrefix: ns } = this.props; + const formSchema = this.buildSchema(); + const isActive = this.isActive(); + return ( - + @@ -2350,7 +2416,7 @@ export class HeadCellSearchDropDown extends React.Component< overlay > { - render('quick-search-form', this.buildSchema(), { + render('quick-search-form', formSchema, { data: { ...data, orderBy: orderBy, @@ -2518,17 +2584,28 @@ export class HeadCellFilterDropDown extends React.Component< }); } + handleReset() { + const {name, onQuery} = this.props; + onQuery({ + [name]: undefined + }) + this.close(); + } + render() { const {isOpened, filterOptions} = this.state; const { + data, + name, filterable, popOverContainer, classPrefix: ns, - classnames: cx + classnames: cx, + translate: __ } = this.props; return ( - + @@ -2575,6 +2652,7 @@ export class HeadCellFilterDropDown extends React.Component< ))} +
  • {__('重置')}
  • ) : null} diff --git a/src/types.ts b/src/types.ts index 6dd9ad42..0eddcc9c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -100,7 +100,8 @@ export interface Action extends Button { | 'cancel' | 'close' | 'next' - | 'prev'; + | 'prev' + | 'reset'; api?: Api; asyncApi?: Api; payload?: any;