@pisell/materials 6.0.18 → 6.0.20

package/lib/components/record-view/index.js

@@ -38,10 +38,11 @@ var import_utils = require("@pisell/utils");
 var import_Pagination = __toESM(require("../Pagination"));
 var import_icons = require("@ant-design/icons");
 var import_react_infinite_scroll_component = __toESM(require("react-infinite-scroll-component"));
+var import_pisellEmpty = __toESM(require("./../pisellEmpty"));
 var import_hooks = require("../../hooks");
 var import_index = require("./index.less");
 var prefix = "pisell-lowcode-";
-var RecordView = (props) => {
+var RecordView = (props, ref) => {
   const {
     detail,
     leftSpan,
@@ -63,10 +64,26 @@ var RecordView = (props) => {
     children,
     locale,
     emptyButtons = [],
+    doubleList = false,
+    dataSource = [],
+    split,
+    isShowClode = true,
+    doubleListSource = [],
+    //双重列表数据源
+    modalWrapStyle = {},
+    //弹窗详情样式
     ...others
   } = props;
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
   const responsive = (0, import_hooks.useResponsive)();
   const [detailModalShow, setDetailModalShow] = (0, import_react.useState)(false);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    closeDetailModal: () => {
+      setDetailModalShow(false);
+    }
+  }));
   const detailModalDisplay = (0, import_react.useMemo)(() => {
     if (responsive === "pc") {
       return pcDetailModalDisplay;
@@ -110,30 +127,30 @@ var RecordView = (props) => {
     return leftSpan;
   }, [leftSpan, detailModalDisplay]);
   const emptyDom = (0, import_react.useMemo)(() => {
-    if (props.dataSource.length > 0) {
+    if (dataSource.length > 0) {
       return null;
     }
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Empty,
+      import_pisellEmpty.default,
       {
-        description: locale == null ? void 0 : locale.emptyText,
-        image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE
+        description: locale == null ? void 0 : locale.emptyText
       }
-    ), !!emptyButtons.length && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}empty-button` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, emptyButtons.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...item })))));
+    ));
   }, [props.dataSource, locale, emptyButtons]);
   const scrollListId = (0, import_react.useMemo)(() => {
     return `scrollableDiv-${(0, import_utils.getUniqueId)()}`;
   }, []);
   const list = (0, import_react.useMemo)(() => {
     if (paginationType === "scroll") {
-      return /* @__PURE__ */ import_react.default.createElement("div", null, header && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}scroll-header-wrap` }, header), /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}scroll-left-wrap` }, header && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}scroll-header-wrap` }, header), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
           id: scrollListId,
           style: {
             height: listHeight || 400,
             overflow: "auto"
-          }
+          },
+          className: `${prefix}scroll-content-wrap`
         },
         /* @__PURE__ */ import_react.default.createElement(
           import_react_infinite_scroll_component.default,
@@ -152,14 +169,49 @@ var RecordView = (props) => {
             ),
             scrollableTarget: scrollListId
           },
