mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +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