choerodon-ui/lib/cascader/index.js

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

"use strict";

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

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

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

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

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

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

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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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 _input = _interopRequireDefault(require("../input"));

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

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

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

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

var _configure = require("../configure");

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

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

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var MenuMode;
exports.MenuMode = MenuMode;

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

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

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

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

function defaultSortFilteredOption(a, b, inputValue) {
  function callback(elem) {
    return elem.label.indexOf(inputValue) > -1;
  }

  return a.findIndex(callback) - b.findIndex(callback);
}

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

var Cascader =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(Cascader, _Component);

  var _super = _createSuper(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();
        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)
    };
    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)
        });
      }
    }
  }, {
    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;
      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.value === unwrappedValue[level];
      });
      var label = selectedOptions.map(function (o) {
        return o.label;
      });
      return displayRender(label, selectedOptions);
    }
  }, {
    key: "flattenTree",
    value: function flattenTree(options, changeOnSelect) {
      var _this2 = this;

      var ancestor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
      var flattenOptions = [];
      options.forEach(function (option) {
        var path = ancestor.concat(option);

        if (changeOnSelect || !option.children || !option.children.length) {
          flattenOptions.push(path);
        }

        if (option.children) {
          flattenOptions = flattenOptions.concat(_this2.flattenTree(option.children, changeOnSelect, path));
        }
      });
      return flattenOptions;
    }
  }, {
    key: "generateFilteredOptions",
    value: function generateFilteredOptions(prefixCls) {
      var _this$props2 = this.props,
          showSearch = _this$props2.showSearch,
          notFoundContent = _this$props2.notFoundContent;
      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,
          flattenOptions = _this$state2.flattenOptions,
          inputValue = _this$state2.inputValue;
      var filtered = flattenOptions.filter(function (path) {
        return filter(inputValue, path);
      }).sort(function (a, b) {
        return sort(a, b, inputValue);
      });

      if (filtered.length > 0) {
        return filtered.map(function (path) {
          return {
            __IS_FILTERED_OPTION: true,
            path: path,
            label: render(inputValue, path, prefixCls),
            value: path.map(function (o) {
              return o.value;
            }),
            disabled: path.some(function (o) {
              return o.disabled;
            })
          };
        });
      }

      return [{
        label: notFoundContent,
        value: 'ANT_CASCADER_NOT_FOUND',
        disabled: true
      }];
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _classNames2,
          _classNames3,
          _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, ["prefixCls", "inputPrefixCls", "children", "placeholder", "size", "disabled", "className", "style", "showSearch", "allowClear"]);
      var prefixCls = (0, _configure.getPrefixCls)('cascader', customizePrefixCls);
      var inputPrefixCls = (0, _configure.getPrefixCls)('input', customizeInputPrefixCls);
      var defaultValue = props.defaultValue;
      var value = state.value;
      var sizeCls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(inputPrefixCls, "-lg"), size === _enum.Size.large), (0, _defineProperty2["default"])(_classNames, "".concat(inputPrefixCls, "-sm"), size === _enum.Size.small), _classNames));
      var arrowCls = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-arrow"), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-picker-arrow-expand"), state.popupVisible), _classNames2));
      var pickerCls = (0, _classnames["default"])(className, "".concat(prefixCls, "-picker"), (_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-picker-with-value"), state.inputValue), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-picker-disabled"), disabled), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-picker-").concat(size), !!size), (0, _defineProperty2["default"])(_classNames3, "".concat(inputPrefixCls, "-has-value"), !!defaultValue || value.length), (0, _defineProperty2["default"])(_classNames3, "".concat(inputPrefixCls, "-focused"), state.popupVisible), _classNames3)); // 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', '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 ? _react["default"].createElement(_icon["default"], {
        type: "close",
        className: "".concat(prefixCls, "-picker-clear"),
        onClick: this.clearSelection
      }) : null;

      var input = children || _react["default"].createElement("span", {
        style: style,
        className: pickerCls
      }, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-picker-label")
      }, this.getLabel()), _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 ").concat(sizeCls),
        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, _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 _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 _react["default"].createElement(_LocaleReceiver["default"], {
        componentName: "Cascader",
        defaultLocale: _en_US["default"]
      }, renderCascader);
    }
  }]);
  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: MenuMode.multiple
};
//# sourceMappingURL=index.js.map