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

package/es/search/index.js

@@ -1,264 +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 _input = _interopRequireDefault(require("../input"));
-
-var _button = _interopRequireDefault(require("../button"));
-
-var _searchDropdown = _interopRequireDefault(require("./searchDropdown"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-require("./style");
-
-var prefixCls = 'hi-search';
-
-var Search = function Search(_ref) {
-  var _onChange = _ref.onChange,
-      onSearch = _ref.onSearch,
-      style = _ref.style,
-      placeholder = _ref.placeholder,
-      prepend = _ref.prepend,
-      disabled = _ref.disabled,
-      data = _ref.data,
-      value = _ref.value,
-      loading = _ref.loading,
-      localeDatas = _ref.localeDatas,
-      overlayClassName = _ref.overlayClassName,
-      append = _ref.append,
-      theme = _ref.theme;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      dropdownShow = _useState2[0],
-      setDropdownShow = _useState2[1];
-
-  var searchInputContainer = (0, _react.useRef)(null);
-
-  var _useState3 = (0, _react.useState)(value || ''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      inputVal = _useState4[0],
-      setInputVal = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      focusIndex = _useState6[0],
-      setFocusIndex = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(null),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      subFocusIndex = _useState8[0],
-      setSubFocusIndex = _useState8[1];
-
-  (0, _react.useEffect)(function () {
-    setInputVal(value);
-  }, [value]);
-  var closeDropdown = (0, _react.useCallback)(function () {
-    setDropdownShow(false);
-    setFocusIndex(null);
-    setSubFocusIndex(null);
-  }, []);
-  var optionsClick = (0, _react.useCallback)(function (value, item) {
-    setInputVal(value);
-    setDropdownShow(false);
-    onSearch && onSearch(value, item);
-  }, [onSearch]);
-  var moveFocus = (0, _react.useCallback)(function (direction) {
-    var newFocusIndex = null;
-    var newSubFocusIndex = null;
-
-    if (direction === 'up') {
-      if (focusIndex === null) {
-        newFocusIndex = data.length - 1;
-
-        if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-          newSubFocusIndex = data[newFocusIndex].children.length - 1;
-        }
-      } else {
-        if (!(data[focusIndex].children && data[focusIndex].children.length > 0)) {
-          newFocusIndex = focusIndex === 0 ? data.length - 1 : focusIndex - 1;
-
-          if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-            newSubFocusIndex = data[newFocusIndex].children.length - 1;
-          }
-        } else {
-          if (subFocusIndex === 0) {
-            newFocusIndex = focusIndex === 0 ? data.length - 1 : focusIndex - 1;
-
-            if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-              newSubFocusIndex = data[newFocusIndex].children.length - 1;
-            }
-          } else {
-            newFocusIndex = focusIndex;
-            newSubFocusIndex = subFocusIndex - 1;
-          }
-        }
-      }
-    } else {
-      if (focusIndex === null) {
-        newFocusIndex = 0;
-
-        if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-          newSubFocusIndex = 0;
-        }
-      } else {
-        if (!(data[focusIndex].children && data[focusIndex].children.length > 0)) {
-          newFocusIndex = focusIndex === data.length - 1 ? 0 : focusIndex + 1;
-
-          if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-            newSubFocusIndex = 0;
-          }
-        } else {
-          if (subFocusIndex === data[focusIndex].children.length - 1) {
-            newFocusIndex = focusIndex === data.length - 1 ? 0 : focusIndex + 1;
-
-            if (data[newFocusIndex].children && data[newFocusIndex].children.length > 0) {
-              newSubFocusIndex = 0;
-            }
-          } else {
-            newFocusIndex = focusIndex;
-            newSubFocusIndex = subFocusIndex + 1;
-          }
-        }
-      }
-    }
-
-    setFocusIndex(newFocusIndex);
-    setSubFocusIndex(newSubFocusIndex);
-  }, [focusIndex, subFocusIndex, data]);
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    // ESC
-    if (e.keyCode === 27) {
-      e.preventDefault();
-      closeDropdown();
-    } // TAB
-
-
-    if (e.keyCode === 9) {
-      closeDropdown();
-    } // UP
-
-
-    if (e.keyCode === 38) {
-      e.preventDefault();
-      moveFocus('up');
-    } // DOWN
-
-
-    if (e.keyCode === 40) {
-      e.preventDefault();
-      moveFocus('down');
-    } // ENTER
-
-
-    if (e.keyCode === 13) {
-      e.preventDefault();
-
-      var _inputValue;
-
-      if (focusIndex !== null) {
-        if (subFocusIndex !== null) {
-          _inputValue = data[focusIndex].children[subFocusIndex].title;
-        } else {
-          _inputValue = data[focusIndex].title;
-        }
-      } else {
-        _inputValue = inputVal;
-      }
-
-      if (onSearch) {
-        onSearch(_inputValue);
-      }
-
-      setInputVal(_inputValue);
-      closeDropdown();
-    }
-  }, [closeDropdown, moveFocus, onSearch, inputVal, focusIndex, subFocusIndex, data]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: prefixCls,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(prefixCls, "_input")
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    ref: searchInputContainer,
-    type: "text",
-    value: inputVal,
-    style: style,
-    disabled: disabled,
-    placeholder: placeholder,
-    clearable: "true",
-    prepend: prepend,
-    onKeyDown: onKeyDown,
-    onFocus: function onFocus() {
-      data && data.length > 0 && setDropdownShow(true);
-    },
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setInputVal(value);
-      data && value.length > 0 && setDropdownShow(true);
-      _onChange && _onChange(value);
-      setFocusIndex(null);
-      setSubFocusIndex(null);
-    }
-  }), append ? /*#__PURE__*/_react["default"].createElement("span", {
-    className: disabled ? 'disabled' : '',
-    onClick: function onClick(e) {
-      e.preventDefault();
-      setDropdownShow(false);
-      onSearch && onSearch(inputVal);
-      setFocusIndex(null);
-      setSubFocusIndex(null);
-    }
-  }, append) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    type: "default",
-    icon: "search",
-    className: disabled ? 'disabled' : '',
-    disabled: disabled,
-    onClick: function onClick(e) {
-      e.preventDefault();
-      setDropdownShow(false);
-      onSearch && onSearch(inputVal);
-      setFocusIndex(null);
-      setSubFocusIndex(null);
-    }
-  })), data && /*#__PURE__*/_react["default"].createElement(_searchDropdown["default"], {
-    focusIndex: focusIndex,
-    subFocusIndex: subFocusIndex,
-    prefixCls: prefixCls,
-    inputVal: inputVal,
-    overlayClassName: overlayClassName,
-    optionsClick: optionsClick,
-    onClickOutside: function onClickOutside() {
-      closeDropdown();
-    },
-    data: data,
-    loading: loading,
-    dropdownShow: dropdownShow,
-    localeDatas: localeDatas,
-    theme: theme,
-    searchInputContainer: searchInputContainer
-  }));
-};
-
-Search.defaultProps = {
-  style: {
-    width: 200
-  },
-  loading: false
-};
-
-var _default = (0, _context["default"])(Search);
-
-exports["default"] = _default;

