ant-design/components/cascader/index.tsx

636 lines
19 KiB
TypeScript
Raw Normal View History

import * as 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 KeyCode from 'rc-util/lib/KeyCode';
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
import {
CloseCircleFilled,
DownOutlined,
RightOutlined,
RedoOutlined,
LeftOutlined,
} from '@ant-design/icons';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import Input from '../input';
2018-12-26 16:01:00 +08:00
import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
2018-12-13 22:03:12 +08:00
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import warning from '../_util/warning';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
2015-12-29 11:46:13 +08:00
export interface CascaderOptionType {
value?: string;
label?: React.ReactNode;
2016-07-13 11:14:24 +08:00
disabled?: boolean;
isLeaf?: boolean;
loading?: boolean;
2016-07-13 11:14:24 +08:00
children?: Array<CascaderOptionType>;
[key: string]: any;
}
2018-07-03 19:54:33 +08:00
export interface FieldNamesType {
value?: string;
label?: string;
children?: string;
}
2018-07-03 19:54:33 +08:00
export interface FilledFieldNamesType {
value: string;
label: string;
children: string;
}
export type CascaderExpandTrigger = 'click' | 'hover';
export interface ShowSearchType {
2018-07-03 19:54:33 +08:00
filter?: (inputValue: string, path: CascaderOptionType[], names: FilledFieldNamesType) => boolean;
render?: (
inputValue: string,
path: CascaderOptionType[],
prefixCls: string | undefined,
2018-07-03 19:54:33 +08:00
names: FilledFieldNamesType,
) => React.ReactNode;
2018-12-07 20:02:01 +08:00
sort?: (
a: CascaderOptionType[],
b: CascaderOptionType[],
inputValue: string,
names: FilledFieldNamesType,
) => number;
matchInputWidth?: boolean;
limit?: number | false;
}
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
/** 默认的选中项 */
2017-11-21 21:52:40 +08:00
defaultValue?: string[];
2016-07-13 11:14:24 +08:00
/** 指定选中项 */
2017-11-21 21:52:40 +08:00
value?: string[];
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;
2019-08-05 18:38:10 +08:00
/** 输入框占位文本 */
2016-07-13 11:14:24 +08:00
placeholder?: string;
/** 输入框大小,可选 `large` `default` `small` */
size?: SizeType;
2019-08-05 18:38:10 +08:00
/** 禁用 */
2016-07-13 11:14:24 +08:00
disabled?: boolean;
2019-08-05 18:38:10 +08:00
/** 是否支持清除 */
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;
2019-04-28 11:47:22 +08:00
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
2017-11-21 21:52:40 +08:00
popupVisible?: boolean;
/** use this after antd@3.7.0 */
2018-07-03 19:54:33 +08:00
fieldNames?: FieldNamesType;
2018-09-16 19:36:19 +08:00
suffixIcon?: React.ReactNode;
}
2017-11-21 21:52:40 +08:00
export interface CascaderState {
inputFocused: boolean;
inputValue: string;
value: string[];
popupVisible: boolean | undefined;
flattenOptions: CascaderOptionType[][] | undefined;
prevProps: CascaderProps;
2017-11-21 21:52:40 +08:00
}
2018-12-13 22:03:12 +08:00
interface CascaderLocale {
placeholder?: string;
}
// We limit the filtered item count by default
const defaultLimit = 50;
2017-11-21 21:52:40 +08:00
function highlightKeyword(str: string, keyword: string, prefixCls: string | undefined) {
2018-12-07 20:02:01 +08:00
return str.split(keyword).map((node: string, index: number) =>
index === 0
? node
: [
<span className={`${prefixCls}-menu-item-keyword`} key="seperator">
{keyword}
</span>,
node,
],
);
}
2018-12-07 20:02:01 +08:00
function defaultFilterOption(
inputValue: string,
path: CascaderOptionType[],
names: FilledFieldNamesType,
) {
return path.some(option => (option[names.label] as string).indexOf(inputValue) > -1);
}
function defaultRenderFilteredOption(
inputValue: string,
path: CascaderOptionType[],
prefixCls: string | undefined,
2018-07-03 19:54:33 +08:00
names: FilledFieldNamesType,
) {
return path.map((option, index) => {
const label = option[names.label];
2018-12-07 20:02:01 +08:00
const node =
(label as string).indexOf(inputValue) > -1
? highlightKeyword(label as string, inputValue, prefixCls)
: label;
return index === 0 ? node : [' / ', node];
});
}
function defaultSortFilteredOption(
2018-12-07 20:02:01 +08:00
a: CascaderOptionType[],
b: CascaderOptionType[],
inputValue: string,
names: FilledFieldNamesType,
) {
2017-11-21 21:52:40 +08:00
function callback(elem: CascaderOptionType) {
return (elem[names.label] as string).indexOf(inputValue) > -1;
}
return a.findIndex(callback) - b.findIndex(callback);
}
function getFieldNames({ fieldNames }: CascaderProps) {
return fieldNames;
}
function getFilledFieldNames(props: CascaderProps) {
const fieldNames = getFieldNames(props) || {};
2018-07-03 19:54:33 +08:00
const names: FilledFieldNamesType = {
children: fieldNames.children || 'children',
label: fieldNames.label || 'label',
value: fieldNames.value || 'value',
};
return names;
}
function flattenTree(
options: CascaderOptionType[],
props: CascaderProps,
ancestor: CascaderOptionType[] = [],
) {
const names: FilledFieldNamesType = getFilledFieldNames(props);
let flattenOptions: CascaderOptionType[][] = [];
const childrenName = names.children;
options.forEach(option => {
const path = ancestor.concat(option);
if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
flattenOptions.push(path);
}
if (option[childrenName]) {
flattenOptions = flattenOptions.concat(flattenTree(option[childrenName], props, path));
}
});
return flattenOptions;
}
2017-11-21 21:52:40 +08:00
const defaultDisplayRender = (label: string[]) => label.join(' / ');
2016-10-24 12:04:26 +08:00
function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNamesType = {}) {
(list || []).forEach(item => {
const valueFieldName = fieldNames.value || 'value';
warning(valueFieldName in item, 'Cascader', 'Not found `value` in `options`.');
warningValueNotExist(item[fieldNames.children || 'children'], fieldNames);
});
}
class Cascader extends React.Component<CascaderProps, CascaderState> {
static defaultProps = {
transitionName: 'slide-up',
options: [],
disabled: false,
allowClear: true,
2016-07-13 11:14:24 +08:00
};
static getDerivedStateFromProps(nextProps: CascaderProps, { prevProps }: CascaderState) {
const newState: Partial<CascaderState> = {
prevProps: nextProps,
};
if ('value' in nextProps) {
newState.value = nextProps.value || [];
}
if ('popupVisible' in nextProps) {
newState.popupVisible = nextProps.popupVisible;
}
if (nextProps.showSearch && prevProps.options !== nextProps.options) {
newState.flattenOptions = flattenTree(nextProps.options, nextProps);
}
if (process.env.NODE_ENV !== 'production' && nextProps.options) {
warningValueNotExist(nextProps.options, getFieldNames(nextProps));
}
return newState;
}
2018-12-26 16:01:00 +08:00
cachedOptions: CascaderOptionType[] = [];
2017-09-17 15:48:44 +08:00
private input: Input;
2017-11-21 21:52:40 +08:00
constructor(props: CascaderProps) {
2015-12-29 11:46:13 +08:00
super(props);
this.state = {
value: props.value || props.defaultValue || [],
inputValue: '',
inputFocused: false,
popupVisible: props.popupVisible,
flattenOptions: props.showSearch ? flattenTree(props.options, props) : undefined,
prevProps: props,
2015-12-29 11:46:13 +08:00
};
}
2019-08-05 18:38:10 +08:00
setValue = (value: string[], selectedOptions: CascaderOptionType[] = []) => {
if (!('value' in this.props)) {
this.setState({ value });
}
const { onChange } = this.props;
if (onChange) {
onChange(value, selectedOptions);
}
};
getLabel() {
const { options, displayRender = defaultDisplayRender as Function } = this.props;
const names = getFilledFieldNames(this.props);
const { value } = this.state;
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
const selectedOptions: CascaderOptionType[] = arrayTreeFilter(
options,
(o: CascaderOptionType, level: number) => o[names.value] === unwrappedValue[level],
{ childrenKeyName: names.children },
);
const label = selectedOptions.map(o => o[names.label]);
return displayRender(label, selectedOptions);
}
saveInput = (node: Input) => {
this.input = node;
};
handleChange = (value: any, selectedOptions: CascaderOptionType[]) => {
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);
2018-12-07 20:02:01 +08:00
};
2017-11-21 21:52:40 +08:00
handlePopupVisibleChange = (popupVisible: boolean) => {
if (!('popupVisible' in this.props)) {
this.setState(state => ({
popupVisible,
inputFocused: popupVisible,
inputValue: popupVisible ? state.inputValue : '',
}));
}
2016-10-24 12:04:26 +08:00
2019-08-05 18:38:10 +08:00
const { onPopupVisibleChange } = this.props;
2016-10-24 12:04:26 +08:00
if (onPopupVisibleChange) {
onPopupVisibleChange(popupVisible);
}
2018-12-07 20:02:01 +08:00
};
handleInputBlur = () => {
this.setState({
inputFocused: false,
});
2018-12-07 20:02:01 +08:00
};
2017-11-21 21:52:40 +08:00
handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
const { inputFocused, popupVisible } = this.state;
// Prevent `Trigger` behaviour.
if (inputFocused || popupVisible) {
e.stopPropagation();
2018-05-25 19:31:34 +08:00
if (e.nativeEvent.stopImmediatePropagation) {
e.nativeEvent.stopImmediatePropagation();
}
}
2018-12-07 20:02:01 +08:00
};
2017-11-21 21:52:40 +08:00
handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
// SPACE => https://github.com/ant-design/ant-design/issues/16871
if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
}
2018-12-07 20:02:01 +08:00
};
2017-11-21 21:52:40 +08:00
handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value;
this.setState({ inputValue });
2018-12-07 20:02:01 +08:00
};
2017-11-21 21:52:40 +08:00
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
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.handlePopupVisibleChange(false);
} else {
this.setState({ inputValue: '' });
}
2018-12-07 20:02:01 +08:00
};
2018-12-26 16:01:00 +08:00
generateFilteredOptions(prefixCls: string | undefined, renderEmpty: RenderEmptyHandler) {
const { showSearch, notFoundContent } = this.props;
const names: FilledFieldNamesType = getFilledFieldNames(this.props);
const {
filter = defaultFilterOption,
render = defaultRenderFilteredOption,
sort = defaultSortFilteredOption,
limit = defaultLimit,
} = showSearch as ShowSearchType;
const { flattenOptions = [], inputValue } = this.state;
// Limit the filter if needed
let filtered: Array<CascaderOptionType[]>;
if (limit > 0) {
filtered = [];
let matchCount = 0;
// Perf optimization to filter items only below the limit
2018-12-07 20:02:01 +08:00
flattenOptions.some(path => {
const match = filter(this.state.inputValue, path, names);
if (match) {
filtered.push(path);
matchCount += 1;
}
return matchCount >= limit;
});
} else {
warning(
typeof limit !== 'number',
'Cascader',
"'limit' of showSearch should be positive number or false.",
);
2018-12-07 20:02:01 +08:00
filtered = flattenOptions.filter(path => filter(this.state.inputValue, path, names));
}
filtered.sort((a, b) => sort(a, b, inputValue, names));
if (filtered.length > 0) {
return filtered.map((path: CascaderOptionType[]) => {
return {
__IS_FILTERED_OPTION: true,
path,
[names.value]: path.map((o: CascaderOptionType) => o[names.value]),
[names.label]: render(inputValue, path, prefixCls, names),
disabled: path.some((o: CascaderOptionType) => !!o.disabled),
isEmptyNode: true,
2017-11-21 21:52:40 +08:00
} as CascaderOptionType;
});
}
2018-12-07 20:02:01 +08:00
return [
2018-12-26 16:01:00 +08:00
{
[names.value]: 'ANT_CASCADER_NOT_FOUND',
[names.label]: notFoundContent || renderEmpty('Cascader'),
2018-12-26 16:01:00 +08:00
disabled: true,
isEmptyNode: true,
2018-12-26 16:01:00 +08:00
},
2018-12-07 20:02:01 +08:00
];
2015-12-29 21:18:27 +08:00
}
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
getPopupPlacement(direction: string = 'ltr') {
const { popupPlacement } = this.props;
if (popupPlacement !== undefined) {
return popupPlacement;
}
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
}
2018-12-13 22:03:12 +08:00
renderCascader = (
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
{
getPopupContainer: getContextPopupContainer,
getPrefixCls,
renderEmpty,
direction,
}: ConfigConsumerProps,
2018-12-13 22:03:12 +08:00
locale: CascaderLocale,
) => (
<SizeContext.Consumer>
{size => {
const { props, state } = this;
const {
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
children,
placeholder = locale.placeholder || 'Please select',
size: customizeSize,
disabled,
className,
style,
allowClear,
showSearch = false,
suffixIcon,
notFoundContent,
popupClassName,
...otherProps
} = props;
const mergedSize = customizeSize || size;
const { value, inputFocused } = state;
const isRtlLayout = direction === 'rtl';
const prefixCls = getPrefixCls('cascader', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const sizeCls = classNames({
[`${inputPrefixCls}-lg`]: mergedSize === 'large',
[`${inputPrefixCls}-sm`]: mergedSize === 'small',
});
const clearIcon =
(allowClear && !disabled && value.length > 0) || state.inputValue ? (
<CloseCircleFilled
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
) : null;
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: state.popupVisible,
});
const pickerCls = classNames(className, `${prefixCls}-picker`, {
[`${prefixCls}-picker-rtl`]: isRtlLayout,
[`${prefixCls}-picker-with-value`]: state.inputValue,
[`${prefixCls}-picker-disabled`]: disabled,
[`${prefixCls}-picker-${mergedSize}`]: !!mergedSize,
[`${prefixCls}-picker-show-search`]: !!showSearch,
[`${prefixCls}-picker-focused`]: inputFocused,
});
// 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',
'popupVisible',
'getPopupContainer',
'loadData',
'popupClassName',
'filterOption',
'renderFilteredOption',
'sortFilteredOption',
'notFoundContent',
'fieldNames',
]);
let { options } = props;
const names: FilledFieldNamesType = getFilledFieldNames(this.props);
if (options && options.length > 0) {
if (state.inputValue) {
options = this.generateFilteredOptions(prefixCls, renderEmpty);
}
} else {
options = [
{
[names.label]: notFoundContent || renderEmpty('Cascader'),
[names.value]: 'ANT_CASCADER_NOT_FOUND',
disabled: true,
},
];
}
// Dropdown menu should keep previous status until it is fully closed.
if (!state.popupVisible) {
options = this.cachedOptions;
} else {
this.cachedOptions = options;
}
const dropdownMenuColumnStyle: { width?: number; height?: string } = {};
const isNotFound = (options || []).length === 1 && options[0].isEmptyNode;
if (isNotFound) {
dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
}
// The default value of `matchInputWidth` is `true`
const resultListMatchInputWidth = (showSearch as ShowSearchType).matchInputWidth !== false;
if (resultListMatchInputWidth && (state.inputValue || isNotFound) && this.input) {
dropdownMenuColumnStyle.width = this.input.input.offsetWidth;
}
2018-08-23 22:15:25 +08:00
const inputIcon = (suffixIcon &&
(React.isValidElement<{ className?: string }>(suffixIcon) ? (
React.cloneElement(suffixIcon, {
className: classNames({
[suffixIcon.props.className!]: suffixIcon.props.className,
[`${prefixCls}-picker-arrow`]: true,
}),
})
) : (
<span className={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>
))) || <DownOutlined className={arrowCls} />;
const input = children || (
<span style={style} className={pickerCls}>
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
<Input
{...inputProps}
tabIndex="-1"
ref={this.saveInput}
prefixCls={inputPrefixCls}
placeholder={value && value.length > 0 ? undefined : placeholder}
className={`${prefixCls}-input ${sizeCls}`}
value={state.inputValue}
disabled={disabled}
readOnly={!showSearch}
autoComplete={inputProps.autoComplete || 'off'}
onClick={showSearch ? this.handleInputClick : undefined}
onBlur={showSearch ? this.handleInputBlur : undefined}
onKeyDown={this.handleKeyDown}
onChange={showSearch ? this.handleInputChange : undefined}
/>
{clearIcon}
{inputIcon}
</span>
);
let expandIcon = <RightOutlined />;
if (isRtlLayout) {
expandIcon = <LeftOutlined />;
}
2018-08-13 11:44:25 +08:00
const loadingIcon = (
<span className={`${prefixCls}-menu-item-loading-icon`}>
<RedoOutlined spin />
</span>
);
const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon']);
const rcCascaderRtlPopupClassName = classNames(popupClassName, {
[`${prefixCls}-menu-${direction}`]: direction === 'rtl',
});
return (
<RcCascader
{...rest}
prefixCls={prefixCls}
getPopupContainer={getPopupContainer}
options={options}
value={value}
popupVisible={state.popupVisible}
onPopupVisibleChange={this.handlePopupVisibleChange}
onChange={this.handleChange}
dropdownMenuColumnStyle={dropdownMenuColumnStyle}
expandIcon={expandIcon}
loadingIcon={loadingIcon}
popupClassName={rcCascaderRtlPopupClassName}
popupPlacement={this.getPopupPlacement(direction)}
>
{input}
</RcCascader>
);
}}
</SizeContext.Consumer>
);
2018-11-26 12:06:42 +08:00
render() {
2018-12-13 22:03:12 +08:00
return (
<ConfigConsumer>
{(configArgument: ConfigConsumerProps) => (
<LocaleReceiver>{locale => this.renderCascader(configArgument, locale)}</LocaleReceiver>
)}
</ConfigConsumer>
);
2018-11-26 12:06:42 +08:00
}
2015-12-29 11:46:13 +08:00
}
export default Cascader;