@pisell/materials 6.0.22 → 6.2.24

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
 import { PisellContextType } from '../pisell-config-provider/context';
 import { PisellWalletPassCardProps } from '../pisellWalletPassCard';
+import './index.less';
 export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
     platform?: PisellContextType['platform'];
     /** 当用户查看完所有记录时，底部会显示此消息 */
@@ -38,6 +39,35 @@ export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'opt
     showCover?: boolean;
     /** 是否余额货币单位 */
     showBalanceSymbol?: boolean;
+    /** 卡片大小 */
+    type?: 'default' | 'mini';
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑编辑按钮后，弹窗展示之前 */
+    beforeEdit?: (value: any, index: number) => Promise<any> | boolean | void;
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any, index: number) => void;
 }
-declare const _default: React.MemoExoticComponent<(props: PisellCardListProps) => JSX.Element>;
+declare const _default: React.NamedExoticComponent<PisellCardListProps>;
 export default _default;

package/lib/components/pisellCardList/index.js

@@ -33,14 +33,13 @@ __export(pisellCardList_exports, {
 });
 module.exports = __toCommonJS(pisellCardList_exports);
 var import_react = __toESM(require("react"));
-var import_react_infinite_scroll_component = __toESM(require("react-infinite-scroll-component"));
-var import_antd = require("antd");
 var import_pisellCheckboxGroup = __toESM(require("../pisellCheckboxGroup"));
 var import_pisellWalletPassCard = __toESM(require("../pisellWalletPassCard"));
 var import_pisellEmpty = __toESM(require("../pisellEmpty"));
+var import_index = require("./index.less");
 var PisellCardList = (props) => {
   const {
-    data,
+    data = [],
     loadMoreData = () => {
     },
     endMessage,
@@ -49,6 +48,9 @@ var PisellCardList = (props) => {
     onChange,
     value,
     mode,
+    direction = "vertical",
+    fullWidth,
+    type,
     showName,
     showCode,
     showCover,
@@ -62,47 +64,50 @@ var PisellCardList = (props) => {
     showEmpty,
     showBalanceSymbol
   } = props;
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react_infinite_scroll_component.default,
+  return data.length ? /* @__PURE__ */ import_react.default.createElement(
+    import_pisellCheckboxGroup.default,
     {
-      dataLength: data.length,
-      next: loadMoreData,
-      hasMore,
-      loader: loader || /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { paragraph: { rows: 3 }, active: true }),
-      endMessage,
-      scrollableTarget: "scrollableDiv"
-    },
-    data.length ? /* @__PURE__ */ import_react.default.createElement(
-      import_pisellCheckboxGroup.default,
-      {
-        options: data,
-        value,
-        mode,
-        rowKey: "id",
-        gap: 12,
-        onChange,
-        iconPosition: "hide",
-        renderOption: (item, active) => {
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_pisellWalletPassCard.default,
-            {
-              ...item,
-              active,
-              showName: showName || (item == null ? void 0 : item.showName),
-              showBalance: showBalance || (item == null ? void 0 : item.showBalance),
-              showCode: showCode || (item == null ? void 0 : item.showCode),
-              showCover: showCover || (item == null ? void 0 : item.showCover),
-              showDetail: showDetail || (item == null ? void 0 : item.showDetail),
-              showQrCode: showQrCode || (item == null ? void 0 : item.showQrCode),
-              showRedeem: showRedeem || (item == null ? void 0 : item.showRedeem),
-              showStoreName: showStoreName || (item == null ? void 0 : item.showStoreName),
-              showValidDate: showValidDate || (item == null ? void 0 : item.showValidDate),
-              showBalanceSymbol: showBalanceSymbol || (item == null ? void 0 : item.showBalanceSymbol)
-            }
-          );
-        }
+      options: data,
+      value,
+      mode,
+      direction,
+      rowKey: "id",
+      gap: 12,
+      onChange,
+      iconPosition: "hide",
+      fullWidth,
+      renderOption: (item, active, index) => {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_pisellWalletPassCard.default,
+          {
+            ...item,
+            active,
+            showName: showName || (item == null ? void 0 : item.showName),
+            showBalance: showBalance || (item == null ? void 0 : item.showBalance),
+            showCode: showCode || (item == null ? void 0 : item.showCode),
+            showCover: showCover || (item == null ? void 0 : item.showCover),
+            showDetail: showDetail || (item == null ? void 0 : item.showDetail),
+            showQrCode: showQrCode || (item == null ? void 0 : item.showQrCode),
+            showRedeem: showRedeem || (item == null ? void 0 : item.showRedeem),
+            showStoreName: showStoreName || (item == null ? void 0 : item.showStoreName),
+            showValidDate: showValidDate || (item == null ? void 0 : item.showValidDate),
+            showBalanceSymbol: showBalanceSymbol || (item == null ? void 0 : item.showBalanceSymbol),
+            showActions: props.showActions || (item == null ? void 0 : item.showActions),
+            actions: props.actions || (item == null ? void 0 : item.actions),
+            beforeEdit: (record) => {
+              var _a;
+              return (_a = props == null ? void 0 : props.beforeEdit) == null ? void 0 : _a.call(props, record, index);
+            },
+            onConfirmEdit: (newVal) => {
+              var _a;
+              (_a = props.onConfirmEdit) == null ? void 0 : _a.call(props, newVal, index);
+            },
+            type,
+            style: direction === "vertical" || direction === "horizontal" && fullWidth ? { width: "100%" } : {}
+          }
+        );
       }
-    ) : showEmpty && (empty || /* @__PURE__ */ import_react.default.createElement(import_pisellEmpty.default, null))
-  );
+    }
+  ) : showEmpty && (empty || /* @__PURE__ */ import_react.default.createElement(import_pisellEmpty.default, null));
 };
 var pisellCardList_default = (0, import_react.memo)(PisellCardList);

