choerodon-ui/es/cascader/index.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["prefixCls", "inputPrefixCls", "children", "placeholder", "size", "disabled", "className", "style", "showSearch", "allowClear"];
import React, { Component } from 'react';
import arrayTreeFilter from 'array-tree-filter';
import classNames from 'classnames';
import omit from 'lodash/omit';
import isEmpty from 'lodash/isEmpty';
import Input from '../input';
import Icon from '../icon';
import RcCascader from '../rc-components/cascader';
import KeyCode from '../_util/KeyCode';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import enUS from '../rc-components/cascader/locale/en_US';
import ConfigContext from '../config-provider/ConfigContext';
export var MenuMode;

(function (MenuMode) {
  MenuMode["single"] = "single";
  MenuMode["multiple"] = "multiple";
})(MenuMode || (MenuMode = {}));

function highlightKeyword(str, keyword, prefixCls) {
  return str.split(keyword).map(function (node, index) {
    return index === 0 ? node : [/*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-menu-item-keyword"),
      key: "seperator"
    }, keyword), node];
  });
}

function defaultFilterOption(inputValue, path, names) {
  return path.some(function (option) {
    return option[names.label].indexOf(inputValue) > -1;
  });
}

function defaultRenderFilteredOption(inputValue, path, prefixCls, names) {
  return path.map(function (option, index) {
    var label = option[names.label];
    var node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue, prefixCls) : label;
    return index === 0 ? node : [' / ', node];
  });
}

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() {
  var fieldNames = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var names = {
    children: fieldNames.children || 'children',
    label: fieldNames.label || 'label',
    value: fieldNames.value || 'value'
  };
  return names;
}

var defaultDisplayRender = function defaultDisplayRender(label) {
  return label.join(' / ');
};

var Cascader = /*#__PURE__*/function (_Component) {
  _inherits(Cascader, _Component);

  var _super = _createSuper(Cascader);

  function Cascader(props) {
    var _this;

    _classCallCheck(this, Cascader);

    _this = _super.call(this, props);

    _this.handleChange = function (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);
    };

    _this.handlePopupVisibleChange = function (popupVisible) {
      if (!('popupVisible' in _this.props)) {
        var inputValue = _this.state.inputValue;

        _this.setState({
          popupVisible: popupVisible,
          inputFocused: popupVisible,
          inputValue: popupVisible ? inputValue : ''
        });
      }

      var onPopupVisibleChange = _this.props.onPopupVisibleChange;

      if (onPopupVisibleChange) {
        onPopupVisibleChange(popupVisible);
      }
    };

    _this.handleInputBlur = function () {
      _this.setState({
        inputFocused: false
      });
    };

    _this.handleInputClick = function (e) {
      var _this$state = _this.state,
          inputFocused = _this$state.inputFocused,
          popupVisible = _this$state.popupVisible; // Prevent `Trigger` behaviour.

      if (inputFocused || popupVisible) {
        e.stopPropagation();

        if (e.nativeEvent.stopImmediatePropagation) {
          e.nativeEvent.stopImmediatePropagation();
        }
      }
    };

    _this.handleKeyDown = function (e) {
      if (e.keyCode === KeyCode.BACKSPACE) {
        e.stopPropagation();
      }
    };

    _this.handleInputChange = function (e) {
      var inputValue = e.target.value;

      _this.setState({
        inputValue: inputValue
      });
    };

    _this.clearSelection = function (e) {
      e.preventDefault();
      e.stopPropagation();
      var inputValue = _this.state.inputValue;

      if (!inputValue) {
        _this.setValue([]);

        _this.handlePopupVisibleChange(false);
      } else {
        _this.setState({
          inputValue: ''
        });
      }
    };

    _this.setValue = function (value) {
      var selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

      if (!('value' in _this.props)) {
        _this.setState({
          value: value
        });
      }

      var onChange = _this.props.onChange;

      if (onChange) {
        onChange(value, selectedOptions);
      }
    };

    _this.saveInput = function (node) {
      _this.input = node;
    };

    _this.state = {
      value: props.value || props.defaultValue || [],
      inputValue: '',
      inputFocused: false,
      popupVisible: props.popupVisible,
      flattenOptions: props.showSearch ? _this.flattenTree(props.options, props.changeOnSelect, props.fieldNames) : undefined
    };
    return _this;
  }

  _createClass(Cascader, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value || []
        });
      }

      if ('popupVisible' in nextProps) {
        this.setState({
          popupVisible: nextProps.popupVisible
        });
      }

      var options = this.props.options;

      if (nextProps.showSearch && options !== nextProps.options) {
        this.setState({
          flattenOptions: this.flattenTree(nextProps.options, nextProps.changeOnSelect, nextProps.fieldNames)
        });
      }
    }
  }, {
    key: "getLabel",
    value: function getLabel() {
      var _this$props = this.props,
          options = _this$props.options,
          _this$props$displayRe = _this$props.displayRender,
          displayRender = _this$props$displayRe === void 0 ? defaultDisplayRender : _this$props$displayRe,
          fieldNames = _this$props.fieldNames;
      var names = getFilledFieldNames(fieldNames);
      var value = this.state.value;
      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 label = selectedOptions.map(function (o) {
        return o[names.label];
      });
      return displayRender(label, selectedOptions);
    }
  }, {
    key: "flattenTree",
    value: function flattenTree(options, changeOnSelect, fieldNames) {
      var _this2 = this;

      var ancestor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
      var names = getFilledFieldNames(fieldNames);
      var flattenOptions = [];
      var childrenName = names.children;
      options.forEach(function (option) {
        var path = ancestor.concat(option);

        if (changeOnSelect || !option[childrenName] || !option[childrenName].length) {
          flattenOptions.push(path);
        }

        if (option[childrenName]) {
          flattenOptions = flattenOptions.concat(_this2.flattenTree(option[childrenName], changeOnSelect, fieldNames, path));
        }
      });
      return flattenOptions;
    }
  }, {
    key: "generateFilteredOptions",
    value: function generateFilteredOptions(prefixCls) {
      var _ref2;

      var _this$props2 = this.props,
          showSearch = _this$props2.showSearch,
          notFoundContent = _this$props2.notFoundContent,
          fieldNames = _this$props2.fieldNames;
      var names = getFilledFieldNames(fieldNames);
      var _showSearch$filter = showSearch.filter,
          filter = _showSearch$filter === void 0 ? defaultFilterOption : _showSearch$filter,
          _showSearch$render = showSearch.render,
          render = _showSearch$render === void 0 ? defaultRenderFilteredOption : _showSearch$render,
          _showSearch$sort = showSearch.sort,
          sort = _showSearch$sort === void 0 ? defaultSortFilteredOption : _showSearch$sort;
      var _this$state2 = this.state,
          _this$state2$flattenO = _this$state2.flattenOptions,
          flattenOptions = _this$state2$flattenO === void 0 ? [] : _this$state2$flattenO,
          inputValue = _this$state2.inputValue;
      var filtered = flattenOptions.filter(function (path) {
        return filter(inputValue, path, names);
      }).sort(function (a, b) {
        return sort(a, b, inputValue, names);
      });

      if (filtered.length > 0) {
        return filtered.map(function (path) {
          var _ref;

          return _ref = {
            __IS_FILTERED_OPTION: true,
            path: path
          }, _defineProperty(_ref, names.label, render(inputValue, path, prefixCls, names)), _defineProperty(_ref, names.value, path.map(function (o) {
            return o[names.value];
          })), _defineProperty(_ref, "disabled", path.some(function (o) {
            return !!o.disabled;
          })), _ref;
        });
      }

      return [(_ref2 = {}, _defineProperty(_ref2, names.label, notFoundContent), _defineProperty(_ref2, names.value, 'ANT_CASCADER_NOT_FOUND'), _defineProperty(_ref2, "disabled", true), _ref2)];
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _classNames2,
          _this3 = this;

      var props = this.props,
          state = this.state;

      var customizePrefixCls = props.prefixCls,
          customizeInputPrefixCls = props.inputPrefixCls,
          children = props.children,
          placeholder = props.placeholder,
          size = props.size,
          disabled = props.disabled,
          className = props.className,
          style = props.style,
          _props$showSearch = props.showSearch,
          showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
          allowClear = props.allowClear,
          otherProps = _objectWithoutProperties(props, _excluded);

      var getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('cascader', customizePrefixCls);
      var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
      var defaultValue = props.defaultValue;
      var value = state.value,
          inputFocused = state.inputFocused;
      var arrowCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-picker-arrow"), true), _defineProperty(_classNames, "".concat(prefixCls, "-picker-arrow-expand"), state.popupVisible), _classNames));
      var pickerCls = classNames(className, "".concat(prefixCls, "-picker"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-picker-with-value"), state.inputValue), _defineProperty(_classNames2, "".concat(prefixCls, "-picker-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-picker-").concat(size), !!size), _defineProperty(_classNames2, "".concat(prefixCls, "-picker-show-search"), !!showSearch), _defineProperty(_classNames2, "".concat(prefixCls, "-picker-focused"), inputFocused), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-has-value"), !!defaultValue || value.length), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-focused"), state.popupVisible), _classNames2)); // Fix bug of https://github.com/facebook/react/pull/5004
      // and https://fb.me/react-unknown-prop

      var inputProps = omit(otherProps, ['onChange', 'options', 'popupPlacement', 'transitionName', 'displayRender', 'onPopupVisibleChange', 'changeOnSelect', 'expandTrigger', 'popupVisible', 'getPopupContainer', 'loadData', 'popupClassName', 'filterOption', 'renderFilteredOption', 'sortFilteredOption', 'notFoundContent', 'fieldNames', 'allowClear', 'singleMenuStyle', 'singleMenuItemStyle', 'singlePleaseRender', 'singleMenuItemRender', 'menuMode', 'defaultValue']);
      var options = props.options;

      if (state.inputValue) {
        options = this.generateFilteredOptions(prefixCls);
      } // Dropdown menu should keep previous status until it is fully closed.


      if (!state.popupVisible) {
        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 && state.inputValue && this.input) {
        dropdownMenuColumnStyle.width = this.input.input.offsetWidth;
      }

      var clearIcon = allowClear && !disabled && value.length > 0 || state.inputValue ? /*#__PURE__*/React.createElement(Icon, {
        type: "close",
        className: "".concat(prefixCls, "-picker-clear"),
        onClick: this.clearSelection
      }) : null;
      var input = children || /*#__PURE__*/React.createElement("span", {
        style: style,
        className: pickerCls
      }, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-picker-label")
      }, this.getLabel()), /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
        ref: this.saveInput,
        prefixCls: inputPrefixCls,
        placeholder: value && value.length > 0 ? undefined : placeholder,
        className: "".concat(prefixCls, "-input"),
        size: size,
        value: state.inputValue,
        disabled: disabled,
        readOnly: !showSearch,
        autoComplete: "off",
        onClick: showSearch ? this.handleInputClick : undefined,
        onBlur: showSearch ? this.handleInputBlur : undefined,
        onKeyDown: this.handleKeyDown,
        onChange: showSearch ? this.handleInputChange : undefined
      })), clearIcon, /*#__PURE__*/React.createElement(Icon, {
        type: "arrow_drop_down",
        className: arrowCls
      }));
      /**
       * 添加多语言配置
       * @param locale any
       */

      var renderCascader = function renderCascader(locale) {
        // 只配置部分语言其他英语即可
        var cascaderLocal = isEmpty(locale) ? enUS.Cascader : locale;
        return /*#__PURE__*/React.createElement(RcCascader, _extends({}, props, {
          inputPrefixCls: inputPrefixCls,
          prefixCls: prefixCls,
          options: options,
          value: value,
          popupVisible: state.popupVisible,
          onPopupVisibleChange: _this3.handlePopupVisibleChange,
          onChange: _this3.handleChange,
          dropdownMenuColumnStyle: dropdownMenuColumnStyle,
          locale: cascaderLocal
        }), input);
      };

      return /*#__PURE__*/React.createElement(LocaleReceiver, {
        componentName: "Cascader",
        defaultLocale: enUS
      }, renderCascader);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Cascader;
}(Component);

export { Cascader as default };
Cascader.displayName = 'Cascader';
Cascader.defaultProps = {
  placeholder: 'Please select',
  transitionName: 'slide-up',
  popupPlacement: 'bottomLeft',
  options: [],
  disabled: false,
  allowClear: true,
  notFoundContent: 'Not Found',
  menuMode: MenuMode.multiple
};
//# sourceMappingURL=index.js.map