@pnt-team/pnt-component-frontend 0.0.110 → 0.0.113

package/lib/cjs/components/PntRegionSelect/index.js

@@ -0,0 +1,402 @@
+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/PntRegionSelect/index.tsx
+var PntRegionSelect_exports = {};
+__export(PntRegionSelect_exports, {
+  default: () => PntRegionSelect_default
+});
+module.exports = __toCommonJS(PntRegionSelect_exports);
+var import_api = require("../../api");
+var import_config = require("../../config");
+var import_react = require("react");
+var import_tdesign_react = require("tdesign-react");
+var import_ImportDialog = __toESM(require("./ImportDialog"));
+var import_index = require("./index.scss");
+var import_types = require("./types");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toRegionOptions = (list) => (list || []).map((item) => {
+  var _a, _b, _c;
+  return {
+    ...item,
+    region_code: (_a = item.region_code) != null ? _a : "",
+    region_ch: (_b = item.region_ch) != null ? _b : "",
+    region_en: (_c = item.region_en) != null ? _c : ""
+  };
+});
+var getLabelText = (item, format) => {
+  const { region_ch, region_en, region_code } = item;
+  switch (format) {
+    case "name_en":
+      return region_en || region_ch || region_code;
+    case "name_en_name":
+      return region_en && region_ch ? `${region_en}（${region_ch}）` : region_en || region_ch || region_code;
+    case "code":
+      return region_code;
+    default:
+      return region_ch || region_en || region_code;
+  }
+};
+var PntRegionSelect = (props) => {
+  const {
+    value = [],
+    onChange,
+    multiple = true,
+    dataSource = "default",
+    gameId,
+    env = 0,
+    options: externalOptions,
+    disabled = false,
+    placeholder,
+    max,
+    filterable = true,
+    labelFormat = "name",
+    texts: customTexts,
+    onLoaded,
+    optionDisabled,
+    optionTooltip,
+    importable = false,
+    invertible = false,
+    minCollapsedNum,
+    collapsedItems,
+    onBlur,
+    importDialogProps,
+    className,
+    style,
+    popupProps
+  } = props;
+  const { http } = (0, import_config.usePntConfig)();
+  const texts = (0, import_react.useMemo)(
+    () => ({ ...import_types.DEFAULT_TEXTS, ...customTexts }),
+    [customTexts]
+  );
+  const [innerOptions, setInnerOptions] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [searchKeyword, setSearchKeyword] = (0, import_react.useState)("");
+  const [importVisible, setImportVisible] = (0, import_react.useState)(false);
+  const fetchSeqRef = (0, import_react.useRef)(0);
+  const onLoadedRef = (0, import_react.useRef)(onLoaded);
+  onLoadedRef.current = onLoaded;
+  const isExternal = externalOptions !== void 0;
+  const fetchData = (0, import_react.useCallback)(async () => {
+    var _a, _b, _c, _d;
+    if (isExternal)
+      return;
+    const seq = ++fetchSeqRef.current;
+    setLoading(true);
+    try {
+      let list = [];
+      if (dataSource === "custom") {
+        if (!gameId) {
+          console.warn(
+            '[PntRegionSelect] dataSource="custom" 时必须传入 gameId'
+          );
+          return;
+        }
+        const res = await (0, import_api.businessGameInfoGetCustomRegion)(http, {
+          game_id: Number(gameId),
+          env
+        });
+        if (seq !== fetchSeqRef.current)
+          return;
+        if (res.code === 0 && ((_a = res.data) == null ? void 0 : _a.region_list)) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      } else if (dataSource === "business") {
+        if (!gameId) {
+          console.warn(
+            '[PntRegionSelect] dataSource="business" 时必须传入 gameId'
+          );
+          return;
+        }
+        const res = await (0, import_api.businessRegionQuery)(http, {
+          game_id: Number(gameId)
+        });
+        if (seq !== fetchSeqRef.current)
+          return;
+        if (res.code === 0 && ((_b = res.data) == null ? void 0 : _b.region_list)) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      } else {
+        const res = await (0, import_api.businessRegionQuery)(http, {});
+        if (seq !== fetchSeqRef.current)
+          return;
+        if (res.code === 0 && ((_c = res.data) == null ? void 0 : _c.region_list)) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      }
+      setInnerOptions(list);
+      (_d = onLoadedRef.current) == null ? void 0 : _d.call(onLoadedRef, list);
+    } catch {
+    } finally {
+      if (seq === fetchSeqRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [http, dataSource, gameId, env, isExternal]);
+  (0, import_react.useEffect)(() => {
+    fetchData();
+  }, [fetchData]);
+  const options = (0, import_react.useMemo)(
+    () => isExternal ? externalOptions : innerOptions,
+    [isExternal, externalOptions, innerOptions]
+  );
+  const valueArr = (0, import_react.useMemo)(() => {
+    if (value === void 0 || value === null || value === "")
+      return [];
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+  }, [value]);
+  const filteredOptions = (0, import_react.useMemo)(() => {
+    if (!searchKeyword)
+      return options;
+    const kw = searchKeyword.toLowerCase();
+    return options.filter(
+      (item) => {
+        var _a, _b, _c;
+        return ((_a = item.region_ch) == null ? void 0 : _a.toLowerCase().includes(kw)) || ((_b = item.region_en) == null ? void 0 : _b.toLowerCase().includes(kw)) || ((_c = item.region_code) == null ? void 0 : _c.toLowerCase().includes(kw));
+      }
+    );
+  }, [options, searchKeyword]);
+  const isOptionDisabled = (0, import_react.useCallback)(
+    (item) => {
+      if (item.disabled)
+        return true;
+      return optionDisabled ? optionDisabled(item) : false;
+    },
+    [optionDisabled]
+  );
+  const emitMultiple = (0, import_react.useCallback)(
+    (nextValue) => {
+      onChange == null ? void 0 : onChange(
+        nextValue,
+        options.filter((o) => nextValue.includes(o.region_code))
+      );
+    },
+    [onChange, options]
+  );
+  const handleSelectAll = (0, import_react.useCallback)(() => {
+    const allValues = filteredOptions.filter((item) => !isOptionDisabled(item)).map((item) => item.region_code);
+    emitMultiple(Array.from(/* @__PURE__ */ new Set([...valueArr, ...allValues])));
+  }, [filteredOptions, valueArr, emitMultiple, isOptionDisabled]);
+  const handleClearAll = (0, import_react.useCallback)(() => {
+    emitMultiple([]);
+  }, [emitMultiple]);
+  const handleInvert = (0, import_react.useCallback)(() => {
+    const selectedSet = new Set(valueArr);
+    const nextValue = filteredOptions.filter((item) => !isOptionDisabled(item)).map((item) => item.region_code).filter((code) => !selectedSet.has(code));
+    emitMultiple(nextValue);
+  }, [filteredOptions, valueArr, emitMultiple, isOptionDisabled]);
+  const isAllSelected = (0, import_react.useMemo)(() => {
+    const selectable = filteredOptions.filter(
+      (item) => !isOptionDisabled(item)
+    );
+    return selectable.length > 0 && selectable.every((item) => valueArr.includes(item.region_code));
+  }, [filteredOptions, valueArr, isOptionDisabled]);
+  const isIndeterminate = (0, import_react.useMemo)(() => {
+    const selectable = filteredOptions.filter(
+      (item) => !isOptionDisabled(item)
+    );
+    const selected = selectable.filter(
+      (item) => valueArr.includes(item.region_code)
+    );
+    return selected.length > 0 && selected.length < selectable.length;
+  }, [filteredOptions, valueArr, isOptionDisabled]);
+  const selectOptions = (0, import_react.useMemo)(() => {
+    return filteredOptions.map((item) => {
+      const label = getLabelText(item, labelFormat);
+      const isDisabled = isOptionDisabled(item);
+      const tooltip = optionTooltip ? optionTooltip(item) : void 0;
+      return {
+        label,
+        value: item.region_code,
+        disabled: isDisabled,
+        tooltip,
+        rawItem: item
+      };
+    });
+  }, [filteredOptions, labelFormat, isOptionDisabled, optionTooltip]);
+  const handleChange = (0, import_react.useCallback)(
+    (val) => {
+      var _a, _b;
+      const values = Array.isArray(val) ? val : val ? [val] : [];
+      const strValues = values.map(String);
+      const selectedOptions = options.filter(
+        (o) => strValues.includes(o.region_code)
+      );
+      if (multiple) {
+        onChange == null ? void 0 : onChange(strValues, selectedOptions);
+      } else {
+        onChange == null ? void 0 : onChange(
+          (_a = strValues[0]) != null ? _a : "",
+          (_b = selectedOptions[0]) != null ? _b : void 0
+        );
+      }
+    },
+    [onChange, options, multiple]
+  );
+  const handleImportConfirm = (0, import_react.useCallback)(
+    (nextValue) => {
+      emitMultiple(nextValue);
+      onBlur == null ? void 0 : onBlur({ value: nextValue });
+    },
+    [emitMultiple, onBlur]
+  );
+  const panelTopContent = (0, import_react.useMemo)(() => {
+    if (!multiple)
+      return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-region-select__toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.Checkbox,
+        {
+          checked: isAllSelected,
+          indeterminate: isIndeterminate,
+          onChange: (checked) => {
+            if (checked) {
+              handleSelectAll();
+            } else {
+              handleClearAll();
+            }
+          },
+          children: texts.selectAll
+        }
+      ),
+      invertible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: "pnt-region-select__invert",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleInvert();
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              event.stopPropagation();
+              handleInvert();
+            }
+          },
+          children: texts.invertSelection
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pnt-region-select__count", children: texts.selectedCount.replace("{count}", String(valueArr.length)) })
+    ] });
+  }, [
+    multiple,
+    isAllSelected,
+    isIndeterminate,
+    handleSelectAll,
+    handleClearAll,
+    invertible,
+    handleInvert,
+    texts,
+    valueArr.length
+  ]);
+  const emptyContent = (0, import_react.useMemo)(() => {
+    if (loading)
+      return null;
+    if (filteredOptions.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-region-select__empty", children: texts.noResult });
+    }
+    return null;
+  }, [loading, filteredOptions.length, texts.noResult]);
+  const selectNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tdesign_react.Select,
+    {
+      value: multiple ? valueArr : valueArr[0],
+      onChange: handleChange,
+      filterable,
+      onSearch: setSearchKeyword,
+      loading: loading && options.length === 0,
+      multiple,
+      max,
+      clearable: true,
+      disabled,
+      placeholder: placeholder || texts.placeholder,
+      panelTopContent,
+      empty: emptyContent,
+      minCollapsedNum,
+      collapsedItems,
+      onBlur,
+      popupProps: {
+        ...popupProps,
+        overlayClassName: [
+          "pnt-region-select-popup",
+          popupProps == null ? void 0 : popupProps.overlayClassName
+        ].filter(Boolean).join(" ")
+      },
+      className: className ? `pnt-region-select ${className}` : "pnt-region-select",
+      style,
+      children: selectOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.Select.Option,
+        {
+          value: opt.value,
+          label: opt.label,
+          disabled: opt.disabled,
+          title: opt.tooltip
+        },
+        opt.value
+      ))
+    }
+  );
+  if (importable && multiple) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-region-select__import-wrapper", children: [
+        selectNode,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tdesign_react.Button,
+          {
+            theme: "primary",
+            size: "small",
+            variant: "outline",
+            disabled,
+            className: "pnt-region-select__import-btn",
+            onClick: () => setImportVisible(true),
+            children: texts.importBtn
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ImportDialog.default,
+        {
+          visible: importVisible,
+          options,
+          currentValue: valueArr,
+          texts,
+          dialogProps: importDialogProps,
+          onClose: () => setImportVisible(false),
+          onConfirm: handleImportConfirm
+        }
+      )
+    ] });
+  }
+  return selectNode;
+};
+var PntRegionSelect_default = PntRegionSelect;

