update table
tjz
parent
f88294b982
commit
db6532c07c
|
|
@ -0,0 +1,75 @@
|
||||||
|
|
||||||
|
import Checkbox from '../checkbox'
|
||||||
|
import Radio from '../radio'
|
||||||
|
import { SelectionBoxProps } from './interface'
|
||||||
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
import { getOptionProps } from '../_util/props-util'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
name: 'SelectionBox',
|
||||||
|
props: SelectionBoxProps,
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
checked: this.getCheckState(this.$props),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
this.subscribe()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy () {
|
||||||
|
if (this.unsubscribe) {
|
||||||
|
this.unsubscribe()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
subscribe () {
|
||||||
|
const { store } = this
|
||||||
|
this.unsubscribe = store.subscribe(() => {
|
||||||
|
const checked = this.getCheckState(this.$props)
|
||||||
|
this.setState({ checked })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getCheckState (props) {
|
||||||
|
const { store, defaultSelection, rowIndex } = props
|
||||||
|
let checked = false
|
||||||
|
if (store.getState().selectionDirty) {
|
||||||
|
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0
|
||||||
|
} else {
|
||||||
|
checked = (store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
|
||||||
|
defaultSelection.indexOf(rowIndex) >= 0)
|
||||||
|
}
|
||||||
|
return checked
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { type, rowIndex, ...rest } = getOptionProps(this)
|
||||||
|
const { checked, $attrs, $listeners } = this
|
||||||
|
const checkboxProps = {
|
||||||
|
props: {
|
||||||
|
checked,
|
||||||
|
...rest,
|
||||||
|
},
|
||||||
|
attrs: $attrs,
|
||||||
|
on: $listeners,
|
||||||
|
}
|
||||||
|
if (type === 'radio') {
|
||||||
|
checkboxProps.props.value = rowIndex
|
||||||
|
return (
|
||||||
|
<Radio
|
||||||
|
{...checkboxProps}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<Checkbox
|
||||||
|
{...checkboxProps}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import Checkbox from '../checkbox';
|
|
||||||
import Radio from '../radio';
|
|
||||||
import { SelectionBoxProps, SelectionBoxState } from './interface';
|
|
||||||
|
|
||||||
export default class SelectionBox extends React.Component<SelectionBoxProps, SelectionBoxState> {
|
|
||||||
unsubscribe: () => void;
|
|
||||||
|
|
||||||
constructor(props: SelectionBoxProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
checked: this.getCheckState(props),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.subscribe();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.unsubscribe) {
|
|
||||||
this.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
subscribe() {
|
|
||||||
const { store } = this.props;
|
|
||||||
this.unsubscribe = store.subscribe(() => {
|
|
||||||
const checked = this.getCheckState(this.props);
|
|
||||||
this.setState({ checked });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getCheckState(props: SelectionBoxProps) {
|
|
||||||
const { store, defaultSelection, rowIndex } = props;
|
|
||||||
let checked = false;
|
|
||||||
if (store.getState().selectionDirty) {
|
|
||||||
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
|
|
||||||
} else {
|
|
||||||
checked = (store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
|
|
||||||
defaultSelection.indexOf(rowIndex) >= 0);
|
|
||||||
}
|
|
||||||
return checked;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { type, rowIndex, ...rest } = this.props;
|
|
||||||
const { checked } = this.state;
|
|
||||||
|
|
||||||
if (type === 'radio') {
|
|
||||||
return (
|
|
||||||
<Radio
|
|
||||||
checked={checked}
|
|
||||||
value={rowIndex}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Checkbox
|
|
||||||
checked={checked}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
import Checkbox from '../checkbox'
|
||||||
|
import Dropdown from '../dropdown'
|
||||||
|
import Menu from '../menu'
|
||||||
|
import Icon from '../icon'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import { SelectionCheckboxAllProps } from './interface'
|
||||||
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: SelectionCheckboxAllProps,
|
||||||
|
name: 'SelectionCheckboxAll',
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
data () {
|
||||||
|
const { $props: props } = this
|
||||||
|
this.defaultSelections = props.hideDefaultSelections ? [] : [{
|
||||||
|
key: 'all',
|
||||||
|
text: props.locale.selectAll,
|
||||||
|
onSelect: () => {},
|
||||||
|
}, {
|
||||||
|
key: 'invert',
|
||||||
|
text: props.locale.selectInvert,
|
||||||
|
onSelect: () => {},
|
||||||
|
}]
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
checked: this.getCheckState(props),
|
||||||
|
indeterminate: this.getIndeterminateState(props),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
this.subscribe()
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps (nextProps) {
|
||||||
|
this.setCheckState()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy () {
|
||||||
|
if (this.unsubscribe) {
|
||||||
|
this.unsubscribe()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
subscribe () {
|
||||||
|
const { store } = this
|
||||||
|
this.unsubscribe = store.subscribe(() => {
|
||||||
|
this.setCheckState()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
checkSelection (data, type, byDefaultChecked) {
|
||||||
|
const { store, getCheckboxPropsByItem, getRecordKey } = this
|
||||||
|
// type should be 'every' | 'some'
|
||||||
|
if (type === 'every' || type === 'some') {
|
||||||
|
return (
|
||||||
|
byDefaultChecked
|
||||||
|
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
|
||||||
|
: data[type]((item, i) =>
|
||||||
|
store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
setCheckState () {
|
||||||
|
const checked = this.getCheckState()
|
||||||
|
const indeterminate = this.getIndeterminateState()
|
||||||
|
if (checked !== this.checked) {
|
||||||
|
this.setState({ checked })
|
||||||
|
}
|
||||||
|
if (indeterminate !== this.indeterminate) {
|
||||||
|
this.setState({ indeterminate })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getCheckState () {
|
||||||
|
const { store, data } = this
|
||||||
|
let checked
|
||||||
|
if (!data.length) {
|
||||||
|
checked = false
|
||||||
|
} else {
|
||||||
|
checked = store.getState().selectionDirty
|
||||||
|
? this.checkSelection(data, 'every', false)
|
||||||
|
: (
|
||||||
|
this.checkSelection(data, 'every', false) ||
|
||||||
|
this.checkSelection(data, 'every', true)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return checked
|
||||||
|
},
|
||||||
|
|
||||||
|
getIndeterminateState () {
|
||||||
|
const { store, data } = this
|
||||||
|
let indeterminate
|
||||||
|
if (!data.length) {
|
||||||
|
indeterminate = false
|
||||||
|
} else {
|
||||||
|
indeterminate = store.getState().selectionDirty
|
||||||
|
? (
|
||||||
|
this.checkSelection(data, 'some', false) &&
|
||||||
|
!this.checkSelection(data, 'every', false)
|
||||||
|
)
|
||||||
|
: ((this.checkSelection(data, 'some', false) &&
|
||||||
|
!this.checkSelection(data, 'every', false)) ||
|
||||||
|
(this.checkSelection(data, 'some', true) &&
|
||||||
|
!this.checkSelection(data, 'every', true))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return indeterminate
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectAllChagne (e) {
|
||||||
|
const checked = e.target.checked
|
||||||
|
this.$emit('select', checked ? 'all' : 'removeAll', 0, null)
|
||||||
|
},
|
||||||
|
|
||||||
|
renderMenus (selections) {
|
||||||
|
return selections.map((selection, index) => {
|
||||||
|
return (
|
||||||
|
<Menu.Item
|
||||||
|
key={selection.key || index}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={() => { this.$emit('select', selection.key, index, selection.onSelect) }}
|
||||||
|
>
|
||||||
|
{selection.text}
|
||||||
|
</div>
|
||||||
|
</Menu.Item>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { disabled, prefixCls, selections, getPopupContainer, checked, indeterminate } = this
|
||||||
|
|
||||||
|
const selectionPrefixCls = `${prefixCls}-selection`
|
||||||
|
|
||||||
|
let customSelections = null
|
||||||
|
|
||||||
|
if (selections) {
|
||||||
|
const newSelections = Array.isArray(selections) ? this.defaultSelections.concat(selections)
|
||||||
|
: this.defaultSelections
|
||||||
|
|
||||||
|
const menu = (
|
||||||
|
<Menu
|
||||||
|
class={`${selectionPrefixCls}-menu`}
|
||||||
|
selectedKeys={[]}
|
||||||
|
>
|
||||||
|
{this.renderMenus(newSelections)}
|
||||||
|
</Menu>
|
||||||
|
)
|
||||||
|
|
||||||
|
customSelections = newSelections.length > 0 ? (
|
||||||
|
<Dropdown
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
>
|
||||||
|
<template slot='overlay'>
|
||||||
|
{menu}
|
||||||
|
</template>
|
||||||
|
<div class={`${selectionPrefixCls}-down`}>
|
||||||
|
<Icon type='down' />
|
||||||
|
</div>
|
||||||
|
</Dropdown>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={selectionPrefixCls}>
|
||||||
|
<Checkbox
|
||||||
|
class={classNames({ [`${selectionPrefixCls}-select-all-custom`]: customSelections })}
|
||||||
|
checked={checked}
|
||||||
|
indeterminate={indeterminate}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={this.handleSelectAllChagne}
|
||||||
|
/>
|
||||||
|
{customSelections}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -1,183 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import Checkbox from '../checkbox';
|
|
||||||
import Dropdown from '../dropdown';
|
|
||||||
import Menu from '../menu';
|
|
||||||
import Icon from '../icon';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { SelectionCheckboxAllProps, SelectionCheckboxAllState, SelectionItem } from './interface';
|
|
||||||
|
|
||||||
export default class SelectionCheckboxAll<T> extends
|
|
||||||
React.Component<SelectionCheckboxAllProps<T>, SelectionCheckboxAllState> {
|
|
||||||
unsubscribe: () => void;
|
|
||||||
defaultSelections: SelectionItem[];
|
|
||||||
|
|
||||||
constructor(props: SelectionCheckboxAllProps<T>) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.defaultSelections = props.hideDefaultSelections ? [] : [{
|
|
||||||
key: 'all',
|
|
||||||
text: props.locale.selectAll,
|
|
||||||
onSelect: () => {},
|
|
||||||
}, {
|
|
||||||
key: 'invert',
|
|
||||||
text: props.locale.selectInvert,
|
|
||||||
onSelect: () => {},
|
|
||||||
}];
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
checked: this.getCheckState(props),
|
|
||||||
indeterminate: this.getIndeterminateState(props),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.subscribe();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps: SelectionCheckboxAllProps<T>) {
|
|
||||||
this.setCheckState(nextProps);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.unsubscribe) {
|
|
||||||
this.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
subscribe() {
|
|
||||||
const { store } = this.props;
|
|
||||||
this.unsubscribe = store.subscribe(() => {
|
|
||||||
this.setCheckState(this.props);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
checkSelection(data: T[], type: string, byDefaultChecked: boolean) {
|
|
||||||
const { store, getCheckboxPropsByItem, getRecordKey } = this.props;
|
|
||||||
// type should be 'every' | 'some'
|
|
||||||
if (type === 'every' || type === 'some') {
|
|
||||||
return (
|
|
||||||
byDefaultChecked
|
|
||||||
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
|
|
||||||
: data[type]((item, i) =>
|
|
||||||
store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
setCheckState(props: SelectionCheckboxAllProps<T>) {
|
|
||||||
const checked = this.getCheckState(props);
|
|
||||||
const indeterminate = this.getIndeterminateState(props);
|
|
||||||
if (checked !== this.state.checked) {
|
|
||||||
this.setState({ checked });
|
|
||||||
}
|
|
||||||
if (indeterminate !== this.state.indeterminate) {
|
|
||||||
this.setState({ indeterminate });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getCheckState(props: SelectionCheckboxAllProps<T>) {
|
|
||||||
const { store, data } = props;
|
|
||||||
let checked;
|
|
||||||
if (!data.length) {
|
|
||||||
checked = false;
|
|
||||||
} else {
|
|
||||||
checked = store.getState().selectionDirty
|
|
||||||
? this.checkSelection(data, 'every', false)
|
|
||||||
: (
|
|
||||||
this.checkSelection(data, 'every', false) ||
|
|
||||||
this.checkSelection(data, 'every', true)
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
return checked;
|
|
||||||
}
|
|
||||||
|
|
||||||
getIndeterminateState(props: SelectionCheckboxAllProps<T>) {
|
|
||||||
const { store, data } = props;
|
|
||||||
let indeterminate;
|
|
||||||
if (!data.length) {
|
|
||||||
indeterminate = false;
|
|
||||||
} else {
|
|
||||||
indeterminate = store.getState().selectionDirty
|
|
||||||
? (
|
|
||||||
this.checkSelection(data, 'some', false) &&
|
|
||||||
!this.checkSelection(data, 'every', false)
|
|
||||||
)
|
|
||||||
: ((this.checkSelection(data, 'some', false) &&
|
|
||||||
!this.checkSelection(data, 'every', false)) ||
|
|
||||||
(this.checkSelection(data, 'some', true) &&
|
|
||||||
!this.checkSelection(data, 'every', true))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return indeterminate;
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSelectAllChagne = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
let checked = e.target.checked;
|
|
||||||
this.props.onSelect(checked ? 'all' : 'removeAll', 0, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMenus(selections: SelectionItem[]) {
|
|
||||||
return selections.map((selection, index) => {
|
|
||||||
return (
|
|
||||||
<Menu.Item
|
|
||||||
key={selection.key || index}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
onClick={() => {this.props.onSelect(selection.key, index, selection.onSelect); }}
|
|
||||||
>
|
|
||||||
{selection.text}
|
|
||||||
</div>
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { disabled, prefixCls, selections, getPopupContainer } = this.props;
|
|
||||||
const { checked, indeterminate } = this.state;
|
|
||||||
|
|
||||||
let selectionPrefixCls = `${prefixCls}-selection`;
|
|
||||||
|
|
||||||
let customSelections: React.ReactNode = null;
|
|
||||||
|
|
||||||
if (selections) {
|
|
||||||
let newSelections = Array.isArray(selections) ? this.defaultSelections.concat(selections)
|
|
||||||
: this.defaultSelections;
|
|
||||||
|
|
||||||
const menu = (
|
|
||||||
<Menu
|
|
||||||
className={`${selectionPrefixCls}-menu`}
|
|
||||||
selectedKeys={[]}
|
|
||||||
>
|
|
||||||
{this.renderMenus(newSelections)}
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
|
|
||||||
customSelections = newSelections.length > 0 ? (
|
|
||||||
<Dropdown
|
|
||||||
overlay={menu}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
>
|
|
||||||
<div className={`${selectionPrefixCls}-down`}>
|
|
||||||
<Icon type="down" />
|
|
||||||
</div>
|
|
||||||
</Dropdown>
|
|
||||||
) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={selectionPrefixCls}>
|
|
||||||
<Checkbox
|
|
||||||
className={classNames({ [`${selectionPrefixCls}-select-all-custom`]: customSelections })}
|
|
||||||
checked={checked}
|
|
||||||
indeterminate={indeterminate}
|
|
||||||
disabled={disabled}
|
|
||||||
onChange={this.handleSelectAllChagne}
|
|
||||||
/>
|
|
||||||
{customSelections}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
|
||||||
|
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'
|
||||||
|
import { initDefaultProps, cloneElement } from '../_util/props-util'
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps (nextProps) {
|
||||||
|
const { column } = nextProps
|
||||||
|
this.setNeverShown(column)
|
||||||
|
const newState = {}
|
||||||
|
if ('selectedKeys' in nextProps) {
|
||||||
|
newState.selectedKeys = nextProps.selectedKeys
|
||||||
|
}
|
||||||
|
if ('filterDropdownVisible' in column) {
|
||||||
|
newState.visible = column.filterDropdownVisible
|
||||||
|
}
|
||||||
|
if (Object.keys(newState).length > 0) {
|
||||||
|
this.setState(newState)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelectedKeys ({ selectedKeys }) {
|
||||||
|
this.setState({ sSelectedKeys: selectedKeys })
|
||||||
|
},
|
||||||
|
|
||||||
|
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.confirmFilter()
|
||||||
|
},
|
||||||
|
|
||||||
|
onVisibleChange (visible) {
|
||||||
|
this.setVisible(visible)
|
||||||
|
if (!visible) {
|
||||||
|
this.confirmFilter()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmFilter () {
|
||||||
|
if (this.sSelectedKeys !== this.selectedKeys) {
|
||||||
|
this.confirmFilter(this.column, this.sSelectedKeys)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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 })
|
||||||
|
},
|
||||||
|
|
||||||
|
renderFilterIcon () {
|
||||||
|
const { column, locale, prefixCls } = this
|
||||||
|
const filterIcon = column.filterIcon
|
||||||
|
const dropdownSelectedClass = this.selectedKeys.length > 0 ? `${prefixCls}-selected` : ''
|
||||||
|
|
||||||
|
return filterIcon ? cloneElement(filterIcon, {
|
||||||
|
title: locale.filterTitle,
|
||||||
|
className: classNames(filterIcon.className, {
|
||||||
|
[`${prefixCls}-icon`]: true,
|
||||||
|
}),
|
||||||
|
}) : <Icon title={locale.filterTitle} type='filter' class={dropdownSelectedClass} />
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -1,228 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import * as ReactDOM from 'react-dom';
|
|
||||||
import Menu, { SubMenu, Item as MenuItem } from 'rc-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, FilterMenuState, ColumnProps, ColumnFilterItem } from './interface';
|
|
||||||
|
|
||||||
export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState> {
|
|
||||||
static defaultProps = {
|
|
||||||
handleFilter() {},
|
|
||||||
column: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
neverShown: boolean;
|
|
||||||
|
|
||||||
constructor(props: FilterMenuProps<T>) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
const visible = ('filterDropdownVisible' in props.column) ?
|
|
||||||
props.column.filterDropdownVisible : false;
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
selectedKeys: props.selectedKeys,
|
|
||||||
keyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
|
|
||||||
visible,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { column } = this.props;
|
|
||||||
this.setNeverShown(column);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps: FilterMenuProps<T>) {
|
|
||||||
const { column } = nextProps;
|
|
||||||
this.setNeverShown(column);
|
|
||||||
const newState = {} as {
|
|
||||||
selectedKeys: string[];
|
|
||||||
visible: boolean;
|
|
||||||
};
|
|
||||||
if ('selectedKeys' in nextProps) {
|
|
||||||
newState.selectedKeys = nextProps.selectedKeys;
|
|
||||||
}
|
|
||||||
if ('filterDropdownVisible' in column) {
|
|
||||||
newState.visible = column.filterDropdownVisible as boolean;
|
|
||||||
}
|
|
||||||
if (Object.keys(newState).length > 0) {
|
|
||||||
this.setState(newState);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setNeverShown = (column: ColumnProps<T>) => {
|
|
||||||
const rootNode = ReactDOM.findDOMNode(this);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedKeys = ({ selectedKeys }: { selectedKeys: string[] }) => {
|
|
||||||
this.setState({ selectedKeys });
|
|
||||||
}
|
|
||||||
|
|
||||||
setVisible(visible: boolean) {
|
|
||||||
const { column } = this.props;
|
|
||||||
if (!('filterDropdownVisible' in column)) {
|
|
||||||
this.setState({ visible });
|
|
||||||
}
|
|
||||||
if (column.onFilterDropdownVisibleChange) {
|
|
||||||
column.onFilterDropdownVisibleChange(visible);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClearFilters = () => {
|
|
||||||
this.setState({
|
|
||||||
selectedKeys: [],
|
|
||||||
}, this.handleConfirm);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleConfirm = () => {
|
|
||||||
this.setVisible(false);
|
|
||||||
this.confirmFilter();
|
|
||||||
}
|
|
||||||
|
|
||||||
onVisibleChange = (visible: boolean) => {
|
|
||||||
this.setVisible(visible);
|
|
||||||
if (!visible) {
|
|
||||||
this.confirmFilter();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
confirmFilter() {
|
|
||||||
if (this.state.selectedKeys !== this.props.selectedKeys) {
|
|
||||||
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMenuItem(item: ColumnFilterItem) {
|
|
||||||
const { column } = this.props;
|
|
||||||
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
|
|
||||||
const input = multiple ? (
|
|
||||||
<Checkbox checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
||||||
) : (
|
|
||||||
<Radio checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MenuItem key={item.value}>
|
|
||||||
{input}
|
|
||||||
<span>{item.text}</span>
|
|
||||||
</MenuItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
hasSubMenu() {
|
|
||||||
const { column: { filters = [] } } = this.props;
|
|
||||||
return filters.some(item => !!(item.children && item.children.length > 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMenus(items: ColumnFilterItem[]): React.ReactElement<any>[] {
|
|
||||||
return items.map(item => {
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
const { keyPathOfSelectedItem } = this.state;
|
|
||||||
const containSelected = Object.keys(keyPathOfSelectedItem).some(
|
|
||||||
key => keyPathOfSelectedItem[key].indexOf(item.value) >= 0,
|
|
||||||
);
|
|
||||||
const subMenuCls = containSelected ? `${this.props.dropdownPrefixCls}-submenu-contain-selected` : '';
|
|
||||||
return (
|
|
||||||
<SubMenu title={item.text} className={subMenuCls} key={item.value.toString()}>
|
|
||||||
{this.renderMenus(item.children)}
|
|
||||||
</SubMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return this.renderMenuItem(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMenuItemClick = (info: { keyPath: string, key: string }) => {
|
|
||||||
if (info.keyPath.length <= 1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
|
|
||||||
if (this.state.selectedKeys.indexOf(info.key) >= 0) {
|
|
||||||
// deselect SubMenu child
|
|
||||||
delete keyPathOfSelectedItem[info.key];
|
|
||||||
} else {
|
|
||||||
// select SubMenu child
|
|
||||||
keyPathOfSelectedItem[info.key] = info.keyPath;
|
|
||||||
}
|
|
||||||
this.setState({ keyPathOfSelectedItem });
|
|
||||||
}
|
|
||||||
|
|
||||||
renderFilterIcon = () => {
|
|
||||||
const { column, locale, prefixCls } = this.props;
|
|
||||||
const filterIcon = column.filterIcon as any;
|
|
||||||
const dropdownSelectedClass = this.props.selectedKeys.length > 0 ? `${prefixCls}-selected` : '';
|
|
||||||
|
|
||||||
return filterIcon ? React.cloneElement(filterIcon as any, {
|
|
||||||
title: locale.filterTitle,
|
|
||||||
className: classNames(filterIcon.className, {
|
|
||||||
[`${prefixCls}-icon`]: true,
|
|
||||||
}),
|
|
||||||
}) : <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />;
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
|
|
||||||
// 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 className={`${prefixCls}-dropdown`}>
|
|
||||||
<Menu
|
|
||||||
multiple={multiple}
|
|
||||||
onClick={this.handleMenuItemClick}
|
|
||||||
prefixCls={`${dropdownPrefixCls}-menu`}
|
|
||||||
className={dropdownMenuClass}
|
|
||||||
onSelect={this.setSelectedKeys}
|
|
||||||
onDeselect={this.setSelectedKeys}
|
|
||||||
selectedKeys={this.state.selectedKeys}
|
|
||||||
>
|
|
||||||
{this.renderMenus(column.filters!)}
|
|
||||||
</Menu>
|
|
||||||
<div className={`${prefixCls}-dropdown-btns`}>
|
|
||||||
<a
|
|
||||||
className={`${prefixCls}-dropdown-link confirm`}
|
|
||||||
onClick={this.handleConfirm}
|
|
||||||
>
|
|
||||||
{locale.filterConfirm}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className={`${prefixCls}-dropdown-link clear`}
|
|
||||||
onClick={this.handleClearFilters}
|
|
||||||
>
|
|
||||||
{locale.filterReset}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</FilterDropdownMenuWrapper>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dropdown
|
|
||||||
trigger={['click']}
|
|
||||||
overlay={menus}
|
|
||||||
visible={this.neverShown ? false : this.state.visible}
|
|
||||||
onVisibleChange={this.onVisibleChange}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
forceRender
|
|
||||||
>
|
|
||||||
{this.renderFilterIcon()}
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -3424,6 +3424,14 @@
|
||||||
"resolved": "https://registry.npm.taobao.org/dom-align/download/dom-align-1.6.7.tgz",
|
"resolved": "https://registry.npm.taobao.org/dom-align/download/dom-align-1.6.7.tgz",
|
||||||
"integrity": "sha1-aFgTjvtrd0Bc6ZFG0L5eT3KCgT8="
|
"integrity": "sha1-aFgTjvtrd0Bc6ZFG0L5eT3KCgT8="
|
||||||
},
|
},
|
||||||
|
"dom-closest": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-closest/-/dom-closest-0.2.0.tgz",
|
||||||
|
"integrity": "sha1-69n5HRvyLo1vR3h2u80+yQIWwM8=",
|
||||||
|
"requires": {
|
||||||
|
"dom-matches": "2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"dom-converter": {
|
"dom-converter": {
|
||||||
"version": "0.1.4",
|
"version": "0.1.4",
|
||||||
"resolved": "http://r.cnpmjs.org/dom-converter/download/dom-converter-0.1.4.tgz",
|
"resolved": "http://r.cnpmjs.org/dom-converter/download/dom-converter-0.1.4.tgz",
|
||||||
|
|
@ -3441,6 +3449,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"dom-matches": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-matches/-/dom-matches-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-0nKLQWqHUzmA6wibhI0lPPI6dYw="
|
||||||
|
},
|
||||||
"dom-scroll-into-view": {
|
"dom-scroll-into-view": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-1.2.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-1.2.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -131,6 +131,7 @@
|
||||||
"component-classes": "^1.2.6",
|
"component-classes": "^1.2.6",
|
||||||
"css-animation": "^1.4.1",
|
"css-animation": "^1.4.1",
|
||||||
"dom-align": "^1.6.7",
|
"dom-align": "^1.6.7",
|
||||||
|
"dom-closest": "^0.2.0",
|
||||||
"dom-scroll-into-view": "^1.2.1",
|
"dom-scroll-into-view": "^1.2.1",
|
||||||
"enquire.js": "^2.1.6",
|
"enquire.js": "^2.1.6",
|
||||||
"eslint-plugin-vue": "^3.13.0",
|
"eslint-plugin-vue": "^3.13.0",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue