@pisell/materials 6.8.15 → 6.8.17

package/lib/components/pisell-config-provider/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PisellContextType } from './context';
+interface PisellConfigProviderType {
+    platform?: PisellContextType['platform'];
+    children: React.ReactNode;
+    /** 货币符号 */
+    symbol?: string;
+    /** 当前语言环境 */
+    locale?: string;
+    getSymbolic?: () => string;
+}
+declare const PisellConfigProvider: React.FC<PisellConfigProviderType>;
+export default PisellConfigProvider;

package/lib/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputNumberProps } from 'antd/es/input-number';
 export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
     value?: number;

package/lib/components/pisellAdjustPrice/status.d.ts

@@ -0,0 +1,32 @@
+export declare const defaultConfig: {
+    dark: {
+        backgroundColor: string;
+        containerBackgroundColor: string;
+        buttonBackgroundColor: string;
+        textColor: string;
+        resetButtonBackgroundColor: string;
+        resetButtonTextColor: string;
+        isDoneButtonFollowTheme: boolean;
+        doneButtonBackgroundColor: string;
+        doneButtonTextColor: string;
+        isShowMainText: boolean;
+        mainTextColor: string;
+        isShowSubText: boolean;
+        subTextColor: string;
+    };
+    light: {
+        backgroundColor: string;
+        containerBackgroundColor: string;
+        buttonBackgroundColor: string;
+        textColor: string;
+        resetButtonBackgroundColor: string;
+        resetButtonTextColor: string;
+        isDoneButtonFollowTheme: boolean;
+        doneButtonBackgroundColor: string;
+        doneButtonTextColor: string;
+        isShowMainText: boolean;
+        mainTextColor: string;
+        isShowSubText: boolean;
+        subTextColor: string;
+    };
+};

package/lib/components/pisellAdjustPrice/type.d.ts

