@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/select/SelectDropdown.js

@@ -1,341 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-var _loading = _interopRequireDefault(require("../loading"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _utils = require("./utils");
-
-var SelectDropdown = function SelectDropdown(_ref) {
-  var mode = _ref.mode,
-      matchFilter = _ref.matchFilter,
-      emptyContent = _ref.emptyContent,
-      loading = _ref.loading,
-      optionWidth = _ref.optionWidth,
-      showCheckAll = _ref.showCheckAll,
-      showJustSelected = _ref.showJustSelected,
-      dropdownRender = _ref.dropdownRender,
-      theme = _ref.theme,
-      searchable = _ref.searchable,
-      onFocus = _ref.onFocus,
-      searchPlaceholder = _ref.searchPlaceholder,
-      dropdownItems = _ref.dropdownItems,
-      localeMap = _ref.localeMap,
-      onSearch = _ref.onSearch,
-      isByRemoteSearch = _ref.isByRemoteSearch,
-      isByCustomSearch = _ref.isByCustomSearch,
-      onClickOption = _ref.onClickOption,
-      checkAll = _ref.checkAll,
-      selectInputWidth = _ref.selectInputWidth,
-      selectedItems = _ref.selectedItems,
-      show = _ref.show,
-      fieldNames = _ref.fieldNames,
-      focusedIndex = _ref.focusedIndex,
-      isGroup = _ref.isGroup,
-      onOverlayScroll = _ref.onOverlayScroll,
-      setFocusedIndex = _ref.setFocusedIndex,
-      targetByKeyDown = _ref.targetByKeyDown,
-      renderExtraFooter = _ref.renderExtraFooter,
-      autoloadFlag = _ref.autoloadFlag;
-
-  var _useState = (0, _react.useState)(dropdownItems),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      filterItems = _useState2[0],
-      setFilterItems = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      searchbarValue = _useState4[0],
-      setSearchbarValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isCheckAll = _useState6[0],
-      setIsCheckAll = _useState6[1];
-
-  var searchbar = (0, _react.useRef)('');
-  var dropdownWrapper = (0, _react.useRef)('');
-  (0, _react.useEffect)(function () {
-    setFilterItems(dropdownItems);
-  }, [dropdownItems]);
-  (0, _react.useEffect)(function () {
-    if (dropdownWrapper.current && targetByKeyDown.current) {
-      var _focusedIndex = focusedIndex;
-
-      if (isGroup) {
-        var focusedGroup = _focusedIndex.split('-');
-
-        var group = focusedGroup[0] - 1;
-
-        while (dropdownItems[group] && dropdownItems[group][(0, _utils.transKeys)(fieldNames, 'children')]) {
-          _focusedIndex = dropdownItems[group][(0, _utils.transKeys)(fieldNames, 'children')].length + group / 1 + 2 + focusedGroup[1] / 1;
-          group--;
-        }
-      }
-
-      var _scrollTop = dropdownWrapper.current.scrollTop;
-      var focusedIndexTop = (_focusedIndex - 6) * 36; // 防止点击上下滚动问题
-
-      dropdownWrapper.current.scrollTop = _scrollTop >= focusedIndexTop && focusedIndexTop > 0 ? _scrollTop : focusedIndexTop;
-    }
-  }, [focusedIndex, targetByKeyDown.current]); // 监控全选功能
-
-  (0, _react.useEffect)(function () {
-    var selectedItemIds = selectedItems.map(function (item) {
-      return item[(0, _utils.transKeys)(fieldNames, 'id')];
-    });
-
-    var _isCheckAll = filterItems.every(function (filterItem) {
-      var filterItemOrGroupChilds = Array.isArray(filterItem.children) ? filterItem.children : [filterItem];
-      return filterItemOrGroupChilds.every(function (item) {
-        return selectedItemIds.includes(item[(0, _utils.transKeys)(fieldNames, 'id')]);
-      });
-    });
-
-    setIsCheckAll(_isCheckAll);
-  }, [selectedItems, filterItems]); // 让搜索框获取焦点
-
-  (0, _react.useEffect)(function () {
-    searchable && setTimeout(function () {
-      return searchbar.current && searchbar.current.focus();
-    }, 0);
-    return function () {
-      searchbar.current && searchbar.current.blur();
-    };
-  }, []); // 仅看已选
-
-  var showSelected = (0, _react.useCallback)(function (check) {
-    if (check) {
-      var values = selectedItems.map(function (item) {
-        return item[(0, _utils.transKeys)(fieldNames, 'id')];
-      });
-      setFilterItems(dropdownItems.filter(function (item) {
-        return values.includes(item[(0, _utils.transKeys)(fieldNames, 'id')]);
-      }));
-    } else {
-      setFilterItems(dropdownItems);
-    }
-  }, [selectedItems, fieldNames, dropdownItems]);
-  (0, _react.useEffect)(function () {
-    var _filterItems = dropdownItems;
-    setFilterItems(_filterItems);
-  }, [mode, isByRemoteSearch, dropdownItems, show]);
-  var matched = 0;
-  var style = optionWidth && {
-    width: optionWidth
-  };
-  var filterOptions = (0, _react.useCallback)(function (keyword) {
-    setFilterItems(dropdownItems);
-    setSearchbarValue(keyword);
-  }, [dropdownItems]);
-  var searchEvent = (0, _react.useCallback)(function (e) {
-    var filterText = e.target.value;
-    filterOptions(filterText);
-    onSearch(filterText);
-    autoloadFlag.current = false;
-  }, [onSearch]);
-  var cleanSearchbarValue = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-    var filterText = '';
-    filterOptions(filterText);
-    onSearch(filterText);
-  }, [onSearch]); // 是否被选中
-
-  var itemSelected = (0, _react.useCallback)(function (item) {
-    return selectedItems.map(function (item) {
-      return item[(0, _utils.transKeys)(fieldNames, 'id')];
-    }).indexOf(item[(0, _utils.transKeys)(fieldNames, 'id')]) > -1;
-  }, [selectedItems, fieldNames]); // 点击某个选项时
-
-  var onClickOptionIntal = (0, _react.useCallback)(function (e, item, index) {
-    e.stopPropagation();
-    e.preventDefault();
-    setFocusedIndex(index);
-
-    if (item[(0, _utils.transKeys)(fieldNames, 'disabled')]) {
-      return;
-    }
-
-    onClickOption(item, index);
-  }, [onClickOption, fieldNames]); // 高亮关键字
-
-  var highlightKeyword = (0, _react.useCallback)(function () {
-    var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    var uniqueKey = arguments.length > 1 ? arguments[1] : undefined;
-    if (!searchbarValue) return text;
-    var parts = text.split(searchbarValue);
-    var lastIndexOfParts = parts.length - 1;
-    return /*#__PURE__*/_react["default"].createElement("p", {
-      key: uniqueKey
-    }, parts.reduce(function (acc, part, index) {
-      acc.push(part);
-
-      if (lastIndexOfParts !== index) {
-        acc.push( /*#__PURE__*/_react["default"].createElement("span", {
-          key: index,
-          className: 'hi-select__dropdown--item__name-hightlight'
-        }, searchbarValue));
-      }
-
-      return acc;
-    }, []));
-  }, [searchbarValue]); // 渲染单个选项
-
-  var renderOption = function renderOption(isSelected, item) {
-    if (dropdownRender) {
-      return dropdownRender(item, isSelected);
-    }
-
-    var paddingNum = mode === 'multiple' ? 48 : 24; // 提高可读性
-
-    var width = selectInputWidth ? selectInputWidth - paddingNum : null;
-
-    if (optionWidth) {
-      width = optionWidth - paddingNum;
-    }
-
-    var style = {
-      width: width
-    };
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, mode === 'multiple' && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-      className: "hi-select__dropdown--item__checkbox",
-      checked: isSelected,
-      disabled: item[(0, _utils.transKeys)(fieldNames, 'disabled')]
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "hi-select__dropdown--item__name",
-      style: style
-    }, isByRemoteSearch ? item[(0, _utils.transKeys)(fieldNames, 'title')] : highlightKeyword(item[(0, _utils.transKeys)(fieldNames, 'title')], item[(0, _utils.transKeys)(fieldNames, 'id')]))), mode === 'single' && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "hi-select__dropdown--item__name",
-      style: style
-    }, isByRemoteSearch ? item[(0, _utils.transKeys)(fieldNames, 'title')] : highlightKeyword(item[(0, _utils.transKeys)(fieldNames, 'title')], item[(0, _utils.transKeys)(fieldNames, 'id')])));
-  };
-
-  var groupItem = function groupItem(filterGroupItem, filterItemsIndex) {
-    var renderGroup = [];
-
-    var label = /*#__PURE__*/_react["default"].createElement("li", {
-      className: "hi-select__dropdown--label hi-select__dropdown--item",
-      key: filterGroupItem[(0, _utils.transKeys)(fieldNames, 'id')] || filterGroupItem[(0, _utils.transKeys)(fieldNames, 'groupId')]
-    }, filterGroupItem[(0, _utils.transKeys)(fieldNames, 'title')] || filterGroupItem[(0, _utils.transKeys)(fieldNames, 'groupTitle')]);
-
-    renderGroup.push(label);
-    filterGroupItem[(0, _utils.transKeys)(fieldNames, 'children')].forEach(function (item, index) {
-      renderGroup.push(normalItem(item, filterItemsIndex + '-' + index, true));
-    }); // 无子节点情况下，不显示该分组
-
-    return renderGroup.filter(function (item) {
-      return !!item;
-    }).length === 1 ? null : renderGroup;
-  };
-
-  var normalItem = function normalItem(item, filterItemsIndex, isChildItem) {
-    if (!matchFilter(item)) return null;
-    matched++;
-    var _filterItemsIndex = filterItemsIndex;
-    var isSelected = itemSelected(item);
-    var isDisabled = item[(0, _utils.transKeys)(fieldNames, 'disabled')];
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      className: (0, _classnames["default"])('hi-select__dropdown--item', "theme__".concat(theme), {
-        'is-active': isSelected,
-        'is-disabled': isDisabled,
-        'hi-select__dropdown--item--child': isChildItem,
-        'is-focus': targetByKeyDown.current && filterItemsIndex === focusedIndex,
-        'hi-select__dropdown--item-default': !item[(0, _utils.transKeys)(fieldNames, 'children')] && !dropdownRender
-      }),
-      onClick: function onClick(e) {
-        return onClickOptionIntal(e, item, _filterItemsIndex);
-      },
-      key: item[(0, _utils.transKeys)(fieldNames, 'id')],
-      index: filterItemsIndex,
-      onMouseEnter: function onMouseEnter() {
-        !targetByKeyDown.current && setFocusedIndex(_filterItemsIndex);
-      }
-    }, renderOption(isSelected, item, filterItemsIndex));
-  };
-
-  var renderItems = function renderItems() {
-    return /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "hi-select__dropdown--items",
-      ref: dropdownWrapper,
-      onMouseMove: function onMouseMove() {
-        targetByKeyDown.current = false;
-      },
-      onScroll: function onScroll(e) {
-        onOverlayScroll && onOverlayScroll(e);
-      }
-    }, filterItems && filterItems.map(function (item, filterItemsIndex) {
-      return item[(0, _utils.transKeys)(fieldNames, 'children')] ? groupItem(item, filterItemsIndex) : normalItem(item, filterItemsIndex);
-    }), matched === 0 && /*#__PURE__*/_react["default"].createElement("li", {
-      className: "hi-select__dropdown--item hi-select__dropdown-item--empty is-disabled",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, emptyContent));
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__dropdown",
-    style: style
-  }, (searchable || isByCustomSearch) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__dropdown__searchbar"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__dropdown__searchbar--content"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    style: {
-      cursor: 'pointer'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-    name: "search"
-  })), /*#__PURE__*/_react["default"].createElement("input", {
-    className: "hi-select__dropdown__searchbar--input",
-    placeholder: searchPlaceholder,
-    clearable: "true",
-    ref: searchbar,
-    value: searchbarValue,
-    onFocus: onFocus,
-    clearabletrigger: "always",
-    onChange: searchEvent
-  }), searchbarValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("span", {
-    style: {
-      cursor: 'pointer'
-    },
-    onClick: cleanSearchbarValue
-  }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: "hi-icon icon-close-circle hi-select__dropdown--icon__close"
-  })) : null)), loading && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__dropdown--loading"
-  }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
-    size: "small"
-  })), !loading && renderItems(), (showCheckAll || showJustSelected || renderExtraFooter) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__dropdown-check-all theme__".concat(theme)
-  }, /*#__PURE__*/_react["default"].createElement("div", null, mode === 'multiple' && showCheckAll && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-    checked: isCheckAll,
-    onChange: function onChange(e) {
-      checkAll(e, filterItems, e.target.checked);
-    }
-  }, localeMap.checkAll)), renderExtraFooter && renderExtraFooter(), /*#__PURE__*/_react["default"].createElement("div", null, mode === 'multiple' && showJustSelected && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-    onChange: function onChange(e) {
-      showSelected(e.target.checked);
-    }
-  }, localeMap.justSelected))));
-};
-
-var _default = SelectDropdown;
-exports["default"] = _default;

