Skip to content

Commit

Permalink
feat(Table): add API filterMenuProps
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Jun 5, 2019
1 parent a8c373a commit 61ab2b0
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 15 deletions.
1 change: 1 addition & 0 deletions docs/table/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ ReactDOM.render(
| alignHeader | alignment of header cell, value of align by default<br><br>**options**:<br>'left', 'center', 'right' | Enum | - |
| filters | generates a title filter menu in the format `[{label:'xxx', value:'xxx'}]` | Array&lt;Object> | - |
| filterMode | whether the filtering mode is single or multiple selection<br><br>**options**:<br>'single', 'multiple' | Enum | 'multiple' |
| filterProps | the props passed to Menu in filter mode, extend `Menu`'s API <br><br>**options**:<br>_subMenuSelectable_: {Boolean} default `false` subMenu can be selected or not<br>_isSelectIconRight_: {Boolean} default `false` select icon in right or not. (icon on SubMenu always in left) | Object | { subMenuSelectable: false } |
| lock | whether the lock column is supported, the options are `left`, `right`, `true` | Boolean/String | - |
| resizable | whether to support column resizing, when this value is set to true, the layout of the table will be modified to fixed | Boolean | false |

Expand Down
27 changes: 14 additions & 13 deletions docs/table/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,20 @@ ReactDOM.render(

### Table.Column

| 参数 | 说明 | 类型 | 默认值 |
| ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------- | -------------- |
| dataIndex | 指定列对应的字段，支持`a.b`形式的快速取值 | String | - |
| cell | 行渲染的逻辑<br>value, rowIndex, record, context四个属性只可读不可被更改<br>Function(value, index, record) => Element | ReactElement/ReactNode/Function | value => value |
| title | 表头显示的内容<br>value, rowIndex, record, context四个属性只可读不可被更改 | ReactElement/ReactNode/Function | - |
| sortable | 是否支持排序 | Boolean | - |
| width | 列宽，注意在锁列的情况下一定需要配置宽度 | Number/String | - |
| align | 单元格的对齐方式<br><br>**可选值**:<br>'left', 'center', 'right' | Enum | - |
| alignHeader | 单元格标题的对齐方式, 不配置默认读取align值<br><br>**可选值**:<br>'left', 'center', 'right' | Enum | - |
| filters | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]` | Array&lt;Object> | - |
| filterMode | 过滤的模式是单选还是多选<br><br>**可选值**:<br>'single', 'multiple' | Enum | 'multiple' |
| lock | 是否支持锁列,可选值为`left`,`right`, `true` | Boolean/String | - |
| resizable | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed. | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------- |
| dataIndex | 指定列对应的字段，支持`a.b`形式的快速取值 | String | - |
| cell | 行渲染的逻辑<br>value, rowIndex, record, context四个属性只可读不可被更改<br>Function(value, index, record) => Element | ReactElement/ReactNode/Function | value => value |
| title | 表头显示的内容<br>value, rowIndex, record, context四个属性只可读不可被更改 | ReactElement/ReactNode/Function | - |
| sortable | 是否支持排序 | Boolean | - |
| width | 列宽，注意在锁列的情况下一定需要配置宽度 | Number/String | - |
| align | 单元格的对齐方式<br><br>**可选值**:<br>'left', 'center', 'right' | Enum | - |
| alignHeader | 单元格标题的对齐方式, 不配置默认读取align值<br><br>**可选值**:<br>'left', 'center', 'right' | Enum | - |
| filters | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]` | Array&lt;Object> | - |
| filterMode | 过滤的模式是单选还是多选<br><br>**可选值**:<br>'single', 'multiple' | Enum | 'multiple' |
| filterProps | filter 模式下传递给 Menu 菜单的属性， 默认继承 `Menu` 组件的API<br><br>**属性**:<br>_subMenuSelectable_: {Boolean} 默认为`false` subMenu是否可选择<br>_isSelectIconRight_: {Boolean} 默认为`false` 是否将选中图标居右。注意：SubMenu 上的选中图标一直居左，不受此API控制 | Object | { subMenuSelectable: false } |
| lock | 是否支持锁列,可选值为`left`,`right`, `true` | Boolean/String | - |
| resizable | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed. | Boolean | false |

### Table.ColumnGroup

Expand Down
2 changes: 2 additions & 0 deletions src/table/base/cell.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class Cell extends React.Component {
style: PropTypes.object,
innerStyle: PropTypes.object,
filterMode: PropTypes.oneOf(['single', 'multiple']),
filterMenuProps: PropTypes.object,
filters: PropTypes.array,
sortable: PropTypes.bool,
lock: PropTypes.any,
Expand Down Expand Up @@ -72,6 +73,7 @@ export default class Cell extends React.Component {
primaryKey,
__normalized,
filterMode,
filterMenuProps,
filters,
sortable,
lock,
Expand Down
14 changes: 12 additions & 2 deletions src/table/base/filter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default class Filter extends React.Component {
filters: PropTypes.array,
filterMode: PropTypes.string,
filterParams: PropTypes.object,
filterMenuProps: PropTypes.object,
locale: PropTypes.object,
onFilter: PropTypes.func,
prefix: PropTypes.string,
Expand Down Expand Up @@ -117,8 +118,16 @@ export default class Filter extends React.Component {
};

render() {
const { filters, prefix, locale, filterMode, rtl } = this.props;
const {
filters,
prefix,
locale,
filterMode,
filterMenuProps,
rtl,
} = this.props;
const { visible, selectedKeys } = this.state;
const { subMenuSelectable, ...others } = filterMenuProps;

function renderMenuItem(item) {
return <Menu.Item key={item.value}>{item.label}</Menu.Item>;
Expand All @@ -129,7 +138,7 @@ export default class Filter extends React.Component {
<Menu.SubMenu
label={parent.label}
key={parent.value}
selectable={false}
selectable={subMenuSelectable}
>
{renderMenuContent(children)}
</Menu.SubMenu>
Expand Down Expand Up @@ -182,6 +191,7 @@ export default class Filter extends React.Component {
selectedKeys={selectedKeys}
selectMode={filterMode}
onSelect={this.onFilterSelect}
{...others}
>
{content}
</Menu>
Expand Down
2 changes: 2 additions & 0 deletions src/table/base/header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export default class Header extends React.Component {
dataIndex,
filters,
filterMode,
filterMenuProps,
width,
align,
alignHeader,
Expand Down Expand Up @@ -142,6 +143,7 @@ export default class Header extends React.Component {
rtl={rtl}
filterParams={filterParams}
filterMode={filterMode}
filterMenuProps={filterMenuProps}
onFilter={onFilter}
/>
) : null;
Expand Down
9 changes: 9 additions & 0 deletions src/table/column.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ export default class Column extends React.Component {
* 过滤的模式是单选还是多选
*/
filterMode: PropTypes.oneOf(['single', 'multiple']),
/**
* filter 模式下传递给 Menu 菜单的属性， 默认继承 `Menu` 组件的API
* @property {Boolean} subMenuSelectable 默认为`false` subMenu是否可选择
* @property {Boolean} isSelectIconRight 默认为`false` 是否将选中图标居右。注意：SubMenu 上的选中图标一直居左，不受此API控制
*/
filterMenuProps: PropTypes.object,
/**
* 是否支持锁列,可选值为`left`,`right`, `true`
*/
Expand All @@ -76,6 +82,9 @@ export default class Column extends React.Component {
static defaultProps = {
cell: value => value,
filterMode: 'multiple',
filterMenuProps: {
subMenuSelectable: false,
},
resizable: false,
};

Expand Down

0 comments on commit 61ab2b0

Please sign in to comment.