package/es/search/searchDropdown.js

@@ -1,111 +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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _popper = _interopRequireDefault(require("../popper"));
-
-var _loading = _interopRequireDefault(require("../loading"));
-
-var SearchDropdown = function SearchDropdown(_ref) {
-  var data = _ref.data,
-      prefixCls = _ref.prefixCls,
-      optionsClick = _ref.optionsClick,
-      _ref$inputVal = _ref.inputVal,
-      inputVal = _ref$inputVal === void 0 ? '' : _ref$inputVal,
-      dropdownShow = _ref.dropdownShow,
-      searchInputContainer = _ref.searchInputContainer,
-      localeDatas = _ref.localeDatas,
-      theme = _ref.theme,
-      onClickOutside = _ref.onClickOutside,
-      loading = _ref.loading,
-      overlayClassName = _ref.overlayClassName,
-      focusIndex = _ref.focusIndex,
-      subFocusIndex = _ref.subFocusIndex;
-  var popperDropdown = (0, _react.useRef)(null);
-  var highlightKeyword = (0, _react.useCallback)(function (title, uniqueKey) {
-    var searchbarValue = String(inputVal);
-    var keyword = inputVal;
-    keyword = searchbarValue.includes('[') ? keyword.replace(/\[/gi, '\\[') : keyword;
-    keyword = searchbarValue.includes('(') ? keyword.replace(/\(/gi, '\\(') : keyword;
-    keyword = searchbarValue.includes(')') ? keyword.replace(/\)/gi, '\\)') : keyword;
-    var parts = title.split(new RegExp("(".concat(keyword, ")"), 'gi'));
-    return inputVal && inputVal.length > 0 ? /*#__PURE__*/_react["default"].createElement("p", {
-      key: uniqueKey,
-      className: "hi-search_dropdown--item__highlight"
-    }, parts.map(function (part) {
-      return part === searchbarValue ? /*#__PURE__*/_react["default"].createElement("span", {
-        key: uniqueKey,
-        className: "hi-search_dropdown--item__name-hightlight"
-      }, part) : part;
-    })) : title;
-  }, [inputVal]);
-  var ItemChildren = (0, _react.useCallback)(function (item, isParentFocus) {
-    return /*#__PURE__*/_react["default"].createElement("ul", null, item.children && item.children.map(function (ele, idx) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(prefixCls, "_dropdown--item"),
-        style: {
-          padding: 0
-        },
-        key: ele.id
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: (0, _classnames["default"])("".concat(prefixCls, "_dropdown--item_normal"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "_dropdown--item--focus"), isParentFocus && subFocusIndex === idx)),
-        onClick: function onClick() {
-          optionsClick(typeof ele.title === 'string' ? ele.title : ele.id, ele);
-        }
-      }, typeof ele.title === 'string' ? highlightKeyword(ele.title, ele.id) : ele.title));
-    }));
-  }, [highlightKeyword, focusIndex, subFocusIndex]);
-  var DataSourceRender = (0, _react.useCallback)(function (item, idx) {
-    var _classNames2;
-
-    var className = (0, _classnames["default"])("".concat(prefixCls, "_dropdown--item_normal"), (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "_dropdown--item-title"), item.children), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "_dropdown--item--focus"), focusIndex === idx && !item.children), _classNames2));
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      className: "".concat(prefixCls, "_dropdown--item"),
-      key: item.id
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: className,
-      onClick: function onClick() {
-        optionsClick(typeof item.title === 'string' ? item.title : item.id, item);
-      }
-    }, typeof item.title === 'string' ? highlightKeyword(item.title, item.id) : item.title), item.children && ItemChildren(item, focusIndex === idx));
-  }, [highlightKeyword, ItemChildren]);
-  var searchEmptyResult = localeDatas.search.searchEmptyResult;
-  return /*#__PURE__*/_react["default"].createElement(_popper["default"], {
-    show: dropdownShow,
-    attachEle: searchInputContainer.current && searchInputContainer.current._Input.current,
-    onClickOutside: onClickOutside,
-    overlayClassName: overlayClassName,
-    zIndex: 1050,
-    topGap: 5,
-    leftGap: 0,
-    className: "".concat(prefixCls, "__popper"),
-    placement: "top-bottom-start"
-  }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
-    visible: loading
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(prefixCls, "_dropdown theme__").concat(theme),
-    ref: popperDropdown
-  }, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "".concat(prefixCls, "_dropdown--items")
-  }, data && data.length > 0 ? data.map(function (item, idx) {
-    return DataSourceRender(item, idx);
-  }) : /*#__PURE__*/_react["default"].createElement("li", {
-    className: "".concat(prefixCls, "_dropdown--item-nodata")
-  }, searchEmptyResult)))));
-};
-
-var _default = SearchDropdown;
-exports["default"] = _default;

