2018-03-30 22:00:55 +08:00
|
|
|
|
|
|
|
import Menu, { SubMenu, Item as MenuItem } from '../vc-menu'
|
|
|
|
import closest from 'dom-closest'
|
|
|
|
import classNames from 'classnames'
|
2018-09-05 21:28:54 +08:00
|
|
|
import shallowequal from 'shallowequal'
|
2018-03-30 22:00:55 +08:00
|
|
|
import Dropdown from '../dropdown'
|
|
|
|
import Icon from '../icon'
|
|
|
|
import Checkbox from '../checkbox'
|
|
|
|
import Radio from '../radio'
|
|
|
|
import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper'
|
|
|
|
import { FilterMenuProps } from './interface'
|
2018-09-05 21:28:54 +08:00
|
|
|
import { initDefaultProps, getOptionProps } from '../_util/props-util'
|
2018-03-31 21:11:02 +08:00
|
|
|
import { cloneElement } from '../_util/vnode'
|
2018-03-30 22:00:55 +08:00
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
|
2018-12-11 20:59:23 +08:00
|
|
|
function stopPropagation (e) {
|
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2018-03-30 22:00:55 +08:00
|
|
|
export default {
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
name: 'FilterMenu',
|
|
|
|
props: initDefaultProps(FilterMenuProps, {
|
|
|
|
handleFilter () {},
|
|
|
|
column: {},
|
|
|
|
}),
|
|
|
|
|
|
|
|
data () {
|
|
|
|
const visible = ('filterDropdownVisible' in this.column)
|
|
|
|
? this.column.filterDropdownVisible : false
|
2018-09-05 21:28:54 +08:00
|
|
|
this.preProps = { ...getOptionProps(this) }
|
2018-03-30 22:00:55 +08:00
|
|
|
return {
|
|
|
|
sSelectedKeys: this.selectedKeys,
|
|
|
|
sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
|
|
|
|
sVisible: visible,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted () {
|
|
|
|
const { column } = this
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.setNeverShown(column)
|
|
|
|
})
|
|
|
|
},
|
2018-04-01 16:50:31 +08:00
|
|
|
watch: {
|
2018-09-05 21:28:54 +08:00
|
|
|
_propsSymbol () {
|
|
|
|
const nextProps = getOptionProps(this)
|
|
|
|
const { column } = nextProps
|
|
|
|
this.setNeverShown(column)
|
|
|
|
const newState = {}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* if the state is visible the component should ignore updates on selectedKeys prop to avoid
|
|
|
|
* that the user selection is lost
|
|
|
|
* this happens frequently when a table is connected on some sort of realtime data
|
|
|
|
* Fixes https://github.com/ant-design/ant-design/issues/10289 and
|
|
|
|
* https://github.com/ant-design/ant-design/issues/10209
|
|
|
|
*/
|
|
|
|
if ('selectedKeys' in nextProps && !shallowequal(this.preProps.selectedKeys, nextProps.selectedKeys)) {
|
|
|
|
newState.sSelectedKeys = nextProps.selectedKeys
|
2018-04-01 16:50:31 +08:00
|
|
|
}
|
2018-09-05 21:28:54 +08:00
|
|
|
if ('filterDropdownVisible' in column) {
|
|
|
|
newState.sVisible = column.filterDropdownVisible
|
|
|
|
}
|
|
|
|
if (Object.keys(newState).length > 0) {
|
|
|
|
this.setState(newState)
|
|
|
|
}
|
|
|
|
this.preProps = { ...nextProps }
|
2018-04-01 16:50:31 +08:00
|
|
|
},
|
2018-09-05 21:28:54 +08:00
|
|
|
// 'column.fixed': function (val) {
|
|
|
|
// this.setNeverShown(this.column)
|
|
|
|
// },
|
|
|
|
// column (val) {
|
|
|
|
// if ('filterDropdownVisible' in val) {
|
|
|
|
// this.sVisible = val.filterDropdownVisible
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// selectedKeys (val) {
|
|
|
|
// this.sSelectedKeys = val
|
|
|
|
// },
|
2018-03-30 22:00:55 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2018-12-11 20:59:23 +08:00
|
|
|
getDropdownVisible () {
|
|
|
|
return this.neverShown ? false : this.sVisible
|
|
|
|
},
|
2018-04-01 16:50:31 +08:00
|
|
|
setNeverShown (column) {
|
|
|
|
const rootNode = this.$el
|
|
|
|
const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`)
|
|
|
|
if (filterBelongToScrollBody) {
|
|
|
|
// When fixed column have filters, there will be two dropdown menus
|
|
|
|
// Filter dropdown menu inside scroll body should never be shown
|
|
|
|
// To fix https://github.com/ant-design/ant-design/issues/5010 and
|
|
|
|
// https://github.com/ant-design/ant-design/issues/7909
|
|
|
|
this.neverShown = !!column.fixed
|
|
|
|
}
|
|
|
|
},
|
2018-03-30 22:00:55 +08:00
|
|
|
|
2018-04-01 16:50:31 +08:00
|
|
|
setSelectedKeys ({ selectedKeys }) {
|
|
|
|
this.setState({ sSelectedKeys: selectedKeys })
|
|
|
|
},
|
2018-03-30 22:00:55 +08:00
|
|
|
|
2018-04-01 16:50:31 +08:00
|
|
|
setVisible (visible) {
|
|
|
|
const { column } = this
|
|
|
|
if (!('filterDropdownVisible' in column)) {
|
|
|
|
this.setState({ sVisible: visible })
|
|
|
|
}
|
|
|
|
if (column.onFilterDropdownVisibleChange) {
|
|
|
|
column.onFilterDropdownVisibleChange(visible)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
handleClearFilters () {
|
|
|
|
this.setState({
|
|
|
|
sSelectedKeys: [],
|
|
|
|
}, this.handleConfirm)
|
|
|
|
},
|
|
|
|
|
|
|
|
handleConfirm () {
|
|
|
|
this.setVisible(false)
|
|
|
|
this.confirmFilter2()
|
2018-12-11 20:59:23 +08:00
|
|
|
// Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
|
|
|
|
// https://github.com/ant-design/ant-design/issues/12284
|
|
|
|
this.$forceUpdate()
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.confirmFilter
|
|
|
|
})
|
2018-04-01 16:50:31 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
onVisibleChange (visible) {
|
|
|
|
this.setVisible(visible)
|
|
|
|
if (!visible) {
|
|
|
|
this.confirmFilter2()
|
|
|
|
}
|
|
|
|
},
|
2018-03-30 22:00:55 +08:00
|
|
|
|
2018-04-01 16:50:31 +08:00
|
|
|
confirmFilter2 () {
|
2018-09-05 21:28:54 +08:00
|
|
|
if (!shallowequal(this.sSelectedKeys, this.selectedKeys)) {
|
2018-04-01 16:50:31 +08:00
|
|
|
this.confirmFilter(this.column, this.sSelectedKeys)
|
2018-03-30 22:00:55 +08:00
|
|
|
}
|
2018-04-01 16:50:31 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
renderMenuItem (item) {
|
|
|
|
const { column } = this
|
|
|
|
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true
|
|
|
|
const input = multiple ? (
|
|
|
|
<Checkbox checked={this.sSelectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
|
|
) : (
|
|
|
|
<Radio checked={this.sSelectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<MenuItem key={item.value}>
|
|
|
|
{input}
|
|
|
|
<span>{item.text}</span>
|
|
|
|
</MenuItem>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
|
|
|
|
hasSubMenu () {
|
|
|
|
const { column: { filters = [] }} = this
|
|
|
|
return filters.some(item => !!(item.children && item.children.length > 0))
|
|
|
|
},
|
|
|
|
|
|
|
|
renderMenus (items) {
|
|
|
|
return items.map(item => {
|
|
|
|
if (item.children && item.children.length > 0) {
|
|
|
|
const { sKeyPathOfSelectedItem } = this
|
|
|
|
const containSelected = Object.keys(sKeyPathOfSelectedItem).some(
|
|
|
|
key => sKeyPathOfSelectedItem[key].indexOf(item.value) >= 0,
|
|
|
|
)
|
|
|
|
const subMenuCls = containSelected ? `${this.dropdownPrefixCls}-submenu-contain-selected` : ''
|
|
|
|
return (
|
|
|
|
<SubMenu title={item.text} class={subMenuCls} key={item.value.toString()}>
|
|
|
|
{this.renderMenus(item.children)}
|
|
|
|
</SubMenu>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return this.renderMenuItem(item)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
handleMenuItemClick (info) {
|
2018-09-05 21:28:54 +08:00
|
|
|
if (!info.keyPath || info.keyPath.length <= 1) {
|
2018-04-01 16:50:31 +08:00
|
|
|
return
|
|
|
|
}
|
|
|
|
const keyPathOfSelectedItem = this.sKeyPathOfSelectedItem
|
|
|
|
if (this.sSelectedKeys.indexOf(info.key) >= 0) {
|
|
|
|
// deselect SubMenu child
|
|
|
|
delete keyPathOfSelectedItem[info.key]
|
|
|
|
} else {
|
|
|
|
// select SubMenu child
|
|
|
|
keyPathOfSelectedItem[info.key] = info.keyPath
|
|
|
|
}
|
|
|
|
this.setState({ keyPathOfSelectedItem })
|
|
|
|
},
|
2018-03-30 22:00:55 +08:00
|
|
|
|
2018-04-01 16:50:31 +08:00
|
|
|
renderFilterIcon () {
|
2018-09-05 21:28:54 +08:00
|
|
|
const { column, locale, prefixCls, selectedKeys } = this
|
|
|
|
const filterd = selectedKeys.length > 0
|
|
|
|
let filterIcon = column.filterIcon
|
|
|
|
if (typeof filterIcon === 'function') {
|
|
|
|
filterIcon = filterIcon(filterd)
|
|
|
|
}
|
2018-12-11 20:59:23 +08:00
|
|
|
const dropdownIconClass = classNames({
|
|
|
|
[`${prefixCls}-selected`]: filterd,
|
|
|
|
[`${prefixCls}-open`]: this.getDropdownVisible(),
|
|
|
|
})
|
2018-03-30 22:00:55 +08:00
|
|
|
|
2018-04-01 16:50:31 +08:00
|
|
|
return filterIcon ? cloneElement(filterIcon, {
|
2018-04-01 22:33:01 +08:00
|
|
|
attrs: {
|
|
|
|
title: locale.filterTitle,
|
|
|
|
},
|
2018-12-11 20:59:23 +08:00
|
|
|
on: {
|
|
|
|
click: stopPropagation,
|
|
|
|
},
|
|
|
|
class: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.className),
|
|
|
|
})
|
|
|
|
: <Icon
|
|
|
|
title={locale.filterTitle}
|
|
|
|
type='filter'
|
|
|
|
theme='filled'
|
|
|
|
class={dropdownIconClass}
|
|
|
|
onClick={stopPropagation}
|
|
|
|
/>
|
2018-04-01 16:50:31 +08:00
|
|
|
},
|
2018-03-30 22:00:55 +08:00
|
|
|
},
|
2018-04-01 16:50:31 +08:00
|
|
|
|
2018-03-30 22:00:55 +08:00
|
|
|
render () {
|
|
|
|
const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this
|
|
|
|
// default multiple selection in filter dropdown
|
|
|
|
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true
|
|
|
|
const dropdownMenuClass = classNames({
|
|
|
|
[`${dropdownPrefixCls}-menu-without-submenu`]: !this.hasSubMenu(),
|
|
|
|
})
|
2018-09-05 21:28:54 +08:00
|
|
|
let { filterDropdown } = column
|
2018-12-11 20:59:23 +08:00
|
|
|
if (filterDropdown instanceof Function) {
|
2018-09-05 21:28:54 +08:00
|
|
|
filterDropdown = filterDropdown({
|
|
|
|
prefixCls: `${dropdownPrefixCls}-custom`,
|
|
|
|
setSelectedKeys: (selectedKeys) => this.setSelectedKeys({ selectedKeys }),
|
|
|
|
selectedKeys: this.sSelectedKeys,
|
|
|
|
confirm: this.handleConfirm,
|
|
|
|
clearFilters: this.handleClearFilters,
|
|
|
|
filters: column.filters,
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
const menus = filterDropdown ? (
|
2018-03-30 22:00:55 +08:00
|
|
|
<FilterDropdownMenuWrapper>
|
2018-09-05 21:28:54 +08:00
|
|
|
{filterDropdown}
|
2018-03-30 22:00:55 +08:00
|
|
|
</FilterDropdownMenuWrapper>
|
|
|
|
) : (
|
|
|
|
<FilterDropdownMenuWrapper class={`${prefixCls}-dropdown`}>
|
|
|
|
<Menu
|
|
|
|
multiple={multiple}
|
|
|
|
onClick={this.handleMenuItemClick}
|
|
|
|
prefixCls={`${dropdownPrefixCls}-menu`}
|
|
|
|
class={dropdownMenuClass}
|
|
|
|
onSelect={this.setSelectedKeys}
|
|
|
|
onDeselect={this.setSelectedKeys}
|
|
|
|
selectedKeys={this.sSelectedKeys}
|
2018-04-03 14:34:54 +08:00
|
|
|
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
2018-03-30 22:00:55 +08:00
|
|
|
>
|
|
|
|
{this.renderMenus(column.filters)}
|
|
|
|
</Menu>
|
|
|
|
<div class={`${prefixCls}-dropdown-btns`}>
|
|
|
|
<a
|
|
|
|
class={`${prefixCls}-dropdown-link confirm`}
|
|
|
|
onClick={this.handleConfirm}
|
|
|
|
>
|
|
|
|
{locale.filterConfirm}
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
class={`${prefixCls}-dropdown-link clear`}
|
|
|
|
onClick={this.handleClearFilters}
|
|
|
|
>
|
|
|
|
{locale.filterReset}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</FilterDropdownMenuWrapper>
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Dropdown
|
|
|
|
trigger={['click']}
|
2018-12-11 20:59:23 +08:00
|
|
|
placement='bottomRight'
|
|
|
|
visible={this.getDropdownVisible()}
|
2018-03-30 22:00:55 +08:00
|
|
|
onVisibleChange={this.onVisibleChange}
|
|
|
|
getPopupContainer={getPopupContainer}
|
|
|
|
forceRender
|
|
|
|
>
|
|
|
|
<template slot='overlay'>{menus}</template>
|
|
|
|
{this.renderFilterIcon()}
|
|
|
|
</Dropdown>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
}
|