NuclearDispersionSystem/ant-design-vue-jeecg/node_modules/ant-design-vue/es/cascader/index.js
2023-09-14 14:47:11 +08:00

572 lines
20 KiB
Java
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from '../_util/vue-types';
import VcCascader from '../vc-cascader';
import arrayTreeFilter from 'array-tree-filter';
import classNames from 'classnames';
import omit from 'omit.js';
import KeyCode from '../_util/KeyCode';
import Input from '../input';
import Icon from '../icon';
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement, getListeners } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import { cloneElement } from '../_util/vnode';
import warning from '../_util/warning';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Base from '../base';
var CascaderOptionType = PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
label: PropTypes.any,
disabled: PropTypes.bool,
children: PropTypes.array,
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}).loose;
var FieldNamesType = PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
children: PropTypes.string
}).loose;
var CascaderExpandTrigger = PropTypes.oneOf(['click', 'hover']);
var ShowSearchType = PropTypes.shape({
filter: PropTypes.func,
render: PropTypes.func,
sort: PropTypes.func,
matchInputWidth: PropTypes.bool,
limit: PropTypes.oneOfType([Boolean, Number])
}).loose;
function noop() {}
var CascaderProps = {
/** 可选项数据源 */
options: PropTypes.arrayOf(CascaderOptionType).def([]),
/** 默认的选中项 */
defaultValue: PropTypes.array,
/** 指定选中项 */
value: PropTypes.array,
/** 选择完成后的回调 */
// onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
/** 选择后展示的渲染函数 */
displayRender: PropTypes.func,
transitionName: PropTypes.string.def('slide-up'),
popupStyle: PropTypes.object.def(function () {
return {};
}),
/** 自定义浮层类名 */
popupClassName: PropTypes.string,
/** 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` */
popupPlacement: PropTypes.oneOf(['bottomLeft', 'bottomRight', 'topLeft', 'topRight']).def('bottomLeft'),
/** 输入框占位文本*/
placeholder: PropTypes.string.def('Please select'),
/** 输入框大小,可选 `large` `default` `small` */
size: PropTypes.oneOf(['large', 'default', 'small']),
/** 禁用*/
disabled: PropTypes.bool.def(false),
/** 是否支持清除*/
allowClear: PropTypes.bool.def(true),
showSearch: PropTypes.oneOfType([Boolean, ShowSearchType]),
notFoundContent: PropTypes.any,
loadData: PropTypes.func,
/** 次级菜单的展开方式,可选 'click' 和 'hover' */
expandTrigger: CascaderExpandTrigger,
/** 当此项为 true 时,点选每级菜单选项值都会发生变化 */
changeOnSelect: PropTypes.bool,
/** 浮层可见变化时回调 */
// onPopupVisibleChange?: (popupVisible: boolean) => void;
prefixCls: PropTypes.string,
inputPrefixCls: PropTypes.string,
getPopupContainer: PropTypes.func,
popupVisible: PropTypes.bool,
fieldNames: FieldNamesType,
autoFocus: PropTypes.bool,
suffixIcon: PropTypes.any
};
// We limit the filtered item count by default
var defaultLimit = 50;
function defaultFilterOption(inputValue, path, names) {
return path.some(function (option) {
return option[names.label].indexOf(inputValue) > -1;
});
}
function defaultSortFilteredOption(a, b, inputValue, names) {
function callback(elem) {
return elem[names.label].indexOf(inputValue) > -1;
}
return a.findIndex(callback) - b.findIndex(callback);
}
function getFilledFieldNames(_ref) {
var _ref$fieldNames = _ref.fieldNames,
fieldNames = _ref$fieldNames === undefined ? {} : _ref$fieldNames;
var names = {
children: fieldNames.children || 'children',
label: fieldNames.label || 'label',
value: fieldNames.value || 'value'
};
return names;
}
function flattenTree() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var props = arguments[1];
var ancestor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var names = getFilledFieldNames(props);
var flattenOptions = [];
var childrenName = names.children;
options.forEach(function (option) {
var path = ancestor.concat(option);
if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
flattenOptions.push(path);
}
if (option[childrenName]) {
flattenOptions = flattenOptions.concat(flattenTree(option[childrenName], props, path));
}
});
return flattenOptions;
}
var defaultDisplayRender = function defaultDisplayRender(_ref2) {
var labels = _ref2.labels;
return labels.join(' / ');
};
var Cascader = {
inheritAttrs: false,
name: 'ACascader',
mixins: [BaseMixin],
props: CascaderProps,
model: {
prop: 'value',
event: 'change'
},
provide: function provide() {
return {
savePopupRef: this.savePopupRef
};
},
inject: {
configProvider: { 'default': function _default() {
return ConfigConsumerProps;
} },
localeData: { 'default': function _default() {
return {};
} }
},
data: function data() {
this.cachedOptions = [];
var value = this.value,
defaultValue = this.defaultValue,
popupVisible = this.popupVisible,
showSearch = this.showSearch,
options = this.options;
return {
sValue: value || defaultValue || [],
inputValue: '',
inputFocused: false,
sPopupVisible: popupVisible,
flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined
};
},
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
if (_this.autoFocus && !_this.showSearch && !_this.disabled) {
_this.$refs.picker.focus();
}
});
},
watch: {
value: function value(val) {
this.setState({ sValue: val || [] });
},
popupVisible: function popupVisible(val) {
this.setState({ sPopupVisible: val });
},
options: function options(val) {
if (this.showSearch) {
this.setState({ flattenOptions: flattenTree(val, this.$props) });
}
}
},
methods: {
savePopupRef: function savePopupRef(ref) {
this.popupRef = ref;
},
highlightKeyword: function highlightKeyword(str, keyword, prefixCls) {
var h = this.$createElement;
return str.split(keyword).map(function (node, index) {
return index === 0 ? node : [h(
'span',
{ 'class': prefixCls + '-menu-item-keyword' },
[keyword]
), node];
});
},
defaultRenderFilteredOption: function defaultRenderFilteredOption(_ref3) {
var _this2 = this;
var inputValue = _ref3.inputValue,
path = _ref3.path,
prefixCls = _ref3.prefixCls,
names = _ref3.names;
return path.map(function (option, index) {
var label = option[names.label];
var node = label.indexOf(inputValue) > -1 ? _this2.highlightKeyword(label, inputValue, prefixCls) : label;
return index === 0 ? node : [' / ', node];
});
},
handleChange: function handleChange(value, selectedOptions) {
this.setState({ inputValue: '' });
if (selectedOptions[0].__IS_FILTERED_OPTION) {
var unwrappedValue = value[0];
var unwrappedSelectedOptions = selectedOptions[0].path;
this.setValue(unwrappedValue, unwrappedSelectedOptions);
return;
}
this.setValue(value, selectedOptions);
},
handlePopupVisibleChange: function handlePopupVisibleChange(popupVisible) {
if (!hasProp(this, 'popupVisible')) {
this.setState(function (state) {
return {
sPopupVisible: popupVisible,
inputFocused: popupVisible,
inputValue: popupVisible ? state.inputValue : ''
};
});
}
this.$emit('popupVisibleChange', popupVisible);
},
handleInputFocus: function handleInputFocus(e) {
this.$emit('focus', e);
},
handleInputBlur: function handleInputBlur(e) {
this.setState({
inputFocused: false
});
this.$emit('blur', e);
},
handleInputClick: function handleInputClick(e) {
var inputFocused = this.inputFocused,
sPopupVisible = this.sPopupVisible;
// Prevent `Trigger` behaviour.
if (inputFocused || sPopupVisible) {
e.stopPropagation();
if (e.nativeEvent && e.nativeEvent.stopImmediatePropagation) {
e.nativeEvent.stopImmediatePropagation();
}
}
},
handleKeyDown: function handleKeyDown(e) {
if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
}
},
handleInputChange: function handleInputChange(e) {
var inputValue = e.target.value;
this.setState({ inputValue: inputValue });
this.$emit('search', inputValue);
},
setValue: function setValue(value, selectedOptions) {
if (!hasProp(this, 'value')) {
this.setState({ sValue: value });
}
this.$emit('change', value, selectedOptions);
},
getLabel: function getLabel() {
var options = this.options,
$scopedSlots = this.$scopedSlots;
var names = getFilledFieldNames(this.$props);
var displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender;
var value = this.sValue;
var unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
var selectedOptions = arrayTreeFilter(options, function (o, level) {
return o[names.value] === unwrappedValue[level];
}, { childrenKeyName: names.children });
var labels = selectedOptions.map(function (o) {
return o[names.label];
});
return displayRender({ labels: labels, selectedOptions: selectedOptions });
},
clearSelection: function clearSelection(e) {
e.preventDefault();
e.stopPropagation();
if (!this.inputValue) {
this.setValue([]);
this.handlePopupVisibleChange(false);
} else {
this.setState({ inputValue: '' });
}
},
generateFilteredOptions: function generateFilteredOptions(prefixCls, renderEmpty) {
var _ref5;
var h = this.$createElement;
var showSearch = this.showSearch,
notFoundContent = this.notFoundContent,
$scopedSlots = this.$scopedSlots;
var names = getFilledFieldNames(this.$props);
var _showSearch$filter = showSearch.filter,
filter = _showSearch$filter === undefined ? defaultFilterOption : _showSearch$filter,
_showSearch$sort = showSearch.sort,
sort = _showSearch$sort === undefined ? defaultSortFilteredOption : _showSearch$sort,
_showSearch$limit = showSearch.limit,
limit = _showSearch$limit === undefined ? defaultLimit : _showSearch$limit;
var render = showSearch.render || $scopedSlots.showSearchRender || this.defaultRenderFilteredOption;
var _$data = this.$data,
_$data$flattenOptions = _$data.flattenOptions,
flattenOptions = _$data$flattenOptions === undefined ? [] : _$data$flattenOptions,
inputValue = _$data.inputValue;
// Limit the filter if needed
var filtered = void 0;
if (limit > 0) {
filtered = [];
var matchCount = 0;
// Perf optimization to filter items only below the limit
flattenOptions.some(function (path) {
var match = filter(inputValue, path, names);
if (match) {
filtered.push(path);
matchCount += 1;
}
return matchCount >= limit;
});
} else {
warning(typeof limit !== 'number', 'Cascader', "'limit' of showSearch in Cascader should be positive number or false.");
filtered = flattenOptions.filter(function (path) {
return filter(inputValue, path, names);
});
}
filtered.sort(function (a, b) {
return sort(a, b, inputValue, names);
});
if (filtered.length > 0) {
return filtered.map(function (path) {
var _ref4;
return _ref4 = {
__IS_FILTERED_OPTION: true,
path: path
}, _defineProperty(_ref4, names.label, render({ inputValue: inputValue, path: path, prefixCls: prefixCls, names: names })), _defineProperty(_ref4, names.value, path.map(function (o) {
return o[names.value];
})), _defineProperty(_ref4, 'disabled', path.some(function (o) {
return !!o.disabled;
})), _ref4;
});
}
return [(_ref5 = {}, _defineProperty(_ref5, names.label, notFoundContent || renderEmpty(h, 'Cascader')), _defineProperty(_ref5, names.value, 'ANT_CASCADER_NOT_FOUND'), _defineProperty(_ref5, 'disabled', true), _ref5)];
},
focus: function focus() {
if (this.showSearch) {
this.$refs.input.focus();
} else {
this.$refs.picker.focus();
}
},
blur: function blur() {
if (this.showSearch) {
this.$refs.input.blur();
} else {
this.$refs.picker.blur();
}
}
},
render: function render() {
var _classNames, _classNames2, _classNames3;
var h = arguments[0];
var $slots = this.$slots,
sPopupVisible = this.sPopupVisible,
inputValue = this.inputValue,
configProvider = this.configProvider,
localeData = this.localeData;
var _$data2 = this.$data,
value = _$data2.sValue,
inputFocused = _$data2.inputFocused;
var props = getOptionProps(this);
var suffixIcon = getComponentFromProp(this, 'suffixIcon');
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
var getContextPopupContainer = configProvider.getPopupContainer;
var customizePrefixCls = props.prefixCls,
customizeInputPrefixCls = props.inputPrefixCls,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === undefined ? localeData.placeholder : _props$placeholder,
size = props.size,
disabled = props.disabled,
allowClear = props.allowClear,
_props$showSearch = props.showSearch,
showSearch = _props$showSearch === undefined ? false : _props$showSearch,
notFoundContent = props.notFoundContent,
otherProps = _objectWithoutProperties(props, ['prefixCls', 'inputPrefixCls', 'placeholder', 'size', 'disabled', 'allowClear', 'showSearch', 'notFoundContent']);
var getPrefixCls = this.configProvider.getPrefixCls;
var renderEmpty = this.configProvider.renderEmpty;
var prefixCls = getPrefixCls('cascader', customizePrefixCls);
var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
var sizeCls = classNames((_classNames = {}, _defineProperty(_classNames, inputPrefixCls + '-lg', size === 'large'), _defineProperty(_classNames, inputPrefixCls + '-sm', size === 'small'), _classNames));
var clearIcon = allowClear && !disabled && value.length > 0 || inputValue ? h(Icon, {
attrs: {
type: 'close-circle',
theme: 'filled'
},
'class': prefixCls + '-picker-clear',
on: {
'click': this.clearSelection
},
key: 'clear-icon'
}) : null;
var arrowCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, prefixCls + '-picker-arrow', true), _defineProperty(_classNames2, prefixCls + '-picker-arrow-expand', sPopupVisible), _classNames2));
var pickerCls = classNames(getClass(this), prefixCls + '-picker', (_classNames3 = {}, _defineProperty(_classNames3, prefixCls + '-picker-with-value', inputValue), _defineProperty(_classNames3, prefixCls + '-picker-disabled', disabled), _defineProperty(_classNames3, prefixCls + '-picker-' + size, !!size), _defineProperty(_classNames3, prefixCls + '-picker-show-search', !!showSearch), _defineProperty(_classNames3, prefixCls + '-picker-focused', inputFocused), _classNames3));
// Fix bug of https://github.com/facebook/react/pull/5004
// and https://fb.me/react-unknown-prop
var tempInputProps = omit(otherProps, ['options', 'popupPlacement', 'transitionName', 'displayRender', 'changeOnSelect', 'expandTrigger', 'popupVisible', 'getPopupContainer', 'loadData', 'popupClassName', 'filterOption', 'renderFilteredOption', 'sortFilteredOption', 'notFoundContent', 'defaultValue', 'fieldNames']);
var options = props.options;
var names = getFilledFieldNames(this.$props);
if (options && options.length > 0) {
if (inputValue) {
options = this.generateFilteredOptions(prefixCls, renderEmpty);
}
} else {
var _ref6;
options = [(_ref6 = {}, _defineProperty(_ref6, names.label, notFoundContent || renderEmpty(h, 'Cascader')), _defineProperty(_ref6, names.value, 'ANT_CASCADER_NOT_FOUND'), _defineProperty(_ref6, 'disabled', true), _ref6)];
}
// Dropdown menu should keep previous status until it is fully closed.
if (!sPopupVisible) {
options = this.cachedOptions;
} else {
this.cachedOptions = options;
}
var dropdownMenuColumnStyle = {};
var isNotFound = (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND';
if (isNotFound) {
dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
}
// The default value of `matchInputWidth` is `true`
var resultListMatchInputWidth = showSearch.matchInputWidth !== false;
if (resultListMatchInputWidth && (inputValue || isNotFound) && this.$refs.input) {
dropdownMenuColumnStyle.width = this.$refs.input.$el.offsetWidth + 'px';
}
// showSearch时focus、blur在input上触发反之在ref='picker'上触发
var inputProps = {
props: _extends({}, tempInputProps, {
prefixCls: inputPrefixCls,
placeholder: value && value.length > 0 ? undefined : placeholder,
value: inputValue,
disabled: 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)
};
var children = filterEmpty($slots['default']);
var inputIcon = suffixIcon && (isValidElement(suffixIcon) ? cloneElement(suffixIcon, {
'class': _defineProperty({}, prefixCls + '-picker-arrow', true)
}) : h(
'span',
{ 'class': prefixCls + '-picker-arrow' },
[suffixIcon]
)) || h(Icon, {
attrs: { type: 'down' },
'class': arrowCls });
var input = children.length ? children : h(
'span',
{ 'class': pickerCls, style: getStyle(this), ref: 'picker' },
[showSearch ? h(
'span',
{ 'class': prefixCls + '-picker-label' },
[this.getLabel()]
) : null, h(Input, inputProps), !showSearch ? h(
'span',
{ 'class': prefixCls + '-picker-label' },
[this.getLabel()]
) : null, clearIcon, inputIcon]
);
var expandIcon = h(Icon, {
attrs: { type: 'right' }
});
var loadingIcon = h(
'span',
{ 'class': prefixCls + '-menu-item-loading-icon' },
[h(Icon, {
attrs: { type: 'redo', spin: true }
})]
);
var getPopupContainer = props.getPopupContainer || getContextPopupContainer;
var cascaderProps = {
props: _extends({}, props, {
getPopupContainer: getPopupContainer,
options: options,
prefixCls: prefixCls,
value: value,
popupVisible: sPopupVisible,
dropdownMenuColumnStyle: dropdownMenuColumnStyle,
expandIcon: expandIcon,
loadingIcon: loadingIcon
}),
on: _extends({}, getListeners(this), {
popupVisibleChange: this.handlePopupVisibleChange,
change: this.handleChange
})
};
return h(
VcCascader,
cascaderProps,
[input]
);
}
};
/* istanbul ignore next */
Cascader.install = function (Vue) {
Vue.use(Base);
Vue.component(Cascader.name, Cascader);
};
export default Cascader;