@pisell/materials 6.3.27 → 6.3.28

package/lib/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.js

@@ -0,0 +1,69 @@
+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/filter/components/FilterItem/AsyncOptionsSelectWrapper.tsx
+var AsyncOptionsSelectWrapper_exports = {};
+__export(AsyncOptionsSelectWrapper_exports, {
+  default: () => AsyncOptionsSelectWrapper_default
+});
+module.exports = __toCommonJS(AsyncOptionsSelectWrapper_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_pisellMultipleSelect = require("../../../pisellMultipleSelect");
+function normalizeOptions(list) {
+  if (!Array.isArray(list)) return [];
+  return list.map(
+    (item) => item && typeof item === "object" && "label" in item && "value" in item ? { label: String(item.label), value: item.value } : { label: String(item), value: item }
+  );
+}
+var AsyncOptionsSelectWrapper = (props) => {
+  const { getOptions, fieldType, value, onChange, ...rest } = props;
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    setLoading(true);
+    const result = getOptions();
+    const resolved = Promise.resolve(result);
+    resolved.then((list) => {
+      setOptions(normalizeOptions(list));
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [getOptions]);
+  const commonProps = { ...rest, options, mode: "edit" };
+  if (loading) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: true, size: "small" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-block", minWidth: 120, minHeight: 32 } }));
+  }
+  if (fieldType === "multipleSelect") {
+    return /* @__PURE__ */ import_react.default.createElement(import_pisellMultipleSelect.PisellMultipleSelect, { ...commonProps, value, onChange });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_pisellSingleSelect.PisellSingleSelect, { ...commonProps, value, onChange });
+};
+AsyncOptionsSelectWrapper.displayName = "AsyncOptionsSelectWrapper";
+var AsyncOptionsSelectWrapper_default = AsyncOptionsSelectWrapper;

package/lib/components/filter/components/FilterItem/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { FilterItemProps } from "../../types";
-import "./index.less";
+import React from 'react';
+import { FilterItemProps } from '../../types';
+import './index.less';
 declare const FilterItem: React.FC<FilterItemProps>;
 export default FilterItem;

package/lib/components/filter/components/FilterItem/index.js

@@ -34,14 +34,143 @@ __export(FilterItem_exports, {
 module.exports = __toCommonJS(FilterItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
 var import_fields = require("../../../table/Table/fields");
+var import_pisellSingleLineText = require("../../../pisellSingleLineText");
+var import_pisellLongText = require("../../../pisellLongText");
+var import_pisellEmail = require("../../../pisellEmail");
+var import_pisellPhone = require("../../../pisellPhone");
+var import_pisellUrl = require("../../../pisellUrl");
+var import_pisellNumber = require("../../../pisellNumber");
+var import_pisellCurrency = require("../../../pisellCurrency");
+var import_pisellPercent = require("../../../pisellPercent");
+var import_pisellRating = require("../../../pisellRating");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_pisellMultipleSelect = require("../../../pisellMultipleSelect");
+var import_locales = require("../../../../locales");
+var import_AsyncOptionsSelectWrapper = __toESM(require("./AsyncOptionsSelectWrapper"));
 var import_index = require("./index.less");
+var { RangePicker } = import_antd.DatePicker;
+var PISELL_FIELD_TYPE_MAP = {
+  singleLineText: import_pisellSingleLineText.PisellSingleLineText,
+  longText: import_pisellLongText.PisellLongText,
+  email: import_pisellEmail.PisellEmail,
+  phone: import_pisellPhone.PisellPhone,
+  url: import_pisellUrl.PisellUrl,
+  number: import_pisellNumber.PisellNumber,
+  currency: import_pisellCurrency.PisellCurrency,
+  percent: import_pisellPercent.PisellPercent,
+  rating: import_pisellRating.PisellRating,
+  singleSelect: import_pisellSingleSelect.PisellSingleSelect,
+  multipleSelect: import_pisellMultipleSelect.PisellMultipleSelect
+};
+var FILTER_TYPE_TO_FIELD = {
+  single: "select",
+  input: "text",
+  datePicker: "date",
+  rangePicker: "rangePicker",
+  search: "search"
+};
+function toRangePickerValue(val) {
+  if (val == null) return null;
+  if (Array.isArray(val) && val.length >= 2) {
+    const start = val[0] ? import_dayjs.default.isDayjs(val[0]) ? val[0] : (0, import_dayjs.default)(val[0]) : null;
+    const end = val[1] ? import_dayjs.default.isDayjs(val[1]) ? val[1] : (0, import_dayjs.default)(val[1]) : null;
+    if (start && end) return [start, end];
+  }
+  return null;
+}
+var AntdRangePickerWithValue = import_react.default.forwardRef(function AntdRangePickerWithValue2({ value, onChange, ...rest }, ref) {
+  const normalized = toRangePickerValue(value);
+  return /* @__PURE__ */ import_react.default.createElement(
+    RangePicker,
+    {
+      ...rest,
+      ref,
+      placeholder: [
+        (0, import_locales.getText)("table-action-range-picker-placeholder-start"),
+        (0, import_locales.getText)("table-action-range-picker-placeholder-end")
+      ],
+      value: normalized,
+      onChange: (dates) => onChange == null ? void 0 : onChange(dates ?? void 0)
+    }
+  );
+});
 var FilterItem = (props) => {
-  const { label, type, name, other, isHidden } = props;
+  const { label, type, name, other, isHidden, props: itemProps } = props;
+  const fieldTypeFromColumn = other == null ? void 0 : other.fieldType;
+  const PisellCom = fieldTypeFromColumn ? PISELL_FIELD_TYPE_MAP[fieldTypeFromColumn] : void 0;
+  if (type === "custom") {
+    const CustomComponent = other == null ? void 0 : other.component;
+    if (!CustomComponent) return null;
+    const componentProps2 = { ...itemProps || {}, ...other || {} };
+    delete componentProps2.component;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        hidden: isHidden,
+        ...(other == null ? void 0 : other.formItemProps) || {}
+      },
+      /* @__PURE__ */ import_react.default.createElement(CustomComponent, { ...componentProps2 })
+    );
+  }
+  if (type === "rangePickerNew") {
+    const componentProps2 = {
+      ...itemProps || {},
+      ...other || {},
+      prefixCls: "pisell-lowcode"
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        ...(other == null ? void 0 : other.formItemProps) || {},
+        hidden: isHidden,
+        className: "pisell-lowcode-range-picker-wrap"
+      },
+      /* @__PURE__ */ import_react.default.createElement(AntdRangePickerWithValue, { ...componentProps2 })
+    );
+  }
   const Com = (0, import_react.useMemo)(() => {
     var _a;
-    return (_a = import_fields.fieldMaps[type]) == null ? void 0 : _a.edit;
-  }, [type]);
+    if (PisellCom) return PisellCom;
+    const fieldType = FILTER_TYPE_TO_FIELD[type] ?? type;
+    return (_a = import_fields.fieldMaps[fieldType]) == null ? void 0 : _a.edit;
+  }, [type, PisellCom]);
+  if (!Com) {
+    return null;
+  }
+  const isPisell = Boolean(PisellCom);
+  const componentProps = {
+    ...itemProps || {},
+    ...other || {},
+    ...isPisell ? { mode: "edit" } : {}
+  };
+  const getOptions = componentProps.getOptions ?? (other == null ? void 0 : other.getOptions);
+  const useAsyncOptions = isPisell && typeof getOptions === "function" && (fieldTypeFromColumn === "singleSelect" || fieldTypeFromColumn === "multipleSelect");
+  if (useAsyncOptions && fieldTypeFromColumn) {
+    const { getOptions: _go, ...restProps } = componentProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        label,
+        name,
+        ...(other == null ? void 0 : other.formItemProps) || {},
+        hidden: isHidden
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AsyncOptionsSelectWrapper.default,
+        {
+          getOptions,
+          fieldType: fieldTypeFromColumn,
+          ...restProps
+        }
+      )
+    );
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form.Item,
     {
@@ -50,7 +179,7 @@ var FilterItem = (props) => {
       ...(other == null ? void 0 : other.formItemProps) || {},
       hidden: isHidden
     },
-    /* @__PURE__ */ import_react.default.createElement(Com, { ...other })
+    /* @__PURE__ */ import_react.default.createElement(Com, { ...componentProps })
   );
 };
 var FilterItem_default = FilterItem;

