@cloudtower/eagle 481.0.2 → 481.0.3

package/dist/cjs/core/Cascader/cascader.widget.js

@@ -1,16 +1,16 @@
 'use strict';
 
 var core = require('@linaria/core');
-var index$1 = require('../Link/index.js');
-var index$3 = require('../Token/index.js');
-var index$4 = require('../../coreX/OverflowTooltip/index.js');
+var index = require('../Link/index.js');
+var index$2 = require('../Token/index.js');
+var index$3 = require('../../coreX/OverflowTooltip/index.js');
 var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
 var antd5 = require('antd5');
 var cs = require('classnames');
 var React = require('react');
-var index = require('../SearchInput/index.js');
-var index$2 = require('../Typo/index.js');
+var index$1 = require('../Typo/index.js');
 var cascader_style = require('./cascader.style.js');
+var SearchInput = require('../SearchInput/SearchInput.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -48,14 +48,14 @@ const PresetCascaderHeader = ({ defaultContent, searchProps }) => {
     (_a = defaultContent == null ? void 0 : defaultContent.onClickAll) == null ? void 0 : _a.call(defaultContent, selectedAll);
   };
   return /* @__PURE__ */ React__default.default.createElement(antd5.Flex, { vertical: true, className: cascader_style.CascaderDefaultHeaderContainer }, searchProps ? /* @__PURE__ */ React__default.default.createElement(
-    index,
+    SearchInput.SearchInput,
     __spreadProps(__spreadValues({}, searchProps), {
       className: cs__default.default(searchProps.className, cascader_style.CascaderDefaultHeaderSearch),
       style: {
         width: "unset"
       }
     })
-  ) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null), (defaultContent == null ? void 0 : defaultContent.hide) ? /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null) : /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(cascader_style.CascaderDefaultHeader) }, defaultContent == null ? void 0 : defaultContent.label, /* @__PURE__ */ React__default.default.createElement(index$1, { size: "small", onClick }, selectedAll ? t("components.unselect_all") : t("components.select_all"))));
+  ) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null), (defaultContent == null ? void 0 : defaultContent.hide) ? /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null) : /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(cascader_style.CascaderDefaultHeader) }, defaultContent == null ? void 0 : defaultContent.label, /* @__PURE__ */ React__default.default.createElement(index, { size: "small", onClick }, selectedAll ? t("components.unselect_all") : t("components.select_all"))));
 };
 const PresetCascaderRender = ({
   menus,
@@ -80,20 +80,20 @@ const CascaderDoubleRowOption = ({ leftTop, leftBottom, rightTop, rightBottom, r
         className: !leftTop && !rightTop ? cascader_style.Hide : "",
         gap: 8
       },
-      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l2_medium, "top", "left") }, leftTop),
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$1.Typo.Label.l2_medium, "top", "left") }, leftTop),
       /* @__PURE__ */ React__default.default.createElement("div", null, rightTop)
     ),
     /* @__PURE__ */ React__default.default.createElement(
       antd5.Flex,
       {
         justify: "space-between",
-        className: cs__default.default(index$2.Typo.Label.l4_regular, {
+        className: cs__default.default(index$1.Typo.Label.l4_regular, {
           [cascader_style.Hide]: !leftBottom && !rightBottom
         }),
         gap: 8
       },
-      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom", "left") }, leftBottom),
-      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom") }, rightBottom)
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$1.Typo.Label.l4_regular, "bottom", "left") }, leftBottom),
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$1.Typo.Label.l4_regular, "bottom") }, rightBottom)
     )
   );
 };
@@ -101,7 +101,7 @@ const CascaderOptionWithCount = ({ label, count }) => {
   return /* @__PURE__ */ React__default.default.createElement("div", { className: cascader_style.CascaderDefaultOptionLabel }, label, count ? /* @__PURE__ */ React__default.default.createElement("span", { className: "label" }, count.selected, "/", count.total) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null));
 };
 const defaultTagRender = (props) => {
-  return /* @__PURE__ */ React__default.default.createElement(index$3.default, __spreadValues({ size: "medium", color: "blue", key: props.value }, props), /* @__PURE__ */ React__default.default.createElement(index$4, { content: props.label, tooltip: props.label }));
+  return /* @__PURE__ */ React__default.default.createElement(index$2.default, __spreadValues({ size: "medium", color: "blue", key: props.value }, props), /* @__PURE__ */ React__default.default.createElement(index$3, { content: props.label, tooltip: props.label }));
 };
 
 exports.CascaderDoubleRowOption = CascaderDoubleRowOption;

