2018-03-30 14:00:55 +00:00
|
|
|
|
|
|
|
import Menu, { SubMenu, Item as MenuItem } from '../vc-menu'
|
|
|
|
import closest from 'dom-closest'
|
|
|
|
import classNames from 'classnames'
|
|
|
|
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-03-31 13:11:02 +00:00
|
|
|
import { initDefaultProps } from '../_util/props-util'
|
|
|
|
import { cloneElement } from '../_util/vnode'
|
2018-03-30 14:00:55 +00:00
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
name: 'FilterMenu',
|
|
|
|
props: initDefaultProps(FilterMenuProps, {
|
|
|
|
handleFilter () {},
|
|
|
|
column: {},
|
|
|
|
}),
|
|
|
|
|
|
|
|
data () {
|
|
|
|
const visible = ('filterDropdownVisible' in this.column)
|
|
|
|
? this.column.filterDropdownVisible : false
|
|
|
|
|
|
|
|
return {
|
|
|
|
sSelectedKeys: this.selectedKeys,
|
|
|
|
sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
|
|
|
|
sVisible: visible,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted () {
|
|
|
|
const { column } = this
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.setNeverShown(column)
|
|
|
|
})
|
|
|
|
},
|
2018-04-01 08:50:31 +00:00
|
|
|
watch: {
|
|
|
|
'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 14:00:55 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2018-04-01 08:50:31 +00: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 14:00:55 +00:00
|
|
|
|
2018-04-01 08:50:31 +00:00
|
|
|
setSelectedKeys ({ selectedKeys }) {
|
|
|
|
this.setState({ sSelectedKeys: selectedKeys })
|
|
|
|
},
|
2018-03-30 14:00:55 +00:00
|
|
|
|
2018-04-01 08:50:31 +00: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()
|
|
|
|
},
|
|
|
|
|
|
|
|
onVisibleChange (visible) {
|
|
|
|
this.setVisible(visible)
|
|
|
|
if (!visible) {
|
|
|
|
this.confirmFilter2()
|
|
|
|
}
|
|
|
|
},
|
2018-03-30 14:00:55 +00:00
|
|
|
|
2018-04-01 08:50:31 +00:00
|
|
|
confirmFilter2 () {
|
|
|
|
if (this.sSelectedKeys !== this.selectedKeys) {
|
|
|
|
this.confirmFilter(this.column, this.sSelectedKeys)
|
2018-03-30 14:00:55 +00:00
|
|
|
}
|
2018-04-01 08:50:31 +00: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) {
|
|
|
|
if (info.keyPath.length <= 1) {
|
|
|
|
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 14:00:55 +00:00
|
|
|
|
2018-04-01 08:50:31 +00:00
|
|
|
renderFilterIcon () {
|
|
|
|
const { column, locale, prefixCls } = this
|
|
|
|
const filterIcon = column.filterIcon
|
|
|
|
const dropdownSelectedClass = this.selectedKeys.length > 0 ? `${prefixCls}-selected` : ''
|
2018-03-30 14:00:55 +00:00
|
|
|
|
2018-04-01 08:50:31 +00:00
|
|
|
return filterIcon ? cloneElement(filterIcon, {
|
2018-04-01 14:33:01 +00:00
|
|
|
attrs: {
|
|
|
|
title: locale.filterTitle,
|
|
|
|
},
|
|
|
|
class: classNames(filterIcon.className, {
|
2018-04-01 08:50:31 +00:00
|
|
|
[`${prefixCls}-icon`]: true,
|
|
|
|
}),
|
|
|
|
}) : <Icon title={locale.filterTitle} type='filter' class={dropdownSelectedClass} />
|
|
|
|
},
|
2018-03-30 14:00:55 +00:00
|
|
|
},
|
2018-04-01 08:50:31 +00:00
|
|
|
|
2018-03-30 14:00:55 +00: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(),
|
|
|
|
})
|
|
|
|
const menus = column.filterDropdown ? (
|
|
|
|
<FilterDropdownMenuWrapper>
|
|
|
|
{column.filterDropdown}
|
|
|
|
</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 06:34:54 +00:00
|
|
|
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
2018-03-30 14:00:55 +00: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']}
|
|
|
|
visible={this.neverShown ? false : this.sVisible}
|
|
|
|
onVisibleChange={this.onVisibleChange}
|
|
|
|
getPopupContainer={getPopupContainer}
|
|
|
|
forceRender
|
|
|
|
>
|
|
|
|
<template slot='overlay'>{menus}</template>
|
|
|
|
{this.renderFilterIcon()}
|
|
|
|
</Dropdown>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
}
|