2021-06-26 01:35:40 +00:00
|
|
|
|
import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
|
|
|
|
|
import { inject, provide, defineComponent } from 'vue';
|
2020-10-14 09:57:38 +00:00
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
import VcCascader from '../vc-cascader';
|
|
|
|
|
import arrayTreeFilter from 'array-tree-filter';
|
2020-08-31 08:53:19 +00:00
|
|
|
|
import classNames from '../_util/classNames';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
import KeyCode from '../_util/KeyCode';
|
|
|
|
|
import Input from '../input';
|
2020-03-28 07:28:06 +00:00
|
|
|
|
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
|
|
|
|
import DownOutlined from '@ant-design/icons-vue/DownOutlined';
|
|
|
|
|
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
|
|
|
|
|
import RedoOutlined from '@ant-design/icons-vue/RedoOutlined';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
import {
|
|
|
|
|
hasProp,
|
|
|
|
|
getOptionProps,
|
|
|
|
|
isValidElement,
|
2020-07-08 10:37:44 +00:00
|
|
|
|
getComponent,
|
|
|
|
|
splitAttrs,
|
|
|
|
|
findDOMNode,
|
2020-07-08 14:28:09 +00:00
|
|
|
|
getSlot,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
} from '../_util/props-util';
|
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
|
import { cloneElement } from '../_util/vnode';
|
|
|
|
|
import warning from '../_util/warning';
|
2020-09-30 02:47:18 +00:00
|
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2021-06-26 01:35:40 +00:00
|
|
|
|
import type { VueNode } from '../_util/type';
|
|
|
|
|
import { tuple, withInstall } from '../_util/type';
|
|
|
|
|
import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
|
2021-09-25 08:51:32 +00:00
|
|
|
|
import { useInjectFormItemContext } from '../form/FormItemContext';
|
|
|
|
|
import omit from '../_util/omit';
|
2020-10-13 15:12:07 +00:00
|
|
|
|
|
|
|
|
|
export interface CascaderOptionType {
|
|
|
|
|
value?: string | number;
|
|
|
|
|
label?: VueNode;
|
|
|
|
|
disabled?: boolean;
|
|
|
|
|
isLeaf?: boolean;
|
|
|
|
|
loading?: boolean;
|
2020-10-14 09:57:38 +00:00
|
|
|
|
children?: CascaderOptionType[];
|
2020-10-13 15:12:07 +00:00
|
|
|
|
[key: string]: any;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface FieldNamesType {
|
|
|
|
|
value?: string;
|
|
|
|
|
label?: string;
|
|
|
|
|
children?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface FilledFieldNamesType {
|
|
|
|
|
value: string;
|
|
|
|
|
label: string;
|
|
|
|
|
children: string;
|
|
|
|
|
}
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2020-10-13 15:12:07 +00:00
|
|
|
|
// const CascaderOptionType = PropTypes.shape({
|
|
|
|
|
// value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
|
|
|
// label: PropTypes.any,
|
|
|
|
|
// disabled: PropTypes.looseBool,
|
|
|
|
|
// children: PropTypes.array,
|
|
|
|
|
// key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
|
|
|
// }).loose;
|
|
|
|
|
|
|
|
|
|
// const FieldNamesType = PropTypes.shape({
|
|
|
|
|
// value: PropTypes.string.isRequired,
|
|
|
|
|
// label: PropTypes.string.isRequired,
|
|
|
|
|
// children: PropTypes.string,
|
|
|
|
|
// }).loose;
|
|
|
|
|
|
|
|
|
|
export interface ShowSearchType {
|
|
|
|
|
filter?: (inputValue: string, path: CascaderOptionType[], names: FilledFieldNamesType) => boolean;
|
|
|
|
|
render?: (
|
|
|
|
|
inputValue: string,
|
|
|
|
|
path: CascaderOptionType[],
|
|
|
|
|
prefixCls: string | undefined,
|
|
|
|
|
names: FilledFieldNamesType,
|
|
|
|
|
) => VueNode;
|
|
|
|
|
sort?: (
|
|
|
|
|
a: CascaderOptionType[],
|
|
|
|
|
b: CascaderOptionType[],
|
|
|
|
|
inputValue: string,
|
|
|
|
|
names: FilledFieldNamesType,
|
|
|
|
|
) => number;
|
|
|
|
|
matchInputWidth?: boolean;
|
|
|
|
|
limit?: number | false;
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-10 14:26:11 +00:00
|
|
|
|
export interface EmptyFilteredOptionsType {
|
|
|
|
|
disabled: boolean;
|
|
|
|
|
[key: string]: any;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface FilteredOptionsType extends EmptyFilteredOptionsType {
|
|
|
|
|
__IS_FILTERED_OPTION: boolean;
|
|
|
|
|
path: CascaderOptionType[];
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-13 15:12:07 +00:00
|
|
|
|
// const ShowSearchType = PropTypes.shape({
|
|
|
|
|
// filter: PropTypes.func,
|
|
|
|
|
// render: PropTypes.func,
|
|
|
|
|
// sort: PropTypes.func,
|
|
|
|
|
// matchInputWidth: PropTypes.looseBool,
|
|
|
|
|
// limit: withUndefined(PropTypes.oneOfType([Boolean, Number])),
|
|
|
|
|
// }).loose;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
function noop() {}
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2021-06-23 13:47:53 +00:00
|
|
|
|
const cascaderProps = {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 可选项数据源 */
|
2020-10-14 09:57:38 +00:00
|
|
|
|
options: { type: Array as PropType<CascaderOptionType[]>, default: [] },
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 默认的选中项 */
|
2019-03-17 06:42:15 +00:00
|
|
|
|
defaultValue: PropTypes.array,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 指定选中项 */
|
2019-03-17 06:42:15 +00:00
|
|
|
|
value: PropTypes.array,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 选择完成后的回调 */
|
|
|
|
|
// onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
|
|
|
|
|
/** 选择后展示的渲染函数 */
|
|
|
|
|
displayRender: PropTypes.func,
|
2021-11-28 02:00:17 +00:00
|
|
|
|
transitionName: PropTypes.string.def('ant-slide-up'),
|
2020-03-07 11:45:13 +00:00
|
|
|
|
popupStyle: PropTypes.object.def(() => ({})),
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 自定义浮层类名 */
|
|
|
|
|
popupClassName: PropTypes.string,
|
|
|
|
|
/** 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` */
|
2020-10-13 15:12:07 +00:00
|
|
|
|
popupPlacement: PropTypes.oneOf(tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight')).def(
|
2019-01-12 03:33:27 +00:00
|
|
|
|
'bottomLeft',
|
|
|
|
|
),
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 输入框占位文本*/
|
|
|
|
|
placeholder: PropTypes.string.def('Please select'),
|
|
|
|
|
/** 输入框大小,可选 `large` `default` `small` */
|
2020-10-13 15:12:07 +00:00
|
|
|
|
size: PropTypes.oneOf(tuple('large', 'default', 'small')),
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 禁用*/
|
2020-10-10 10:16:28 +00:00
|
|
|
|
disabled: PropTypes.looseBool.def(false),
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 是否支持清除*/
|
2020-10-10 10:16:28 +00:00
|
|
|
|
allowClear: PropTypes.looseBool.def(true),
|
2020-10-13 15:12:07 +00:00
|
|
|
|
showSearch: {
|
2020-10-14 09:57:38 +00:00
|
|
|
|
type: [Boolean, Object] as PropType<boolean | ShowSearchType | undefined>,
|
|
|
|
|
default: undefined as PropType<boolean | ShowSearchType | undefined>,
|
2020-10-13 15:12:07 +00:00
|
|
|
|
},
|
2021-12-16 09:20:18 +00:00
|
|
|
|
notFoundContent: PropTypes.any,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
loadData: PropTypes.func,
|
|
|
|
|
/** 次级菜单的展开方式,可选 'click' 和 'hover' */
|
2020-10-13 15:12:07 +00:00
|
|
|
|
expandTrigger: PropTypes.oneOf(tuple('click', 'hover')),
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 当此项为 true 时,点选每级菜单选项值都会发生变化 */
|
2020-10-10 10:16:28 +00:00
|
|
|
|
changeOnSelect: PropTypes.looseBool,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
/** 浮层可见变化时回调 */
|
|
|
|
|
// onPopupVisibleChange?: (popupVisible: boolean) => void;
|
2019-03-14 13:21:58 +00:00
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
|
inputPrefixCls: PropTypes.string,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
getPopupContainer: PropTypes.func,
|
2020-10-10 10:16:28 +00:00
|
|
|
|
popupVisible: PropTypes.looseBool,
|
2020-10-13 15:12:07 +00:00
|
|
|
|
fieldNames: { type: Object as PropType<FieldNamesType> },
|
2020-10-10 10:16:28 +00:00
|
|
|
|
autofocus: PropTypes.looseBool,
|
2021-12-16 09:20:18 +00:00
|
|
|
|
suffixIcon: PropTypes.any,
|
2020-07-28 07:23:56 +00:00
|
|
|
|
showSearchRender: PropTypes.any,
|
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
|
onPopupVisibleChange: PropTypes.func,
|
|
|
|
|
onFocus: PropTypes.func,
|
|
|
|
|
onBlur: PropTypes.func,
|
|
|
|
|
onSearch: PropTypes.func,
|
|
|
|
|
'onUpdate:value': PropTypes.func,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2021-06-23 13:47:53 +00:00
|
|
|
|
export type CascaderProps = Partial<ExtractPropTypes<typeof cascaderProps>>;
|
|
|
|
|
|
2019-01-03 12:47:39 +00:00
|
|
|
|
// We limit the filtered item count by default
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const defaultLimit = 50;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
|
2020-10-13 15:12:07 +00:00
|
|
|
|
function defaultFilterOption(
|
|
|
|
|
inputValue: string,
|
|
|
|
|
path: CascaderOptionType[],
|
|
|
|
|
names: FilledFieldNamesType,
|
|
|
|
|
) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return path.some(option => option[names.label].indexOf(inputValue) > -1);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-13 15:12:07 +00:00
|
|
|
|
function defaultSortFilteredOption(
|
|
|
|
|
a: CascaderOptionType[],
|
|
|
|
|
b: CascaderOptionType[],
|
|
|
|
|
inputValue: string,
|
|
|
|
|
names: FilledFieldNamesType,
|
|
|
|
|
) {
|
2020-11-14 05:56:39 +00:00
|
|
|
|
function callback(elem: CascaderOptionType) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return elem[names.label].indexOf(inputValue) > -1;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return a.findIndex(callback) - b.findIndex(callback);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
function getFilledFieldNames(props: any) {
|
2020-10-13 15:12:07 +00:00
|
|
|
|
const fieldNames = (props.fieldNames || {}) as FieldNamesType;
|
|
|
|
|
const names: FilledFieldNamesType = {
|
2018-09-05 13:28:54 +00:00
|
|
|
|
children: fieldNames.children || 'children',
|
|
|
|
|
label: fieldNames.label || 'label',
|
|
|
|
|
value: fieldNames.value || 'value',
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
|
|
|
|
return names;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-13 15:12:07 +00:00
|
|
|
|
function flattenTree(
|
|
|
|
|
options: CascaderOptionType[],
|
2020-10-14 09:57:38 +00:00
|
|
|
|
props: any,
|
2020-10-13 15:12:07 +00:00
|
|
|
|
ancestor: CascaderOptionType[] = [],
|
|
|
|
|
) {
|
|
|
|
|
const names: FilledFieldNamesType = getFilledFieldNames(props);
|
2019-01-12 03:33:27 +00:00
|
|
|
|
let flattenOptions = [];
|
|
|
|
|
const childrenName = names.children;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
options.forEach(option => {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const path = ancestor.concat(option);
|
2019-01-03 12:47:39 +00:00
|
|
|
|
if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
flattenOptions.push(path);
|
2019-01-03 12:47:39 +00:00
|
|
|
|
}
|
|
|
|
|
if (option[childrenName]) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
flattenOptions = flattenOptions.concat(flattenTree(option[childrenName], props, path));
|
2019-01-03 12:47:39 +00:00
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
});
|
|
|
|
|
return flattenOptions;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const defaultDisplayRender = ({ labels }) => labels.join(' / ');
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
const Cascader = defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
|
name: 'ACascader',
|
2018-03-03 11:14:03 +00:00
|
|
|
|
mixins: [BaseMixin],
|
2020-11-07 07:37:17 +00:00
|
|
|
|
inheritAttrs: false,
|
2021-06-23 13:47:53 +00:00
|
|
|
|
props: cascaderProps,
|
2020-07-08 10:37:44 +00:00
|
|
|
|
setup() {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const formItemContext = useInjectFormItemContext();
|
2019-07-04 10:12:52 +00:00
|
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-14 09:57:38 +00:00
|
|
|
|
localeData: inject('localeData', {} as any),
|
|
|
|
|
cachedOptions: [],
|
|
|
|
|
popupRef: undefined,
|
|
|
|
|
input: undefined,
|
2021-09-25 08:51:32 +00:00
|
|
|
|
formItemContext,
|
2019-07-04 10:12:52 +00:00
|
|
|
|
};
|
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
data() {
|
2020-10-13 15:12:07 +00:00
|
|
|
|
const { value, defaultValue, popupVisible, showSearch, options } = this.$props;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
return {
|
2021-04-10 14:26:11 +00:00
|
|
|
|
sValue: (value || defaultValue || []) as any[],
|
2018-03-03 11:14:03 +00:00
|
|
|
|
inputValue: '',
|
|
|
|
|
inputFocused: false,
|
2021-04-10 14:26:11 +00:00
|
|
|
|
sPopupVisible: popupVisible as boolean,
|
|
|
|
|
flattenOptions: showSearch
|
|
|
|
|
? flattenTree(options as CascaderOptionType[], this.$props)
|
|
|
|
|
: undefined,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
watch: {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
value(val) {
|
|
|
|
|
this.setState({ sValue: val || [] });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
popupVisible(val) {
|
|
|
|
|
this.setState({ sPopupVisible: val });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
options(val) {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (this.showSearch) {
|
2020-10-14 09:57:38 +00:00
|
|
|
|
this.setState({ flattenOptions: flattenTree(val, this.$props as any) });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
2020-11-07 07:37:17 +00:00
|
|
|
|
// model: {
|
|
|
|
|
// prop: 'value',
|
|
|
|
|
// event: 'change',
|
|
|
|
|
// },
|
|
|
|
|
created() {
|
|
|
|
|
provide('savePopupRef', this.savePopupRef);
|
|
|
|
|
},
|
2018-03-03 11:14:03 +00:00
|
|
|
|
methods: {
|
2020-10-14 09:57:38 +00:00
|
|
|
|
savePopupRef(ref: any) {
|
2019-07-04 10:12:52 +00:00
|
|
|
|
this.popupRef = ref;
|
|
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
|
highlightKeyword(str: string, keyword: string, prefixCls: string | undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return str
|
|
|
|
|
.split(keyword)
|
|
|
|
|
.map((node, index) =>
|
|
|
|
|
index === 0
|
|
|
|
|
? node
|
|
|
|
|
: [<span class={`${prefixCls}-menu-item-keyword`}>{keyword}</span>, node],
|
|
|
|
|
);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
defaultRenderFilteredOption(opt: {
|
2020-10-19 08:43:10 +00:00
|
|
|
|
inputValue: string;
|
|
|
|
|
path: CascaderOptionType[];
|
|
|
|
|
prefixCls: string | undefined;
|
|
|
|
|
names: FilledFieldNamesType;
|
2020-10-14 09:57:38 +00:00
|
|
|
|
}) {
|
2020-10-19 08:43:10 +00:00
|
|
|
|
const { inputValue, path, prefixCls, names } = opt;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
return path.map((option, index) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const label = option[names.label];
|
|
|
|
|
const node =
|
|
|
|
|
label.indexOf(inputValue) > -1
|
|
|
|
|
? this.highlightKeyword(label, inputValue, prefixCls)
|
|
|
|
|
: label;
|
|
|
|
|
return index === 0 ? node : [' / ', node];
|
|
|
|
|
});
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
|
saveInput(node: any) {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
this.input = node;
|
|
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handleChange(value: any, selectedOptions: CascaderOptionType[]) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setState({ inputValue: '' });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (selectedOptions[0].__IS_FILTERED_OPTION) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const unwrappedValue = value[0];
|
|
|
|
|
const unwrappedSelectedOptions = selectedOptions[0].path;
|
|
|
|
|
this.setValue(unwrappedValue, unwrappedSelectedOptions);
|
|
|
|
|
return;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setValue(value, selectedOptions);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handlePopupVisibleChange(popupVisible: boolean) {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (!hasProp(this, 'popupVisible')) {
|
2020-10-14 09:57:38 +00:00
|
|
|
|
this.setState((state: any) => ({
|
2018-03-03 11:14:03 +00:00
|
|
|
|
sPopupVisible: popupVisible,
|
|
|
|
|
inputFocused: popupVisible,
|
2019-01-03 12:47:39 +00:00
|
|
|
|
inputValue: popupVisible ? state.inputValue : '',
|
2019-01-12 03:33:27 +00:00
|
|
|
|
}));
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.$emit('popupVisibleChange', popupVisible);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handleInputFocus(e: InputEvent) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.$emit('focus', e);
|
2018-06-07 06:40:10 +00:00
|
|
|
|
},
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handleInputBlur(e: InputEvent) {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
this.setState({
|
|
|
|
|
inputFocused: false,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
});
|
|
|
|
|
this.$emit('blur', e);
|
2021-09-25 08:51:32 +00:00
|
|
|
|
this.formItemContext.onFieldBlur();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-19 08:43:10 +00:00
|
|
|
|
handleInputClick(e: MouseEvent & { nativeEvent?: any }) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const { inputFocused, sPopupVisible } = this;
|
2021-04-10 14:26:11 +00:00
|
|
|
|
// Prevent `Trigger` behavior.
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (inputFocused || sPopupVisible) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
e.stopPropagation();
|
2018-09-05 13:28:54 +00:00
|
|
|
|
if (e.nativeEvent && e.nativeEvent.stopImmediatePropagation) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
e.nativeEvent.stopImmediatePropagation();
|
2018-09-05 13:28:54 +00:00
|
|
|
|
}
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handleKeyDown(e: KeyboardEvent) {
|
2019-11-19 08:21:19 +00:00
|
|
|
|
if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
e.stopPropagation();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
handleInputChange(e: Event) {
|
2020-11-14 05:56:39 +00:00
|
|
|
|
const inputValue = (e.target as HTMLInputElement).value;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setState({ inputValue });
|
2020-04-30 08:15:05 +00:00
|
|
|
|
this.$emit('search', inputValue);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
setValue(value: string[] | number[], selectedOptions: CascaderOptionType[] = []) {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (!hasProp(this, 'value')) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setState({ sValue: value });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2020-07-08 10:37:44 +00:00
|
|
|
|
this.$emit('update:value', value);
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.$emit('change', value, selectedOptions);
|
2021-09-25 08:51:32 +00:00
|
|
|
|
this.formItemContext.onFieldChange();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
getLabel() {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
const { options } = this;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const names = getFilledFieldNames(this.$props);
|
2020-07-08 14:28:09 +00:00
|
|
|
|
const displayRender = getComponent(this, 'displayRender', {}, false) || defaultDisplayRender;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const value = this.sValue;
|
|
|
|
|
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
|
2021-04-10 14:26:11 +00:00
|
|
|
|
const selectedOptions = arrayTreeFilter<CascaderOptionType>(
|
|
|
|
|
options as CascaderOptionType[],
|
2018-09-05 13:28:54 +00:00
|
|
|
|
(o, level) => o[names.value] === unwrappedValue[level],
|
|
|
|
|
{ childrenKeyName: names.children },
|
2019-01-12 03:33:27 +00:00
|
|
|
|
);
|
|
|
|
|
const labels = selectedOptions.map(o => o[names.label]);
|
|
|
|
|
return displayRender({ labels, selectedOptions });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
clearSelection(e: MouseEvent) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (!this.inputValue) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setValue([]);
|
|
|
|
|
this.handlePopupVisibleChange(false);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.setState({ inputValue: '' });
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2021-04-10 14:26:11 +00:00
|
|
|
|
generateFilteredOptions(
|
|
|
|
|
prefixCls: string | undefined,
|
|
|
|
|
renderEmpty: RenderEmptyHandler,
|
|
|
|
|
): EmptyFilteredOptionsType[] | FilteredOptionsType[] {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
const { showSearch, notFoundContent } = this;
|
2020-10-14 09:57:38 +00:00
|
|
|
|
const names: FilledFieldNamesType = getFilledFieldNames(this.$props);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const {
|
|
|
|
|
filter = defaultFilterOption,
|
2018-03-04 09:11:32 +00:00
|
|
|
|
// render = this.defaultRenderFilteredOption,
|
2018-03-03 11:14:03 +00:00
|
|
|
|
sort = defaultSortFilteredOption,
|
2019-01-03 12:47:39 +00:00
|
|
|
|
limit = defaultLimit,
|
2020-10-14 09:57:38 +00:00
|
|
|
|
} = showSearch as ShowSearchType;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const render =
|
2020-10-14 09:57:38 +00:00
|
|
|
|
(showSearch as ShowSearchType).render ||
|
2020-07-08 10:37:44 +00:00
|
|
|
|
getComponent(this, 'showSearchRender') ||
|
|
|
|
|
this.defaultRenderFilteredOption;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const { flattenOptions = [], inputValue } = this.$data;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
|
|
|
|
|
// Limit the filter if needed
|
2020-10-19 08:43:10 +00:00
|
|
|
|
let filtered: Array<CascaderOptionType[]>;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
if (limit > 0) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
filtered = [];
|
|
|
|
|
let matchCount = 0;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
|
|
|
|
|
// Perf optimization to filter items only below the limit
|
|
|
|
|
flattenOptions.some(path => {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const match = filter(inputValue, path, names);
|
2019-01-03 12:47:39 +00:00
|
|
|
|
if (match) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
filtered.push(path);
|
|
|
|
|
matchCount += 1;
|
2019-01-03 12:47:39 +00:00
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return matchCount >= limit;
|
|
|
|
|
});
|
2019-01-03 12:47:39 +00:00
|
|
|
|
} else {
|
|
|
|
|
warning(
|
|
|
|
|
typeof limit !== 'number',
|
2020-03-07 11:45:13 +00:00
|
|
|
|
'Cascader',
|
2019-01-03 12:47:39 +00:00
|
|
|
|
"'limit' of showSearch in Cascader should be positive number or false.",
|
2019-01-12 03:33:27 +00:00
|
|
|
|
);
|
|
|
|
|
filtered = flattenOptions.filter(path => filter(inputValue, path, names));
|
2019-01-03 12:47:39 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
filtered.sort((a, b) => sort(a, b, inputValue, names));
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
|
|
|
|
if (filtered.length > 0) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return filtered.map(path => {
|
2018-03-03 11:14:03 +00:00
|
|
|
|
return {
|
|
|
|
|
__IS_FILTERED_OPTION: true,
|
|
|
|
|
path,
|
2018-09-05 13:28:54 +00:00
|
|
|
|
[names.label]: render({ inputValue, path, prefixCls, names }),
|
2019-01-12 03:33:27 +00:00
|
|
|
|
[names.value]: path.map(o => o[names.value]),
|
|
|
|
|
disabled: path.some(o => !!o.disabled),
|
|
|
|
|
};
|
|
|
|
|
});
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
return [
|
2019-03-14 13:21:58 +00:00
|
|
|
|
{
|
2020-07-18 13:40:26 +00:00
|
|
|
|
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
2019-03-14 13:21:58 +00:00
|
|
|
|
[names.value]: 'ANT_CASCADER_NOT_FOUND',
|
|
|
|
|
disabled: true,
|
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
];
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
focus() {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
this.input && this.input.focus();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
blur() {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
this.input && this.input.blur();
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
render() {
|
2020-07-08 14:28:09 +00:00
|
|
|
|
const { sPopupVisible, inputValue, configProvider, localeData } = this;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const { sValue: value, inputFocused } = this.$data;
|
|
|
|
|
const props = getOptionProps(this);
|
2020-07-08 14:28:09 +00:00
|
|
|
|
let suffixIcon = getComponent(this, 'suffixIcon');
|
2019-01-12 03:33:27 +00:00
|
|
|
|
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
|
|
|
|
const { getPopupContainer: getContextPopupContainer } = configProvider;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const {
|
2019-03-14 13:21:58 +00:00
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
|
inputPrefixCls: customizeInputPrefixCls,
|
2019-01-03 12:47:39 +00:00
|
|
|
|
placeholder = localeData.placeholder,
|
|
|
|
|
size,
|
|
|
|
|
disabled,
|
|
|
|
|
allowClear,
|
|
|
|
|
showSearch = false,
|
2020-01-09 14:56:50 +00:00
|
|
|
|
notFoundContent,
|
2019-01-03 12:47:39 +00:00
|
|
|
|
...otherProps
|
2020-10-14 09:57:38 +00:00
|
|
|
|
} = props as any;
|
2020-07-08 10:37:44 +00:00
|
|
|
|
const { onEvents, extraAttrs } = splitAttrs(this.$attrs);
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const {
|
|
|
|
|
class: className,
|
|
|
|
|
style,
|
|
|
|
|
id = this.formItemContext.id.value,
|
|
|
|
|
...restAttrs
|
|
|
|
|
} = extraAttrs;
|
2019-09-11 14:35:25 +00:00
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
|
|
|
const renderEmpty = this.configProvider.renderEmpty;
|
2019-03-14 13:21:58 +00:00
|
|
|
|
const prefixCls = getPrefixCls('cascader', customizePrefixCls);
|
|
|
|
|
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
|
|
|
|
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const sizeCls = classNames({
|
|
|
|
|
[`${inputPrefixCls}-lg`]: size === 'large',
|
|
|
|
|
[`${inputPrefixCls}-sm`]: size === 'small',
|
2019-01-12 03:33:27 +00:00
|
|
|
|
});
|
|
|
|
|
const clearIcon =
|
|
|
|
|
(allowClear && !disabled && value.length > 0) || inputValue ? (
|
2020-03-28 07:28:06 +00:00
|
|
|
|
<CloseCircleFilled
|
2019-01-12 03:33:27 +00:00
|
|
|
|
class={`${prefixCls}-picker-clear`}
|
|
|
|
|
onClick={this.clearSelection}
|
|
|
|
|
key="clear-icon"
|
|
|
|
|
/>
|
|
|
|
|
) : null;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const arrowCls = classNames({
|
|
|
|
|
[`${prefixCls}-picker-arrow`]: true,
|
|
|
|
|
[`${prefixCls}-picker-arrow-expand`]: sPopupVisible,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
});
|
2020-07-08 10:37:44 +00:00
|
|
|
|
const pickerCls = classNames(className, `${prefixCls}-picker`, {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
[`${prefixCls}-picker-with-value`]: inputValue,
|
|
|
|
|
[`${prefixCls}-picker-disabled`]: disabled,
|
|
|
|
|
[`${prefixCls}-picker-${size}`]: !!size,
|
|
|
|
|
[`${prefixCls}-picker-show-search`]: !!showSearch,
|
|
|
|
|
[`${prefixCls}-picker-focused`]: inputFocused,
|
|
|
|
|
});
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
|
|
|
|
// Fix bug of https://github.com/facebook/react/pull/5004
|
|
|
|
|
// and https://fb.me/react-unknown-prop
|
|
|
|
|
const tempInputProps = omit(otherProps, [
|
2020-07-28 07:23:56 +00:00
|
|
|
|
'popupStyle',
|
2018-03-03 11:14:03 +00:00
|
|
|
|
'options',
|
|
|
|
|
'popupPlacement',
|
|
|
|
|
'transitionName',
|
|
|
|
|
'displayRender',
|
|
|
|
|
'changeOnSelect',
|
|
|
|
|
'expandTrigger',
|
|
|
|
|
'popupVisible',
|
|
|
|
|
'getPopupContainer',
|
|
|
|
|
'loadData',
|
|
|
|
|
'popupClassName',
|
|
|
|
|
'filterOption',
|
|
|
|
|
'renderFilteredOption',
|
|
|
|
|
'sortFilteredOption',
|
|
|
|
|
'notFoundContent',
|
2018-03-04 08:02:46 +00:00
|
|
|
|
'defaultValue',
|
2018-09-05 13:28:54 +00:00
|
|
|
|
'fieldNames',
|
2020-07-28 07:23:56 +00:00
|
|
|
|
'onChange',
|
|
|
|
|
'onPopupVisibleChange',
|
|
|
|
|
'onFocus',
|
|
|
|
|
'onBlur',
|
|
|
|
|
'onSearch',
|
|
|
|
|
'onUpdate:value',
|
2019-01-12 03:33:27 +00:00
|
|
|
|
]);
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
let options = props.options;
|
2020-01-09 14:56:50 +00:00
|
|
|
|
const names = getFilledFieldNames(this.$props);
|
|
|
|
|
if (options && options.length > 0) {
|
|
|
|
|
if (inputValue) {
|
|
|
|
|
options = this.generateFilteredOptions(prefixCls, renderEmpty);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
options = [
|
|
|
|
|
{
|
2020-07-08 10:37:44 +00:00
|
|
|
|
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
2020-01-09 14:56:50 +00:00
|
|
|
|
[names.value]: 'ANT_CASCADER_NOT_FOUND',
|
|
|
|
|
disabled: true,
|
|
|
|
|
},
|
|
|
|
|
];
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2020-01-09 14:56:50 +00:00
|
|
|
|
|
2018-03-03 11:14:03 +00:00
|
|
|
|
// Dropdown menu should keep previous status until it is fully closed.
|
|
|
|
|
if (!sPopupVisible) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
options = this.cachedOptions;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.cachedOptions = options;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
|
const dropdownMenuColumnStyle: CSSProperties = {};
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const isNotFound =
|
|
|
|
|
(options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND';
|
2018-03-03 11:14:03 +00:00
|
|
|
|
if (isNotFound) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
|
|
|
|
// The default value of `matchInputWidth` is `true`
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const resultListMatchInputWidth = showSearch.matchInputWidth !== false;
|
2020-07-30 08:26:28 +00:00
|
|
|
|
if (resultListMatchInputWidth && (inputValue || isNotFound) && this.input) {
|
|
|
|
|
dropdownMenuColumnStyle.width = findDOMNode(this.input.input).offsetWidth + 'px';
|
2018-03-03 11:14:03 +00:00
|
|
|
|
}
|
2018-06-07 06:40:10 +00:00
|
|
|
|
// showSearch时,focus、blur在input上触发,反之在ref='picker'上触发
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const inputProps = {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
...restAttrs,
|
|
|
|
|
...tempInputProps,
|
2021-09-25 08:51:32 +00:00
|
|
|
|
id,
|
2020-07-08 10:37:44 +00:00
|
|
|
|
prefixCls: inputPrefixCls,
|
|
|
|
|
placeholder: value && value.length > 0 ? undefined : placeholder,
|
|
|
|
|
value: inputValue,
|
|
|
|
|
disabled,
|
2020-07-17 09:13:30 +00:00
|
|
|
|
readonly: !showSearch,
|
2020-07-17 09:25:23 +00:00
|
|
|
|
autocomplete: 'off',
|
2018-03-03 11:14:03 +00:00
|
|
|
|
class: `${prefixCls}-input ${sizeCls}`,
|
2020-07-28 07:23:56 +00:00
|
|
|
|
onFocus: this.handleInputFocus,
|
2020-07-08 10:37:44 +00:00
|
|
|
|
onClick: showSearch ? this.handleInputClick : noop,
|
2020-07-28 07:23:56 +00:00
|
|
|
|
onBlur: showSearch ? this.handleInputBlur : props.onBlur,
|
2020-07-08 10:37:44 +00:00
|
|
|
|
onKeydown: this.handleKeyDown,
|
|
|
|
|
onChange: showSearch ? this.handleInputChange : noop,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2020-07-08 14:28:09 +00:00
|
|
|
|
const children = getSlot(this);
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const inputIcon = (suffixIcon &&
|
|
|
|
|
(isValidElement(suffixIcon) ? (
|
|
|
|
|
cloneElement(suffixIcon, {
|
2020-07-28 07:23:56 +00:00
|
|
|
|
class: `${prefixCls}-picker-arrow`,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
})
|
|
|
|
|
) : (
|
|
|
|
|
<span class={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>
|
2020-03-28 07:28:06 +00:00
|
|
|
|
))) || <DownOutlined class={arrowCls} />;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
|
|
|
|
|
const input = children.length ? (
|
|
|
|
|
children
|
|
|
|
|
) : (
|
2020-07-08 10:37:44 +00:00
|
|
|
|
<span class={pickerCls} style={style}>
|
2020-07-28 07:23:56 +00:00
|
|
|
|
<span class={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
|
2020-07-08 10:37:44 +00:00
|
|
|
|
<Input {...inputProps} ref={this.saveInput} />
|
2018-03-03 11:14:03 +00:00
|
|
|
|
{clearIcon}
|
2018-11-29 14:20:17 +00:00
|
|
|
|
{inputIcon}
|
|
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
|
);
|
2018-11-29 14:20:17 +00:00
|
|
|
|
|
2020-03-28 07:28:06 +00:00
|
|
|
|
const expandIcon = <RightOutlined />;
|
2018-11-29 14:20:17 +00:00
|
|
|
|
|
|
|
|
|
const loadingIcon = (
|
|
|
|
|
<span class={`${prefixCls}-menu-item-loading-icon`}>
|
2020-03-28 07:28:06 +00:00
|
|
|
|
<RedoOutlined spin />
|
2018-03-03 11:14:03 +00:00
|
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
|
);
|
|
|
|
|
const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
const cascaderProps = {
|
2020-07-08 10:37:44 +00:00
|
|
|
|
...props,
|
|
|
|
|
getPopupContainer,
|
|
|
|
|
options,
|
|
|
|
|
prefixCls,
|
|
|
|
|
value,
|
|
|
|
|
popupVisible: sPopupVisible,
|
|
|
|
|
dropdownMenuColumnStyle,
|
|
|
|
|
expandIcon,
|
|
|
|
|
loadingIcon,
|
|
|
|
|
...onEvents,
|
|
|
|
|
onPopupVisibleChange: this.handlePopupVisibleChange,
|
|
|
|
|
onChange: this.handleChange,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
|
|
|
|
return <VcCascader {...cascaderProps}>{input}</VcCascader>;
|
2018-03-03 11:14:03 +00:00
|
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
|
});
|
2018-03-03 11:14:03 +00:00
|
|
|
|
|
2020-11-01 07:03:33 +00:00
|
|
|
|
export default withInstall(Cascader);
|