package/dist/cjs/core/SearchInput/SearchInput.hook.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var index$1 = require('../Icon/index.js');
+var index = require('../Typo/index.js');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var _ = require('lodash');
+var React = require('react');
+var index$2 = require('../../coreX/OverflowTooltip/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const searchInputRecentSearchLocalStorageKey = "search-input-recent-search";
+const useRecentSearch = (recentSearchLocalStorageKey, maxRecentCount, setValue, onChange) => {
+  const { t } = useParrotTranslation();
+  const [recentSearchKeys, setRecentSearchKeys] = React.useState([]);
+  React.useEffect(() => {
+    if (!recentSearchLocalStorageKey)
+      return;
+    try {
+      const currRecentSearchKeys = JSON.parse(
+        localStorage.getItem(searchInputRecentSearchLocalStorageKey) || "{}"
+      )[recentSearchLocalStorageKey];
+      setRecentSearchKeys(currRecentSearchKeys || []);
+    } catch (error) {
+      setRecentSearchKeys([]);
+    }
+  }, [recentSearchLocalStorageKey]);
+  const setRecentSearchKeysDebounceRef = React.useRef();
+  React.useEffect(() => {
+    if (!recentSearchLocalStorageKey)
+      return;
+    const fn = _.debounce((val) => {
+      if (!val || !recentSearchLocalStorageKey)
+        return;
+      setRecentSearchKeys((preState) => {
+        const newState = [...preState].filter((item) => item !== val);
+        if (newState.length >= maxRecentCount)
+          newState.pop();
+        newState.unshift(val);
+        try {
+          const recentSearchMap = JSON.parse(
+            localStorage.getItem(searchInputRecentSearchLocalStorageKey) || "{}"
+          );
+          localStorage.setItem(
+            searchInputRecentSearchLocalStorageKey,
+            JSON.stringify(__spreadProps(__spreadValues({}, recentSearchMap), {
+              [recentSearchLocalStorageKey]: newState
+            }))
+          );
+        } catch (err) {
+          console.error(err);
+        }
+        return newState;
+      });
+    }, 400);
+    setRecentSearchKeysDebounceRef.current = fn;
+    return () => fn.cancel();
+  }, [maxRecentCount, recentSearchLocalStorageKey]);
+  const antd5DropdownMenu = React.useMemo(
+    () => ({
+      onClick: ({ key: val }) => {
+        var _a;
+        setValue(val);
+        onChange == null ? void 0 : onChange(val);
+        (_a = setRecentSearchKeysDebounceRef.current) == null ? void 0 : _a.call(setRecentSearchKeysDebounceRef, val);
+      },
+      items: [
+        {
+          key: "recent-search",
+          className: core.cx("recent-search-menu-item", index.Typo.Label.l4_regular),
+          disabled: true,
+          label: /* @__PURE__ */ React__default.default.createElement("span", null, t("components.recent_search"))
+        },
+        ...recentSearchKeys.map((k) => ({
+          key: k,
+          label: /* @__PURE__ */ React__default.default.createElement(
+            index$1,
+            {
+              src: iconsReact.Search24Icon,
+              hoverSrc: iconsReact.Search24BlueIcon,
+              iconHeight: 24,
+              iconWidth: 24
+            },
+            /* @__PURE__ */ React__default.default.createElement(index$2, { content: k })
+          )
+        }))
+      ],
+      // 避免 Dropdown 点击时被 Input blur 关闭
+      onMouseDown: (e) => e.preventDefault()
+    }),
+    [onChange, recentSearchKeys, setRecentSearchKeysDebounceRef, setValue, t]
+  );
+  return {
+    recentSearchKeys,
+    setRecentSearchKeysDebounceRef,
+    antd5DropdownMenu
+  };
+};
+
+exports.searchInputRecentSearchLocalStorageKey = searchInputRecentSearchLocalStorageKey;
+exports.useRecentSearch = useRecentSearch;

package/dist/cjs/core/SearchInput/SearchInput.js

@@ -0,0 +1,253 @@
+'use strict';
+
+var icons = require('@ant-design/icons');
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var index$1 = require('../Icon/index.js');
+var index$3 = require('../Input/index.js');
+var index$2 = require('../Tooltip/index.js');
+var index = require('../Typo/index.js');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var _ = require('lodash');
+var React = require('react');
+var SearchInput_hook = require('./SearchInput.hook.js');
+var SearchInput_style = require('./SearchInput.style.js');
+var Antd5Dropdown = require('../Antd5Dropdown/Antd5Dropdown.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const SearchInput = (props) => {
+  const _a = props, {
+    className,
+    debounceWait = 300,
+    total = 0,
+    onSearchNext,
+    onSearchPrev,
+    prefixHoverIcon,
+    nextHoverIcon,
+    clearHoverIcon,
+    prefixIcon,
+    nextIcon,
+    clearIcon,
+    width = 276,
+    searchIcon,
+    enableRecentSearch,
+    recentSearchLocalStorageKey,
+    maxRecentCount = 5,
+    current: externalCurrent,
+    onChange,
+    onFocus,
+    onBlur
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "debounceWait",
+    "total",
+    "onSearchNext",
+    "onSearchPrev",
+    "prefixHoverIcon",
+    "nextHoverIcon",
+    "clearHoverIcon",
+    "prefixIcon",
+    "nextIcon",
+    "clearIcon",
+    "width",
+    "searchIcon",
+    "enableRecentSearch",
+    "recentSearchLocalStorageKey",
+    "maxRecentCount",
+    "current",
+    "onChange",
+    "onFocus",
+    "onBlur"
+  ]);
+  const [internalCurrent, setInternalCurrent] = React.useState(0);
+  const [value, setValue] = React.useState(props.value || "");
+  const { t } = useParrotTranslation();
+  const isNoMatch = total === 0;
+  const [inputFocused, setInputFocused] = React.useState(false);
+  const {
+    recentSearchKeys,
+    setRecentSearchKeysDebounceRef,
+    antd5DropdownMenu
+  } = SearchInput_hook.useRecentSearch(
+    recentSearchLocalStorageKey,
+    maxRecentCount,
+    setValue,
+    onChange
+  );
+  const debounceOnChangeRef = React.useRef();
+  React.useEffect(() => {
+    const fn = _.debounce((val) => {
+      var _a2;
+      onChange == null ? void 0 : onChange(val);
+      if (enableRecentSearch && val) {
+        (_a2 = setRecentSearchKeysDebounceRef.current) == null ? void 0 : _a2.call(setRecentSearchKeysDebounceRef, val);
+      }
+    }, debounceWait);
+    debounceOnChangeRef.current = fn;
+    return () => fn.cancel();
+  }, [
+    onChange,
+    enableRecentSearch,
+    debounceWait,
+    setRecentSearchKeysDebounceRef
+  ]);
+  const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
+  const setCurrent = React.useCallback(
+    (newCurrent) => {
+      if (externalCurrent === void 0) {
+        setInternalCurrent(newCurrent);
+      }
+    },
+    [externalCurrent]
+  );
+  const next = React.useCallback(() => {
+    if (total) {
+      const nextCurrent = current + 1 > total ? 1 : current + 1;
+      onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
+      setCurrent(nextCurrent);
+    }
+  }, [onSearchNext, current, total, value, setCurrent]);
+  const prev = React.useCallback(() => {
+    if (total) {
+      const prevCurrent = current - 1 < 1 ? total : current - 1;
+      onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
+      setCurrent(prevCurrent);
+    }
+  }, [onSearchPrev, current, total, value, setCurrent]);
+  const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, typeof total === "number" ? /* @__PURE__ */ React__default.default.createElement(
+    "span",
+    {
+      className: core.cx(
+        index.Typo.Label.l4_regular,
+        "counter-text",
+        SearchInput_style.CountTextStyles
+      )
+    },
+    current,
+    "/",
+    total
+  ) : null, /* @__PURE__ */ React__default.default.createElement("span", { className: SearchInput_style.IconContainerStyles }, isNoMatch ? /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      className: SearchInput_style.DisabledIconStyles,
+      src: iconsReact.ArrowChevronUp16SecondaryIcon,
+      style: { opacity: 0.5 }
+    }
+  ) : /* @__PURE__ */ React__default.default.createElement(index$2, { title: t("components.prev") }, /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      src: prefixIcon != null ? prefixIcon : iconsReact.ArrowChevronUp16SecondaryIcon,
+      hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : iconsReact.ArrowChevronUp16BlueIcon,
+      onClick: prev
+    }
+  )), isNoMatch ? /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      className: SearchInput_style.DisabledIconStyles,
+      src: iconsReact.ArrowChevronDown16SecondaryIcon,
+      style: { opacity: 0.5 }
+    }
+  ) : /* @__PURE__ */ React__default.default.createElement(index$2, { title: t("components.next") }, /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      src: nextIcon != null ? nextIcon : iconsReact.ArrowChevronDown16SecondaryIcon,
+      hoverSrc: nextHoverIcon != null ? nextHoverIcon : iconsReact.ArrowChevronDown16BlueIcon,
+      onClick: next
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(index$2, { title: t("components.clear") }, /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      src: clearIcon != null ? clearIcon : iconsReact.XmarkCloseCircleFill16TertiaryIcon,
+      hoverSrc: clearHoverIcon != null ? clearHoverIcon : iconsReact.XmarkCloseCircleFill16SecondaryIcon,
+      onClick: () => {
+        var _a2;
+        setValue("");
+        (_a2 = debounceOnChangeRef.current) == null ? void 0 : _a2.call(debounceOnChangeRef, "");
+      }
+    }
+  )))) : null;
+  React.useEffect(() => {
+    setValue(props.value || "");
+  }, [props.value]);
+  React.useEffect(() => {
+    if (externalCurrent === void 0) {
+      setCurrent(total ? 1 : 0);
+    }
+  }, [value, total, externalCurrent, setCurrent]);
+  const InputComponent = /* @__PURE__ */ React__default.default.createElement(
+    index$3,
+    __spreadValues({
+      className: core.cx(SearchInput_style.SearchInputStyles, className),
+      style: { width },
+      prefix: searchIcon ? /* @__PURE__ */ React__default.default.createElement(index$1, { src: searchIcon }) : /* @__PURE__ */ React__default.default.createElement(icons.SearchOutlined, null),
+      suffix,
+      onPressEnter: next,
+      value,
+      onChange: (e) => {
+        var _a2;
+        const newValue = e.target.value || "";
+        setValue(newValue);
+        (_a2 = debounceOnChangeRef.current) == null ? void 0 : _a2.call(debounceOnChangeRef, newValue);
+      },
+      onFocus: (e) => {
+        setInputFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      onBlur: (e) => {
+        setInputFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      }
+    }, restProps)
+  );
+  if (enableRecentSearch)
+    return /* @__PURE__ */ React__default.default.createElement(
+      Antd5Dropdown.Antd5Dropdown,
+      {
+        overlayClassName: core.cx(
+          "recent-search-dropdown",
+          SearchInput_style.SearchInputDropdownStyles
+        ),
+        overlayStyle: { width },
+        transitionName: "",
+        placement: "bottomLeft",
+        trigger: ["click"],
+        open: inputFocused && !value && !!recentSearchKeys.length,
+        menu: antd5DropdownMenu
+      },
+      InputComponent
+    );
+  return InputComponent;
+};
+
+exports.SearchInput = SearchInput;