@@ -0,0 +1,22 @@
+export interface PisellAdjustPriceProps {
+    value?: number;
+    originValue: number;
+    defaultValue?: number;
+    onChange?: (val: number) => void;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+    isShowMainText?: boolean;
+    mainTextColor?: string;
+    isShowSubText?: boolean;
+    subTextColor?: string;
+    resetText?: string;
+    doneText?: string;
+}

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

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+export interface PisellAppCardProps {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 头像地址 */
+    avatar?: string;
+    /** icon */
+    icon?: string;
+    /** 标签列表 */
+    tags?: Array<{
+        label: string;
+        color?: 'success' | 'warning' | 'error' | 'gray';
+        type: 'pill_color' | 'pill_outline';
+    }>;
+    /** 标题 */
+    title: string;
+    /** 描述 */
+    description?: string;
+    /** 底部按钮列表 */
+    bottomButtons?: Array<{
+        label: string;
+        onClick?: () => void;
+        type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+        hidden: boolean;
+    }>;
+    /** 右侧更多操作列表 */
+    moreActions?: Array<{
+        label: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+    }>;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { PisellBatchActionBarProps } from './types';
+import './PisellBatchActionBar.less';
+/**
+ * PisellBatchActionBar 批量操作栏组件
+ *
+ * @description 选择感知型的批量操作组件，用于承载基于选中对象的批量行为操作
+ * @author Pisell Team
+ * @version 1.0.0
+ *
+ * @example
+ * ```tsx
+ * <PisellBatchActionBar
+ *   selectedKeys={selectedKeys}
+ *   selectedRows={selectedRows}
+ *   total={total}
+ *   defaultActions={{
+ *     selectAll: true,
+ *     clear: true,
+ *   }}
+ *   onSelectAll={() => {
+ *     // 全选逻辑
+ *   }}
+ *   onClear={() => {
+ *     // 清空选择逻辑
+ *   }}
+ * />
+ * ```
+ */
+declare const PisellBatchActionBar: React.FC<PisellBatchActionBarProps>;
+export default PisellBatchActionBar;

package/lib/components/pisellBatchActionBar/PisellBatchActionBar.js

@@ -0,0 +1,516 @@
+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/pisellBatchActionBar/PisellBatchActionBar.tsx
+var PisellBatchActionBar_exports = {};
+__export(PisellBatchActionBar_exports, {
+  default: () => PisellBatchActionBar_default
+});
+module.exports = __toCommonJS(PisellBatchActionBar_exports);
+var import_react = __toESM(require("react"));
+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_locales = require("../../locales");
+var import_PisellBatchActionBar = require("./PisellBatchActionBar.less");
+var PisellBatchActionBar = (props) => {
+  const {
+    className,
+    style,
+    selectedKeys,
+    selectedRows,
+    total,
+    currentPageTotal,
+    currentPageKeys,
+    position = "float",
+    offset = 0,
+    showSelectedCount = true,
+    selectedCountText,
+    defaultActions,
+    actions = [],
+    actionOrder,
+    enableOverflow = true,
+    overflowThreshold = 5,
+    moreText = (0, import_locales.getText)("batch-action-bar-more"),
+    onSelectAll,
+    onClear,
+    onInvert,
+    onDelete,
+    deleteConfirmConfig,
+    onActionClick
+  } = props;
+  const isDeleteModalOpenRef = (0, import_react.useRef)(false);
+  const [moreExpanded, setMoreExpanded] = (0, import_react.useState)(false);
+  const selectionState = (0, import_react.useMemo)(() => {
+    const selectedCount = selectedKeys.length;
+    const hasSelected = selectedCount > 0;
+    const isAllSelected = total ? selectedCount === total : false;
+    const isCurrentPageAllSelected = (() => {
+      if (!currentPageKeys || !currentPageTotal) return false;
+      return currentPageKeys.every((key) => selectedKeys.includes(key));
+    })();
+    return {
+      selectedCount,
+      hasSelected,
+      isAllSelected,
+      isCurrentPageAllSelected
+    };
+  }, [selectedKeys, total, currentPageKeys, currentPageTotal]);
+  const containerStyle = (0, import_react.useMemo)(() => {
+    const baseStyle = {
+      padding: "12px 16px",
+      background: "rgba(29, 41, 57, 0.75)",
+      border: "none",
+      borderRadius: "8px",
+      color: "#FFFFFF",
+      ...style
+    };
+    switch (position) {
+      case "sticky-top":
+        return {
+          ...baseStyle,
+          position: "sticky",
+          top: offset || 0,
+          zIndex: 100
+        };
+      case "sticky-bottom":
+        return {
+          ...baseStyle,
+          position: "sticky",
+          bottom: offset || 0,
+          zIndex: 100
+        };
+      case "float":
+        return {
+          ...baseStyle,
+          position: "fixed",
+          bottom: offset || 24,
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 1e3,
+          boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+        };
+      case "inline":
+      default:
+        return baseStyle;
+    }
+  }, [position, offset, style]);
+  const countText = (0, import_react.useMemo)(() => {
+    if (!showSelectedCount) return null;
+    const count = selectionState.selectedCount;
+    if (typeof selectedCountText === "function") {
+      return selectedCountText(count);
+    }
+    if (selectedCountText) {
+      return selectedCountText.replace("{count}", String(count));
+    }
+    const i18nText = (0, import_locales.getText)("batch-action-bar-selected-count");
+    if (typeof i18nText === "function") {
+      return i18nText(count);
+    }
+    return i18nText || `已选择 ${count} 项`;
+  }, [showSelectedCount, selectedCountText, selectionState.selectedCount]);
+  const renderDefaultActions = (0, import_react.useCallback)(() => {
+    if ((defaultActions == null ? void 0 : defaultActions.showDefaultActions) === false) {
+      return [];
+    }
+    const defaultActionNodes = [];
+    if ((defaultActions == null ? void 0 : defaultActions.showSelectAll) !== false) {
+      defaultActionNodes.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_GraphicTextCard.default,
+          {
+            key: "select-all",
+            text: (0, import_locales.getText)("batch-action-bar-select-all"),
+            icon: "pisell2-check-square",
+            variant: "horizontal",
+            size: "small",
+            clickable: true,
+            className: "pisell-batch-action-bar-button",
+            graphicConfig: {
+              iconSize: 24,
+              width: 24,
+              height: 24,
+              background: "transparent",
+              iconColor: "#FFFFFF"
+            },
+            textConfig: { color: "#FFFFFF", fontSize: 14 },
+            style: {
+              background: "#1B1B1B",
+              border: "none",
+              padding: "8px 12px",
+              gap: 4,
+              minWidth: "120px",
+              height: "48px"
+            },
+            onClick: () => {
+              onSelectAll == null ? void 0 : onSelectAll();
+            }
+          }
+        )
+      );
+    }
+    if ((defaultActions == null ? void 0 : defaultActions.showInvert) !== false) {
+      defaultActionNodes.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_GraphicTextCard.default,
+          {
+            key: "invert",
+            text: (0, import_locales.getText)("batch-action-bar-invert"),
+            icon: "pisell2-check-done-01",
+            variant: "horizontal",
+            size: "small",
+            clickable: true,
+            className: "pisell-batch-action-bar-button",
+            graphicConfig: {
+              iconSize: 24,
+              width: 24,
+              height: 24,
+              background: "transparent",
+              iconColor: "#FFFFFF"
+            },
+            textConfig: { color: "#FFFFFF", fontSize: 14 },
+            style: {
+              background: "#1B1B1B",
+              border: "none",
+              padding: "8px 12px",
+              gap: 4,
+              minWidth: "120px",
+              height: "48px"
+            },
+            onClick: () => {
+              onInvert == null ? void 0 : onInvert();
+            }
+          }
+        )
+      );
+    }
+    if ((defaultActions == null ? void 0 : defaultActions.showClear) !== false) {
+      defaultActionNodes.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_GraphicTextCard.default,
+          {
+            key: "clear",
+            text: (0, import_locales.getText)("batch-action-bar-clear"),
+            icon: "pisell2-square",
+            variant: "horizontal",
+            size: "small",
+            clickable: true,
+            className: "pisell-batch-action-bar-button",
+            graphicConfig: {
+              iconSize: 24,
+              width: 24,
+              height: 24,
+              background: "transparent",
+              iconColor: "#FFFFFF"
+            },
+            textConfig: { color: "#FFFFFF", fontSize: 14 },
+            style: {
+              background: "#1B1B1B",
+              border: "none",
+              padding: "8px 12px",
+              gap: 4,
+              minWidth: "120px",
+              height: "48px"
+            },
+            onClick: () => {
+              onClear == null ? void 0 : onClear();
+            }
+          }
+        )
+      );
+    }
+    if ((defaultActions == null ? void 0 : defaultActions.showDelete) !== false) {
+      defaultActionNodes.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_GraphicTextCard.default,
+          {
+            key: "delete",
+            text: (0, import_locales.getText)("batch-action-bar-delete"),
+            icon: "pisell2-delete_wght300_24px",
+            variant: "horizontal",
+            size: "small",
+            clickable: true,
+            className: "pisell-batch-action-bar-button",
+            graphicConfig: {
+              iconSize: 24,
+              width: 24,
+              height: 24,
+              background: "transparent",
+              iconColor: "#FFFFFF"
+            },
+            textConfig: { color: "#FFFFFF", fontSize: 14 },
+            style: {
+              background: "#1B1B1B",
+              border: "none",
+              padding: "8px 12px",
+              gap: 4,
+              minWidth: "120px",
+              height: "48px"
+            },
+            onClick: () => {
+              if (isDeleteModalOpenRef.current) {
+                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} 项吗？`;
+              })();
+              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"),
+                okButtonProps: { danger: true },
+                onOk: () => {
+                  onDelete == null ? void 0 : onDelete(selectedKeys, selectedRows);
+                },
+                onCancel: () => {
+                  isDeleteModalOpenRef.current = false;
+                },
+                afterClose: () => {
+                  isDeleteModalOpenRef.current = false;
+                }
+              });
+            }
+          }
+        )
+      );
+    }
+    return defaultActionNodes;
+  }, [
+    onSelectAll,
+    onInvert,
+    onClear,
+    onDelete,
+    selectedKeys,
+    selectedRows,
+    selectionState.selectedCount,
+    defaultActions == null ? void 0 : defaultActions.showDefaultActions,
+    defaultActions == null ? void 0 : defaultActions.showSelectAll,
+    defaultActions == null ? void 0 : defaultActions.showInvert,
+    defaultActions == null ? void 0 : defaultActions.showClear,
+    defaultActions == null ? void 0 : defaultActions.showDelete,
+    deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.title,
+    deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.description,
+    deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.okText,
+    deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.cancelText
+  ]);
+  const handleActionClick = (0, import_react.useCallback)(
+    (action) => {
+      if (action.onClick) {
+        action.onClick(selectedKeys, selectedRows);
+      } else if (onActionClick) {
+        onActionClick(action.key, selectedKeys, selectedRows);
+      }
+    },
+    [selectedKeys, selectedRows, onActionClick]
+  );
+  const renderCustomActions = (0, import_react.useCallback)(() => {
+    const visibleActions2 = actions.filter((action) => {
+      const visible = typeof action.visible === "function" ? action.visible(selectedKeys, selectedRows) : action.visible !== false;
+      return visible;
+    });
+    const sortedActions = actionOrder ? visibleActions2.sort((a, b) => {
+      const indexA = actionOrder.indexOf(a.key);
+      const indexB = actionOrder.indexOf(b.key);
+      if (indexA === -1 && indexB === -1) return 0;
+      if (indexA === -1) return 1;
+      if (indexB === -1) return -1;
+      return indexA - indexB;
+    }) : visibleActions2;
+    return sortedActions.map((action) => {
+      const disabled = typeof action.disabled === "function" ? action.disabled(selectedKeys, selectedRows) : action.disabled || false;
+      const card = /* @__PURE__ */ import_react.default.createElement(
+        import_GraphicTextCard.default,
+        {
+          key: action.key,
+          text: action.label,
+          icon: action.icon,
+          variant: "horizontal",
+          size: action.size || "small",
+          clickable: !disabled && !action.loading,
+          disabled: disabled ? { value: true } : void 0,
+          loading: action.loading ? { value: true } : void 0,
+          className: (0, import_classnames.default)("pisell-batch-action-bar-button", action.className),
+          graphicConfig: {
+            iconSize: 24,
+            width: 24,
+            height: 24,
+            background: "transparent",
+            iconColor: "#FFFFFF",
+            ...typeof action.icon === "string" ? {} : {}
+          },
+          textConfig: { color: "#FFFFFF" },
+          style: {
+            background: "#1B1B1B",
+            border: "none",
+            padding: "8px 12px",
+            minWidth: "120px",
+            height: "48px",
+            ...action.style
+          },
+          className: action.className,
+          onClick: () => handleActionClick(action)
+        }
+      );
+      if (action.confirm) {
+        const confirmConfig = typeof action.confirm === "object" ? action.confirm : {};
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Popconfirm,
+          {
+            key: action.key,
+            title: confirmConfig.title || (0, import_locales.getText)("batch-action-bar-confirm-title"),
+            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"),
+            onConfirm: () => handleActionClick(action)
+          },
+          card
+        );
+      }
+      return card;
+    });
+  }, [actions, actionOrder, selectedKeys, selectedRows, handleActionClick]);
+  const allActions = (0, import_react.useMemo)(() => {
+    const defaultActions2 = renderDefaultActions();
+    const customActions = renderCustomActions();
+    return [...defaultActions2, ...customActions];
+  }, [renderDefaultActions, renderCustomActions]);
+  const { visibleActions, overflowActions, hasOverflow } = (0, import_react.useMemo)(() => {
+    if (!enableOverflow || allActions.length <= overflowThreshold) {
+      return {
+        visibleActions: allActions,
+        overflowActions: [],
+        hasOverflow: false
+      };
+    }
+    const visible = allActions.slice(0, overflowThreshold);
+    const overflow = allActions.slice(overflowThreshold);
+    return {
+      visibleActions: visible,
+      overflowActions: overflow,
+      hasOverflow: true
+    };
+  }, [enableOverflow, overflowThreshold, allActions]);
+  const renderMoreActions = (0, import_react.useCallback)(() => {
+    if (!hasOverflow || overflowActions.length === 0) {
+      return null;
+    }
+    const modifiedOverflowActions = overflowActions.map((action) => {
+      var _a;
+      if (import_react.default.isValidElement(action)) {
+        return import_react.default.cloneElement(action, {
+          style: {
+            ...((_a = action.props) == null ? void 0 : _a.style) || {},
+            minWidth: "160px",
+            width: "160px"
+          }
+        });
+      }
+      return action;
+    });
+    const content = /* @__PURE__ */ import_react.default.createElement(
+      import_PisellBasicGrid.default,
+      {
+        dataSource: modifiedOverflowActions,
+        renderItem: (item) => item,
+        direction: "vertical",
+        gap: 0
+      }
+    );
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Popover,
+      {
+        key: "more-actions",
+        content,
+        trigger: "click",
+        placement: "topLeft",
+        arrow: false,
+        open: moreExpanded,
+        onOpenChange: setMoreExpanded,
+        overlayClassName: "pisell-batch-action-bar__more-popover",
+        overlayInnerStyle: {
+          padding: 0,
+          background: "rgba(29, 41, 57, 1)"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_GraphicTextCard.default,
+        {
+          text: moreText,
+          icon: "pisell2-dots-horizontal",
+          variant: "horizontal",
+          size: "small",
+          clickable: true,
+          active: { value: moreExpanded },
+          className: "pisell-batch-action-bar-button",
+          graphicConfig: {
+            iconSize: 24,
+            width: 24,
+            height: 24,
+            background: "transparent",
+            iconColor: "#FFFFFF"
+          },
+          textConfig: { color: "#FFFFFF", fontSize: 14 },
+          style: {
+            background: moreExpanded ? "rgba(93, 63, 159, 1)" : "#1B1B1B",
+            border: "none",
+            padding: "8px 12px",
+            gap: 4,
+            minWidth: "120px",
+            height: "48px"
+          }
+        }
+      )
+    );
+  }, [hasOverflow, overflowActions, moreText, moreExpanded]);
+  const mergedClassName = (0, import_classnames.default)("pisell-batch-action-bar", className, {
+    [`pisell-batch-action-bar--${position}`]: position
+  });
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style: containerStyle }, countText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-batch-action-bar__count" }, countText), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellBasicGrid.default,
+    {
+      dataSource: [...visibleActions, renderMoreActions()].filter(Boolean),
+      renderItem: (item) => item,
+      direction: "horizontal",
+      wrap: "nowrap",
+      gap: 12,
+      justify: "start",
+      align: "center",
+      className: "pisell-batch-action-bar__actions"
+    }
+  ));
+};
+PisellBatchActionBar.displayName = "PisellBatchActionBar";
+var PisellBatchActionBar_default = PisellBatchActionBar;