123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572 |
- 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;
|