@aliretail/react-materials-components/lib/Select/index.js

B 端物料组件库

"use strict";

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

exports.__esModule = true;
exports["default"] = void 0;

var _select = _interopRequireDefault(require("@alifd/next/lib/select"));

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

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

var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));

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

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

var _excluded = ["optionsName", "optionsShowAll", "searchHighlight", "selectTextSwitch", "mode"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var STYLE_PREFIX = 'aliretail';

var Select = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Select, _React$Component);

  function Select() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.valueRender = function (v) {
      return /*#__PURE__*/React.createElement(_balloon["default"], {
        trigger: v.value,
        triggerType: "hover",
        align: "t",
        closable: false
      }, v.label);
    };

    _this.itemRender = function (item, searchValue) {
      var optionsShowAll = _this.props.optionsShowAll;

      var bon = _this.handleHighlight(item, searchValue);

      return optionsShowAll ? /*#__PURE__*/React.createElement(_balloon["default"], {
        trigger: bon,
        triggerType: "hover",
        align: "t",
        closable: false
      }, bon) : bon;
    };

    _this.handleHighlight = function (item, searchValue) {
      var _this$props = _this.props,
          searchHighlight = _this$props.searchHighlight,
          optionsName = _this$props.optionsName; // 搜索关键字正则拼接 包含拼接关键字

      var reg = new RegExp("(" + searchValue + ")", 'g');
      var colJoin = optionsName.map(function (key, idx) {
        var content = (item[key] || '').toString();
        var result = (content.split(reg) || []).filter(function (it) {
          return !!it;
        });
        var highTemplate = searchHighlight ? result.map(function (node, nodeIndex) {
          return /*#__PURE__*/React.createElement("span", {
            className: node === searchValue ? STYLE_PREFIX + "-highlight-color" : '',
            key: node + "-" + nodeIndex
          }, node);
        }) : content;
        return /*#__PURE__*/React.createElement("div", {
          className: STYLE_PREFIX + "-l-col-options",
          key: idx
        }, highTemplate);
      });
      return /*#__PURE__*/React.createElement("div", null, colJoin);
    };

    _this.handleFilter = function (key, item) {
      var strJoin = Object.values(item).join('');
      var reg = new RegExp(key, 'g');
      return reg.test(strJoin);
    };

    return _this;
  }

  var _proto = Select.prototype;

  _proto.render = function render() {
    var _this$props2 = this.props,
        optionsName = _this$props2.optionsName,
        optionsShowAll = _this$props2.optionsShowAll,
        searchHighlight = _this$props2.searchHighlight,
        selectTextSwitch = _this$props2.selectTextSwitch,
        mode = _this$props2.mode,
        otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, _excluded);
    var opt = (0, _extends2["default"])({
      filter: this.handleFilter,
      className: STYLE_PREFIX + "-decorate-pro-select"
    }, otherProps, {
      autoHighlightFirstItem: false,
      // fusion 关闭选中高亮
      showSearch: true,
      // fusion 是否能搜索
      mode: mode,
      itemRender: this.itemRender
    });
    selectTextSwitch && (opt.valueRender = this.valueRender);
    return /*#__PURE__*/React.createElement(_select["default"], opt);
  };

  return Select;
}(React.Component);

exports["default"] = Select;
Select.defaultProps = {
  dataSource: [],
  searchHighlight: false,
  selectTextSwitch: false,
  mode: 'single',
  optionsShowAll: false,
  optionsName: ['label']
};