package/lib/components/filter/components/FilterItem/index.less

@@ -0,0 +1,90 @@
+/**
+ * FilterItem 样式
+ * RangePicker 按 Figma Pisell 2.0 Component Library (node-id=13586-90520)
+ * 使用 pisell-lowcode- 前缀（RangePicker 传入 prefixCls="pisell-lowcode"）
+ * - Border: Gray/300 #D0D5DD, 1px
+ * - Background: Base/White #FFFFFF
+ * - Text/Icon: Gray/500 #667085
+ * - Typography: Text md/Regular - Inter 16px, weight 400, line-height 24px
+ * - Shadow: Shadow/xs 0 1px 2px rgba(16, 24, 40, 0.05)
+ * - Border radius: 8px
+ */
+
+.pisell-lowcode-range-picker-wrap {
+  //width: 257px;
+  width: 100%;
+
+  .pisell-lowcode-range {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    color: #667085;
+    border-radius: 8px;
+    border: 1px solid #d0d5dd;
+    background: #ffffff;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    width: 100%;
+    height: 48px;
+    min-height: 48px;
+    padding: 6px 11px;
+
+    .pisell-lowcode-picker-input {
+      height: 36px;
+
+      > input {
+        font-family: inherit;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: #667085;
+
+        &::placeholder {
+          color: #667085;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .pisell-lowcode-picker-separator {
+      color: #667085;
+    }
+
+    .pisell-lowcode-picker-suffix,
+    .pisell-lowcode-picker-clear {
+      color: #667085;
+    }
+
+    &:hover {
+      border-color: #d0d5dd;
+    }
+
+    &.pisell-lowcode-picker-focused {
+      border-color: #d0d5dd;
+      box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.05);
+    }
+
+    &.pisell-lowcode-picker-large {
+      height: 48px;
+      min-height: 48px;
+      padding: 6px 11px;
+
+      .pisell-lowcode-picker-input {
+        height: 36px;
+      }
+    }
+
+    &.pisell-lowcode-picker-small {
+      min-height: 32px;
+      padding: 2px 7px;
+
+      .pisell-lowcode-picker-input {
+        height: 24px;
+      }
+
+      .pisell-lowcode-picker-input > input {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/lib/components/filter/types.d.ts

@@ -19,12 +19,14 @@ export declare type FilterType = {
 };
 /**
  * 筛选列表项配置
+ * - type 为 single/input/rangePicker 等时使用内置或映射组件
+ * - type 为 "custom" 时使用 other.component，组件接收 value/onChange（由 Form 注入）
  */
 export declare type FilterItemProps = {
-    type: "single" | "input" | "datePicker" | "rangePicker" | "search";
+    type: "single" | "input" | "datePicker" | "rangePicker" | "rangePickerNew" | "search" | "custom";
     name?: string | string[];
     key: string;
-    props: object;
+    props?: object;
     label?: string;
     sort?: boolean;
     localFilter?: boolean;

package/lib/components/keyboard/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+export declare type ItemValue = string | number;
+export interface Item {
+    value: ItemValue;
+    label: React.ReactNode;
+    disabled: boolean;
+    type: 'text' | 'primary';
+    style?: React.CSSProperties;
+    size?: number;
+}
+export interface KeyboardProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (value?: ItemValue) => void;
+    items?: Item[];
+    rightItems?: Item[];
+    keydown?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => React.JSX.Element>;
+export default _default;

package/lib/components/pisellBatchActionBar/PisellBatchActionBar.js

@@ -37,8 +37,15 @@ var import_classnames = __toESM(require("classnames"));
 var import_antd = require("antd");
 var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
 var import_GraphicTextCard = __toESM(require("../PisellCards/components/GraphicTextCard"));
+var import_utils = require("@pisell/utils");
 var import_locales = require("../../locales");
 var import_PisellBatchActionBar = require("./PisellBatchActionBar.less");
+function getBatchBarText(key) {
+  const fullKey = `pisell2.salesManagement.batchActionBar.${key}`;
+  const fromUtils = import_utils.locales.getText(fullKey);
+  if (fromUtils !== fullKey) return fromUtils;
+  return (0, import_locales.getText)(fullKey) ?? (0, import_locales.getText)(`batch-action-bar-${key}`);
+}
 var PisellBatchActionBar = (props) => {
   const {
     className,
@@ -57,7 +64,7 @@ var PisellBatchActionBar = (props) => {
     actionOrder,
     enableOverflow = true,
     overflowThreshold = 5,
-    moreText = (0, import_locales.getText)("batch-action-bar-more"),
+    moreText = getBatchBarText("more"),
     onSelectAll,
     onClear,
     onInvert,
@@ -130,7 +137,7 @@ var PisellBatchActionBar = (props) => {
     if (selectedCountText) {
       return selectedCountText.replace("{count}", String(count));
     }
-    const i18nText = (0, import_locales.getText)("batch-action-bar-selected-count");
+    const i18nText = getBatchBarText("selectedCount");
     if (typeof i18nText === "function") {
       return i18nText(count);
     }
@@ -147,7 +154,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "select-all",
-            text: (0, import_locales.getText)("batch-action-bar-select-all"),
+            text: getBatchBarText("selectAll"),
             icon: "pisell2-check-square",
             variant: "horizontal",
             size: "small",
@@ -182,7 +189,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "invert",
-            text: (0, import_locales.getText)("batch-action-bar-invert"),
+            text: getBatchBarText("invert"),
             icon: "pisell2-check-done-01",
             variant: "horizontal",
             size: "small",
@@ -217,7 +224,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "clear",
-            text: (0, import_locales.getText)("batch-action-bar-clear"),
+            text: getBatchBarText("clear"),
             icon: "pisell2-square",
             variant: "horizontal",
             size: "small",
@@ -252,7 +259,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "delete",
-            text: (0, import_locales.getText)("batch-action-bar-delete"),
+            text: getBatchBarText("delete"),
             icon: "pisell2-delete_wght300_24px",
             variant: "horizontal",
             size: "small",
@@ -279,18 +286,13 @@ var PisellBatchActionBar = (props) => {
                 return;
               }
               isDeleteModalOpenRef.current = true;
-              const deleteContent = (() => {
-                const i18nContent = (0, import_locales.getText)("batch-action-bar-delete-confirm-content");
-                if (typeof i18nContent === "function") {
-                  return i18nContent(selectionState.selectedCount);
-                }
-                return i18nContent || `确定要删除选中的 ${selectionState.selectedCount} 项吗？`;
-              })();
+              const i18nContent = getBatchBarText("deleteConfirmContent");
+              const deleteContent = typeof i18nContent === "function" ? i18nContent(selectionState.selectedCount) : i18nContent || `确定要删除选中的 ${selectionState.selectedCount} 项吗？`;
               import_antd.Modal.confirm({
-                title: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.title) || (0, import_locales.getText)("batch-action-bar-delete-confirm-title"),
-                content: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.description) || deleteContent,
-                okText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.okText) || (0, import_locales.getText)("batch-action-bar-delete-confirm-ok"),
-                cancelText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.cancelText) || (0, import_locales.getText)("batch-action-bar-delete-confirm-cancel"),
+                title: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.title) ?? getBatchBarText("deleteConfirmTitle"),
+                content: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.description) ?? deleteContent,
+                okText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.okText) ?? getBatchBarText("deleteConfirmOk"),
+                cancelText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.cancelText) ?? getBatchBarText("deleteConfirmCancel"),
                 okButtonProps: { danger: true },
                 onOk: () => {
                   onDelete == null ? void 0 : onDelete(selectedKeys, selectedRows);
@@ -380,7 +382,6 @@ var PisellBatchActionBar = (props) => {
             height: "48px",
             ...action.style
           },
-          className: action.className,
           onClick: () => handleActionClick(action)
         }
       );
@@ -390,10 +391,10 @@ var PisellBatchActionBar = (props) => {
           import_antd.Popconfirm,
           {
             key: action.key,
-            title: confirmConfig.title || (0, import_locales.getText)("batch-action-bar-confirm-title"),
+            title: confirmConfig.title || getBatchBarText("confirmTitle"),
             description: confirmConfig.description,
-            okText: confirmConfig.okText || (0, import_locales.getText)("batch-action-bar-delete-confirm-ok"),
-            cancelText: confirmConfig.cancelText || (0, import_locales.getText)("batch-action-bar-delete-confirm-cancel"),
+            okText: confirmConfig.okText || getBatchBarText("deleteConfirmOk"),
+            cancelText: confirmConfig.cancelText || getBatchBarText("deleteConfirmCancel"),
             onConfirm: () => handleActionClick(action)
           },
           card
@@ -430,9 +431,11 @@ var PisellBatchActionBar = (props) => {
     const modifiedOverflowActions = overflowActions.map((action) => {
       var _a;
       if (import_react.default.isValidElement(action)) {
-        return import_react.default.cloneElement(action, {
+        const el = action;
+        const prevStyle = (_a = el.props) == null ? void 0 : _a.style;
+        return import_react.default.cloneElement(el, {
           style: {
-            ...((_a = action.props) == null ? void 0 : _a.style) || {},
+            ...prevStyle || {},
             minWidth: "160px",
             width: "160px"
           }

package/lib/components/pisellBatchActionBar/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellBatchActionBar 组件导出
+ * @description 批量操作栏组件，用于承载基于选中对象的批量行为操作
+ */
+export { default } from './PisellBatchActionBar';
+export type { PisellBatchActionBarProps, BatchActionItem, DefaultActionsConfig, BatchActionConfirmConfig, BatchActionBarPosition, } from './types';