package/es/search/style/index.css

@@ -1 +0,0 @@
-.hi-search{display:inline-block}.hi-search_input{display:-webkit-box;display:-ms-flexbox;display:flex}.hi-search_input .hi-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.hi-search_input .hi-input__inner:hover .hi-btn{border-left-color:transparent}.hi-search_input .hi-btn{border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.hi-search_input .hi-btn:hover:not(.disabled){border-color:var(--color-primary)}.hi-search_input .hi-btn:focus:not(.disabled){border-color:var(--color-primary)}.hi-search_input .hi-btn:focus{-webkit-box-shadow:none;box-shadow:none}.hi-search .hi-icon.icon-search{color:var(--color-primary)}.hi-search_dropdown{width:100%;height:252px;font-size:12px;color:var(--color-black);overflow-x:hidden;overflow-y:auto;background-color:var(--color-white);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.2);box-shadow:0 1px 6px rgba(0,0,0,0.2);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left;margin-top:-4px}.hi-search_dropdown ul{margin:0;padding:0}.hi-search_dropdown li{margin:0;list-style:none}.hi-search_dropdown p{margin:0;padding:0}.hi-search_dropdown--item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;line-height:36px;margin:0;font-weight:400;cursor:pointer;list-style:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;text-overflow:ellipsis;white-space:nowrap}.hi-search_dropdown--item_normal{display:block;line-height:36px;padding:0 12px}.hi-search_dropdown--item_normal:hover:not(.hi-search_dropdown--item-title){background-color:var(--color-primary-20)}.hi-search_dropdown--item--focus{background-color:var(--color-primary-20)}.hi-search_dropdown--item-title{color:var(--color-gray-50);font-size:14px}.hi-search_dropdown--item-history{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 12px;color:var(--color-gray-50);font-size:14px}.hi-search_dropdown--item-nodata{height:260px;line-height:260px;text-align:center;color:var(--color-gray-50);font-size:14px}.hi-search_dropdown--item__name-hightlight{color:var(--color-primary)}.hi-search_dropdown--more{line-height:36px;margin:0;font-weight:400;cursor:pointer;font-size:12px;text-align:center}

package/es/search/style/index.js

@@ -1,3 +0,0 @@
-"use strict";
-
-require("./index.css");

package/es/select/MultipleInput.js

