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

max-height should not work on submenu filter, close #4975, ref #4916

Browse Source
This commit is contained in:
afc163 2017-02-21 15:54:14 +08:00
parent 7f404f1e20
commit fbb6cb007f
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/table/Column.tsx
View File

@ -6,7 +6,7 @@ export interface ColumnProps<T> {
key?: string; key?: string;
dataIndex?: string; dataIndex?: string;
render?: (text: any, record: T, index: number) => React.ReactNode; render?: (text: any, record: T, index: number) => React.ReactNode;
filters?: { text: string; value: string }[]; filters?: { text: string; value: string, children?: any[] }[];
onFilter?: (value: any, record: T) => boolean; onFilter?: (value: any, record: T) => boolean;
filterMultiple?: boolean; filterMultiple?: boolean;
filterDropdown?: React.ReactNode; filterDropdown?: React.ReactNode;

12
components/table/filterDropdown.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu'; import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
import classNames from 'classnames';
import Dropdown from '../dropdown'; import Dropdown from '../dropdown';
import Icon from '../icon'; import Icon from '../icon';
import Checkbox from '../checkbox'; import Checkbox from '../checkbox';
@ -12,7 +13,7 @@ export interface FilterMenuProps {
column: { column: {
filterMultiple?: boolean, filterMultiple?: boolean,
filterDropdown?: React.ReactNode, filterDropdown?: React.ReactNode,
filters?: string[], filters?: { text: string; value: string, children?: any[] }[],
filterDropdownVisible?: boolean, filterDropdownVisible?: boolean,
onFilterDropdownVisibleChange?: (visible: boolean) => any, onFilterDropdownVisibleChange?: (visible: boolean) => any,
}; };
@ -112,6 +113,11 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
); );
} }
hasSubMenu() {
const { column: { filters = [] } } = this.props;
return filters.some(item => !!(item.children && item.children.length > 0));
}
renderMenus(items) { renderMenus(items) {
return items.map(item => { return items.map(item => {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
@ -149,6 +155,9 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
const { column, locale, prefixCls, dropdownPrefixCls } = this.props; const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
// default multiple selection in filter dropdown // default multiple selection in filter dropdown
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true; const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
const dropdownMenuClass = classNames({
[`${dropdownPrefixCls}-menu-without-submenu`]: !this.hasSubMenu(),
});
const menus = column.filterDropdown ? ( const menus = column.filterDropdown ? (
<FilterDropdownMenuWrapper> <FilterDropdownMenuWrapper>
{column.filterDropdown} {column.filterDropdown}
@ -159,6 +168,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
multiple={multiple} multiple={multiple}
onClick={this.handleMenuItemClick} onClick={this.handleMenuItemClick}
prefixCls={`${dropdownPrefixCls}-menu`} prefixCls={`${dropdownPrefixCls}-menu`}
className={dropdownMenuClass}
onSelect={this.setSelectedKeys} onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys} onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys} selectedKeys={this.state.selectedKeys}

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

@ -373,8 +373,12 @@
border: 0; border: 0;
box-shadow: none; box-shadow: none;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
max-height: 400px;
overflow-x: hidden; // https://github.com/ant-design/ant-design/issues/4916
&-without-submenu {
max-height: 400px;
overflow-x: hidden;
}
&-item > label + span { &-item > label + span {
padding: 0; padding: 0;