mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Add active style of filtered state

Browse Source
This commit is contained in:
afc163 2018-09-17 18:49:07 +08:00 committed by 偏右
parent 6530de2961
commit bcb06ec174
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/style/themes/default.less
View File

@ -344,6 +344,7 @@
@table-header-bg: @background-color-light; @table-header-bg: @background-color-light;
@table-header-color: @heading-color; @table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base; @table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, .01);
@table-row-hover-bg: @primary-1; @table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa; @table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb; @table-expanded-row-bg: #fbfbfb;

17
components/table/filterDropdown.tsx
View File

@ -70,6 +70,10 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
} }
} }
getDropdownVisible() {
return this.neverShown ? false : this.state.visible;
}
setNeverShown = (column: ColumnProps<T>) => { setNeverShown = (column: ColumnProps<T>) => {
const rootNode = ReactDOM.findDOMNode(this); const rootNode = ReactDOM.findDOMNode(this);
const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`); const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`);
@ -183,22 +187,27 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
if (typeof filterIcon === 'function') { if (typeof filterIcon === 'function') {
filterIcon = filterIcon(filterd); filterIcon = filterIcon(filterd);
} }
const dropdownSelectedClass = filterd ? `${prefixCls}-selected` : '';
const dropdownIconClass = classNames({
[`${prefixCls}-selected`]: filterd,
[`${prefixCls}-open`]: this.getDropdownVisible(),
});
return filterIcon ? React.cloneElement(filterIcon as any, { return filterIcon ? React.cloneElement(filterIcon as any, {
title: locale.filterTitle, title: locale.filterTitle,
className: classNames(`${prefixCls}-icon`, filterIcon.props.className), className: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.props.className),
onClick: stopPropagation, onClick: stopPropagation,
}) : ( }) : (
<Icon <Icon
title={locale.filterTitle} title={locale.filterTitle}
type="filter" type="filter"
theme="filled" theme="filled"
className={dropdownSelectedClass} className={dropdownIconClass}
onClick={stopPropagation} onClick={stopPropagation}
/> />
); );
} }
render() { render() {
const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props; const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
// default multiple selection in filter dropdown // default multiple selection in filter dropdown
@ -259,7 +268,7 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
trigger={['click']} trigger={['click']}
placement="bottomRight" placement="bottomRight"
overlay={menus} overlay={menus}
visible={this.neverShown ? false : this.state.visible} visible={this.getDropdownVisible()}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
forceRender forceRender

12
components/table/style/index.less
View File

@ -115,6 +115,14 @@
} }
} }
.@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon {
&.@{table-prefix-cls}-filter-open {
color: @text-color-secondary;
background: #ebebeb;
}
}
&:active { &:active {
.@{table-prefix-cls}-column-sorter-up:not(.on), .@{table-prefix-cls}-column-sorter-up:not(.on),
.@{table-prefix-cls}-column-sorter-down:not(.on) { .@{table-prefix-cls}-column-sorter-down:not(.on) {
@ -245,6 +253,10 @@
background: @table-header-sort-bg; background: @table-header-sort-bg;
} }
&-tbody > tr > td.@{table-prefix-cls}-column-sort {
background: @table-body-sort-bg;
}
&-thead > tr > th, &-thead > tr > th,
&-tbody > tr > td { &-tbody > tr > td {
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;