-          /* @__PURE__ */ import_react.default.createElement(import_antd.List, { ...others, renderItem: _renderItem }, emptyDom)
+          /* @__PURE__ */ import_react.default.createElement(
+            import_antd.List,
+            {
+              ...others,
+              dataSource,
+              renderItem: _renderItem
+            },
+            emptyDom
+          )
         )
       ), _footer && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}scroll-footer-wrap` }, _footer));
     }
+    if (doubleList && doubleListSource.length > 0) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}record-view-double-list` }, doubleListSource.map((item) => {
+        const { dataSource: dataSource2 = [], title } = item;
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}record-view-double-list-item` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}record-view-double-list-item-title` }, title, !!dataSource2.length && /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Badge,
+          {
+            color: "var(--gray-50, #F9FAFB)",
+            style: {
+              marginLeft: 12,
+              border: "1px solid var(--gray-200, #EAECF0)",
+              color: "var(--gray-700, #344054)"
+            },
+            count: dataSource2.length
+          }
+        )), /* @__PURE__ */ import_react.default.createElement(
+          import_antd.List,
+          {
+            ...others,
+            dataSource: dataSource2,
+            renderItem: _renderItem,
+            footer: _footer
+          },
+          emptyDom
+        ));
+      }));
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       import_antd.List,
       {
         ...others,
+        dataSource,
         renderItem: _renderItem,
         header,
         footer: _footer
@@ -167,7 +219,7 @@ var RecordView = (props) => {
       emptyDom
     );
   }, [props, _renderItem, _footer]);
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Row, { gutter, style, className: `${prefix}record-view` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: _leftSpan }, list), !detailModalDisplay && /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: rightSpan }, detail), detailModalShow && detailModalDisplay && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}detail-modal-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}modal-header` }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Row, { gutter, style, className: `${prefix}record-view` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: _leftSpan, className: `${prefix}record-view-left` }, list), !detailModalDisplay && /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: rightSpan }, detail), detailModalShow && detailModalDisplay && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}detail-modal-wrap`, style: modalWrapStyle }, isShowClode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}modal-header` }, /* @__PURE__ */ import_react.default.createElement(
     import_icons.CloseOutlined,
     {
       className: `${prefix}close-icon`,
@@ -175,4 +227,4 @@ var RecordView = (props) => {
     }
   )), detail));
 };
-var record_view_default = RecordView;
+var record_view_default = (0, import_react.forwardRef)(RecordView);

package/lib/components/record-view/index.less

@@ -1,7 +1,5 @@
 @pisell-prefix: pisell-lowcode;
 
-
-
 .@{pisell-prefix} {
   &-record-view {
     .pisell-lowcode-pagination {
@@ -12,6 +10,25 @@
       border: none;
     }
   }
+
+  &-list-title {
+    color: #000;
+
+    /* Text md/Semibold */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+    margin: 0;
+  }
+  &-list-tag {
+    border-radius: 16px;
+    border: 1px solid var(--Gray-200, #eaecf0);
+    background: var(--Gray-50, #f9fafb);
+    mix-blend-mode: multiply;
+  }
+
   &-empty-button {
     display: flex;
     justify-content: center;
@@ -45,4 +62,22 @@
   &-scroll-skeleton {
     padding: 12px 24px;
   }
+
+  &-record-view-double-list {
+  }
+  &-record-view-double-list-item {
+  }
+  &-record-view-double-list-item-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    color: #000;
+
+    /* Text md/Semibold */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+  }
 }

package/lib/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("order_by" | "group_by" | "column_setting" | "gallery_setting" | "filter_setting" | "view_mode")[];
+}) => ("view_mode" | "filter_setting" | "group_by" | "order_by" | "column_setting" | "gallery_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

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

@@ -5,6 +5,7 @@ declare class Tabs extends Component<any> {
     state: {
         activeKey: any;
     };
+    componentDidMount(): void;
     private _handleChange;
     setActiveKey: (key: string) => void;
     getActiveKey: () => any;

package/lib/components/tabs/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(tabs_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_warning = require("../../utils/warning");
+var import_badge = __toESM(require("./../badge"));
 var import_classnames = __toESM(require("classnames"));
 var import_index = require("./index.less");
 var prefix = "pisell-lowcode-";
@@ -42,6 +43,9 @@ var Tabs = class extends import_react.Component {
   state = {
     activeKey: this.props.activeKey ?? this.props.defaultActiveKey
   };
+  componentDidMount() {
+    document.body.id = "body";
+  }
   _handleChange = (key) => {
     this.setActiveKey(key);
   };
@@ -89,7 +93,6 @@ var Tabs = class extends import_react.Component {
             key: item.key,
             onClick: (e) => props.onTabClick(item.key, e)
           },
-          /* @__PURE__ */ import_react.default.createElement(import_antd.Badge, { count: item.badge, offset: [0, 6] }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}tab-bar-icon-wrap` }, item.icon)),
           /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}tab-bar-label` }, item.label)
         );
       }),
@@ -128,6 +131,14 @@ var Tabs = class extends import_react.Component {
         type: "line"
       };
     }
+    if (type === "line") {
+      items = items.map((item) => {
+        return {
+          ...item,
+          label: /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "0 9px" } }, /* @__PURE__ */ import_react.default.createElement(import_badge.default, { styleType: "default", count: item.badge, offset: [18, 10] }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}tab-bar-label` }, item.label)))
+        };
+      });
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tabs,
       {

package/lib/components/tabs/index.less

@@ -31,7 +31,7 @@
     border-radius: 99px;
     background: #f2f2f7;
     margin-bottom: 6px;
-    color: #ACACAC;
+    color: #acacac;
     transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
     border: 1px solid #f2f2f7;
     &:hover {
@@ -46,12 +46,12 @@
     line-height: 20px;
   }
 
-  &-tab-bar-item-active  &-tab-bar-icon-wrap {
-    background: var(--primary-600, #7F56D9);
+  &-tab-bar-item-active &-tab-bar-icon-wrap {
+    background: var(--primary-600, #7f56d9);
     color: #fff;
   }
-  &-tab-bar-item-active > &-tab-bar-label {
-    color: var(--primary-600, #7F56D9);
+  &-tab-bar-item-active &-tab-bar-label {
+    color: var(--primary-600, #7f56d9);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

package/lib/components/walletCard/Guest/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const Guest: (props: any) => JSX.Element;
+export default Guest;

package/lib/components/walletCard/Guest/index.js

@@ -0,0 +1,138 @@
+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/walletCard/Guest/index.tsx
+var Guest_exports = {};
+__export(Guest_exports, {
+  default: () => Guest_default
+});
+module.exports = __toCommonJS(Guest_exports);
+var import_react = __toESM(require("react"));
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_button = __toESM(require("../../button"));
+var import_index = require("./index.less");
+var Guest = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const { setting } = props;
+  const context = (0, import_useEngineContext.default)();
+  const { utils } = context.appHelper || {};
+  const goLogin = () => {
+    console.log(utils, "wh978796");
+    utils == null ? void 0 : utils.action({
+      type: "pisell1.login",
+      data: {},
+      callback: (status) => {
+        console.log(status, "wh978796");
+        if (status === "success") {
+        }
+      }
+    });
+  };
+  const getTextStyle = (config, otherConfig) => ({
+    color: (config == null ? void 0 : config.color) || (otherConfig == null ? void 0 : otherConfig.color) || "#fff",
+    fontSize: (config == null ? void 0 : config.size) || (otherConfig == null ? void 0 : otherConfig.size) || 14,
+    fontWeight: (config == null ? void 0 : config.weight) || (otherConfig == null ? void 0 : otherConfig.weight) || 400,
+    fontStyle: (config == null ? void 0 : config.style) || "normal"
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-wallet-guest-wrap",
+      style: {
+        backgroundColor: setting == null ? void 0 : setting.backgroundColor
+      }
+    },
+    ((_a = utils == null ? void 0 : utils.translation) == null ? void 0 : _a.call(utils, setting == null ? void 0 : setting.backgroundImage)) ? /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        className: "pisell-wallet-guest-bg",
+        src: ((_b = utils == null ? void 0 : utils.translation) == null ? void 0 : _b.call(utils, setting.backgroundImage)) || "",
+        alt: ((_c = utils == null ? void 0 : utils.translation) == null ? void 0 : _c.call(utils, setting == null ? void 0 : setting.backgroundImageAlt)) || "",
+        title: ((_d = utils == null ? void 0 : utils.translation) == null ? void 0 : _d.call(utils, setting == null ? void 0 : setting.backgroundImageAlt)) || ""
+      }
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-wallet-guest-content ${setting.align === "center" ? "pisell-wallet-guest-center" : ""}`
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-wallet-guest-title",
+          style: getTextStyle(setting == null ? void 0 : setting.titleConfig, {
+            size: 18,
+            weight: 600
+          })
+        },
+        ((_f = utils == null ? void 0 : utils.translation) == null ? void 0 : _f.call(
+          utils,
+          (setting == null ? void 0 : setting.title) || ((_e = setting == null ? void 0 : setting.titleConfig) == null ? void 0 : _e.text)
+        )) || ""
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-wallet-guest-subtitle",
+          style: getTextStyle(setting == null ? void 0 : setting.subtitleConfig, {
+            color: "#D0D5DD"
+          })
+        },
+        ((_h = utils == null ? void 0 : utils.translation) == null ? void 0 : _h.call(
+          utils,
+          (setting == null ? void 0 : setting.subtitle) || ((_g = setting == null ? void 0 : setting.subtitleConfig) == null ? void 0 : _g.text)
+        )) || ""
+      )),
+      ((_j = utils == null ? void 0 : utils.translation) == null ? void 0 : _j.call(
+        utils,
+        (setting == null ? void 0 : setting.buttonText) || ((_i = setting == null ? void 0 : setting.buttonConfig) == null ? void 0 : _i.text)
+      )) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-guest-button-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+        import_button.default,
+        {
+          style: {
+            backgroundColor: (setting == null ? void 0 : setting.buttonColor) || "#7F56D9",
+            borderColor: (setting == null ? void 0 : setting.buttonBorderColor) || "#7F56D9"
+          },
+          onClick: goLogin
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: getTextStyle(setting == null ? void 0 : setting.buttonConfig, {
+              weight: 600
+            })
+          },
+          ((_l = utils == null ? void 0 : utils.translation) == null ? void 0 : _l.call(
+            utils,
+            (setting == null ? void 0 : setting.buttonText) || ((_k = setting == null ? void 0 : setting.buttonConfig) == null ? void 0 : _k.text)
+          )) || ""
+        )
+      )) : null
+    )
+  );
+};
+var Guest_default = Guest;

package/lib/components/walletCard/Guest/index.less

@@ -0,0 +1,71 @@
+.pisell-wallet-guest-wrap {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  overflow: hidden;
+  position: relative;
+  min-height: 136px;
+  display: flex;
+  padding: 16px 18px;
+
+  .pisell-wallet-guest-bg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .pisell-wallet-guest-content {
+    position: relative;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+
+    &.pisell-wallet-guest-center {
+      text-align: center;
+      align-items: center;
+    }
+
+    .pisell-wallet-guest-title {
+      line-height: 28px;
+    }
+
+    .pisell-wallet-guest-subtitle {
+      line-height: 20px;
+    }
+
+    .pisell-wallet-guest-button-wrap {
+      display: flex;
+      width: fit-content;
+      max-width: 100%;
+    }
+
+    .pisell-lowcode-btn-default {
+      margin-top: 8px;
+      display: flex;
+      padding: 10px 16px;
+      justify-content: center;
+      align-items: center;
+      background: transparent;
+      border-color: transparent;
+      border-radius: 8px;
+      border: 1px solid var(--Primary-600, #7f56d9);
+      background: var(--Primary-600, #7f56d9);
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      max-width: 100%;
+      width: auto;
+      > div {
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import './index.less';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [elemName: string]: any;
+        }
+    }
+}
+export interface WalletCardItem {
+    key: string;
+    label?: string;
+    hidden?: boolean;
+    value?: number;
+}
+export interface WalletCardProps {
+    /** 二维码弹窗适配平台 */
+    platform?: 'pc' | 'h5' | 'ipad';
+    /** 卡片主题 */
+    mode?: 'dark' | 'light';
+    /** 默认还是完整显示code */
+    cardStyle?: 'normal' | 'full';
+    /** 条形码还是二维码 */
+    codeType?: 'barCode' | 'orCode';
+    /** 二维码方向 */
+    codeDirection?: 'bottom' | 'top';
+    /** 自定义背景图 */
+    customBackgroundImage?: string;
+    /** 图标：可以是React组件或图片URL */
+    showIcon?: boolean;
+    showWalletName?: boolean;
+    iconImg?: string;
+    /** 钱包名称 */
+    walletName?: string;
+    /** 店铺名称 */
+    shopName?: string;
+    /** 是否显示店铺名称 */
+    showShopName?: boolean;
+    /** 卡号 */
+    cardNo?: string;
+    /** 是否显示卡号 */
+    showCardNo?: boolean;
+    /** 是否显示二维码 */
+    showCode?: boolean;
+    /** 点击二维码/条形码的回调 */
+    onCodeClick?: () => void;
+    /** 货币符号 */
+    symbol: string;
+    /** 点击卡片的回调 */
+    onClick?: () => void;
+    /** 自定义类名 */
+    className?: string;
+    items: WalletCardItem[];
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    title?: string;
+    subTitle?: string;
+    align?: 'left' | 'center';
+    buttonText?: string;
+    [key: string]: any;
+    /** 是否已登录 */
+    isLogin?: boolean;
+}
+declare const WalletCard: React.FC<WalletCardProps>;
+export default WalletCard;