package/lib/components/pisellCardList/index.less

@@ -1,75 +1,75 @@
-.pisell-card {
-  padding: 16px;
-  color: var(--Gray-900, #101828);
-  font-size: 14px;
-  font-style: normal;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-  .pisell-card-name-wrap {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 500;
-    line-height: 20px;
-  }
-  .pisell-card-store-name {
-    height: 20px;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 18px; /* 150% */
-  }
-  .pisell-card-amount-wrap {
-    display: flex;
-    margin-bottom: 4px;
-    .pisell-card-amount-item {
-      display: flex;
-      flex-direction: column;
-      margin-right: 16px;
-      .pisell-card-amount-item-label {
-        color: var(--Gray-500, #667085);
-        font-weight: 400;
-        line-height: 20px;
-        height: 20px;
-      }
-      .pisell-card-amount-item-value {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 30px;
-      }
-    }
-  }
-  .pisell-card-code-wrap {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    .pisell-card-qr-code {
-      position: absolute;
-      top: -16px;
-      right: 0;
-    }
-  }
-  .pisell-lowcode-qrcode {
-    padding: 6px;
-  }
-  .pisell-card-warn-message {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    left: 0;
-    background: var(--Warning-200, #FEDF89);
-    display: flex;
-    padding: 6px 16px;
-    color: var(--Warning-900, #7A2E0E);
-    font-weight: 400;
-    line-height: 20px;
-    .pisell-card-icon {
-      font-size: 20px;
-      color: #7A2E0E;
-      margin-right: 2px;
-    }
-  }
-}
-.pisell-card-disabled {
-  color: var(--Gray-500, #667085);
-  padding-bottom: 36px;
-}
+// .pisell-card {
+//   padding: 16px;
+//   color: var(--Gray-900, #101828);
+//   font-size: 14px;
+//   font-style: normal;
+//   position: relative;
+//   overflow: hidden;
+//   border-radius: 12px;
+//   .pisell-card-name-wrap {
+//     display: flex;
+//     justify-content: space-between;
+//     font-weight: 500;
+//     line-height: 20px;
+//   }
+//   .pisell-card-store-name {
+//     height: 20px;
+//     font-size: 12px;
+//     font-weight: 400;
+//     line-height: 18px; /* 150% */
+//   }
+//   .pisell-card-amount-wrap {
+//     display: flex;
+//     margin-bottom: 4px;
+//     .pisell-card-amount-item {
+//       display: flex;
+//       flex-direction: column;
+//       margin-right: 16px;
+//       .pisell-card-amount-item-label {
+//         color: var(--Gray-500, #667085);
+//         font-weight: 400;
+//         line-height: 20px;
+//         height: 20px;
+//       }
+//       .pisell-card-amount-item-value {
+//         font-size: 20px;
+//         font-weight: 600;
+//         line-height: 30px;
+//       }
+//     }
+//   }
+//   .pisell-card-code-wrap {
+//     display: flex;
+//     justify-content: space-between;
+//     position: relative;
+//     .pisell-card-qr-code {
+//       position: absolute;
+//       top: -16px;
+//       right: 0;
+//     }
+//   }
+//   .pisell-lowcode-qrcode {
+//     padding: 6px;
+//   }
+//   .pisell-card-warn-message {
+//     position: absolute;
+//     bottom: 0;
+//     width: 100%;
+//     left: 0;
+//     background: var(--Warning-200, #FEDF89);
+//     display: flex;
+//     padding: 6px 16px;
+//     color: var(--Warning-900, #7A2E0E);
+//     font-weight: 400;
+//     line-height: 20px;
+//     .pisell-card-icon {
+//       font-size: 20px;
+//       color: #7A2E0E;
+//       margin-right: 2px;
+//     }
+//   }
+// }
+// .pisell-card-disabled {
+//   color: var(--Gray-500, #667085);
+//   padding-bottom: 36px;
+// }

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

@@ -10,12 +10,14 @@ export interface PisellCheckboxGroupOption {
 declare type PisellCheckboxGroupValue = string | string[] | any;
 export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     platform?: PisellContextType['platform'];
+    direction?: 'horizontal' | 'vertical';
+    fullWidth?: boolean;
     gap?: number;
     padding?: number;
     options: PisellCheckboxGroupOption[];
     onChange?: (value: PisellCheckboxGroupValue, item: PisellCheckboxGroupOption) => void;
     value?: PisellCheckboxGroupValue;
-    renderOption?: (option: PisellCheckboxGroupOption, active: boolean) => React.ReactNode;
+    renderOption?: (option: PisellCheckboxGroupOption, active: boolean, index: number) => React.ReactNode;
     rowKey?: string;
     mode?: 'multiple' | 'single';
     iconPosition?: 'left' | 'right' | 'hide';

package/lib/components/pisellCheckboxGroup/index.js

@@ -57,6 +57,8 @@ var PisellCheckboxGroup = (props) => {
     padding = 0,
     rowKey = "value",
     mode = "multiple",
+    direction,
+    fullWidth,
     iconPosition = "left",
     optionClassName,
     optionActiveClassName,
@@ -82,11 +84,31 @@ var PisellCheckboxGroup = (props) => {
     const paddingVal = (0, import_utils.isNumber)(padding) ? padding + "px" : padding;
     let obj = {
       gap: gapVal,
-      padding: paddingVal,
-      ...style
+      padding: paddingVal
     };
-    return obj;
-  }, [style, gap, padding]);
+    if ("horizontal" === direction) {
+      obj = {
+        ...obj,
+        flexDirection: "row",
+        overflowX: "auto"
+      };
+    }
+    return { ...obj, ...style };
+  }, [style, gap, padding, direction]);
+  const rowStyle = (0, import_react.useMemo)(() => {
+    if ("horizontal" === direction) {
+      if (false === fullWidth) {
+        return {
+          flexShrink: 0,
+          width: "auto"
+        };
+      }
+      return {
+        flexShrink: 0
+      };
+    }
+    return {};
+  }, [direction, fullWidth]);
   const _onChange = (val, item) => {
     onChange == null ? void 0 : onChange(mode === "single" ? val[0] : val, item);
   };
@@ -106,7 +128,7 @@ var PisellCheckboxGroup = (props) => {
       className: (0, import_classnames.default)("pisell-checkbox-group", rest.className),
       style: _style
     },
-    options.map((option) => {
+    options.map((option, index) => {
       const active = _value.includes(option[rowKey]);
       return /* @__PURE__ */ import_react.default.createElement(
         import_pisellRow.default,
@@ -121,7 +143,8 @@ var PisellCheckboxGroup = (props) => {
           ),
           key: option[rowKey],
           gap: 10,
-          onClick: () => {
+          style: rowStyle,
+          onClick: (e) => {
             if (option.disabled) return;
             handleSelectItem(option[rowKey], option);
           },
@@ -139,7 +162,7 @@ var PisellCheckboxGroup = (props) => {
               className: "pisell-checkbox-group-item-checkbox"
             }
           ),
-          centerContent: renderOption == null ? void 0 : renderOption(option, active),
+          centerContent: renderOption == null ? void 0 : renderOption(option, active, index),
           centerContentFill: true
         }
       );

package/lib/components/pisellCheckboxGroup/index.less

@@ -19,6 +19,7 @@
       border-radius: 12px;
       border: 1px solid var(--Gray-200, #EAECF0);
       z-index: 2;
+      pointer-events: none;
     }
 
     &.pisell-checkbox-group-item-active {

package/lib/components/pisellCustomCheckboxGroup/index.js

@@ -54,7 +54,7 @@ var PisellCustomCheckboxGroup = ({
   }, [allowAdd, dataSource]);
   const renderGridItem = (item, index) => {
     var _a;
-    return /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => onClick(item) }, (item == null ? void 0 : item.isAddCard) && renderAddItem ? renderAddItem(item) : (_a = rest == null ? void 0 : rest.renderItem) == null ? void 0 : _a.call(rest, item, index));
+    return /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => onClick(item), style: { height: "100%" } }, (item == null ? void 0 : item.isAddCard) && renderAddItem ? renderAddItem(item) : (_a = rest == null ? void 0 : rest.renderItem) == null ? void 0 : _a.call(rest, item, index));
   };
   return /* @__PURE__ */ import_react.default.createElement(
     import_pisellViewGrid.default,

package/lib/components/pisellDatePicker/datePickerCpt.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { Dayjs } from 'dayjs';
 import './detePickerCpt.less';

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => JSX.Element;
 export default PisellDatePicker;

package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import type { UniqueIdentifier } from '@dnd-kit/core';
+import React from 'react';
 import { Props as TreeItemProps } from './TreeItem';
 interface Props extends TreeItemProps {
     id: UniqueIdentifier;
     __designMode?: string;
 }
-export declare function SortableTreeItem({ id, depth, ...props }: Props): JSX.Element;
-export {};
+declare const _default: React.MemoExoticComponent<({ id, depth, ...props }: Props) => JSX.Element>;
+export default _default;

package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.js

@@ -29,7 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellDraggable/components/TreeItem/SortableTreeItem.tsx
 var SortableTreeItem_exports = {};
 __export(SortableTreeItem_exports, {
-  SortableTreeItem: () => SortableTreeItem
+  default: () => SortableTreeItem_default
 });
 module.exports = __toCommonJS(SortableTreeItem_exports);
 var import_sortable = require("@dnd-kit/sortable");
@@ -41,7 +41,7 @@ var animateLayoutChanges = ({
   isSorting,
   wasDragging
 }) => isSorting || wasDragging ? false : true;
-function SortableTreeItem({ id, depth, ...props }) {
+var SortableTreeItem = ({ id, depth, ...props }) => {
   const {
     attributes,
     isDragging,
@@ -76,8 +76,5 @@ function SortableTreeItem({ id, depth, ...props }) {
       ...props
     }
   );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  SortableTreeItem
-});
+};
+var SortableTreeItem_default = (0, import_react.memo)(SortableTreeItem);

package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts

@@ -19,5 +19,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
     renderItem?(item: Props, ref: React.ForwardedRef<HTMLDivElement>): React.ReactNode;
     __designMode?: string;
     isBlocked?: boolean;
+    isError?: boolean;
 }
 export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/lib/components/pisellDraggable/components/TreeItem/index.d.ts

@@ -1,2 +1,2 @@
 export { TreeItem } from './TreeItem';
-export { SortableTreeItem } from './SortableTreeItem';
+export { default as SortableTreeItem } from './SortableTreeItem';

package/lib/components/pisellDraggable/components/TreeItem/index.js

@@ -1,6 +1,8 @@
+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)
@@ -14,17 +16,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/pisellDraggable/components/TreeItem/index.ts
 var TreeItem_exports = {};
 __export(TreeItem_exports, {
-  SortableTreeItem: () => import_SortableTreeItem.SortableTreeItem,
+  SortableTreeItem: () => import_SortableTreeItem.default,
   TreeItem: () => import_TreeItem.TreeItem
 });
 module.exports = __toCommonJS(TreeItem_exports);
 var import_TreeItem = require("./TreeItem");
-var import_SortableTreeItem = require("./SortableTreeItem");
+var import_SortableTreeItem = __toESM(require("./SortableTreeItem"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SortableTreeItem,

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

@@ -2,8 +2,9 @@
  * 可拖拽树形组件
  * 基于@dnd-kit库实现，支持拖拽排序、展开折叠、删除等功能
  */
+import { UniqueIdentifier } from '@dnd-kit/core';
 import React from 'react';
-import type { TreeItem, TreeItems } from './types';
+import type { FlattenedItem, TreeItem, TreeItems } from './types';
 import type { Props as TreeItemProps } from './components/TreeItem/TreeItem';
 interface Props {
     /** 是否支持折叠功能 */
@@ -26,7 +27,9 @@ interface Props {
     __designMode?: string;
     /** 最大层级 */
     maxLevel?: number;
+    /** 自定义拖拽判断函数，返回false时阻止拖拽 */
+    canDrop?: (dragItem: FlattenedItem, dropTarget: FlattenedItem, parentId: UniqueIdentifier | null, parentNode: any) => boolean;
 }
-export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, maxLevel, }: Props): JSX.Element;
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, maxLevel, canDrop, }: Props): JSX.Element;
 declare const Demo: (props: Props) => JSX.Element;
 export default Demo;