@pisell/materials 1.8.7 → 1.8.9

package/lib/components/pisellLookup/PisellLookup.js

@@ -0,0 +1,434 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLookup/PisellLookup.tsx
+var PisellLookup_exports = {};
+__export(PisellLookup_exports, {
+  PisellLookup: () => PisellLookup
+});
+module.exports = __toCommonJS(PisellLookup_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_components = require("./components");
+var import_locales = require("../../locales");
+var import_PisellLookup = require("./PisellLookup.less");
+var PisellLookupComponent = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    // 触发器配置
+    triggerType = "input",
+    trigger,
+    triggerText,
+    triggerIcon,
+    buttonText = (0, import_locales.getText)("pisell-lookup-button-text"),
+    placeholder = (0, import_locales.getText)("pisell-lookup-placeholder"),
+    size = "middle",
+    disabled = false,
+    showPrefixIcon = false,
+    prefixIcon,
+    showClear = true,
+    showConfirmButton = true,
+    confirmButtonText = (0, import_locales.getText)("pisell-lookup-confirm-button-text"),
+    // 搜索行为配置
+    value,
+    defaultValue,
+    onChange,
+    onSearch,
+    searchMode = "realtime",
+    debounceTime = 300,
+    // 扫码配置
+    showScan = true,
+    onScan,
+    // 搜索历史配置
+    showHistory = false,
+    historyKey = "pisell_lookup_history",
+    maxHistoryCount = 10,
+    onLoadHistory,
+    onSaveHistory,
+    historyRender,
+    // 联想词配置
+    showSuggestions = false,
+    onLoadSuggestions,
+    suggestionsRender,
+    // 热门搜索配置
+    showHotWords = false,
+    onLoadHotWords,
+    hotWordsRender,
+    // 结果展示配置
+    displayType: displayTypeProp,
+    resultRender,
+    loading = false,
+    emptyRender,
+    // 容器样式配置
+    modalWidth,
+    modalStyle,
+    getContainer,
+    drawerWidth,
+    drawerPlacement,
+    popupWidth,
+    containerStyle,
+    containerClassName,
+    // 可见性控制
+    visible: visibleProp,
+    defaultVisible,
+    onVisibleChange,
+    onOpen,
+    onClose,
+    mask = false,
+    maskClosable,
+    clearOnClose = false,
+    // 样式配置
+    className,
+    style,
+    zIndex
+  } = props;
+  const displayType = (0, import_react.useMemo)(() => {
+    return displayTypeProp || (0, import_utils.getDefaultDisplayType)(triggerType, !!trigger);
+  }, [displayTypeProp, triggerType, trigger]);
+  const effectiveSearchMode = (0, import_react.useMemo)(() => {
+    if (!showConfirmButton) {
+      return "realtime";
+    }
+    return searchMode;
+  }, [showConfirmButton, searchMode]);
+  const {
+    keyword,
+    setKeyword,
+    visible,
+    setVisible,
+    open,
+    close
+  } = (0, import_hooks.useSearchState)({
+    value,
+    defaultValue,
+    visible: visibleProp,
+    defaultVisible,
+    onChange,
+    onVisibleChange,
+    onOpen,
+    onClose
+  });
+  const { history, addHistory, removeHistory, clearAllHistory } = (0, import_hooks.useSearchHistory)({
+    historyKey,
+    maxHistoryCount,
+    onLoadHistory,
+    onSaveHistory
+  });
+  const [suggestions, setSuggestions] = (0, import_react.useState)([]);
+  const [hotWords, setHotWords] = (0, import_react.useState)([]);
+  const lastSearchKeywordRef = (0, import_react.useRef)("");
+  const isManualSelectRef = (0, import_react.useRef)(false);
+  const modalInputRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    open,
+    close,
+    getKeyword: () => keyword,
+    setKeyword
+  }), [open, close, keyword, setKeyword]);
+  (0, import_react.useEffect)(() => {
+    if (!visible && clearOnClose) {
+      setKeyword("");
+    }
+  }, [visible, clearOnClose, setKeyword]);
+  const handleAfterOpen = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      if (modalInputRef.current) {
+        modalInputRef.current.focus();
+        if (!clearOnClose && keyword) {
+          modalInputRef.current.select();
+        }
+      }
+      if (keyword) {
+        onSearch == null ? void 0 : onSearch(keyword);
+      }
+    }, 100);
+  }, [clearOnClose, keyword, onSearch]);
+  (0, import_react.useEffect)(() => {
+    if (!showSuggestions || !onLoadSuggestions || !keyword || !visible) {
+      setSuggestions([]);
+      return;
+    }
+    const loadSuggestions = async () => {
+      try {
+        const result = await Promise.resolve(onLoadSuggestions(keyword));
+        setSuggestions(result || []);
+      } catch (error) {
+        console.error("Failed to load suggestions:", error);
+        setSuggestions([]);
+      }
+    };
+    loadSuggestions();
+  }, [showSuggestions, onLoadSuggestions, keyword, visible]);
+  (0, import_react.useEffect)(() => {
+    if (!showHotWords || !onLoadHotWords || !visible) {
+      setHotWords([]);
+      return;
+    }
+    const loadHotWords = async () => {
+      try {
+        const result = await Promise.resolve(onLoadHotWords());
+        setHotWords(result || []);
+      } catch (error) {
+        console.error("Failed to load hot words:", error);
+        setHotWords([]);
+      }
+    };
+    loadHotWords();
+  }, [showHotWords, onLoadHotWords, visible]);
+  const handleRealtimeSearch = (0, import_react.useCallback)(
+    (searchKeyword) => {
+      if (lastSearchKeywordRef.current === searchKeyword) {
+        return;
+      }
+      lastSearchKeywordRef.current = searchKeyword;
+      onSearch == null ? void 0 : onSearch(searchKeyword);
+    },
+    [onSearch]
+  );
+  const handleConfirmSearch = (0, import_react.useCallback)(
+    (searchKeyword) => {
+      if (lastSearchKeywordRef.current === searchKeyword) {
+        return;
+      }
+      lastSearchKeywordRef.current = searchKeyword;
+      if (showHistory && searchKeyword.trim()) {
+        addHistory(searchKeyword);
+      }
+      onSearch == null ? void 0 : onSearch(searchKeyword);
+    },
+    [showHistory, addHistory, onSearch]
+  );
+  (0, import_hooks.useDebounceSearch)({
+    keyword,
+    debounceTime,
+    onSearch: handleRealtimeSearch,
+    enabled: effectiveSearchMode === "realtime" && visible && !isManualSelectRef.current,
+    lastSearchKeyword: lastSearchKeywordRef.current
+  });
+  const handleInputChange = (0, import_react.useCallback)(
+    (newValue) => {
+      setKeyword(newValue);
+    },
+    [setKeyword]
+  );
+  const handleTriggerClick = (0, import_react.useCallback)(() => {
+    open();
+  }, [open]);
+  const handleInputFocus = (0, import_react.useCallback)(() => {
+    if (displayType === "inline" || displayType === "popup") {
+      open();
+    }
+  }, [displayType, open]);
+  const handleInputBlur = (0, import_react.useCallback)(() => {
+    if (displayType === "inline" || displayType === "popup") {
+      setTimeout(() => {
+        close();
+      }, 200);
+    }
+  }, [displayType, close]);
+  const handleConfirm = (0, import_react.useCallback)(() => {
+    handleConfirmSearch(keyword);
+  }, [keyword, handleConfirmSearch]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    isManualSelectRef.current = true;
+    setKeyword("");
+    lastSearchKeywordRef.current = "";
+    onSearch == null ? void 0 : onSearch("");
+    setTimeout(() => {
+      isManualSelectRef.current = false;
+    }, debounceTime + 100);
+  }, [setKeyword, onSearch, debounceTime]);
+  const handleScan = (0, import_react.useCallback)(
+    (code) => {
+      setKeyword(code);
+      handleConfirmSearch(code);
+      onScan == null ? void 0 : onScan(code);
+    },
+    [setKeyword, handleConfirmSearch, onScan]
+  );
+  const handleSelectAuxiliary = (0, import_react.useCallback)(
+    (selectedKeyword) => {
+      isManualSelectRef.current = true;
+      setKeyword(selectedKeyword);
+      if (showHistory && selectedKeyword.trim()) {
+        addHistory(selectedKeyword);
+      }
+      lastSearchKeywordRef.current = selectedKeyword;
+      onSearch == null ? void 0 : onSearch(selectedKeyword);
+      setTimeout(() => {
+        isManualSelectRef.current = false;
+      }, debounceTime + 100);
+    },
+    [setKeyword, showHistory, addHistory, onSearch, debounceTime]
+  );
+  const renderTrigger = () => {
+    const isInput = (0, import_utils.isInputTrigger)(triggerType) && !trigger;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.LookupTrigger,
+      {
+        type: triggerType,
+        trigger,
+        triggerText,
+        triggerIcon,
+        buttonText,
+        disabled,
+        placeholder,
+        size,
+        showPrefixIcon,
+        prefixIcon,
+        showClear,
+        showConfirmButton,
+        confirmButtonText,
+        showScan,
+        value: keyword,
+        onChange: handleInputChange,
+        onClick: handleTriggerClick,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onConfirm: handleConfirm,
+        onScan: handleScan,
+        onClear: handleClear
+      }
+    );
+  };
+  const renderAuxiliary = () => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.LookupAuxiliary,
+      {
+        keyword,
+        showHistory,
+        history,
+        showSuggestions,
+        suggestions,
+        showHotWords,
+        hotWords,
+        onSelect: handleSelectAuxiliary,
+        onRemoveHistory: removeHistory,
+        onClearHistory: clearAllHistory,
+        historyRender,
+        suggestionsRender,
+        hotWordsRender
+      }
+    );
+  };
+  const renderResults = () => {
+    if (!resultRender) {
+      return null;
+    }
+    if (loading) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-loading" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { tip: (0, import_locales.getText)("pisell-lookup-loading") }));
+    }
+    if (!keyword) {
+      if (emptyRender) {
+        return emptyRender();
+      }
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-result" }, resultRender(keyword, close));
+  };
+  const renderContent = () => {
+    const auxiliary = renderAuxiliary();
+    const results = renderResults();
+    if (!auxiliary && !results) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-content" }, auxiliary, results);
+  };
+  if (displayType === "inline" || displayType === "popup") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-lookup pisell-lookup-${displayType} ${className || ""}`, style }, renderTrigger(), /* @__PURE__ */ import_react.default.createElement(
+      import_components.LookupResultHost,
+      {
+        displayType,
+        visible,
+        onClose: close,
+        popupWidth,
+        containerStyle,
+        containerClassName,
+        zIndex
+      },
+      renderContent()
+    ));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-lookup ${className || ""}`, style }, renderTrigger(), /* @__PURE__ */ import_react.default.createElement(
+    import_components.LookupResultHost,
+    {
+      displayType,
+      visible,
+      onClose: close,
+      modalWidth,
+      modalStyle,
+      getContainer,
+      drawerWidth,
+      drawerPlacement,
+      containerStyle,
+      containerClassName,
+      mask,
+      maskClosable,
+      zIndex,
+      onAfterOpen: handleAfterOpen
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-search-area-with-close" }, /* @__PURE__ */ import_react.default.createElement(
+      import_components.LookupTrigger,
+      {
+        ref: modalInputRef,
+        type: "input",
+        disabled,
+        placeholder,
+        size: "large",
+        showPrefixIcon,
+        prefixIcon,
+        showClear,
+        showConfirmButton,
+        confirmButtonText,
+        showScan,
+        value: keyword,
+        onChange: handleInputChange,
+        onConfirm: handleConfirm,
+        onScan: handleScan,
+        onClear: handleClear
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+        onClick: close,
+        className: "pisell-lookup-modal-close-btn"
+      },
+      (0, import_locales.getText)("pisell-lookup-close")
+    )),
+    renderContent()
+  ));
+});
+PisellLookupComponent.displayName = "PisellLookup";
+var PisellLookup = PisellLookupComponent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellLookup
+});