package/lib/cjs/components/PntRegionSelect/index.scss

@@ -0,0 +1,166 @@
+.pnt-region-select {
+  width: 100%;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--td-component-border, #e7e7e7);
+    background: var(--td-bg-color-container, #fff);
+  }
+
+  &__invert {
+    margin-left: 12px;
+    margin-right: auto;
+    font-size: 12px;
+    color: var(--td-brand-color, #0052d9);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: var(--td-brand-color-hover, #2667d4);
+    }
+  }
+
+  &__count {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__invert + &__count {
+    margin-left: 0;
+  }
+
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--td-text-color-secondary, #999);
+    font-size: 14px;
+  }
+
+  // ---- 批量导入 ----
+  &__import-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .pnt-region-select {
+      flex: 1;
+    }
+  }
+
+  &__import-btn {
+    position: absolute;
+    right: 32px;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+}
+
+.pnt-region-select-popup {
+  .t-select__list {
+    padding-top: 0;
+  }
+}
+
+// ---- 批量导入弹窗 ----
+.pnt-region-import {
+  &__tip {
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__result {
+    margin-top: 12px;
+  }
+
+  &__summary {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 8px;
+    font-size: 12px;
+  }
+
+  &__summary-item {
+    &--unmatched {
+      color: var(--td-error-color, #d54941);
+    }
+
+    &--pending {
+      color: var(--td-success-color, #2ba471);
+    }
+
+    &--exists {
+      color: var(--td-text-color-secondary, #999);
+    }
+  }
+
+  &__summary-dot {
+    color: var(--td-text-color-placeholder, #bbb);
+  }
+
+  &__copy-btn {
+    padding: 0 4px;
+    height: 20px;
+  }
+
+  &__table {
+    border: 1px solid var(--td-component-border, #e7e7e7);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__table-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: var(--td-bg-color-secondarycontainer, #f3f3f3);
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__table-body {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  &__table-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
+    font-size: 12px;
+
+    & + & {
+      border-top: 1px solid var(--td-component-border, #e7e7e7);
+    }
+  }
+
+  &__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    &--unmatched {
+      color: var(--td-error-color, #d54941);
+    }
+
+    &--pending {
+      color: var(--td-success-color, #2ba471);
+    }
+
+    &--exists {
+      color: var(--td-text-color-secondary, #999);
+    }
+  }
+
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--td-text-color-secondary, #999);
+  }
+}