qt-public-ui/lib/CategorySelect/index.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _index = require("../index");
var _ = require("..");
var _qtPublicHooks = require("qt-public-hooks");
var _classnames = _interopRequireDefault(require("classnames"));
require("./style");
var _excluded = ["options", "defaultValue", "value", "placeholder", "searchPlaceholder", "footer", "dropdownHeight", "loading"];
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 && {}.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; }
var getSubItems = function getSubItems(options, value) {
  var index = options.findIndex(function (item) {
    return item.value === value;
  });
  var children = index >= 0 ? options[index].children : [];
  return children;
};
var defaultSearch = function defaultSearch() {
  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var options = arguments.length > 1 ? arguments[1] : undefined;
  return options.filter(function (opt) {
    return opt.label.toLowerCase().includes(value.toLowerCase()) || opt.value.toLowerCase().includes(value.toLowerCase());
  });
};
var CategorySelect = function CategorySelect(props) {
  var _selectValue$;
  var _props$options = props.options,
    options = _props$options === void 0 ? [] : _props$options,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
    _props$value = props.value,
    propValue = _props$value === void 0 ? [] : _props$value,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
    _props$searchPlacehol = props.searchPlaceholder,
    searchPlaceholder = _props$searchPlacehol === void 0 ? '搜索...' : _props$searchPlacehol,
    footer = props.footer,
    _props$dropdownHeight = props.dropdownHeight,
    dropdownHeight = _props$dropdownHeight === void 0 ? 'auto' : _props$dropdownHeight,
    loading = props.loading,
    selectProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var isControlled = ('value' in props);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = (0, _react.useState)((isControlled ? propValue || [] : defaultValue)[0] || {}),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    tabValue = _useState4[0],
    setTabValue = _useState4[1];
  var _useState5 = (0, _react.useState)(isControlled ? propValue || [] : defaultValue),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    selectValue = _useState6[0],
    setSelectValue = _useState6[1];
  var _useState7 = (0, _react.useState)([]),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    subItems = _useState8[0],
    setSubItems = _useState8[1];
  var _useState9 = (0, _react.useState)(),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    search = _useState10[0],
    setSearch = _useState10[1];
  var _useState11 = (0, _react.useState)([]),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    filteredSubItems = _useState12[0],
    setFilteredSubItems = _useState12[1];
  var _useState13 = (0, _react.useState)(null),
    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
    extra = _useState14[0],
    setExtra = _useState14[1];
  var _useState15 = (0, _react.useState)(null),
    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
    hoverItem = _useState16[0],
    setHoverItem = _useState16[1];
  var debounceHoverItem = (0, _qtPublicHooks.useDebounce)(hoverItem, 300);
  var debounceSearch = (0, _qtPublicHooks.useDebounce)(search, 800);
  (0, _react.useEffect)(function () {
    if (isControlled && props.value) {
      setSelectValue(props.value.filter(function (it) {
        return !!it;
      }));
      setTabValue(props.value[0] || {});
    }
  }, [isControlled, props.value]);
  (0, _react.useEffect)(function () {
    var _selectValue2 = (0, _slicedToArray2["default"])(selectValue, 1),
      _selectValue2$ = _selectValue2[0],
      parentTabValue = _selectValue2$ === void 0 ? {
        value: ''
      } : _selectValue2$;
    setSubItems(getSubItems(options, parentTabValue.value));
  }, [selectValue, options]);
  var dropDownCls = (0, _qtPublicHooks.useDropdownClickAway)(function () {
    setOpen(false);
    setSearch(undefined);
  }, []);
  var onTabsClick = function onTabsClick(_ref) {
    var label = _ref.label,
      value = _ref.value;
    var children = getSubItems(options, value) || [];
    setSubItems(children);
    setTabValue({
      label: label,
      value: value
    });
  };
  var onVirtualListClick = function onVirtualListClick(_ref2) {
    var label = _ref2.label,
      value = _ref2.value;
    var onChange = props.onChange;
    var _value = [tabValue, {
      label: label,
      value: value
    }];
    !isControlled && setSelectValue(_value);
    onChange && onChange(_value);
  };
  var renderItem = function renderItem(_ref3) {
    var label = _ref3.label,
      value = _ref3.value;
    return /*#__PURE__*/_react["default"].createElement("div", {
      onMouseEnter: function onMouseEnter() {
        setHoverItem({
          label: label,
          value: value
        });
      },
      onClick: function onClick() {
        onVirtualListClick({
          label: label,
          value: value
        });
      },
      className: (0, _classnames["default"])('umui-level-2-item', {
        active: !!selectValue.find(function (it) {
          return (it === null || it === void 0 ? void 0 : it.value) === value;
        })
      })
    }, label);
  };
  var showExtra = function showExtra(item, cancel) {
    var extraRender = props.extraRender;
    if (!item) {
      setExtra(null);
      return;
    }
    if (!extraRender) {
      setExtra(null);
    } else {
      var exRender = extraRender([tabValue, item]);
      setExtra(exRender);
    }
    cancel && setOpen(false);
  };
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    showExtra(debounceHoverItem || selectValue[1] || null);
  }, [debounceHoverItem]);
  (0, _react.useEffect)(function () {
    showExtra(selectValue[1]);
  }, []);
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    showExtra(selectValue[1], true);
  }, [JSON.stringify(selectValue[1])]);
  (0, _react.useEffect)(function () {
    var _props$onSearch = props.onSearch,
      onSearch = _props$onSearch === void 0 ? defaultSearch : _props$onSearch;
    var result = onSearch(debounceSearch || '', subItems || [], selectValue, tabValue);
    if (Object.prototype.toString.call(result) === '[object Promise]') {
      result.then(function (res) {
        return setFilteredSubItems(res || []);
      });
    } else {
      setFilteredSubItems(result);
    }
  }, [debounceSearch, JSON.stringify(subItems)]);
  var dropDownRender = function dropDownRender() {
    var _props$showSearch = props.showSearch,
      showSearch = _props$showSearch === void 0 ? true : _props$showSearch;
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: 'flex',
        maxHeight: dropdownHeight
      },
      onMouseLeave: function onMouseLeave() {
        var _selectValue = selectValue[1] || null;
        setHoverItem(_selectValue);
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-content"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-block"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-tabs"
    }, /*#__PURE__*/_react["default"].createElement("ul", {
      className: "umui-category-select-tabs-level-1",
      style: {
        height: dropdownHeight
      }
    }, options.map(function (item) {
      var label = item.label,
        value = item.value;
      return /*#__PURE__*/_react["default"].createElement("li", {
        key: "".concat(label, "-").concat(value),
        onClick: function onClick() {
          onTabsClick({
            label: label,
            value: value
          });
        },
        className: (0, _classnames["default"])({
          'tab-active': tabValue.value === value
        })
      }, label, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
        type: "umicon-arrow-right"
      }));
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-tabs-level-2",
      style: {
        height: dropdownHeight
      }
    }, showSearch && /*#__PURE__*/_react["default"].createElement("div", {
      className: "search-box"
    }, /*#__PURE__*/_react["default"].createElement(_index.Input.Search, {
      value: search,
      placeholder: searchPlaceholder,
      styleType: "underline",
      onChange: function onChange(_ref4) {
        var value = _ref4.target.value;
        setSearch(value);
      }
    })), /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        height: 'calc(100% - 36px)',
        overflow: 'auto'
      }
    }, loading ? /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
      spinning: loading,
      style: {
        height: 50,
        width: '100%',
        lineHeight: '49px',
        textAlign: 'center'
      },
      size: "small"
    }) : filteredSubItems.length > 0 ? filteredSubItems.map(renderItem) : /*#__PURE__*/_react["default"].createElement(_index.Default, {
      style: {
        margin: '80px 0'
      },
      type: "nothing"
    }))))), footer && /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-footer"
    }, footer)), (subItems === null || subItems === void 0 ? void 0 : subItems.length) > 0 && extra && /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-category-select-custom-template"
    }, extra));
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-category-select"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      !props.disabled && setOpen(true);
    }
  }, /*#__PURE__*/_react["default"].createElement(_index.Select, (0, _extends2["default"])({
    open: open,
    dropdownClassName: (0, _classnames["default"])('umui-category-popup', dropDownCls),
    style: {
      width: 200
    },
    value: (_selectValue$ = selectValue[1]) === null || _selectValue$ === void 0 ? void 0 : _selectValue$.label,
    dropdownMatchSelectWidth: false,
    dropdownRender: dropDownRender,
    placeholder: placeholder
  }, selectProps))));
};
CategorySelect.displayName = 'CategorySelect';
var _default = exports["default"] = CategorySelect;