feat: update cascader
tanjinzhou
parent
4e5d26ffb3
commit
e191921413
|
|
@ -1,3 +1,4 @@
|
|||
import { inject, provide } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import VcCascader from '../vc-cascader';
|
||||
import arrayTreeFilter from 'array-tree-filter';
|
||||
|
|
@ -13,18 +14,16 @@ import {
|
|||
hasProp,
|
||||
filterEmpty,
|
||||
getOptionProps,
|
||||
getStyle,
|
||||
getClass,
|
||||
getAttrs,
|
||||
getComponentFromProp,
|
||||
isValidElement,
|
||||
getListeners,
|
||||
getComponent,
|
||||
splitAttrs,
|
||||
findDOMNode,
|
||||
} from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import warning from '../_util/warning';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import Base from '../base';
|
||||
|
||||
const CascaderOptionType = PropTypes.shape({
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
|
|
@ -143,19 +142,19 @@ const Cascader = {
|
|||
name: 'ACascader',
|
||||
mixins: [BaseMixin],
|
||||
props: CascaderProps,
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
created() {
|
||||
provide('savePopupRef', this.savePopupRef);
|
||||
},
|
||||
provide() {
|
||||
setup() {
|
||||
return {
|
||||
savePopupRef: this.savePopupRef,
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
localeData: inject('localeData', {}),
|
||||
};
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
localeData: { default: () => ({}) },
|
||||
},
|
||||
data() {
|
||||
this.cachedOptions = [];
|
||||
const { value, defaultValue, popupVisible, showSearch, options } = this;
|
||||
|
|
@ -167,13 +166,13 @@ const Cascader = {
|
|||
flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.autoFocus && !this.showSearch && !this.disabled) {
|
||||
this.$refs.picker.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// mounted() {
|
||||
// this.$nextTick(() => {
|
||||
// if (this.autoFocus && !this.showSearch && !this.disabled) {
|
||||
// this.$refs.picker.focus();
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
watch: {
|
||||
value(val) {
|
||||
this.setState({ sValue: val || [] });
|
||||
|
|
@ -211,6 +210,9 @@ const Cascader = {
|
|||
return index === 0 ? node : [' / ', node];
|
||||
});
|
||||
},
|
||||
saveInput(node) {
|
||||
this.input = node;
|
||||
},
|
||||
handleChange(value, selectedOptions) {
|
||||
this.setState({ inputValue: '' });
|
||||
if (selectedOptions[0].__IS_FILTERED_OPTION) {
|
||||
|
|
@ -270,14 +272,14 @@ const Cascader = {
|
|||
if (!hasProp(this, 'value')) {
|
||||
this.setState({ sValue: value });
|
||||
}
|
||||
this.$emit('update:value', value);
|
||||
this.$emit('change', value, selectedOptions);
|
||||
},
|
||||
|
||||
getLabel() {
|
||||
const { options, $scopedSlots } = this;
|
||||
const { options } = this;
|
||||
const names = getFilledFieldNames(this.$props);
|
||||
const displayRender =
|
||||
this.displayRender || $scopedSlots.displayRender || defaultDisplayRender;
|
||||
const displayRender = getComponent(this, 'displayRender') || defaultDisplayRender;
|
||||
const value = this.sValue;
|
||||
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
|
||||
const selectedOptions = arrayTreeFilter(
|
||||
|
|
@ -302,7 +304,7 @@ const Cascader = {
|
|||
|
||||
generateFilteredOptions(prefixCls, renderEmpty) {
|
||||
const h = this.$createElement;
|
||||
const { showSearch, notFoundContent, $scopedSlots } = this;
|
||||
const { showSearch, notFoundContent } = this;
|
||||
const names = getFilledFieldNames(this.$props);
|
||||
const {
|
||||
filter = defaultFilterOption,
|
||||
|
|
@ -311,7 +313,9 @@ const Cascader = {
|
|||
limit = defaultLimit,
|
||||
} = showSearch;
|
||||
const render =
|
||||
showSearch.render || $scopedSlots.showSearchRender || this.defaultRenderFilteredOption;
|
||||
showSearch.render ||
|
||||
getComponent(this, 'showSearchRender') ||
|
||||
this.defaultRenderFilteredOption;
|
||||
const { flattenOptions = [], inputValue } = this.$data;
|
||||
|
||||
// Limit the filter if needed
|
||||
|
|
@ -361,19 +365,11 @@ const Cascader = {
|
|||
},
|
||||
|
||||
focus() {
|
||||
if (this.showSearch) {
|
||||
this.$refs.input.focus();
|
||||
} else {
|
||||
this.$refs.picker.focus();
|
||||
}
|
||||
this.input && this.input.focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
if (this.showSearch) {
|
||||
this.$refs.input.blur();
|
||||
} else {
|
||||
this.$refs.picker.blur();
|
||||
}
|
||||
this.input && this.input.blur();
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -395,6 +391,8 @@ const Cascader = {
|
|||
notFoundContent,
|
||||
...otherProps
|
||||
} = props;
|
||||
const { onEvents, extraAttrs } = splitAttrs(this.$attrs);
|
||||
const { class: className, style, ...restAttrs } = extraAttrs;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const renderEmpty = this.configProvider.renderEmpty;
|
||||
const prefixCls = getPrefixCls('cascader', customizePrefixCls);
|
||||
|
|
@ -416,7 +414,7 @@ const Cascader = {
|
|||
[`${prefixCls}-picker-arrow`]: true,
|
||||
[`${prefixCls}-picker-arrow-expand`]: sPopupVisible,
|
||||
});
|
||||
const pickerCls = classNames(getClass(this), `${prefixCls}-picker`, {
|
||||
const pickerCls = classNames(className, `${prefixCls}-picker`, {
|
||||
[`${prefixCls}-picker-with-value`]: inputValue,
|
||||
[`${prefixCls}-picker-disabled`]: disabled,
|
||||
[`${prefixCls}-picker-${size}`]: !!size,
|
||||
|
|
@ -454,7 +452,7 @@ const Cascader = {
|
|||
} else {
|
||||
options = [
|
||||
{
|
||||
[names.label]: notFoundContent || renderEmpty(h, 'Cascader'),
|
||||
[names.label]: notFoundContent || renderEmpty('Cascader'),
|
||||
[names.value]: 'ANT_CASCADER_NOT_FOUND',
|
||||
disabled: true,
|
||||
},
|
||||
|
|
@ -477,29 +475,24 @@ const Cascader = {
|
|||
// The default value of `matchInputWidth` is `true`
|
||||
const resultListMatchInputWidth = showSearch.matchInputWidth !== false;
|
||||
if (resultListMatchInputWidth && (inputValue || isNotFound) && this.$refs.input) {
|
||||
dropdownMenuColumnStyle.width = this.$refs.input.$el.offsetWidth + 'px';
|
||||
dropdownMenuColumnStyle.width = findDOMNode(this.input).offsetWidth + 'px';
|
||||
}
|
||||
// showSearch时，focus、blur在input上触发，反之在ref='picker'上触发
|
||||
const inputProps = {
|
||||
props: {
|
||||
...tempInputProps,
|
||||
prefixCls: inputPrefixCls,
|
||||
placeholder: value && value.length > 0 ? undefined : placeholder,
|
||||
value: inputValue,
|
||||
disabled,
|
||||
readOnly: !showSearch,
|
||||
autoComplete: 'off',
|
||||
},
|
||||
...restAttrs,
|
||||
...tempInputProps,
|
||||
prefixCls: inputPrefixCls,
|
||||
placeholder: value && value.length > 0 ? undefined : placeholder,
|
||||
value: inputValue,
|
||||
disabled,
|
||||
readOnly: !showSearch,
|
||||
autoComplete: 'off',
|
||||
class: `${prefixCls}-input ${sizeCls}`,
|
||||
ref: 'input',
|
||||
on: {
|
||||
focus: showSearch ? this.handleInputFocus : noop,
|
||||
click: showSearch ? this.handleInputClick : noop,
|
||||
blur: showSearch ? this.handleInputBlur : noop,
|
||||
keydown: this.handleKeyDown,
|
||||
change: showSearch ? this.handleInputChange : noop,
|
||||
},
|
||||
attrs: getAttrs(this),
|
||||
onFocus: showSearch ? this.handleInputFocus : noop,
|
||||
onClick: showSearch ? this.handleInputClick : noop,
|
||||
onBlur: showSearch ? this.handleInputBlur : noop,
|
||||
onKeydown: this.handleKeyDown,
|
||||
onChange: showSearch ? this.handleInputChange : noop,
|
||||
};
|
||||
const children = filterEmpty($slots.default);
|
||||
const inputIcon = (suffixIcon &&
|
||||
|
|
@ -516,9 +509,9 @@ const Cascader = {
|
|||
const input = children.length ? (
|
||||
children
|
||||
) : (
|
||||
<span class={pickerCls} style={getStyle(this)} ref="picker">
|
||||
<span class={pickerCls} style={style}>
|
||||
{showSearch ? <span class={`${prefixCls}-picker-label`}>{this.getLabel()}</span> : null}
|
||||
<Input {...inputProps} />
|
||||
<Input {...inputProps} ref={this.saveInput} />
|
||||
{!showSearch ? <span class={`${prefixCls}-picker-label`}>{this.getLabel()}</span> : null}
|
||||
{clearIcon}
|
||||
{inputIcon}
|
||||
|
|
@ -534,31 +527,26 @@ const Cascader = {
|
|||
);
|
||||
const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
|
||||
const cascaderProps = {
|
||||
props: {
|
||||
...props,
|
||||
getPopupContainer,
|
||||
options,
|
||||
prefixCls,
|
||||
value,
|
||||
popupVisible: sPopupVisible,
|
||||
dropdownMenuColumnStyle,
|
||||
expandIcon,
|
||||
loadingIcon,
|
||||
},
|
||||
on: {
|
||||
...getListeners(this),
|
||||
popupVisibleChange: this.handlePopupVisibleChange,
|
||||
change: this.handleChange,
|
||||
},
|
||||
...props,
|
||||
getPopupContainer,
|
||||
options,
|
||||
prefixCls,
|
||||
value,
|
||||
popupVisible: sPopupVisible,
|
||||
dropdownMenuColumnStyle,
|
||||
expandIcon,
|
||||
loadingIcon,
|
||||
...onEvents,
|
||||
onPopupVisibleChange: this.handlePopupVisibleChange,
|
||||
onChange: this.handleChange,
|
||||
};
|
||||
return <VcCascader {...cascaderProps}>{input}</VcCascader>;
|
||||
},
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
Cascader.install = function(Vue) {
|
||||
Vue.use(Base);
|
||||
Vue.component(Cascader.name, Cascader);
|
||||
Cascader.install = function(app) {
|
||||
app.component(Cascader.name, Cascader);
|
||||
};
|
||||
|
||||
export default Cascader;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import { getComponentFromProp, getListeners } from '../_util/props-util';
|
||||
import { getComponent, getListeners } from '../_util/props-util';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import Trigger from '../vc-trigger';
|
||||
import Menus from './Menus';
|
||||
import KeyCode from '../_util/KeyCode';
|
||||
import arrayTreeFilter from 'array-tree-filter';
|
||||
import shallowEqualArrays from 'shallow-equal/arrays';
|
||||
import { hasProp, getEvents, getSlot } from '../_util/props-util';
|
||||
import { hasProp, getEvents } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import syncWatch from '../_util/syncWatch';
|
||||
|
||||
const BUILT_IN_PLACEMENTS = {
|
||||
bottomLeft: {
|
||||
|
|
@ -45,11 +46,13 @@ const BUILT_IN_PLACEMENTS = {
|
|||
};
|
||||
|
||||
export default {
|
||||
name: 'Cascader',
|
||||
mixins: [BaseMixin],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inheritAttrs: false,
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
props: {
|
||||
value: PropTypes.array,
|
||||
defaultValue: PropTypes.array,
|
||||
|
|
@ -86,6 +89,7 @@ export default {
|
|||
} else if (hasProp(this, 'defaultValue')) {
|
||||
initialValue = defaultValue || [];
|
||||
}
|
||||
this.children = undefined;
|
||||
// warning(!('filedNames' in props),
|
||||
// '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
|
||||
|
||||
|
|
@ -96,7 +100,7 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
value(val, oldValue) {
|
||||
value: syncWatch(function(val, oldValue) {
|
||||
if (!shallowEqualArrays(val, oldValue)) {
|
||||
const newValues = {
|
||||
sValue: val || [],
|
||||
|
|
@ -108,16 +112,16 @@ export default {
|
|||
}
|
||||
this.setState(newValues);
|
||||
}
|
||||
},
|
||||
popupVisible(val) {
|
||||
}),
|
||||
popupVisible: syncWatch(function(val) {
|
||||
this.setState({
|
||||
sPopupVisible: val,
|
||||
});
|
||||
},
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
getPopupDOMNode() {
|
||||
return this.$refs.trigger.getPopupDomNode();
|
||||
return this.trigger.getPopupDomNode();
|
||||
},
|
||||
getFieldName(name) {
|
||||
const { defaultFieldNames, fieldNames } = this;
|
||||
|
|
@ -159,11 +163,9 @@ export default {
|
|||
},
|
||||
handleChange(options, setProps, e) {
|
||||
if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
|
||||
this.__emit(
|
||||
'change',
|
||||
options.map(o => o[this.getFieldName('value')]),
|
||||
options,
|
||||
);
|
||||
const value = options.map(o => o[this.getFieldName('value')]);
|
||||
this.$emit('update:value', value);
|
||||
this.__emit('change', value, options);
|
||||
this.setPopupVisible(setProps.visible);
|
||||
}
|
||||
},
|
||||
|
|
@ -172,7 +174,7 @@ export default {
|
|||
},
|
||||
handleMenuSelect(targetOption, menuIndex, e) {
|
||||
// Keep focused state for keyboard support
|
||||
const triggerNode = this.$refs.trigger.getRootDomNode();
|
||||
const triggerNode = this.trigger.getRootDomNode();
|
||||
if (triggerNode && triggerNode.focus) {
|
||||
triggerNode.focus();
|
||||
}
|
||||
|
|
@ -228,12 +230,11 @@ export default {
|
|||
}
|
||||
},
|
||||
handleKeyDown(e) {
|
||||
const { $slots } = this;
|
||||
const children = $slots.default && $slots.default[0];
|
||||
const children = this.children;
|
||||
// https://github.com/ant-design/ant-design/issues/6717
|
||||
// Don't bind keyboard support when children specify the onKeyDown
|
||||
if (children) {
|
||||
const keydown = getEvents(children).keydown;
|
||||
const keydown = getEvents(children).onKeydown;
|
||||
if (keydown) {
|
||||
keydown(e);
|
||||
return;
|
||||
|
|
@ -312,6 +313,9 @@ export default {
|
|||
this.handleMenuSelect(targetOption, activeOptions.length - 1, e);
|
||||
this.__emit('keydown', e);
|
||||
},
|
||||
saveTrigger(node) {
|
||||
this.trigger = node;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
|
|
@ -338,59 +342,48 @@ export default {
|
|||
let menus = <div />;
|
||||
let emptyMenuClassName = '';
|
||||
if (options && options.length > 0) {
|
||||
const loadingIcon = getComponentFromProp(this, 'loadingIcon');
|
||||
const expandIcon = getComponentFromProp(this, 'expandIcon') || '>';
|
||||
const loadingIcon = getComponent(this, 'loadingIcon');
|
||||
const expandIcon = getComponent(this, 'expandIcon') || '>';
|
||||
const menusProps = {
|
||||
props: {
|
||||
...$props,
|
||||
fieldNames: this.getFieldNames(),
|
||||
defaultFieldNames: this.defaultFieldNames,
|
||||
activeValue: sActiveValue,
|
||||
visible: sPopupVisible,
|
||||
loadingIcon,
|
||||
expandIcon,
|
||||
},
|
||||
on: {
|
||||
...listeners,
|
||||
select: handleMenuSelect,
|
||||
itemDoubleClick: this.handleItemDoubleClick,
|
||||
},
|
||||
...$props,
|
||||
...this.$attrs,
|
||||
fieldNames: this.getFieldNames(),
|
||||
defaultFieldNames: this.defaultFieldNames,
|
||||
activeValue: sActiveValue,
|
||||
visible: sPopupVisible,
|
||||
loadingIcon,
|
||||
expandIcon,
|
||||
...listeners,
|
||||
onSelect: handleMenuSelect,
|
||||
onItemDoubleClick: this.handleItemDoubleClick,
|
||||
};
|
||||
menus = <Menus {...menusProps} />;
|
||||
} else {
|
||||
emptyMenuClassName = ` ${prefixCls}-menus-empty`;
|
||||
}
|
||||
const triggerProps = {
|
||||
props: {
|
||||
...restProps,
|
||||
disabled,
|
||||
popupPlacement,
|
||||
builtinPlacements,
|
||||
popupTransitionName: transitionName,
|
||||
action: disabled ? [] : ['click'],
|
||||
popupVisible: disabled ? false : sPopupVisible,
|
||||
prefixCls: `${prefixCls}-menus`,
|
||||
popupClassName: popupClassName + emptyMenuClassName,
|
||||
},
|
||||
on: {
|
||||
...listeners,
|
||||
popupVisibleChange: handlePopupVisibleChange,
|
||||
},
|
||||
ref: 'trigger',
|
||||
...restProps,
|
||||
...this.$attrs,
|
||||
disabled,
|
||||
popupPlacement,
|
||||
builtinPlacements,
|
||||
popupTransitionName: transitionName,
|
||||
action: disabled ? [] : ['click'],
|
||||
popupVisible: disabled ? false : sPopupVisible,
|
||||
prefixCls: `${prefixCls}-menus`,
|
||||
popupClassName: popupClassName + emptyMenuClassName,
|
||||
popup: menus,
|
||||
onPopupVisibleChange: handlePopupVisibleChange,
|
||||
ref: this.saveTrigger,
|
||||
};
|
||||
const children = getSlot(this, 'default');
|
||||
const children = this.children;
|
||||
return (
|
||||
<Trigger {...triggerProps}>
|
||||
{children &&
|
||||
cloneElement(children[0], {
|
||||
on: {
|
||||
keydown: handleKeyDown,
|
||||
},
|
||||
attrs: {
|
||||
tabIndex: disabled ? undefined : 0,
|
||||
},
|
||||
onKeydown: handleKeyDown,
|
||||
tabIndex: disabled ? undefined : 0,
|
||||
})}
|
||||
<template slot="popup">{menus}</template>
|
||||
</Trigger>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getComponentFromProp } from '../_util/props-util';
|
||||
import { getComponent } from '../_util/props-util';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import arrayTreeFilter from 'array-tree-filter';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
|
|
@ -46,8 +46,8 @@ export default {
|
|||
},
|
||||
getOption(option, menuIndex) {
|
||||
const { prefixCls, expandTrigger } = this;
|
||||
const loadingIcon = getComponentFromProp(this, 'loadingIcon');
|
||||
const expandIcon = getComponentFromProp(this, 'expandIcon');
|
||||
const loadingIcon = getComponent(this, 'loadingIcon');
|
||||
const expandIcon = getComponent(this, 'expandIcon');
|
||||
const onSelect = e => {
|
||||
this.__emit('select', option, menuIndex, e);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue