ant-design/components/cascader/index.tsx

360 lines
11 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
import RcCascader from 'rc-cascader';
2015-12-29 11:46:13 +08:00
import arrayTreeFilter from 'array-tree-filter';
2015-12-29 18:31:48 +08:00
import classNames from 'classnames';
import omit from 'omit.js';
import Input from '../input';
import Icon from '../icon';
2015-12-29 11:46:13 +08:00
export interface CascaderOptionType {
2016-07-13 11:14:24 +08:00
value: string;
label: string;
disabled?: boolean;
children?: Array<CascaderOptionType>;
}
2016-07-07 20:25:03 +08:00
export type CascaderExpandTrigger = 'click' | 'hover'
export interface ShowSearchType {
filter?: (inputValue: string, path: CascaderOptionType[]) => boolean;
render?: (inputValue: string, path: CascaderOptionType[], prefixCls: string) => React.ReactNode;
sort?: (a: CascaderOptionType[], b: CascaderOptionType[], inputValue: string) => number;
matchInputWidth?: boolean;
}
2016-07-07 20:25:03 +08:00
export interface CascaderProps {
2016-07-13 11:14:24 +08:00
/** 可选项数据源 */
options: CascaderOptionType[];
2016-07-13 11:14:24 +08:00
/** 默认的选中项 */
defaultValue?: CascaderOptionType[];
2016-07-13 11:14:24 +08:00
/** 指定选中项 */
value?: CascaderOptionType[];
2016-07-13 11:14:24 +08:00
/** 选择完成后的回调 */
onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
2016-07-13 11:14:24 +08:00
/** 选择后展示的渲染函数 */
displayRender?: (label: string[], selectedOptions?: CascaderOptionType[]) => React.ReactNode;
2016-07-13 11:14:24 +08:00
/** 自定义样式 */
style?: React.CSSProperties;
/** 自定义类名 */
className?: string;
/** 自定义浮层类名 */
popupClassName?: string;
/** 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` */
2016-07-13 11:14:24 +08:00
popupPlacement?: string;
/** 输入框占位文本*/
2016-07-13 11:14:24 +08:00
placeholder?: string;
/** 输入框大小,可选 `large` `default` `small` */
2016-07-13 11:14:24 +08:00
size?: string;
/** 禁用*/
2016-07-13 11:14:24 +08:00
disabled?: boolean;
/** 是否支持清除*/
2016-07-13 11:14:24 +08:00
allowClear?: boolean;
showSearch?: boolean | ShowSearchType;
notFoundContent?: React.ReactNode;
loadData?: (selectedOptions?: CascaderOptionType[]) => void;
/** 次级菜单的展开方式,可选 'click' 和 'hover' */
2016-07-13 11:14:24 +08:00
expandTrigger?: CascaderExpandTrigger;
/** 当此项为 true 时,点选每级菜单选项值都会发生变化 */
2016-07-13 11:14:24 +08:00
changeOnSelect?: boolean;
/** 浮层可见变化时回调 */
2016-07-13 11:14:24 +08:00
onPopupVisibleChange?: (popupVisible: boolean) => void;
prefixCls?: string;
inputPrefixCls?: string;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
}
function highlightKeyword(str: string, keyword: string, prefixCls: string) {
return str.split(keyword)
.map((node: string, index: number) => index === 0 ? node : [
<span className={`${prefixCls}-menu-item-keyword`} key="seperator">{keyword}</span>,
node,
]);
}
function defaultFilterOption(inputValue, path) {
return path.some(option => option.label.indexOf(inputValue) > -1);
}
function defaultRenderFilteredOption(inputValue, path, prefixCls) {
return path.map(({ label }, index) => {
const node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue, prefixCls) : label;
return index === 0 ? node : [' / ', node];
});
}
function defaultSortFilteredOption(a, b, inputValue) {
function callback(elem) {
return elem.label.indexOf(inputValue) > -1;
}
return a.findIndex(callback) - b.findIndex(callback);
}
2016-10-24 12:04:26 +08:00
const defaultDisplayRender = label => label.join(' / ');
export default class Cascader extends React.Component<CascaderProps, any> {
static defaultProps = {
prefixCls: 'ant-cascader',
inputPrefixCls: 'ant-input',
2016-04-01 13:51:26 +08:00
placeholder: 'Please select',
transitionName: 'slide-up',
popupPlacement: 'bottomLeft',
options: [],
disabled: false,
allowClear: true,
notFoundContent: 'Not Found',
2016-07-13 11:14:24 +08:00
};
cachedOptions: CascaderOptionType[];
refs: {
[key: string]: any;
input: {
refs: { input: HTMLElement }
};
};
2015-12-29 11:46:13 +08:00
constructor(props) {
super(props);
this.state = {
value: props.value || props.defaultValue || [],
inputValue: '',
inputFocused: false,
2015-12-29 21:18:27 +08:00
popupVisible: false,
flattenOptions: props.showSearch && this.flattenTree(props.options, props.changeOnSelect),
2015-12-29 11:46:13 +08:00
};
}
2015-12-29 21:18:27 +08:00
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
2016-01-06 11:45:47 +08:00
this.setState({ value: nextProps.value || [] });
2015-12-29 21:18:27 +08:00
}
if (nextProps.showSearch && this.props.options !== nextProps.options) {
this.setState({ flattenOptions: this.flattenTree(nextProps.options, nextProps.changeOnSelect) });
}
2015-12-29 21:18:27 +08:00
}
handleChange = (value, selectedOptions) => {
this.setState({ inputValue: '' });
if (selectedOptions[0].__IS_FILTERED_OPTION) {
const unwrappedValue = value[0];
const unwrappedSelectedOptions = selectedOptions[0].path;
this.setValue(unwrappedValue, unwrappedSelectedOptions);
return;
}
this.setValue(value, selectedOptions);
2015-12-29 21:18:27 +08:00
}
handlePopupVisibleChange = (popupVisible) => {
this.setState({
popupVisible,
inputFocused: popupVisible,
inputValue: popupVisible ? this.state.inputValue : '',
});
2016-10-24 12:04:26 +08:00
const onPopupVisibleChange = this.props.onPopupVisibleChange;
if (onPopupVisibleChange) {
onPopupVisibleChange(popupVisible);
}
2015-12-29 21:18:27 +08:00
}
handleInputBlur = () => {
this.setState({
inputFocused: false,
});
}
handleInputClick = (e) => {
const { inputFocused, popupVisible } = this.state;
// Prevent `Trigger` behaviour.
if (inputFocused || popupVisible) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}
}
handleInputChange = (e) => {
const inputValue = e.target.value;
this.setState({ inputValue });
}
setValue = (value, selectedOptions = []) => {
2015-12-29 21:18:27 +08:00
if (!('value' in this.props)) {
this.setState({ value });
}
2016-10-24 12:04:26 +08:00
const onChange = this.props.onChange;
if (onChange) {
onChange(value, selectedOptions);
}
2015-12-29 11:46:13 +08:00
}
2015-12-29 11:46:13 +08:00
getLabel() {
2016-10-24 12:04:26 +08:00
const { options, displayRender = defaultDisplayRender as Function } = this.props;
const value = this.state.value;
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
const selectedOptions = arrayTreeFilter(options, (o, level) => o.value === unwrappedValue[level]);
const label = selectedOptions.map(o => o.label);
return displayRender(label, selectedOptions);
2015-12-29 11:46:13 +08:00
}
clearSelection = (e) => {
2015-12-29 21:18:27 +08:00
e.preventDefault();
2015-12-29 22:34:23 +08:00
e.stopPropagation();
if (!this.state.inputValue) {
this.setValue([]);
this.setState({ popupVisible: false });
} else {
this.setState({ inputValue: '' });
}
}
flattenTree(options, changeOnSelect, ancestor = []) {
2016-10-24 12:04:26 +08:00
let flattenOptions: any = [];
options.forEach((option) => {
const path = ancestor.concat(option);
if (changeOnSelect || !option.children) {
flattenOptions.push(path);
}
if (option.children) {
flattenOptions = flattenOptions.concat(this.flattenTree(option.children, changeOnSelect, path));
}
});
return flattenOptions;
}
generateFilteredOptions(prefixCls) {
const { showSearch, notFoundContent } = this.props;
const {
filter = defaultFilterOption,
render = defaultRenderFilteredOption,
sort = defaultSortFilteredOption,
} = showSearch as ShowSearchType;
const { flattenOptions, inputValue } = this.state;
const filtered = flattenOptions.filter((path) => filter(this.state.inputValue, path))
.sort((a, b) => sort(a, b, inputValue));
if (filtered.length > 0) {
return filtered.map((path) => {
return {
__IS_FILTERED_OPTION: true,
path,
label: render(inputValue, path, prefixCls),
value: path.map(o => o.value),
};
});
}
return [{ label: notFoundContent, value: 'ANT_CASCADER_NOT_FOUND', disabled: true }];
2015-12-29 21:18:27 +08:00
}
2015-12-29 11:46:13 +08:00
render() {
const { props, state } = this;
2016-12-19 15:19:15 +08:00
const {
prefixCls, inputPrefixCls, children, placeholder, size, disabled,
className, style, allowClear, showSearch = false, ...otherProps,
} = props;
const value = state.value;
2016-07-07 15:13:01 +08:00
2015-12-29 18:31:48 +08:00
const sizeCls = classNames({
2016-09-14 16:59:45 +08:00
[`${inputPrefixCls}-lg`]: size === 'large',
[`${inputPrefixCls}-sm`]: size === 'small',
2015-12-29 18:31:48 +08:00
});
const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ?
<Icon
type="cross-circle"
2015-12-29 21:18:27 +08:00
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/> : null;
2015-12-29 22:34:23 +08:00
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: state.popupVisible,
2015-12-29 22:34:23 +08:00
});
const pickerCls = classNames(className, {
2016-01-05 11:31:22 +08:00
[`${prefixCls}-picker`]: true,
[`${prefixCls}-picker-with-value`]: state.inputValue,
2016-01-05 11:31:22 +08:00
[`${prefixCls}-picker-disabled`]: disabled,
});
2016-03-03 14:57:26 +08:00
// Fix bug of https://github.com/facebook/react/pull/5004
// and https://fb.me/react-unknown-prop
const inputProps = omit(otherProps, [
'onChange',
'options',
'popupPlacement',
'transitionName',
'displayRender',
'onPopupVisibleChange',
'changeOnSelect',
'expandTrigger',
2016-07-16 15:50:27 +08:00
'popupVisible',
'getPopupContainer',
'loadData',
'popupClassName',
'filterOption',
'renderFilteredOption',
'sortFilteredOption',
'notFoundContent',
]);
2016-03-03 14:57:26 +08:00
let options = props.options;
if (state.inputValue) {
options = this.generateFilteredOptions(prefixCls);
}
// Dropdown menu should keep previous status until it is fully closed.
if (!state.popupVisible) {
options = this.cachedOptions;
} else {
this.cachedOptions = options;
}
2016-10-24 12:04:26 +08:00
const dropdownMenuColumnStyle: { width?: number, height?: string } = {};
const isNotFound = (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND';
if (isNotFound) {
dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
}
// The default value of `matchInputWidth` is `true`
2016-12-19 15:19:15 +08:00
const resultListMatchInputWidth = (showSearch as ShowSearchType).matchInputWidth === false ? false : true;
if (resultListMatchInputWidth && state.inputValue && this.refs.input) {
dropdownMenuColumnStyle.width = this.refs.input.refs.input.offsetWidth;
}
const input = children || (
<span
style={style}
className={pickerCls}
>
<Input
{...inputProps}
ref="input"
2016-12-19 15:19:15 +08:00
placeholder={value && value.length > 0 ? undefined : placeholder}
className={`${prefixCls}-input ${sizeCls}`}
value={state.inputValue}
disabled={disabled}
readOnly={!showSearch}
autoComplete="off"
onClick={showSearch ? this.handleInputClick : undefined}
onBlur={showSearch ? this.handleInputBlur : undefined}
onChange={showSearch ? this.handleInputChange : undefined}
/>
<span className={`${prefixCls}-picker-label`}>
{this.getLabel()}
</span>
{clearIcon}
<Icon type="down" className={arrowCls} />
</span>
);
2015-12-29 11:46:13 +08:00
return (
2016-10-18 18:10:41 +08:00
<RcCascader
{...props}
options={options}
value={value}
popupVisible={state.popupVisible}
2015-12-29 21:18:27 +08:00
onPopupVisibleChange={this.handlePopupVisibleChange}
onChange={this.handleChange}
dropdownMenuColumnStyle={dropdownMenuColumnStyle}
>
{input}
</RcCascader>
2015-12-29 11:46:13 +08:00
);
}
}