@alifd/meet-react/lib/select/base-select.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _form = require("../form");
var _bottomButton = _interopRequireDefault(require("../bottom-button"));
var _selectDrawer = _interopRequireDefault(require("../select-drawer"));
var _locale2 = require("../locale");
var _zhCn = _interopRequireDefault(require("../locale/lang/zh-cn"));
var _hooks = require("../utils/hooks");
var _utils = require("../utils");
var _selectBody = _interopRequireDefault(require("./section/select-body"));
var _selectSearch = _interopRequireDefault(require("./section/select-search"));
var _selectedListDrawer = _interopRequireDefault(require("./section/selected-list-drawer"));
var _context = _interopRequireDefault(require("./context"));
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 AUTO_CLOSE_WAITING_TIME = 300;
var compare = function (a, b) {
  return (0, _util.isEqualItems)(a, b, true);
};
var BaseSelect = function (props, ref) {
  var _classNames;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    placeholder = props.placeholder,
    _value = props.value,
    type = props.type,
    defaultValue = props.defaultValue,
    className = props.className,
    mode = props.mode,
    hasSearch = props.hasSearch,
    children = props.children,
    _dataSource = props.dataSource,
    displayType = props.displayType,
    disabled = props.disabled,
    autoConfirm = props.autoConfirm,
    hasClear = props.hasClear,
    filterLocal = props.filterLocal,
    transferSearchToOption = props.transferSearchToOption,
    _props$filter = props.filter,
    filter = _props$filter === void 0 ? _util.defaultLocalFilter : _props$filter,
    renderSelection = props.renderSelection,
    useDetailValue = props.useDetailValue,
    _locale = props.locale,
    sizeProp = props.size,
    notFoundContent = props.notFoundContent,
    onVisibleChange = props.onVisibleChange,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
    _props$onClear = props.onClear,
    onClear = _props$onClear === void 0 ? function () {} : _props$onClear,
    _props$onCancel = props.onCancel,
    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
    _props$onOk = props.onOk,
    onOk = _props$onOk === void 0 ? function () {} : _props$onOk,
    onSearch = props.onSearch,
    drawerClassName = props.drawerClassName,
    others = (0, _tslib.__rest)(props, ["prefix", "placeholder", "value", "type", "defaultValue", "className", "mode", "hasSearch", "children", "dataSource", "displayType", "disabled", "autoConfirm", "hasClear", "filterLocal", "transferSearchToOption", "filter", "renderSelection", "useDetailValue", "locale", "size", "notFoundContent", "onVisibleChange", "onChange", "onClear", "onCancel", "onOk", "onSearch", "drawerClassName"]);
  var _useContext = (0, _react.useContext)(_form.ItemContext),
    isInsideForm = _useContext.isInsideForm,
    contextSize = _useContext.size;
  var size = sizeProp || (isInsideForm ? contextSize : 'medium');
  var _useState = (0, _react.useState)(''),
    searchVal = _useState[0],
    setSearchVal = _useState[1];
  var _useState2 = (0, _react.useState)(false),
    drawerVisible = _useState2[0],
    setDrawerVisible = _useState2[1];
  var selectLocale = (0, _locale2.useLocale)('Select', props, _zhCn.default.Select);
  var selectDrawerLocal = (0, _locale2.useLocale)('SelectDrawer', {}, _zhCn.default.SelectDrawer);
  var clsPrefix = prefix + "select";
  var baseSelectRef = (0, _react.useRef)(null);
  var dataSource = (0, _react.useMemo)(function () {
    return (0, _utils.getDataSource)(props.dataSource, props.children);
  }, [props.dataSource, props.children]);
  var _useValue = (0, _hooks.useValue)(props, [], {
      fitValue: function fitValue(v) {
        if (v === '' || v === null) {
          return [];
        }
        var x = Array.isArray(v) ? v : [v];
        if (useDetailValue) {
          return x;
        } else if ((0, _utils.isValidArray)(x)) {
          return x.map(function (item) {
            var tmp = (0, _utils.findInArray)(dataSource, function (d) {
              return d.value === item;
            });
            return tmp || {
              label: item,
              value: item
            };
          });
        } else {
          return [];
        }
      },
      compare: compare
    }),
    value = _useValue[0],
    setValue = _useValue[1],
    isControlled = _useValue[2];
  var _useState3 = (0, _react.useState)(value),
    innerValue = _useState3[0],
    setInnerValue = _useState3[1];
  var _useState4 = (0, _react.useState)(false),
    confirmVisible = _useState4[0],
    setConfirmVisible = _useState4[1];
  var isSingle = mode === 'single';
  var searchRef = (0, _react.useRef)(null);
  var realHasSearch = props.hasSearch || props.showSearch;
  (0, _react.useMemo)(function () {
    if (isControlled && !compare(value, innerValue)) {
      setInnerValue(value);
    }
  }, [value]);
  var handleCancel = (0, _react.useCallback)(function (reason) {
    if (searchRef && searchRef.current) {
      searchRef.current.setValue('');
    }
    if ((0, _utils.isFunction)(onCancel)) {
      onCancel(reason);
    }
    setTimeout(function () {
      setInnerValue(value);
    }, 300);
  }, [value]);
  var contextValue = (0, _react.useMemo)(function () {
    return Object.assign(Object.assign({}, props), {
      hasSearch: realHasSearch,
      dataSource: dataSource,
      type: type,
      mode: mode,
      size: size,
      prefix: prefix,
      value: value,
      innerValue: innerValue,
      displayType: displayType,
      locale: selectLocale,
      onChange: function (v) {
        setInnerValue(v);
      },
      searchValue: searchVal,
      setSearchValue: setSearchVal
    });
  }, [props, realHasSearch, dataSource, type, mode, size, prefix, value, innerValue, displayType, selectLocale, searchVal]);
  (0, _react.useEffect)(function () {
    if (drawerVisible && isSingle && !realHasSearch && autoConfirm === true) {
      setTimeout(function () {
        var _a;
        if ((_a = baseSelectRef === null || baseSelectRef === void 0 ? void 0 : baseSelectRef.current) === null || _a === void 0 ? void 0 : _a.ok) {
          baseSelectRef.current.ok();
        }
      }, AUTO_CLOSE_WAITING_TIME);
    }
  }, [innerValue]);
  (0, _react.useImperativeHandle)(ref, function () {
    return Object.assign(baseSelectRef.current);
  });
  return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, /*#__PURE__*/(0, _react.createElement)(_selectDrawer.default, _extends({}, others, {
    hideButton: isSingle && autoConfirm === true,
    size: size,
    ref: baseSelectRef,
    showToolbar: !realHasSearch,
    type: type,
    disabled: disabled,
    placeholder: placeholder,
    hasClear: hasClear,
    className: (0, _classnames.default)(clsPrefix, className),
    content: renderSelection ? renderSelection(value) : (0, _util.innerRenderSelection)(value, contextValue),
    onClear: function handleClear() {
      if (!isControlled) {
        setValue([]);
        setInnerValue([]);
        if (searchRef === null || searchRef === void 0 ? void 0 : searchRef.current) {
          searchRef.current.setValue('');
        }
      }
      if ((0, _utils.isFunction)(onClear)) {
        onClear();
      }
      if ((0, _utils.isFunction)(onChange)) {
        var _getValidEvtValues2 = (0, _util.getValidEvtValues)({
            selectedItems: [],
            useDetailValue: useDetailValue,
            isSingle: isSingle
          }),
          val = _getValidEvtValues2.value,
          items = _getValidEvtValues2.items;
        onChange(val, 'clear', items);
      }
    },
    onCancel: handleCancel,
    onOk: function handleOk() {
      if (!isControlled) {
        setValue(innerValue);
      }
      var changed = !(0, _util.isEqualItems)(value, innerValue);
      if ((0, _utils.isFunction)(onOk)) {
        onOk();
      }
      if (changed && (0, _utils.isFunction)(onChange)) {
        var _getValidEvtValues = (0, _util.getValidEvtValues)({
            selectedItems: innerValue,
            isSingle: isSingle,
            useDetailValue: useDetailValue
          }),
          val = _getValidEvtValues.value,
          items = _getValidEvtValues.items;
        onChange(val, 'change', items);
      }
      if (searchRef === null || searchRef === void 0 ? void 0 : searchRef.current) {
        searchRef.current.setValue('');
      }
    },
    onVisibleChange: function handleVisibleChange(visible) {
      setDrawerVisible(visible);
      if ((0, _utils.isFunction)(onVisibleChange)) {
        onVisibleChange(visible);
      }
    },
    drawerClassName: (0, _classnames.default)(drawerClassName, (_classNames = {}, _classNames[clsPrefix + "--searchable"] = realHasSearch, _classNames))
  }), /*#__PURE__*/(0, _react.createElement)(_context.default.Provider, {
    value: contextValue
  }, /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, realHasSearch && /*#__PURE__*/(0, _react.createElement)(_selectSearch.default, {
    ref: searchRef
  }), dataSource.length === 0 && !realHasSearch ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-drawer-content " + clsPrefix + "drawer-drawer--empty"
  }, (0, _utils.isString)(notFoundContent) ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clsPrefix + "drawer-drawer-empty-text"
  }, notFoundContent) : /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "drawer-drawer-empty-text"
  }, notFoundContent)) : /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-option-list"
  }, /*#__PURE__*/(0, _react.createElement)(_selectBody.default, {
    emptySearchText: selectLocale.emptySearchText,
    searchToOptionBtnText: selectLocale.searchToOptionBtnText
  })), realHasSearch && /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-drawer-footer"
  }, /*#__PURE__*/(0, _react.createElement)(_bottomButton.default, {
    okText: selectDrawerLocal.ok,
    cancelText: selectDrawerLocal.cancel,
    onOk: function handleBottomOk() {
      var _a;
      if ((_a = baseSelectRef === null || baseSelectRef === void 0 ? void 0 : baseSelectRef.current) === null || _a === void 0 ? void 0 : _a.ok) {
        baseSelectRef.current.ok();
      }
    },
    onCancel: function handleBottomCancel() {
      var _a;
      if ((_a = baseSelectRef === null || baseSelectRef === void 0 ? void 0 : baseSelectRef.current) === null || _a === void 0 ? void 0 : _a.cancel) {
        baseSelectRef.current.cancel('cancel-button');
      }
    }
  }, !isSingle && /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-footer-counter",
    onClick: function handleTotalClick() {
      setConfirmVisible(true);
    }
  }, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, null, selectLocale.totalPrefixText), /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clsPrefix + "-total-num"
  }, innerValue.length), /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, null, selectLocale.totalSuffixText))))))), !isSingle && /*#__PURE__*/(0, _react.createElement)(_selectedListDrawer.default, {
    prefix: contextValue.prefix,
    innerValue: contextValue.innerValue,
    locale: contextValue.locale,
    visible: confirmVisible,
    onOk: function handleConfirmDone(items) {
      setInnerValue(items);
      setConfirmVisible(false);
    },
    onCancel: function handleConfirmCancel() {
      setConfirmVisible(false);
    }
  }));
};
var RefBaseSelect = /*#__PURE__*/(0, _react.forwardRef)(BaseSelect);
RefBaseSelect.displayName = 'BaseSelect';
RefBaseSelect.defaultProps = {
  mode: 'single',
  type: 'normal',
  displayType: 'normal',
  disabled: false,
  hideButton: false,
  transferSearchToOption: false,
  filterLocal: false,
  hasClear: false,
  autoConfirm: false,
  notFoundContent: '',
  stickyOnTop: false
};
var _default = exports.default = RefBaseSelect;