@alifd/meet-react/lib/select/section/select-body.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _babelRuntimeJsxStyleTransform = require("@alifd/babel-runtime-jsx-style-transform");
var _react = _interopRequireWildcard(require("react"));
var _list = _interopRequireDefault(require("../../list"));
var _menu = _interopRequireDefault(require("../../menu"));
var _button = _interopRequireDefault(require("../../button"));
var _tagSelect = _interopRequireDefault(require("../../tag-select"));
var _utils = require("../../utils");
var _view = _interopRequireDefault(require("../../view"));
var _context = _interopRequireDefault(require("../context"));
var _typography = _interopRequireDefault(require("../../typography"));
var _option = _interopRequireDefault(require("../option"));
var _util = require("../util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Text = _typography.default.Text;
var sort = function (arr, value) {
  var selectedArr = [];
  var unSelectedArr = [];
  arr.forEach(function (item) {
    if ((0, _util.isSelected)(value, item.value)) {
      selectedArr.push(item);
    } else {
      unSelectedArr.push(item);
    }
  });
  return [].concat(selectedArr, unSelectedArr);
};
var SelectBody = function (props) {
  var _useContext = (0, _react.useContext)(_context.default),
    prefix = _useContext.prefix,
    size = _useContext.size,
    displayType = _useContext.displayType,
    disabled = _useContext.disabled,
    mode = _useContext.mode,
    dataSource = _useContext.dataSource,
    _useContext$filterLoc = _useContext.filterLocal,
    filterLocal = _useContext$filterLoc === void 0 ? true : _useContext$filterLoc,
    _useContext$stickyOnT = _useContext.stickyOnTop,
    stickyOnTop = _useContext$stickyOnT === void 0 ? true : _useContext$stickyOnT,
    _useContext$filter = _useContext.filter,
    filter = _useContext$filter === void 0 ? _util.defaultLocalFilter : _useContext$filter,
    searchValue = _useContext.searchValue,
    innerValue = _useContext.innerValue,
    value = _useContext.value,
    transferSearchToOption = _useContext.transferSearchToOption,
    _onChange = _useContext.onChange,
    onSearchAdd = _useContext.onSearchAdd;
  var _props$searchToOption = props.searchToOptionBtnText,
    searchToOptionBtnText = _props$searchToOption === void 0 ? '' : _props$searchToOption,
    _props$emptySearchTex = props.emptySearchText,
    emptySearchText = _props$emptySearchTex === void 0 ? '' : _props$emptySearchTex;
  var renderWithTag = displayType === 'tag';
  var clsPrefix = prefix + "select";
  var filteredDataSource = filterLocal ? (0, _utils.mergeDataSource)(dataSource, [].concat(value, innerValue)).filter(function (item) {
    return filter(searchValue, item);
  }) : dataSource;
  if (mode === 'multiple' && stickyOnTop) {
    filteredDataSource = sort(filteredDataSource, value);
  }
  if (!renderWithTag && mode === 'single') {
    return /*#__PURE__*/(0, _react.createElement)(_menu.default, {
      prefix: prefix,
      size: size,
      selectMode: "single",
      dataSource: filteredDataSource,
      selectedKeys: innerValue.map(function (it) {
        return it.value;
      }),
      onItemClick: function onItemClick(_, item) {
        var onClick = item.onClick;
        if ((0, _utils.isFunction)(onClick)) {
          onClick(item.value);
        }
        _onChange([{
          label: item.label,
          value: item.value
        }]);
      }
    });
  }
  if (renderWithTag) {
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: prefix + "select--tag-" + size
    }, /*#__PURE__*/(0, _react.createElement)(_tagSelect.default, {
      prefix: prefix,
      mode: mode,
      size: size,
      value: innerValue.map(function (it) {
        return it.value;
      }),
      dataSource: filteredDataSource,
      onChange: function onChange(v) {
        if ((0, _utils.isNil)(v)) {
          _onChange([]);
          return;
        }
        var newValue = Array.isArray(v) ? v : [v];
        var newItems = newValue.map(function (x) {
          return (0, _utils.findInArray)(filteredDataSource, function (item) {
            return item.value === x;
          });
        });
        _onChange(newItems);
      }
    }));
  }
  var options = filteredDataSource.map(function (it) {
    return /*#__PURE__*/(0, _react.createElement)(_option.default, _extends({
      key: it.value,
      selected: (0, _util.isSelected)(innerValue, it.value),
      disabled: disabled || it.disabled,
      onClick: function onClick() {
        var selectedItem = (0, _utils.findInArray)(innerValue, function (item) {
          return item.value === it.value;
        });
        if (selectedItem) {
          _onChange((0, _util.removeItemFromArray)(innerValue, selectedItem.value));
        } else {
          _onChange([].concat(innerValue, [{
            label: it.label,
            value: it.value
          }]));
        }
      }
    }, it), it.label);
  });
  return transferSearchToOption ? /*#__PURE__*/(0, _react.createElement)(_list.default, null, searchValue && !(0, _utils.findInArray)(filteredDataSource, function (it) {
    return "" + it.label === "" + searchValue;
  }) && /*#__PURE__*/(0, _react.createElement)(_option.default, {
    isNew: true,
    onClick: function onClick() {
      if (onSearchAdd) {
        onSearchAdd(searchValue, innerValue);
      }
      _onChange([].concat(innerValue, [{
        label: searchValue,
        value: searchValue,
        userAdd: true
      }]));
    }
  }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)({
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between'
    })
  }, /*#__PURE__*/(0, _react.createElement)("span", null, searchValue), /*#__PURE__*/(0, _react.createElement)(_button.default, {
    size: "small",
    type: "primary",
    model: "outline"
  }, searchToOptionBtnText))), options) : (0, _utils.isValidArray)(filteredDataSource) ? /*#__PURE__*/(0, _react.createElement)(_list.default, null, options) : /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-search-empty"
  }, /*#__PURE__*/(0, _react.createElement)(Text, {
    className: clsPrefix + "-search-empty-tip",
    type: "body-2"
  }, (0, _utils.replaceMessage)(emptySearchText, {
    searchVal: searchValue
  })));
};
var _default = exports.default = SelectBody;