choerodon-ui/lib/cascader/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "MenuMode", {
  enumerable: true,
  get: function get() {
    return _enum.MenuMode;
  }
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = _interopRequireWildcard(require("react"));

var _arrayTreeFilter = _interopRequireDefault(require("array-tree-filter"));

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _enum = require("./enum");

var _input = _interopRequireDefault(require("../input"));

var _icon = _interopRequireDefault(require("../icon"));

var _cascader = _interopRequireDefault(require("../rc-components/cascader"));

var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));

var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

var _en_US = _interopRequireDefault(require("../rc-components/cascader/locale/en_US"));

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

var _excluded = ["prefixCls", "inputPrefixCls", "children", "placeholder", "size", "disabled", "className", "style", "showSearch", "allowClear"];

function highlightKeyword(str, keyword, prefixCls) {
  return str.split(keyword).map(function (node, index) {
    return index === 0 ? node : [/*#__PURE__*/_react["default"].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) {
  (0, _inherits2["default"])(Cascader, _Component);

  var _super = (0, _createSuper2["default"])(Cascader);

  function Cascader(props) {
    var _this;

    (0, _classCallCheck2["default"])(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["default"].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;
  }

  (0, _createClass2["default"])(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 = (0, _arrayTreeFilter["default"])(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
          }, (0, _defineProperty2["default"])(_ref, names.label, render(inputValue, path, prefixCls, names)), (0, _defineProperty2["default"])(_ref, names.value, path.map(function (o) {
            return o[names.value];
          })), (0, _defineProperty2["default"])(_ref, "disabled", path.some(function (o) {
            return !!o.disabled;
          })), _ref;
        });
      }

      return [(_ref2 = {}, (0, _defineProperty2["default"])(_ref2, names.label, notFoundContent), (0, _defineProperty2["default"])(_ref2, names.value, 'ANT_CASCADER_NOT_FOUND'), (0, _defineProperty2["default"])(_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 = (0, _objectWithoutProperties2["default"])(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 = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-picker-arrow"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-picker-arrow-expand"), state.popupVisible), _classNames));
      var pickerCls = (0, _classnames["default"])(className, "".concat(prefixCls, "-picker"), (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-with-value"), state.inputValue), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-disabled"), disabled), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-").concat(size), !!size), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-show-search"), !!showSearch), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-focused"), inputFocused), (0, _defineProperty2["default"])(_classNames2, "".concat(inputPrefixCls, "-has-value"), !!defaultValue || value.length), (0, _defineProperty2["default"])(_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 = (0, _omit["default"])(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["default"].createElement(_icon["default"], {
        type: "close",
        className: "".concat(prefixCls, "-picker-clear"),
        onClick: this.clearSelection
      }) : null;

      var input = children || /*#__PURE__*/_react["default"].createElement("span", {
        style: style,
        className: pickerCls
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-picker-label")
      }, this.getLabel()), /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, 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["default"].createElement(_icon["default"], {
        type: "arrow_drop_down",
        className: arrowCls
      }));
      /**
       * 添加多语言配置
       * @param locale any
       */


      var renderCascader = function renderCascader(locale) {
        // 只配置部分语言其他英语即可
        var cascaderLocal = (0, _isEmpty["default"])(locale) ? _en_US["default"].Cascader : locale;
        return /*#__PURE__*/_react["default"].createElement(_cascader["default"], (0, _extends2["default"])({}, 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["default"].createElement(_LocaleReceiver["default"], {
        componentName: "Cascader",
        defaultLocale: _en_US["default"]
      }, renderCascader);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Cascader;
}(_react.Component);

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