package/dist/cjs/core/SearchInput/SearchInput.style.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const SearchInputStyles = "E_s1n7hav7";
+const CountTextStyles = "E_c1tgpyn0";
+const IconContainerStyles = "E_i1cmbu8m";
+const DisabledIconStyles = "E_dxmfsc9";
+const SearchInputDropdownStyles = "E_slbf45q";
+
+exports.CountTextStyles = CountTextStyles;
+exports.DisabledIconStyles = DisabledIconStyles;
+exports.IconContainerStyles = IconContainerStyles;
+exports.SearchInputDropdownStyles = SearchInputDropdownStyles;
+exports.SearchInputStyles = SearchInputStyles;

package/dist/cjs/core/index.js

@@ -7,19 +7,19 @@ var index$e = require('./Byte/index.js');
 var index$f = require('./BytePerSecond/index.js');
 var index$u = require('./Frequency/index.js');
 var index$O = require('./Percent/index.js');
-var index$R = require('./Second/index.js');
-var index$V = require('./Speed/index.js');
+var index$Q = require('./Second/index.js');
+var index$U = require('./Speed/index.js');
 
 const units = {
   Percent: index$O,
   Byte: index$e,
   BytePerSecond: index$f,
   Frequency: index$u,
-  Speed: index$V,
+  Speed: index$U,
   Bps: index$a,
   BitPerSecond: index$8,
   Bit: index$7,
-  Second: index$R
+  Second: index$Q
 };
 
 exports.Bit = index$7;
@@ -29,7 +29,7 @@ exports.Byte = index$e;
 exports.BytePerSecond = index$f;
 exports.Frequency = index$u;
 exports.Percent = index$O;
-exports.Second = index$R;
-exports.Speed = index$V;
+exports.Second = index$Q;
+exports.Speed = index$U;
 exports.Units = units;
 exports.units = units;