github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update cascader

pull/2682/head
tanjinzhou 2020-07-08 18:37:44 +08:00
parent 4e5d26ffb3
commit e191921413
3 changed files with 122 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
components/cascader/index.jsx
View File

@ -1,3 +1,4 @@
import { inject, provide } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import VcCascader from '../vc-cascader'; import VcCascader from '../vc-cascader';
import arrayTreeFilter from 'array-tree-filter'; import arrayTreeFilter from 'array-tree-filter';
@ -13,18 +14,16 @@ import {
hasProp, hasProp,
filterEmpty, filterEmpty,
getOptionProps, getOptionProps,
getStyle,
getClass,
getAttrs,
getComponentFromProp, getComponentFromProp,
isValidElement, isValidElement,
getListeners, getComponent,
splitAttrs,
findDOMNode,
} from '../_util/props-util'; } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import warning from '../_util/warning'; import warning from '../_util/warning';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
const CascaderOptionType = PropTypes.shape({ const CascaderOptionType = PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@ -143,19 +142,19 @@ const Cascader = {
name: 'ACascader', name: 'ACascader',
mixins: [BaseMixin], mixins: [BaseMixin],
props: CascaderProps, props: CascaderProps,
model: { // model: {
prop: 'value', // prop: 'value',
event: 'change', // event: 'change',
// },
created() {
provide('savePopupRef', this.savePopupRef);
}, },
provide() { setup() {
return { return {
savePopupRef: this.savePopupRef, configProvider: inject('configProvider', ConfigConsumerProps),
localeData: inject('localeData', {}),
}; };
}, },
inject: {
configProvider: { default: () => ConfigConsumerProps },
localeData: { default: () => ({}) },
},
data() { data() {
this.cachedOptions = []; this.cachedOptions = [];
const { value, defaultValue, popupVisible, showSearch, options } = this; const { value, defaultValue, popupVisible, showSearch, options } = this;
@ -167,13 +166,13 @@ const Cascader = {
flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined, flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
}; };
}, },
mounted() { // mounted() {
this.$nextTick(() => { // this.$nextTick(() => {
if (this.autoFocus && !this.showSearch && !this.disabled) { // if (this.autoFocus && !this.showSearch && !this.disabled) {
this.$refs.picker.focus(); // this.$refs.picker.focus();
} // }
}); // });
}, // },
watch: { watch: {
value(val) { value(val) {
this.setState({ sValue: val || [] }); this.setState({ sValue: val || [] });
@ -211,6 +210,9 @@ const Cascader = {
return index === 0 ? node : [' / ', node]; return index === 0 ? node : [' / ', node];
}); });
}, },
saveInput(node) {
this.input = node;
},
handleChange(value, selectedOptions) { handleChange(value, selectedOptions) {
this.setState({ inputValue: '' }); this.setState({ inputValue: '' });
if (selectedOptions[0].__IS_FILTERED_OPTION) { if (selectedOptions[0].__IS_FILTERED_OPTION) {
@ -270,14 +272,14 @@ const Cascader = {
if (!hasProp(this, 'value')) { if (!hasProp(this, 'value')) {
this.setState({ sValue: value }); this.setState({ sValue: value });
} }
this.$emit('update:value', value);
this.$emit('change', value, selectedOptions); this.$emit('change', value, selectedOptions);
}, },
getLabel() { getLabel() {
const { options, $scopedSlots } = this; const { options } = this;
const names = getFilledFieldNames(this.$props); const names = getFilledFieldNames(this.$props);
const displayRender = const displayRender = getComponent(this, 'displayRender') || defaultDisplayRender;
this.displayRender || $scopedSlots.displayRender || defaultDisplayRender;
const value = this.sValue; const value = this.sValue;
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value; const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
const selectedOptions = arrayTreeFilter( const selectedOptions = arrayTreeFilter(
@ -302,7 +304,7 @@ const Cascader = {
generateFilteredOptions(prefixCls, renderEmpty) { generateFilteredOptions(prefixCls, renderEmpty) {
const h = this.$createElement; const h = this.$createElement;
const { showSearch, notFoundContent, $scopedSlots } = this; const { showSearch, notFoundContent } = this;
const names = getFilledFieldNames(this.$props); const names = getFilledFieldNames(this.$props);
const { const {
filter = defaultFilterOption, filter = defaultFilterOption,
@ -311,7 +313,9 @@ const Cascader = {
limit = defaultLimit, limit = defaultLimit,
} = showSearch; } = showSearch;
const render = const render =
showSearch.render || $scopedSlots.showSearchRender || this.defaultRenderFilteredOption; showSearch.render ||
getComponent(this, 'showSearchRender') ||
this.defaultRenderFilteredOption;
const { flattenOptions = [], inputValue } = this.$data; const { flattenOptions = [], inputValue } = this.$data;
// Limit the filter if needed // Limit the filter if needed
@ -361,19 +365,11 @@ const Cascader = {
}, },
focus() { focus() {
if (this.showSearch) { this.input && this.input.focus();
this.$refs.input.focus();
} else {
this.$refs.picker.focus();
}
}, },
blur() { blur() {
if (this.showSearch) { this.input && this.input.blur();
this.$refs.input.blur();
} else {
this.$refs.picker.blur();
}
}, },
}, },
@ -395,6 +391,8 @@ const Cascader = {
notFoundContent, notFoundContent,
...otherProps ...otherProps
} = props; } = props;
const { onEvents, extraAttrs } = splitAttrs(this.$attrs);
const { class: className, style, ...restAttrs } = extraAttrs;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const renderEmpty = this.configProvider.renderEmpty; const renderEmpty = this.configProvider.renderEmpty;
const prefixCls = getPrefixCls('cascader', customizePrefixCls); const prefixCls = getPrefixCls('cascader', customizePrefixCls);
@ -416,7 +414,7 @@ const Cascader = {
[`${prefixCls}-picker-arrow`]: true, [`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: sPopupVisible, [`${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-with-value`]: inputValue,
[`${prefixCls}-picker-disabled`]: disabled, [`${prefixCls}-picker-disabled`]: disabled,
[`${prefixCls}-picker-${size}`]: !!size, [`${prefixCls}-picker-${size}`]: !!size,
@ -454,7 +452,7 @@ const Cascader = {
} else { } else {
options = [ options = [
{ {
[names.label]: notFoundContent || renderEmpty(h, 'Cascader'), [names.label]: notFoundContent || renderEmpty('Cascader'),
[names.value]: 'ANT_CASCADER_NOT_FOUND', [names.value]: 'ANT_CASCADER_NOT_FOUND',
disabled: true, disabled: true,
}, },
@ -477,29 +475,24 @@ const Cascader = {
// The default value of `matchInputWidth` is `true` // The default value of `matchInputWidth` is `true`
const resultListMatchInputWidth = showSearch.matchInputWidth !== false; const resultListMatchInputWidth = showSearch.matchInputWidth !== false;
if (resultListMatchInputWidth && (inputValue || isNotFound) && this.$refs.input) { 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'上触发 // showSearch时，focus、blur在input上触发，反之在ref='picker'上触发
const inputProps = { const inputProps = {
props: { ...restAttrs,
...tempInputProps, ...tempInputProps,
prefixCls: inputPrefixCls, prefixCls: inputPrefixCls,
placeholder: value && value.length > 0 ? undefined : placeholder, placeholder: value && value.length > 0 ? undefined : placeholder,
value: inputValue, value: inputValue,
disabled, disabled,
readOnly: !showSearch, readOnly: !showSearch,
autoComplete: 'off', autoComplete: 'off',
},
class: `${prefixCls}-input ${sizeCls}`, class: `${prefixCls}-input ${sizeCls}`,
ref: 'input', onFocus: showSearch ? this.handleInputFocus : noop,
on: { onClick: showSearch ? this.handleInputClick : noop,
focus: showSearch ? this.handleInputFocus : noop, onBlur: showSearch ? this.handleInputBlur : noop,
click: showSearch ? this.handleInputClick : noop, onKeydown: this.handleKeyDown,
blur: showSearch ? this.handleInputBlur : noop, onChange: showSearch ? this.handleInputChange : noop,
keydown: this.handleKeyDown,
change: showSearch ? this.handleInputChange : noop,
},
attrs: getAttrs(this),
}; };
const children = filterEmpty($slots.default); const children = filterEmpty($slots.default);
const inputIcon = (suffixIcon && const inputIcon = (suffixIcon &&
@ -516,9 +509,9 @@ const Cascader = {
const input = children.length ? ( const input = children.length ? (
children children
) : ( ) : (
<span class={pickerCls} style={getStyle(this)} ref="picker"> <span class={pickerCls} style={style}>
{showSearch ? <span class={`${prefixCls}-picker-label`}>{this.getLabel()}</span> : null} {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} {!showSearch ? <span class={`${prefixCls}-picker-label`}>{this.getLabel()}</span> : null}
{clearIcon} {clearIcon}
{inputIcon} {inputIcon}
@ -534,31 +527,26 @@ const Cascader = {
); );
const getPopupContainer = props.getPopupContainer || getContextPopupContainer; const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
const cascaderProps = { const cascaderProps = {
props: { ...props,
...props, getPopupContainer,
getPopupContainer, options,
options, prefixCls,
prefixCls, value,
value, popupVisible: sPopupVisible,
popupVisible: sPopupVisible, dropdownMenuColumnStyle,
dropdownMenuColumnStyle, expandIcon,
expandIcon, loadingIcon,
loadingIcon, ...onEvents,
}, onPopupVisibleChange: this.handlePopupVisibleChange,
on: { onChange: this.handleChange,
...getListeners(this),
popupVisibleChange: this.handlePopupVisibleChange,
change: this.handleChange,
},
}; };
return <VcCascader {...cascaderProps}>{input}</VcCascader>; return <VcCascader {...cascaderProps}>{input}</VcCascader>;
}, },
}; };
/* istanbul ignore next */ /* istanbul ignore next */
Cascader.install = function(Vue) { Cascader.install = function(app) {
Vue.use(Base); app.component(Cascader.name, Cascader);
Vue.component(Cascader.name, Cascader);
}; };
export default Cascader; export default Cascader;

113
components/vc-cascader/Cascader.jsx
View File

@ -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 PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger'; import Trigger from '../vc-trigger';
import Menus from './Menus'; import Menus from './Menus';
import KeyCode from '../_util/KeyCode'; import KeyCode from '../_util/KeyCode';
import arrayTreeFilter from 'array-tree-filter'; import arrayTreeFilter from 'array-tree-filter';
import shallowEqualArrays from 'shallow-equal/arrays'; 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 BaseMixin from '../_util/BaseMixin';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import syncWatch from '../_util/syncWatch';
const BUILT_IN_PLACEMENTS = { const BUILT_IN_PLACEMENTS = {
bottomLeft: { bottomLeft: {
@ -45,11 +46,13 @@ const BUILT_IN_PLACEMENTS = {
}; };
export default { export default {
name: 'Cascader',
mixins: [BaseMixin], mixins: [BaseMixin],
model: { inheritAttrs: false,
prop: 'value', // model: {
event: 'change', // prop: 'value',
}, // event: 'change',
// },
props: { props: {
value: PropTypes.array, value: PropTypes.array,
defaultValue: PropTypes.array, defaultValue: PropTypes.array,
@ -86,6 +89,7 @@ export default {
} else if (hasProp(this, 'defaultValue')) { } else if (hasProp(this, 'defaultValue')) {
initialValue = defaultValue || []; initialValue = defaultValue || [];
} }
this.children = undefined;
// warning(!('filedNames' in props), // warning(!('filedNames' in props),
// '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.'); // '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
@ -96,7 +100,7 @@ export default {
}; };
}, },
watch: { watch: {
value(val, oldValue) { value: syncWatch(function(val, oldValue) {
if (!shallowEqualArrays(val, oldValue)) { if (!shallowEqualArrays(val, oldValue)) {
const newValues = { const newValues = {
sValue: val || [], sValue: val || [],
@ -108,16 +112,16 @@ export default {
} }
this.setState(newValues); this.setState(newValues);
} }
}, }),
popupVisible(val) { popupVisible: syncWatch(function(val) {
this.setState({ this.setState({
sPopupVisible: val, sPopupVisible: val,
}); });
}, }),
}, },
methods: { methods: {
getPopupDOMNode() { getPopupDOMNode() {
return this.$refs.trigger.getPopupDomNode(); return this.trigger.getPopupDomNode();
}, },
getFieldName(name) { getFieldName(name) {
const { defaultFieldNames, fieldNames } = this; const { defaultFieldNames, fieldNames } = this;
@ -159,11 +163,9 @@ export default {
}, },
handleChange(options, setProps, e) { handleChange(options, setProps, e) {
if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) { if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
this.__emit( const value = options.map(o => o[this.getFieldName('value')]);
'change', this.$emit('update:value', value);
options.map(o => o[this.getFieldName('value')]), this.__emit('change', value, options);
options,
);
this.setPopupVisible(setProps.visible); this.setPopupVisible(setProps.visible);
} }
}, },
@ -172,7 +174,7 @@ export default {
}, },
handleMenuSelect(targetOption, menuIndex, e) { handleMenuSelect(targetOption, menuIndex, e) {
// Keep focused state for keyboard support // Keep focused state for keyboard support
const triggerNode = this.$refs.trigger.getRootDomNode(); const triggerNode = this.trigger.getRootDomNode();
if (triggerNode && triggerNode.focus) { if (triggerNode && triggerNode.focus) {
triggerNode.focus(); triggerNode.focus();
} }
@ -228,12 +230,11 @@ export default {
} }
}, },
handleKeyDown(e) { handleKeyDown(e) {
const { $slots } = this; const children = this.children;
const children = $slots.default && $slots.default[0];
// https://github.com/ant-design/ant-design/issues/6717 // https://github.com/ant-design/ant-design/issues/6717
// Don't bind keyboard support when children specify the onKeyDown // Don't bind keyboard support when children specify the onKeyDown
if (children) { if (children) {
const keydown = getEvents(children).keydown; const keydown = getEvents(children).onKeydown;
if (keydown) { if (keydown) {
keydown(e); keydown(e);
return; return;
@ -312,6 +313,9 @@ export default {
this.handleMenuSelect(targetOption, activeOptions.length - 1, e); this.handleMenuSelect(targetOption, activeOptions.length - 1, e);
this.__emit('keydown', e); this.__emit('keydown', e);
}, },
saveTrigger(node) {
this.trigger = node;
},
}, },
render() { render() {
@ -338,59 +342,48 @@ export default {
let menus = <div />; let menus = <div />;
let emptyMenuClassName = ''; let emptyMenuClassName = '';
if (options && options.length > 0) { if (options && options.length > 0) {
const loadingIcon = getComponentFromProp(this, 'loadingIcon'); const loadingIcon = getComponent(this, 'loadingIcon');
const expandIcon = getComponentFromProp(this, 'expandIcon') || '>'; const expandIcon = getComponent(this, 'expandIcon') || '>';
const menusProps = { const menusProps = {
props: { ...$props,
...$props, ...this.$attrs,
fieldNames: this.getFieldNames(), fieldNames: this.getFieldNames(),
defaultFieldNames: this.defaultFieldNames, defaultFieldNames: this.defaultFieldNames,
activeValue: sActiveValue, activeValue: sActiveValue,
visible: sPopupVisible, visible: sPopupVisible,
loadingIcon, loadingIcon,
expandIcon, expandIcon,
}, ...listeners,
on: { onSelect: handleMenuSelect,
...listeners, onItemDoubleClick: this.handleItemDoubleClick,
select: handleMenuSelect,
itemDoubleClick: this.handleItemDoubleClick,
},
}; };
menus = <Menus {...menusProps} />; menus = <Menus {...menusProps} />;
} else { } else {
emptyMenuClassName = ` ${prefixCls}-menus-empty`; emptyMenuClassName = ` ${prefixCls}-menus-empty`;
} }
const triggerProps = { const triggerProps = {
props: { ...restProps,
...restProps, ...this.$attrs,
disabled, disabled,
popupPlacement, popupPlacement,
builtinPlacements, builtinPlacements,
popupTransitionName: transitionName, popupTransitionName: transitionName,
action: disabled ? [] : ['click'], action: disabled ? [] : ['click'],
popupVisible: disabled ? false : sPopupVisible, popupVisible: disabled ? false : sPopupVisible,
prefixCls: `${prefixCls}-menus`, prefixCls: `${prefixCls}-menus`,
popupClassName: popupClassName + emptyMenuClassName, popupClassName: popupClassName + emptyMenuClassName,
}, popup: menus,
on: { onPopupVisibleChange: handlePopupVisibleChange,
...listeners, ref: this.saveTrigger,
popupVisibleChange: handlePopupVisibleChange,
},
ref: 'trigger',
}; };
const children = getSlot(this, 'default'); const children = this.children;
return ( return (
<Trigger {...triggerProps}> <Trigger {...triggerProps}>
{children && {children &&
cloneElement(children[0], { cloneElement(children[0], {
on: { onKeydown: handleKeyDown,
keydown: handleKeyDown, tabIndex: disabled ? undefined : 0,
},
attrs: {
tabIndex: disabled ? undefined : 0,
},
})} })}
<template slot="popup">{menus}</template>
</Trigger> </Trigger>
); );
}, },

6
components/vc-cascader/Menus.jsx
View File

@ -1,4 +1,4 @@
import { getComponentFromProp } from '../_util/props-util'; import { getComponent } from '../_util/props-util';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import arrayTreeFilter from 'array-tree-filter'; import arrayTreeFilter from 'array-tree-filter';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
@ -46,8 +46,8 @@ export default {
}, },
getOption(option, menuIndex) { getOption(option, menuIndex) {
const { prefixCls, expandTrigger } = this; const { prefixCls, expandTrigger } = this;
const loadingIcon = getComponentFromProp(this, 'loadingIcon'); const loadingIcon = getComponent(this, 'loadingIcon');
const expandIcon = getComponentFromProp(this, 'expandIcon'); const expandIcon = getComponent(this, 'expandIcon');
const onSelect = e => { const onSelect = e => {
this.__emit('select', option, menuIndex, e); this.__emit('select', option, menuIndex, e);
}; };