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

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["options", "defaultValue", "value", "placeholder", "searchPlaceholder", "footer", "dropdownHeight", "loading"];
import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';
import { Input, Select, Default } from '../index';
import { IconSlim as Icon } from '..';
import { useDropdownClickAway, useDebounce, useUpdateEffect } from 'qt-public-hooks';
import classnames from 'classnames';
import './style';
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(value, options) {
  if (value === void 0) {
    value = '';
  }
  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$2;
  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 = _objectWithoutPropertiesLoose(props, _excluded);
  var isControlled = ('value' in props);
  var _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  var _useState2 = useState((isControlled ? propValue || [] : defaultValue)[0] || {}),
    tabValue = _useState2[0],
    setTabValue = _useState2[1];
  var _useState3 = useState(isControlled ? propValue || [] : defaultValue),
    selectValue = _useState3[0],
    setSelectValue = _useState3[1];
  var _useState4 = useState([]),
    subItems = _useState4[0],
    setSubItems = _useState4[1];
  var _useState5 = useState(),
    search = _useState5[0],
    setSearch = _useState5[1];
  var _useState6 = useState([]),
    filteredSubItems = _useState6[0],
    setFilteredSubItems = _useState6[1];
  var _useState7 = useState(null),
    extra = _useState7[0],
    setExtra = _useState7[1];
  var _useState8 = useState(null),
    hoverItem = _useState8[0],
    setHoverItem = _useState8[1];
  var debounceHoverItem = useDebounce(hoverItem, 300);
  var debounceSearch = useDebounce(search, 800);
  useEffect(function () {
    if (isControlled && props.value) {
      setSelectValue(props.value.filter(function (it) {
        return !!it;
      }));
      setTabValue(props.value[0] || {});
    }
  }, [isControlled, props.value]);
  useEffect(function () {
    var _selectValue$ = selectValue[0],
      parentTabValue = _selectValue$ === void 0 ? {
        value: ''
      } : _selectValue$;
    setSubItems(getSubItems(options, parentTabValue.value));
  }, [selectValue, options]);
  var dropDownCls = 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.createElement("div", {
      onMouseEnter: function onMouseEnter() {
        setHoverItem({
          label: label,
          value: value
        });
      },
      onClick: function onClick() {
        onVirtualListClick({
          label: label,
          value: value
        });
      },
      className: classnames('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);
  };
  useUpdateEffect(function () {
    showExtra(debounceHoverItem || selectValue[1] || null);
  }, [debounceHoverItem]);
  useEffect(function () {
    showExtra(selectValue[1]);
  }, []);
  useUpdateEffect(function () {
    showExtra(selectValue[1], true);
  }, [JSON.stringify(selectValue[1])]);
  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.createElement("div", {
      style: {
        display: 'flex',
        maxHeight: dropdownHeight
      },
      onMouseLeave: function onMouseLeave() {
        var _selectValue = selectValue[1] || null;
        setHoverItem(_selectValue);
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-block"
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-tabs"
    }, /*#__PURE__*/React.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.createElement("li", {
        key: label + "-" + value,
        onClick: function onClick() {
          onTabsClick({
            label: label,
            value: value
          });
        },
        className: classnames({
          'tab-active': tabValue.value === value
        })
      }, label, /*#__PURE__*/React.createElement(Icon, {
        type: "umicon-arrow-right"
      }));
    })), /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-tabs-level-2",
      style: {
        height: dropdownHeight
      }
    }, showSearch && /*#__PURE__*/React.createElement("div", {
      className: "search-box"
    }, /*#__PURE__*/React.createElement(Input.Search, {
      value: search,
      placeholder: searchPlaceholder,
      styleType: "underline",
      onChange: function onChange(_ref4) {
        var value = _ref4.target.value;
        setSearch(value);
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        height: 'calc(100% - 36px)',
        overflow: 'auto'
      }
    }, loading ? /*#__PURE__*/React.createElement(Spin, {
      spinning: loading,
      style: {
        height: 50,
        width: '100%',
        lineHeight: '49px',
        textAlign: 'center'
      },
      size: "small"
    }) : filteredSubItems.length > 0 ? filteredSubItems.map(renderItem) : /*#__PURE__*/React.createElement(Default, {
      style: {
        margin: '80px 0'
      },
      type: "nothing"
    }))))), footer && /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-footer"
    }, footer)), (subItems === null || subItems === void 0 ? void 0 : subItems.length) > 0 && extra && /*#__PURE__*/React.createElement("div", {
      className: "umui-category-select-custom-template"
    }, extra));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-category-select"
  }, /*#__PURE__*/React.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      !props.disabled && setOpen(true);
    }
  }, /*#__PURE__*/React.createElement(Select, _extends({
    open: open,
    dropdownClassName: classnames('umui-category-popup', dropDownCls),
    style: {
      width: 200
    },
    value: (_selectValue$2 = selectValue[1]) === null || _selectValue$2 === void 0 ? void 0 : _selectValue$2.label,
    dropdownMatchSelectWidth: false,
    dropdownRender: dropDownRender,
    placeholder: placeholder
  }, selectProps))));
};
CategorySelect.displayName = 'CategorySelect';
export default CategorySelect;