package/es/select/SelectInput.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _SingleInput = _interopRequireDefault(require("./SingleInput"));
-
-var _MultipleInput = _interopRequireDefault(require("./MultipleInput"));
-
-var InternalSelectInput = function InternalSelectInput(props) {
-  var mode = props.mode;
-  return mode === 'multiple' ? /*#__PURE__*/_react["default"].createElement(_MultipleInput["default"], props) : /*#__PURE__*/_react["default"].createElement(_SingleInput["default"], props);
-};
-
-var SelectInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react["default"].createElement(InternalSelectInput, (0, _extends2["default"])({}, props, {
-    innerRef: ref
-  }));
-});
-var _default = SelectInput;
-exports["default"] = _default;

package/es/select/SingleInput.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _utils = require("./utils");
-
-// 单选输入框
-var SingleInput = function SingleInput(props) {
-  var placeholder = props.placeholder,
-      dropdownShow = props.dropdownShow,
-      disabled = props.disabled,
-      clearable = props.clearable,
-      onFocus = props.onFocus,
-      theme = props.theme,
-      onClick = props.onClick,
-      propsSelectItem = props.selectedItems,
-      onClear = props.onClear,
-      fieldNames = props.fieldNames,
-      isFocus = props.isFocus,
-      bordered = props.bordered;
-
-  var _useState = (0, _react.useState)(propsSelectItem || []),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      cacheselectedItems = _useState2[0],
-      setCacheselectedItems = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    setCacheselectedItems(propsSelectItem);
-  }, [propsSelectItem]);
-
-  var handleClear = function handleClear(e) {
-    e.stopPropagation();
-    onClear();
-    setCacheselectedItems([]);
-  };
-
-  var icon = dropdownShow ? 'up' : 'down';
-  var selectedItems = propsSelectItem.length > 0 ? propsSelectItem : cacheselectedItems;
-  placeholder = selectedItems.length > 0 ? selectedItems[0][(0, _utils.transKeys)(fieldNames, 'title')] : placeholder;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('hi-select__input', 'single-value', "theme__".concat(theme), {
-      disabled: disabled,
-      bordered: bordered
-    }, {
-      'hi-select__input__focus': isFocus
-    }),
-    onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('hi-select__input--item', {
-      'hi-select__hide': !(!dropdownShow && selectedItems.length > 0)
-    })
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__input--item__name"
-  }, selectedItems[0] && selectedItems[0][(0, _utils.transKeys)(fieldNames, 'title')])), (dropdownShow || selectedItems.length === 0) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('hi-select__input--search', {
-      'hi-select__input--search--value': selectedItems.length > 0
-    })
-  }, /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    className: "hi-select__input--readonly",
-    value: selectedItems.length > 0 ? placeholder : '',
-    placeholder: placeholder,
-    onFocus: onFocus,
-    readOnly: true
-  })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "hi-select__input--icon"
-  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-    name: icon,
-    className: (0, _classnames["default"])({
-      clearable: clearable && selectedItems.length > 0
-    })
-  }), clearable && selectedItems.length > 0 && /*#__PURE__*/_react["default"].createElement("i", {
-    className: "hi-icon icon-close-circle hi-select__input--icon__close",
-    onClick: handleClear
-  })));
-};
-
-var _default = SingleInput;
-exports["default"] = _default;