ant-design-vue/components/table/filterDropdown.jsx

230 lines
6.7 KiB
React
Raw Normal View History

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}
>
{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>
)
},
}