@@ -1,163 +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 _lodash = _interopRequireDefault(require("lodash"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _utils = require("./utils");
-
-var MultipleInput = function MultipleInput(_ref) {
-  var placeholder = _ref.placeholder,
-      propsSelectItem = _ref.selectedItems,
-      dropdownShow = _ref.dropdownShow,
-      cacheSelectItem = _ref.cacheSelectItem,
-      disabled = _ref.disabled,
-      searchable = _ref.searchable,
-      clearable = _ref.clearable,
-      _ref$multipleMode = _ref.multipleMode,
-      multipleMode = _ref$multipleMode === void 0 ? 'nowrap' : _ref$multipleMode,
-      onFocus = _ref.onFocus,
-      theme = _ref.theme,
-      onClick = _ref.onClick,
-      onClickOption = _ref.onClickOption,
-      onClear = _ref.onClear,
-      fieldNames = _ref.fieldNames,
-      isFocus = _ref.isFocus,
-      bordered = _ref.bordered;
-  var icon = dropdownShow ? 'up' : 'down';
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      showCount = _useState2[0],
-      setShowCount = _useState2[1];
-
-  var tagWrapperRef = (0, _react.useRef)('');
-  var calShowCountFlag = (0, _react.useRef)(true); // 在渲染完成进行测试是否展示 +1
-
-  var selectedItems = _lodash["default"].uniqBy(cacheSelectItem.concat(propsSelectItem), (0, _utils.transKeys)(fieldNames, 'id'));
-
-  var resizeTimeId = (0, _react.useRef)();
-  var getShowCount = (0, _react.useCallback)(function () {
-    if (multipleMode === 'nowrap' && calShowCountFlag.current && tagWrapperRef.current) {
-      // 多选超过一行时以数字显示
-      var tagWrapperRect = tagWrapperRef.current.getBoundingClientRect();
-      var width = 0;
-      var showCountIndex = 0; // 在第几个开始显示折行
-
-      var tags = tagWrapperRef.current.querySelectorAll('.hi-select__input--item');
-      tags.forEach(function (tag, index) {
-        var tagRect = tag.getBoundingClientRect();
-        width += tagRect.width;
-
-        if (width + 110 > tagWrapperRect.width && calShowCountFlag.current) {
-          // 110是留给显示剩余选项的空间
-          calShowCountFlag.current = false;
-          showCountIndex = index;
-        }
-      });
-      !calShowCountFlag.current && setShowCount(showCountIndex);
-    } else {
-      calShowCountFlag.current = true;
-    }
-  }, [showCount, selectedItems]);
-  var resize = (0, _react.useCallback)(function () {
-    clearTimeout(resizeTimeId.current);
-    resizeTimeId.current = setTimeout(function () {
-      calShowCountFlag.current = true;
-      setShowCount(0);
-      getShowCount();
-    }, [60]);
-  }, [getShowCount, showCount]);
-  (0, _react.useEffect)(function () {
-    window.addEventListener('resize', resize);
-    return function () {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    calShowCountFlag.current = true;
-    getShowCount();
-  }, [selectedItems]);
-
-  var handleClear = function handleClear(e) {
-    e.stopPropagation();
-    onClear();
-  };
-
-  var currentCount = showCount === 0 ? selectedItems.length : showCount;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('hi-select__input', 'multiple-values', "theme__".concat(theme), {
-      bordered: bordered,
-      disabled: disabled
-    }, {
-      'hi-select__input__focus': isFocus
-    }),
-    ref: tagWrapperRef,
-    onClick: onClick
-  }, selectedItems.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__input--placeholder"
-  }, placeholder), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('hi-select__input-items', {
-      'hi-select__input-items--all': multipleMode === 'wrap'
-    })
-  }, selectedItems.slice(0, currentCount).map(function (item, index) {
-    var _item = /*#__PURE__*/_react["default"].createElement("div", {
-      key: index,
-      className: "hi-select__input--item",
-      style: {
-        maxWidth: tagWrapperRef.current ? (tagWrapperRef.current.getBoundingClientRect().width - 90) * 0.8 : '80%'
-      }
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "hi-select__input--item__name"
-    }, item[(0, _utils.transKeys)(fieldNames, 'title')]), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "hi-select__input--item__remove",
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        !disabled && onClickOption(item, 0);
-      }
-    }, /*#__PURE__*/_react["default"].createElement("i", {
-      className: "hi-icon icon-close"
-    })));
-
-    return _item;
-  }), currentCount < selectedItems.length && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__input-items--left"
-  }, "+", /*#__PURE__*/_react["default"].createElement("span", {
-    className: "hi-select__input-items--left-count"
-  }, selectedItems.length - currentCount)), searchable && !disabled && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-select__input--search"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    onFocus: onFocus,
-    readOnly: true,
-    className: "hi-select__input--readonly"
-  }))), /*#__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 = MultipleInput;
-exports["default"] = _default;