@pisell/materials 6.3.27 → 6.3.29

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';

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

@@ -0,0 +1,237 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 布局模式
+ */
+export declare type BatchActionBarPosition = 'sticky-top' | 'sticky-bottom' | 'float' | 'inline';
+/**
+ * 确认弹窗配置
+ */
+export interface BatchActionConfirmConfig {
+    /**
+     * 弹窗标题
+     */
+    title?: string;
+    /**
+     * 弹窗描述内容
+     */
+    description?: string;
+    /**
+     * 确认按钮文案
+     */
+    okText?: string;
+    /**
+     * 取消按钮文案
+     */
+    cancelText?: string;
+}
+/**
+ * 默认操作按钮配置
+ * @description 固定四个基础操作按钮：全选、反选、取消选择、删除
+ */
+export interface DefaultActionsConfig {
+    /**
+     * 是否显示默认操作按钮（全选、反选、取消选择、删除）
+     * @default true
+     */
+    showDefaultActions?: boolean;
+    /**
+     * 是否显示全选按钮
+     * @default true
+     */
+    showSelectAll?: boolean;
+    /**
+     * 是否显示反选按钮
+     * @default true
+     */
+    showInvert?: boolean;
+    /**
+     * 是否显示取消选择按钮
+     * @default true
+     */
+    showClear?: boolean;
+    /**
+     * 是否显示删除按钮
+     * @default true
+     */
+    showDelete?: boolean;
+}
+/**
+ * 自定义操作按钮配置
+ */
+export interface BatchActionItem {
+    /**
+     * 操作唯一标识
+     */
+    key: string;
+    /**
+     * 按钮文案
+     */
+    label: ReactNode;
+    /**
+     * 按钮图标
+     */
+    icon?: ReactNode;
+    /**
+     * 按钮尺寸
+     * @description 对应 GraphicTextCard 的 size 属性
+     * @default 'small'
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * 是否禁用
+     * @description 支持函数形式，基于 selection 动态判断
+     */
+    disabled?: boolean | ((selectedKeys: React.Key[], selectedRows?: any[]) => boolean);
+    /**
+     * 是否显示
+     * @description 支持函数形式，基于 selection 动态判断
+     * @default true
+     */
+    visible?: boolean | ((selectedKeys: React.Key[], selectedRows?: any[]) => boolean);
+    /**
+     * 是否显示 loading 状态
+     */
+    loading?: boolean;
+    /**
+     * 是否需要确认弹窗
+     * @default false
+     */
+    confirm?: boolean | BatchActionConfirmConfig;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 按钮组标识
+     * @description 相同 group 的按钮会分组展示
+     */
+    group?: string;
+    /**
+     * 按钮点击回调
+     * @description 如果配置了此回调，会优先使用此回调，否则使用组件级别的 onActionClick
+     */
+    onClick?: (selectedKeys: React.Key[], selectedRows?: any[]) => void | Promise<void>;
+}
+/**
+ * PisellBatchActionBar 组件 Props
+ * @description 批量操作栏组件，用于承载基于选中对象的批量行为操作
+ */
+export interface PisellBatchActionBarProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 选中的 key 数组
+     * @description 必填，用于感知选择状态
+     */
+    selectedKeys: React.Key[];
+    /**
+     * 选中的行数据数组
+     * @description 可选，用于传递给操作回调
+     */
+    selectedRows?: any[];
+    /**
+     * 总数据量
+     * @description 用于判断全选状态
+     */
+    total?: number;
+    /**
+     * 当前页数据量
+     * @description 用于判断全选当前页状态
+     */
+    currentPageTotal?: number;
+    /**
+     * 当前页数据 key 数组
+     * @description 用于判断全选当前页状态
+     */
+    currentPageKeys?: React.Key[];
+    /**
+     * 布局模式
+     * @default 'float'
+     */
+    position?: BatchActionBarPosition;
+    /**
+     * 吸顶/吸底时的偏移量
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * 是否显示选中数量提示
+     * @default true
+     */
+    showSelectedCount?: boolean;
+    /**
+     * 选中数量提示文案
+     * @description 支持字符串模板（使用 {count} 占位符）或函数形式，默认使用国际化文本
+     * @default getText('batch-action-bar-selected-count', count)
+     */
+    selectedCountText?: string | ((count: number) => string);
+    /**
+     * 默认操作按钮配置
+     * @description 只包含前三个基础选择操作按钮，其他操作按钮通过 actions 传入
+     */
+    defaultActions?: DefaultActionsConfig;
+    /**
+     * 自定义操作按钮配置
+     */
+    actions?: BatchActionItem[];
+    /**
+     * 操作按钮排序
+     * @description 通过 key 数组控制按钮顺序
+     */
+    actionOrder?: string[];
+    /**
+     * 是否启用溢出折叠
+     * @default true
+     */
+    enableOverflow?: boolean;
+    /**
+     * 溢出折叠阈值（按钮数量）
+     * @default 5
+     */
+    overflowThreshold?: number;
+    /**
+     * "更多"按钮文案
+     * @description 默认使用国际化文本
+     * @default getText('batch-action-bar-more')
+     */
+    moreText?: string;
+    /**
+     * 全选回调
+     */
+    onSelectAll?: () => void;
+    /**
+     * 反选回调
+     * @description 反选操作，将当前选中的变为未选中，未选中的变为选中
+     */
+    onInvert?: () => void;
+    /**
+     * 清空选择回调
+     */
+    onClear?: () => void;
+    /**
+     * 删除回调
+     * @description 删除选中项，点击后会先弹出确认弹窗
+     */
+    onDelete?: (selectedKeys: React.Key[], selectedRows?: any[]) => void;
+    /**
+     * 删除确认弹窗配置
+     * @description 自定义删除确认弹窗的标题和内容
+     */
+    deleteConfirmConfig?: BatchActionConfirmConfig;
+    /**
+     * 自定义操作按钮点击回调
+     * @description 当 actions 中的按钮被点击时触发，通过 action.key 区分不同的操作
+     * @description 如果 action 中配置了 onClick，则优先使用 action.onClick
+     */
+    onActionClick?: (key: string, selectedKeys: React.Key[], selectedRows?: any[]) => void | Promise<void>;
+}