mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
clean up
This commit is contained in:
zombiej
parent
6dc5a8c2f4
commit
80359a15b1
@ -1,448 +0,0 @@
|
|||||||
/* tslint:disable jsx-no-multiline-js */
|
|
||||||
import * as React from 'react';
|
|
||||||
import * as moment from 'moment';
|
|
||||||
import { polyfill } from 'react-lifecycles-compat';
|
|
||||||
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
|
|
||||||
import RcDatePicker from 'rc-calendar/lib/Picker';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import shallowequal from 'shallowequal';
|
|
||||||
import Icon from '../icon';
|
|
||||||
import Tag from '../tag';
|
|
||||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
||||||
import warning from '../_util/warning';
|
|
||||||
import interopDefault from '../_util/interopDefault';
|
|
||||||
import { RangePickerValue, RangePickerPresetRange, RangePickerProps } from './interface';
|
|
||||||
import { formatDate } from './utils';
|
|
||||||
import InputIcon from './InputIcon';
|
|
||||||
|
|
||||||
export interface RangePickerState {
|
|
||||||
value?: RangePickerValue;
|
|
||||||
showDate?: RangePickerValue;
|
|
||||||
open?: boolean;
|
|
||||||
hoverValue?: RangePickerValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getShowDateFromValue(value: RangePickerValue, mode?: string | string[]) {
|
|
||||||
const [start, end] = value;
|
|
||||||
// value could be an empty array, then we should not reset showDate
|
|
||||||
if (!start && !end) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (mode && mode[0] === 'month') {
|
|
||||||
return [start, end] as RangePickerValue;
|
|
||||||
}
|
|
||||||
const newEnd = end && end.isSame(start!, 'month') ? end.clone().add(1, 'month') : end;
|
|
||||||
return [start, newEnd] as RangePickerValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
function pickerValueAdapter(
|
|
||||||
value?: moment.Moment | RangePickerValue,
|
|
||||||
): RangePickerValue | undefined {
|
|
||||||
if (!value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (Array.isArray(value)) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
return [value, value.clone().add(1, 'month')];
|
|
||||||
}
|
|
||||||
|
|
||||||
function isEmptyArray(arr: any) {
|
|
||||||
if (Array.isArray(arr)) {
|
|
||||||
return arr.length === 0 || arr.every(i => !i);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function fixLocale(value: RangePickerValue | undefined, localeCode: string | undefined) {
|
|
||||||
if (!localeCode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!value || value.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const [start, end] = value;
|
|
||||||
if (start) {
|
|
||||||
start!.locale(localeCode);
|
|
||||||
}
|
|
||||||
if (end) {
|
|
||||||
end!.locale(localeCode);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class RangePicker extends React.Component<RangePickerProps, RangePickerState> {
|
|
||||||
static defaultProps = {
|
|
||||||
allowClear: true,
|
|
||||||
showToday: false,
|
|
||||||
separator: '~',
|
|
||||||
};
|
|
||||||
|
|
||||||
static getDerivedStateFromProps(nextProps: RangePickerProps, prevState: RangePickerState) {
|
|
||||||
let state = null;
|
|
||||||
if ('value' in nextProps) {
|
|
||||||
const value = nextProps.value || [];
|
|
||||||
state = {
|
|
||||||
value,
|
|
||||||
};
|
|
||||||
if (!shallowequal(nextProps.value, prevState.value)) {
|
|
||||||
state = {
|
|
||||||
...state,
|
|
||||||
showDate: getShowDateFromValue(value, nextProps.mode) || prevState.showDate,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ('open' in nextProps && prevState.open !== nextProps.open) {
|
|
||||||
state = {
|
|
||||||
...state,
|
|
||||||
open: nextProps.open,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
private picker: HTMLSpanElement;
|
|
||||||
|
|
||||||
private prefixCls?: string;
|
|
||||||
|
|
||||||
private tagPrefixCls?: string;
|
|
||||||
|
|
||||||
constructor(props: any) {
|
|
||||||
super(props);
|
|
||||||
const value = props.value || props.defaultValue || [];
|
|
||||||
const [start, end] = value;
|
|
||||||
if (
|
|
||||||
(start && !interopDefault(moment).isMoment(start)) ||
|
|
||||||
(end && !interopDefault(moment).isMoment(end))
|
|
||||||
) {
|
|
||||||
throw new Error(
|
|
||||||
'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' +
|
|
||||||
'see: https://u.ant.design/date-picker-value',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const pickerValue = !value || isEmptyArray(value) ? props.defaultPickerValue : value;
|
|
||||||
this.state = {
|
|
||||||
value,
|
|
||||||
showDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
|
|
||||||
open: props.open,
|
|
||||||
hoverValue: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(_: any, prevState: RangePickerState) {
|
|
||||||
if (!('open' in this.props) && prevState.open && !this.state.open) {
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setValue(value: RangePickerValue, hidePanel?: boolean) {
|
|
||||||
this.handleChange(value);
|
|
||||||
if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
|
|
||||||
this.setState({ open: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
savePicker = (node: HTMLSpanElement) => {
|
|
||||||
this.picker = node;
|
|
||||||
};
|
|
||||||
|
|
||||||
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
this.setState({ value: [] });
|
|
||||||
this.handleChange([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
clearHoverValue = () => this.setState({ hoverValue: [] });
|
|
||||||
|
|
||||||
handleChange = (value: RangePickerValue) => {
|
|
||||||
const { props } = this;
|
|
||||||
if (!('value' in props)) {
|
|
||||||
this.setState(({ showDate }) => ({
|
|
||||||
value,
|
|
||||||
showDate: getShowDateFromValue(value) || showDate,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
if (value[0] && value[1] && value[0].diff(value[1]) > 0) {
|
|
||||||
value[1] = undefined;
|
|
||||||
}
|
|
||||||
const [start, end] = value;
|
|
||||||
if (typeof props.onChange === 'function') {
|
|
||||||
props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOpenChange = (open: boolean) => {
|
|
||||||
if (!('open' in this.props)) {
|
|
||||||
this.setState({ open });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (open === false) {
|
|
||||||
this.clearHoverValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
const { onOpenChange } = this.props;
|
|
||||||
if (onOpenChange) {
|
|
||||||
onOpenChange(open);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleShowDateChange = (showDate: RangePickerValue) => this.setState({ showDate });
|
|
||||||
|
|
||||||
handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
|
|
||||||
|
|
||||||
handleRangeMouseLeave = () => {
|
|
||||||
if (this.state.open) {
|
|
||||||
this.clearHoverValue();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCalendarInputSelect = (value: RangePickerValue) => {
|
|
||||||
const [start] = value;
|
|
||||||
if (!start) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setState(({ showDate }) => ({
|
|
||||||
value,
|
|
||||||
showDate: getShowDateFromValue(value) || showDate,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
handleRangeClick = (value: RangePickerPresetRange) => {
|
|
||||||
if (typeof value === 'function') {
|
|
||||||
value = value();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setValue(value, true);
|
|
||||||
|
|
||||||
const { onOk, onOpenChange } = this.props;
|
|
||||||
if (onOk) {
|
|
||||||
onOk(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (onOpenChange) {
|
|
||||||
onOpenChange(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
focus() {
|
|
||||||
this.picker.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
blur() {
|
|
||||||
this.picker.blur();
|
|
||||||
}
|
|
||||||
|
|
||||||
renderFooter = () => {
|
|
||||||
const { ranges, renderExtraFooter } = this.props;
|
|
||||||
const { prefixCls, tagPrefixCls } = this;
|
|
||||||
if (!ranges && !renderExtraFooter) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const customFooter = renderExtraFooter ? (
|
|
||||||
<div className={`${prefixCls}-footer-extra`} key="extra">
|
|
||||||
{renderExtraFooter()}
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
const operations =
|
|
||||||
ranges &&
|
|
||||||
Object.keys(ranges).map(range => {
|
|
||||||
const value = ranges[range];
|
|
||||||
const hoverValue = typeof value === 'function' ? value.call(this) : value;
|
|
||||||
return (
|
|
||||||
<Tag
|
|
||||||
key={range}
|
|
||||||
prefixCls={tagPrefixCls}
|
|
||||||
color="blue"
|
|
||||||
onClick={() => this.handleRangeClick(value)}
|
|
||||||
onMouseEnter={() => this.setState({ hoverValue })}
|
|
||||||
onMouseLeave={this.handleRangeMouseLeave}
|
|
||||||
>
|
|
||||||
{range}
|
|
||||||
</Tag>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
const rangeNode =
|
|
||||||
operations && operations.length > 0 ? (
|
|
||||||
<div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
|
|
||||||
{operations}
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
return [rangeNode, customFooter];
|
|
||||||
};
|
|
||||||
|
|
||||||
renderRangePicker = ({ getPrefixCls }: ConfigConsumerProps) => {
|
|
||||||
const { state, props } = this;
|
|
||||||
const { value, showDate, hoverValue, open } = state;
|
|
||||||
const {
|
|
||||||
prefixCls: customizePrefixCls,
|
|
||||||
tagPrefixCls: customizeTagPrefixCls,
|
|
||||||
popupStyle,
|
|
||||||
style,
|
|
||||||
disabledDate,
|
|
||||||
disabledTime,
|
|
||||||
showTime,
|
|
||||||
showToday,
|
|
||||||
ranges,
|
|
||||||
onOk,
|
|
||||||
locale,
|
|
||||||
// @ts-ignore
|
|
||||||
localeCode,
|
|
||||||
format,
|
|
||||||
dateRender,
|
|
||||||
onCalendarChange,
|
|
||||||
suffixIcon,
|
|
||||||
separator,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
|
||||||
const tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
|
|
||||||
// To support old version react.
|
|
||||||
// Have to add prefixCls on the instance.
|
|
||||||
// https://github.com/facebook/react/issues/12397
|
|
||||||
this.prefixCls = prefixCls;
|
|
||||||
this.tagPrefixCls = tagPrefixCls;
|
|
||||||
|
|
||||||
fixLocale(value, localeCode);
|
|
||||||
fixLocale(showDate, localeCode);
|
|
||||||
|
|
||||||
warning(
|
|
||||||
!('onOK' in props),
|
|
||||||
'RangePicker',
|
|
||||||
'It should be `RangePicker[onOk]`, instead of `onOK`!',
|
|
||||||
);
|
|
||||||
|
|
||||||
const calendarClassName = classNames({
|
|
||||||
[`${prefixCls}-time`]: showTime,
|
|
||||||
[`${prefixCls}-range-with-ranges`]: ranges,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 需要选择时间时，点击 ok 时才触发 onChange
|
|
||||||
const pickerChangeHandler = {
|
|
||||||
onChange: this.handleChange,
|
|
||||||
};
|
|
||||||
let calendarProps: any = {
|
|
||||||
onOk: this.handleChange,
|
|
||||||
};
|
|
||||||
if (props.timePicker) {
|
|
||||||
pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
|
|
||||||
} else {
|
|
||||||
calendarProps = {};
|
|
||||||
}
|
|
||||||
if ('mode' in props) {
|
|
||||||
calendarProps.mode = props.mode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const startPlaceholder = Array.isArray(props.placeholder)
|
|
||||||
? props.placeholder[0]
|
|
||||||
: locale.lang.rangePlaceholder[0];
|
|
||||||
const endPlaceholder = Array.isArray(props.placeholder)
|
|
||||||
? props.placeholder[1]
|
|
||||||
: locale.lang.rangePlaceholder[1];
|
|
||||||
|
|
||||||
const calendar = (
|
|
||||||
<RangeCalendar
|
|
||||||
{...calendarProps}
|
|
||||||
seperator={separator}
|
|
||||||
onChange={onCalendarChange}
|
|
||||||
format={format}
|
|
||||||
prefixCls={prefixCls}
|
|
||||||
className={calendarClassName}
|
|
||||||
renderFooter={this.renderFooter}
|
|
||||||
timePicker={props.timePicker}
|
|
||||||
disabledDate={disabledDate}
|
|
||||||
disabledTime={disabledTime}
|
|
||||||
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
|
|
||||||
locale={locale.lang}
|
|
||||||
onOk={onOk}
|
|
||||||
dateRender={dateRender}
|
|
||||||
value={showDate}
|
|
||||||
onValueChange={this.handleShowDateChange}
|
|
||||||
hoverValue={hoverValue}
|
|
||||||
onHoverChange={this.handleHoverChange}
|
|
||||||
onPanelChange={props.onPanelChange}
|
|
||||||
showToday={showToday}
|
|
||||||
onInputSelect={this.handleCalendarInputSelect}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
// default width for showTime
|
|
||||||
const pickerStyle = {} as any;
|
|
||||||
if (props.showTime) {
|
|
||||||
pickerStyle.width = (style && style.width) || 350;
|
|
||||||
}
|
|
||||||
const [startValue, endValue] = value as RangePickerValue;
|
|
||||||
const clearIcon =
|
|
||||||
!props.disabled && props.allowClear && value && (startValue || endValue) ? (
|
|
||||||
<Icon
|
|
||||||
type="close-circle"
|
|
||||||
className={`${prefixCls}-picker-clear`}
|
|
||||||
onClick={this.clearSelection}
|
|
||||||
theme="filled"
|
|
||||||
/>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;
|
|
||||||
|
|
||||||
const input = ({ value: inputValue }: { value: any }) => {
|
|
||||||
const [start, end] = inputValue;
|
|
||||||
return (
|
|
||||||
<span className={props.pickerInputClass}>
|
|
||||||
<input
|
|
||||||
disabled={props.disabled}
|
|
||||||
readOnly
|
|
||||||
value={formatDate(start, props.format)}
|
|
||||||
placeholder={startPlaceholder}
|
|
||||||
className={`${prefixCls}-range-picker-input`}
|
|
||||||
tabIndex={-1}
|
|
||||||
/>
|
|
||||||
<span className={`${prefixCls}-range-picker-separator`}> {separator} </span>
|
|
||||||
<input
|
|
||||||
disabled={props.disabled}
|
|
||||||
readOnly
|
|
||||||
value={formatDate(end, props.format)}
|
|
||||||
placeholder={endPlaceholder}
|
|
||||||
className={`${prefixCls}-range-picker-input`}
|
|
||||||
tabIndex={-1}
|
|
||||||
/>
|
|
||||||
{clearIcon}
|
|
||||||
{inputIcon}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
ref={this.savePicker}
|
|
||||||
id={typeof props.id === 'number' ? props.id.toString() : props.id}
|
|
||||||
className={classNames(props.className, props.pickerClass)}
|
|
||||||
style={{ ...style, ...pickerStyle }}
|
|
||||||
tabIndex={props.disabled ? -1 : 0}
|
|
||||||
onFocus={props.onFocus}
|
|
||||||
onBlur={props.onBlur}
|
|
||||||
onMouseEnter={props.onMouseEnter}
|
|
||||||
onMouseLeave={props.onMouseLeave}
|
|
||||||
>
|
|
||||||
<RcDatePicker
|
|
||||||
{...props}
|
|
||||||
{...pickerChangeHandler}
|
|
||||||
calendar={calendar}
|
|
||||||
value={value}
|
|
||||||
open={open}
|
|
||||||
onOpenChange={this.handleOpenChange}
|
|
||||||
prefixCls={`${prefixCls}-picker-container`}
|
|
||||||
style={popupStyle}
|
|
||||||
>
|
|
||||||
{input}
|
|
||||||
</RcDatePicker>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return <ConfigConsumer>{this.renderRangePicker}</ConfigConsumer>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
polyfill(RangePicker);
|
|
||||||
|
|
||||||
export default RangePicker;
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
import React from 'react';
|
|
||||||
import Icon from '..';
|
|
||||||
import { ReactComponent as logo } from './logo.svg';
|
|
||||||
|
|
||||||
describe('Icon TypeScript test', () => {
|
|
||||||
it('empty test case placeholder to avoid jest error', () => {
|
|
||||||
// empty
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
<Icon component={logo} />;
|
|
||||||
@ -1,326 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as ReactDOM from 'react-dom';
|
|
||||||
import { polyfill } from 'react-lifecycles-compat';
|
|
||||||
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
|
|
||||||
import closest from 'dom-closest';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import shallowequal from 'shallowequal';
|
|
||||||
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';
|
|
||||||
import { generateValueMaps } from './util';
|
|
||||||
|
|
||||||
function stopPropagation(e: React.SyntheticEvent<any>) {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (e.nativeEvent.stopImmediatePropagation) {
|
|
||||||
e.nativeEvent.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<T>> {
|
|
||||||
static defaultProps = {
|
|
||||||
column: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
static getDerivedStateFromProps<T>(nextProps: FilterMenuProps<T>, prevState: FilterMenuState<T>) {
|
|
||||||
const { column } = nextProps;
|
|
||||||
const { prevProps } = prevState;
|
|
||||||
|
|
||||||
const newState: Partial<FilterMenuState<T>> = {
|
|
||||||
prevProps: nextProps,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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(prevProps.selectedKeys, nextProps.selectedKeys)
|
|
||||||
) {
|
|
||||||
newState.selectedKeys = nextProps.selectedKeys;
|
|
||||||
}
|
|
||||||
if (!shallowequal((prevProps.column || {}).filters, (nextProps.column || {}).filters)) {
|
|
||||||
newState.valueKeys = generateValueMaps(nextProps.column.filters);
|
|
||||||
}
|
|
||||||
if ('filterDropdownVisible' in column) {
|
|
||||||
newState.visible = column.filterDropdownVisible as boolean;
|
|
||||||
}
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
|
|
||||||
neverShown: boolean;
|
|
||||||
|
|
||||||
constructor(props: FilterMenuProps<T>) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
const visible =
|
|
||||||
'filterDropdownVisible' in props.column ? props.column.filterDropdownVisible : false;
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
selectedKeys: props.selectedKeys,
|
|
||||||
valueKeys: generateValueMaps(props.column.filters),
|
|
||||||
keyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
|
|
||||||
visible,
|
|
||||||
prevProps: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { column } = this.props;
|
|
||||||
this.setNeverShown(column);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
const { column } = this.props;
|
|
||||||
this.setNeverShown(column);
|
|
||||||
}
|
|
||||||
|
|
||||||
getDropdownVisible() {
|
|
||||||
return this.neverShown ? false : this.state.visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
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?: React.Key[] }) => {
|
|
||||||
this.setState({ selectedKeys: 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);
|
|
||||||
|
|
||||||
// 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.setState({}, this.confirmFilter);
|
|
||||||
};
|
|
||||||
|
|
||||||
onVisibleChange = (visible: boolean) => {
|
|
||||||
this.setVisible(visible);
|
|
||||||
const { column } = this.props;
|
|
||||||
// https://github.com/ant-design/ant-design/issues/17833
|
|
||||||
if (!visible && !(column.filterDropdown instanceof Function)) {
|
|
||||||
this.confirmFilter();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMenuItemClick = (info: { keyPath: React.Key[]; key: React.Key }) => {
|
|
||||||
const { selectedKeys } = this.state;
|
|
||||||
if (!info.keyPath || info.keyPath.length <= 1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { keyPathOfSelectedItem } = this.state;
|
|
||||||
if (selectedKeys && selectedKeys.indexOf(info.key) >= 0) {
|
|
||||||
// deselect SubMenu child
|
|
||||||
delete keyPathOfSelectedItem[info.key];
|
|
||||||
} else {
|
|
||||||
// select SubMenu child
|
|
||||||
keyPathOfSelectedItem[info.key] = info.keyPath;
|
|
||||||
}
|
|
||||||
this.setState({ keyPathOfSelectedItem });
|
|
||||||
};
|
|
||||||
|
|
||||||
hasSubMenu() {
|
|
||||||
const {
|
|
||||||
column: { filters = [] },
|
|
||||||
} = this.props;
|
|
||||||
return filters.some(item => !!(item.children && item.children.length > 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
confirmFilter() {
|
|
||||||
const { column, selectedKeys: propSelectedKeys, confirmFilter } = this.props;
|
|
||||||
const { selectedKeys, valueKeys } = this.state;
|
|
||||||
const { filterDropdown } = column;
|
|
||||||
|
|
||||||
if (!shallowequal(selectedKeys, propSelectedKeys)) {
|
|
||||||
confirmFilter(
|
|
||||||
column,
|
|
||||||
filterDropdown
|
|
||||||
? selectedKeys
|
|
||||||
: selectedKeys.map(key => valueKeys[key]).filter(key => key !== undefined),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMenus(items: ColumnFilterItem[]): React.ReactElement<any>[] {
|
|
||||||
const { dropdownPrefixCls, prefixCls } = this.props;
|
|
||||||
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 = classNames(`${prefixCls}-dropdown-submenu`, {
|
|
||||||
[`${dropdownPrefixCls}-submenu-contain-selected`]: containSelected,
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<SubMenu title={item.text} popupClassName={subMenuCls} key={item.value.toString()}>
|
|
||||||
{this.renderMenus(item.children)}
|
|
||||||
</SubMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return this.renderMenuItem(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
renderFilterIcon = () => {
|
|
||||||
const { column, locale, prefixCls, selectedKeys } = this.props;
|
|
||||||
const filtered = selectedKeys && selectedKeys.length > 0;
|
|
||||||
let filterIcon = column.filterIcon;
|
|
||||||
if (typeof filterIcon === 'function') {
|
|
||||||
filterIcon = filterIcon(filtered);
|
|
||||||
}
|
|
||||||
|
|
||||||
const dropdownIconClass = classNames({
|
|
||||||
[`${prefixCls}-selected`]: filtered,
|
|
||||||
[`${prefixCls}-open`]: this.getDropdownVisible(),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!filterIcon) {
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
title={locale.filterTitle}
|
|
||||||
type="filter"
|
|
||||||
theme="filled"
|
|
||||||
className={dropdownIconClass}
|
|
||||||
onClick={stopPropagation}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (React.isValidElement(filterIcon)) {
|
|
||||||
return React.cloneElement(filterIcon, {
|
|
||||||
title: filterIcon.props.title || locale.filterTitle,
|
|
||||||
className: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.props.className),
|
|
||||||
onClick: stopPropagation,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return <span className={classNames(`${prefixCls}-icon`, dropdownIconClass)}>{filterIcon}</span>;
|
|
||||||
};
|
|
||||||
|
|
||||||
renderMenuItem(item: ColumnFilterItem) {
|
|
||||||
const { column } = this.props;
|
|
||||||
const { selectedKeys } = this.state;
|
|
||||||
const multiple = 'filterMultiple' in column ? column.filterMultiple : true;
|
|
||||||
|
|
||||||
// We still need trade key as string since Menu render need string
|
|
||||||
const internalSelectedKeys = (selectedKeys || []).map(key => key.toString());
|
|
||||||
|
|
||||||
const input = multiple ? (
|
|
||||||
<Checkbox checked={internalSelectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
||||||
) : (
|
|
||||||
<Radio checked={internalSelectedKeys.indexOf(item.value.toString()) >= 0} />
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MenuItem key={item.value}>
|
|
||||||
{input}
|
|
||||||
<span>{item.text}</span>
|
|
||||||
</MenuItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedKeys: originSelectedKeys } = this.state;
|
|
||||||
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(),
|
|
||||||
});
|
|
||||||
let { filterDropdown } = column;
|
|
||||||
if (filterDropdown instanceof Function) {
|
|
||||||
filterDropdown = filterDropdown({
|
|
||||||
prefixCls: `${dropdownPrefixCls}-custom`,
|
|
||||||
setSelectedKeys: (selectedKeys: Array<any>) => this.setSelectedKeys({ selectedKeys }),
|
|
||||||
selectedKeys: originSelectedKeys,
|
|
||||||
confirm: this.handleConfirm,
|
|
||||||
clearFilters: this.handleClearFilters,
|
|
||||||
filters: column.filters,
|
|
||||||
visible: this.getDropdownVisible(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const menus = filterDropdown ? (
|
|
||||||
<FilterDropdownMenuWrapper className={`${prefixCls}-dropdown`}>
|
|
||||||
{filterDropdown}
|
|
||||||
</FilterDropdownMenuWrapper>
|
|
||||||
) : (
|
|
||||||
<FilterDropdownMenuWrapper className={`${prefixCls}-dropdown`}>
|
|
||||||
<Menu
|
|
||||||
multiple={multiple}
|
|
||||||
onClick={this.handleMenuItemClick}
|
|
||||||
prefixCls={`${dropdownPrefixCls}-menu`}
|
|
||||||
className={dropdownMenuClass}
|
|
||||||
onSelect={this.setSelectedKeys}
|
|
||||||
onDeselect={this.setSelectedKeys}
|
|
||||||
selectedKeys={originSelectedKeys && originSelectedKeys.map(val => val.toString())}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
>
|
|
||||||
{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']}
|
|
||||||
placement="bottomRight"
|
|
||||||
overlay={menus}
|
|
||||||
visible={this.getDropdownVisible()}
|
|
||||||
onVisibleChange={this.onVisibleChange}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
forceRender
|
|
||||||
>
|
|
||||||
{this.renderFilterIcon()}
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
polyfill(FilterMenu);
|
|
||||||
|
|
||||||
export default FilterMenu;
|
|
||||||
Loading…
Reference in New Issue
Block a user