ant-design-vue/components/vc-cascader/Cascader.jsx

398 lines
12 KiB
Vue
Raw Normal View History

2020-01-19 16:58:38 +08:00
import { getComponentFromProp, getListeners } from '../_util/props-util';
2019-01-12 11:33:27 +08:00
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';
2019-02-18 22:13:29 +08:00
import { hasProp, getEvents, getSlot } from '../_util/props-util';
2019-01-12 11:33:27 +08:00
import BaseMixin from '../_util/BaseMixin';
import { cloneElement } from '../_util/vnode';
2018-03-02 16:54:22 +08:00
const BUILT_IN_PLACEMENTS = {
bottomLeft: {
points: ['tl', 'bl'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
topLeft: {
points: ['bl', 'tl'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
bottomRight: {
points: ['tr', 'br'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
topRight: {
points: ['br', 'tr'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
2019-01-12 11:33:27 +08:00
};
2018-03-02 16:54:22 +08:00
2018-03-02 22:12:52 +08:00
export default {
2019-02-01 17:23:00 +08:00
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
2018-03-02 22:12:52 +08:00
props: {
value: PropTypes.array,
defaultValue: PropTypes.array,
2019-02-18 22:13:29 +08:00
options: PropTypes.array,
2018-03-02 22:12:52 +08:00
// onChange: PropTypes.func,
// onPopupVisibleChange: PropTypes.func,
popupVisible: PropTypes.bool,
disabled: PropTypes.bool.def(false),
transitionName: PropTypes.string.def(''),
popupClassName: PropTypes.string.def(''),
Feat 1.5.0 (#1853) * feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com> Co-authored-by: drafish <xwlyy1991@163.com> Co-authored-by: Amour1688 <31695475+Amour1688@users.noreply.github.com>
2020-03-07 19:45:13 +08:00
popupStyle: PropTypes.object.def(() => ({})),
2018-03-02 22:12:52 +08:00
popupPlacement: PropTypes.string.def('bottomLeft'),
prefixCls: PropTypes.string.def('rc-cascader'),
dropdownMenuColumnStyle: PropTypes.object,
builtinPlacements: PropTypes.object.def(BUILT_IN_PLACEMENTS),
loadData: PropTypes.func,
changeOnSelect: PropTypes.bool,
// onKeyDown: PropTypes.func,
expandTrigger: PropTypes.string.def('click'),
Feat 1.5.0 (#1853) * feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com> Co-authored-by: drafish <xwlyy1991@163.com> Co-authored-by: Amour1688 <31695475+Amour1688@users.noreply.github.com>
2020-03-07 19:45:13 +08:00
fieldNames: PropTypes.object.def(() => ({
label: 'label',
value: 'value',
children: 'children',
})),
expandIcon: PropTypes.any,
loadingIcon: PropTypes.any,
getPopupContainer: PropTypes.func,
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
data() {
let initialValue = [];
const { value, defaultValue, popupVisible } = this;
2018-03-02 22:12:52 +08:00
if (hasProp(this, 'value')) {
2019-01-12 11:33:27 +08:00
initialValue = value || [];
2018-03-02 22:12:52 +08:00
} else if (hasProp(this, 'defaultValue')) {
2019-01-12 11:33:27 +08:00
initialValue = defaultValue || [];
2018-03-02 16:54:22 +08:00
}
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
// warning(!('filedNames' in props),
// '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
2018-03-02 22:12:52 +08:00
return {
sPopupVisible: popupVisible,
sActiveValue: initialValue,
sValue: initialValue,
2019-01-12 11:33:27 +08:00
};
2018-03-02 22:12:52 +08:00
},
watch: {
2019-01-12 11:33:27 +08:00
value(val, oldValue) {
2018-03-02 22:12:52 +08:00
if (!shallowEqualArrays(val, oldValue)) {
const newValues = {
2018-09-17 21:17:44 +08:00
sValue: val || [],
2019-01-12 11:33:27 +08:00
};
2018-03-02 22:12:52 +08:00
// allow activeValue diff from value
// https://github.com/ant-design/ant-design/issues/2767
2019-02-18 22:13:29 +08:00
if (!hasProp(this, 'loadData')) {
newValues.sActiveValue = val || [];
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
this.setState(newValues);
2018-03-02 22:12:52 +08:00
}
},
2019-01-12 11:33:27 +08:00
popupVisible(val) {
2018-03-02 16:54:22 +08:00
this.setState({
2018-03-02 22:12:52 +08:00
sPopupVisible: val,
2019-01-12 11:33:27 +08:00
});
2018-03-02 22:12:52 +08:00
},
},
methods: {
2019-01-12 11:33:27 +08:00
getPopupDOMNode() {
return this.$refs.trigger.getPopupDomNode();
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
getFieldName(name) {
const { defaultFieldNames, fieldNames } = this;
return fieldNames[name] || defaultFieldNames[name];
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
},
2019-01-12 11:33:27 +08:00
getFieldNames() {
return this.fieldNames;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
},
2019-01-12 11:33:27 +08:00
getCurrentLevelOptions() {
2019-02-18 22:13:29 +08:00
const { options = [], sActiveValue = [] } = this;
2019-01-12 11:33:27 +08:00
const result = arrayTreeFilter(
options,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
(o, level) => o[this.getFieldName('value')] === sActiveValue[level],
2019-01-12 11:33:27 +08:00
{ childrenKeyName: this.getFieldName('children') },
);
2018-03-02 22:12:52 +08:00
if (result[result.length - 2]) {
2019-01-12 11:33:27 +08:00
return result[result.length - 2][this.getFieldName('children')];
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
return [...options].filter(o => !o.disabled);
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
getActiveOptions(activeValue) {
return arrayTreeFilter(
2019-02-18 22:13:29 +08:00
this.options || [],
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
(o, level) => o[this.getFieldName('value')] === activeValue[level],
2019-01-12 11:33:27 +08:00
{ childrenKeyName: this.getFieldName('children') },
);
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
setPopupVisible(popupVisible) {
2018-03-02 22:12:52 +08:00
if (!hasProp(this, 'popupVisible')) {
2019-01-12 11:33:27 +08:00
this.setState({ sPopupVisible: popupVisible });
2018-03-02 22:12:52 +08:00
}
// sync activeValue with value when panel open
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
if (popupVisible && !this.sPopupVisible) {
2018-03-02 22:12:52 +08:00
this.setState({
sActiveValue: this.sValue,
2019-01-12 11:33:27 +08:00
});
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
this.__emit('popupVisibleChange', popupVisible);
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
handleChange(options, setProps, e) {
2018-03-02 22:12:52 +08:00
if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
2019-12-21 18:37:33 +08:00
this.__emit(
'change',
options.map(o => o[this.getFieldName('value')]),
options,
);
2019-01-12 11:33:27 +08:00
this.setPopupVisible(setProps.visible);
2018-03-02 22:12:52 +08:00
}
},
2019-01-12 11:33:27 +08:00
handlePopupVisibleChange(popupVisible) {
this.setPopupVisible(popupVisible);
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
handleMenuSelect(targetOption, menuIndex, e) {
// Keep focused state for keyboard support
const triggerNode = this.$refs.trigger.getRootDomNode();
2018-03-02 22:12:52 +08:00
if (triggerNode && triggerNode.focus) {
2019-01-12 11:33:27 +08:00
triggerNode.focus();
2018-03-02 16:54:22 +08:00
}
2019-01-12 11:33:27 +08:00
const { changeOnSelect, loadData, expandTrigger } = this;
2018-03-02 22:12:52 +08:00
if (!targetOption || targetOption.disabled) {
2019-01-12 11:33:27 +08:00
return;
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
let { sActiveValue } = this;
sActiveValue = sActiveValue.slice(0, menuIndex + 1);
sActiveValue[menuIndex] = targetOption[this.getFieldName('value')];
const activeOptions = this.getActiveOptions(sActiveValue);
if (
targetOption.isLeaf === false &&
!targetOption[this.getFieldName('children')] &&
loadData
) {
2018-03-02 22:12:52 +08:00
if (changeOnSelect) {
2019-01-12 11:33:27 +08:00
this.handleChange(activeOptions, { visible: true }, e);
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
this.setState({ sActiveValue });
loadData(activeOptions);
return;
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
const newState = {};
if (
!targetOption[this.getFieldName('children')] ||
!targetOption[this.getFieldName('children')].length
) {
this.handleChange(activeOptions, { visible: false }, e);
2018-03-02 22:12:52 +08:00
// set value to activeValue when select leaf option
2019-01-12 11:33:27 +08:00
newState.sValue = sActiveValue;
// add e.type judgement to prevent `onChange` being triggered by mouseEnter
2018-03-02 22:12:52 +08:00
} else if (changeOnSelect && (e.type === 'click' || e.type === 'keydown')) {
if (expandTrigger === 'hover') {
2019-01-12 11:33:27 +08:00
this.handleChange(activeOptions, { visible: false }, e);
2018-03-02 22:12:52 +08:00
} else {
2019-01-12 11:33:27 +08:00
this.handleChange(activeOptions, { visible: true }, e);
2018-03-02 22:12:52 +08:00
}
// set value to activeValue on every select
2019-01-12 11:33:27 +08:00
newState.sValue = sActiveValue;
2018-03-02 16:54:22 +08:00
}
2019-01-12 11:33:27 +08:00
newState.sActiveValue = sActiveValue;
2018-03-02 22:12:52 +08:00
// not change the value by keyboard
2019-01-12 11:33:27 +08:00
if (hasProp(this, 'value') || (e.type === 'keydown' && e.keyCode !== KeyCode.ENTER)) {
delete newState.sValue;
2018-03-02 22:12:52 +08:00
}
2019-01-12 11:33:27 +08:00
this.setState(newState);
2018-03-02 22:12:52 +08:00
},
2019-02-19 22:35:03 +08:00
handleItemDoubleClick() {
2019-02-18 22:13:29 +08:00
const { changeOnSelect } = this.$props;
if (changeOnSelect) {
this.setPopupVisible(false);
}
},
2019-01-12 11:33:27 +08:00
handleKeyDown(e) {
const { $slots } = this;
const children = $slots.default && $slots.default[0];
2018-03-02 22:12:52 +08:00
// https://github.com/ant-design/ant-design/issues/6717
// Don't bind keyboard support when children specify the onKeyDown
if (children) {
2019-01-12 11:33:27 +08:00
const keydown = getEvents(children).keydown;
2018-03-02 22:12:52 +08:00
if (keydown) {
2019-01-12 11:33:27 +08:00
keydown(e);
return;
2018-03-02 22:12:52 +08:00
}
}
2019-01-12 11:33:27 +08:00
const activeValue = [...this.sActiveValue];
const currentLevel = activeValue.length - 1 < 0 ? 0 : activeValue.length - 1;
const currentOptions = this.getCurrentLevelOptions();
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
const currentIndex = currentOptions
.map(o => o[this.getFieldName('value')])
2019-01-12 11:33:27 +08:00
.indexOf(activeValue[currentLevel]);
if (
e.keyCode !== KeyCode.DOWN &&
2018-03-02 16:54:22 +08:00
e.keyCode !== KeyCode.UP &&
e.keyCode !== KeyCode.LEFT &&
e.keyCode !== KeyCode.RIGHT &&
e.keyCode !== KeyCode.ENTER &&
2019-09-02 22:49:34 +08:00
e.keyCode !== KeyCode.SPACE &&
2018-03-02 16:54:22 +08:00
e.keyCode !== KeyCode.BACKSPACE &&
2019-09-02 22:49:34 +08:00
e.keyCode !== KeyCode.ESC &&
e.keyCode !== KeyCode.TAB
2019-01-12 11:33:27 +08:00
) {
return;
2018-03-02 22:12:52 +08:00
}
// Press any keys above to reopen menu
2019-01-12 11:33:27 +08:00
if (
!this.sPopupVisible &&
2018-03-02 16:54:22 +08:00
e.keyCode !== KeyCode.BACKSPACE &&
e.keyCode !== KeyCode.LEFT &&
e.keyCode !== KeyCode.RIGHT &&
2019-09-02 22:49:34 +08:00
e.keyCode !== KeyCode.ESC &&
e.keyCode !== KeyCode.TAB
2019-01-12 11:33:27 +08:00
) {
this.setPopupVisible(true);
return;
2018-03-02 22:12:52 +08:00
}
if (e.keyCode === KeyCode.DOWN || e.keyCode === KeyCode.UP) {
2019-01-12 11:33:27 +08:00
e.preventDefault();
let nextIndex = currentIndex;
2018-03-02 22:12:52 +08:00
if (nextIndex !== -1) {
if (e.keyCode === KeyCode.DOWN) {
2019-01-12 11:33:27 +08:00
nextIndex += 1;
nextIndex = nextIndex >= currentOptions.length ? 0 : nextIndex;
2018-03-02 22:12:52 +08:00
} else {
2019-01-12 11:33:27 +08:00
nextIndex -= 1;
nextIndex = nextIndex < 0 ? currentOptions.length - 1 : nextIndex;
2018-03-02 22:12:52 +08:00
}
2018-03-02 16:54:22 +08:00
} else {
2019-01-12 11:33:27 +08:00
nextIndex = 0;
2018-03-02 16:54:22 +08:00
}
2019-01-12 11:33:27 +08:00
activeValue[currentLevel] = currentOptions[nextIndex][this.getFieldName('value')];
2018-03-02 22:12:52 +08:00
} else if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.BACKSPACE) {
2019-01-12 11:33:27 +08:00
e.preventDefault();
activeValue.splice(activeValue.length - 1, 1);
2018-03-02 22:12:52 +08:00
} else if (e.keyCode === KeyCode.RIGHT) {
2019-01-12 11:33:27 +08:00
e.preventDefault();
if (
currentOptions[currentIndex] &&
currentOptions[currentIndex][this.getFieldName('children')]
) {
activeValue.push(
currentOptions[currentIndex][this.getFieldName('children')][0][
this.getFieldName('value')
],
);
2018-03-02 22:12:52 +08:00
}
2019-09-02 22:49:34 +08:00
} else if (e.keyCode === KeyCode.ESC || e.keyCode === KeyCode.TAB) {
2019-01-12 11:33:27 +08:00
this.setPopupVisible(false);
return;
2018-03-02 16:54:22 +08:00
}
2018-03-02 22:12:52 +08:00
if (!activeValue || activeValue.length === 0) {
2019-01-12 11:33:27 +08:00
this.setPopupVisible(false);
2018-03-02 16:54:22 +08:00
}
2019-01-12 11:33:27 +08:00
const activeOptions = this.getActiveOptions(activeValue);
const targetOption = activeOptions[activeOptions.length - 1];
this.handleMenuSelect(targetOption, activeOptions.length - 1, e);
this.__emit('keydown', e);
2018-03-02 22:12:52 +08:00
},
},
2018-03-02 16:54:22 +08:00
2019-01-12 11:33:27 +08:00
render() {
2018-03-02 22:12:52 +08:00
const {
2019-01-12 11:33:27 +08:00
$props,
sActiveValue,
handleMenuSelect,
sPopupVisible,
handlePopupVisibleChange,
handleKeyDown,
} = this;
2020-01-19 16:58:38 +08:00
const listeners = getListeners(this);
2018-03-02 16:54:22 +08:00
const {
2019-01-12 11:33:27 +08:00
prefixCls,
transitionName,
popupClassName,
2019-02-18 22:13:29 +08:00
options = [],
2019-01-12 11:33:27 +08:00
disabled,
builtinPlacements,
popupPlacement,
...restProps
} = $props;
2018-03-02 16:54:22 +08:00
// Did not show popup when there is no options
2019-01-12 11:33:27 +08:00
let menus = <div />;
let emptyMenuClassName = '';
2018-03-02 16:54:22 +08:00
if (options && options.length > 0) {
2019-01-12 11:33:27 +08:00
const loadingIcon = getComponentFromProp(this, 'loadingIcon');
const expandIcon = getComponentFromProp(this, 'expandIcon') || '>';
2018-03-02 22:12:52 +08:00
const menusProps = {
props: {
...$props,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
fieldNames: this.getFieldNames(),
defaultFieldNames: this.defaultFieldNames,
2018-03-02 22:12:52 +08:00
activeValue: sActiveValue,
visible: sPopupVisible,
loadingIcon,
expandIcon,
2018-03-02 22:12:52 +08:00
},
on: {
2020-01-19 16:58:38 +08:00
...listeners,
2018-03-02 22:12:52 +08:00
select: handleMenuSelect,
2019-02-19 22:35:03 +08:00
itemDoubleClick: this.handleItemDoubleClick,
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
};
menus = <Menus {...menusProps} />;
2018-03-02 16:54:22 +08:00
} else {
2019-01-12 11:33:27 +08:00
emptyMenuClassName = ` ${prefixCls}-menus-empty`;
2018-03-02 22:12:52 +08:00
}
const triggerProps = {
props: {
...restProps,
disabled,
popupPlacement,
builtinPlacements,
2018-03-02 22:12:52 +08:00
popupTransitionName: transitionName,
action: disabled ? [] : ['click'],
popupVisible: disabled ? false : sPopupVisible,
prefixCls: `${prefixCls}-menus`,
popupClassName: popupClassName + emptyMenuClassName,
},
on: {
2020-01-19 16:58:38 +08:00
...listeners,
2018-03-02 22:12:52 +08:00
popupVisibleChange: handlePopupVisibleChange,
},
ref: 'trigger',
2019-01-12 11:33:27 +08:00
};
2020-04-15 22:56:58 +08:00
const children = getSlot(this, 'default');
2018-03-02 16:54:22 +08:00
return (
2018-03-02 22:12:52 +08:00
<Trigger {...triggerProps}>
2019-02-18 22:13:29 +08:00
{children &&
2020-04-15 22:56:58 +08:00
cloneElement(children[0], {
2019-01-12 11:33:27 +08:00
on: {
keydown: handleKeyDown,
},
attrs: {
tabIndex: disabled ? undefined : 0,
},
})}
<template slot="popup">{menus}</template>
2018-03-02 16:54:22 +08:00
</Trigger>
2019-01-12 11:33:27 +08:00
);
2018-03-02 22:12:52 +08:00
},
2019-01-12 11:33:27 +08:00
};