@pisell/private-materials 6.3.91 → 6.3.92

package/lib/plus/clientCard/index.js

@@ -0,0 +1,457 @@
+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/plus/clientCard/index.tsx
+var clientCard_exports = {};
+__export(clientCard_exports, {
+  PREFIX: () => PREFIX,
+  default: () => clientCard_default,
+  processClientData: () => processClientData
+});
+module.exports = __toCommonJS(clientCard_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_icon = require("@pisell/icon");
+var import_classnames = __toESM(require("classnames"));
+var import_line = __toESM(require("./line"));
+var import_locales = __toESM(require("./locales"));
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_clientName = __toESM(require("../clientName"));
+var import_utils2 = require("./utils");
+var import_index = require("./index.less");
+var processClientData = (dataSource, fieldNames = {}) => {
+  if (!dataSource) return null;
+  const fields = [
+    "id",
+    "name",
+    "display_name",
+    "nickname",
+    "cover",
+    "phone",
+    "email",
+    "birthday",
+    "address",
+    "tags"
+  ];
+  const _data = {};
+  fields.forEach((key) => {
+    _data[key] = (0, import_utils2.getFieldValue)(dataSource, key, fieldNames);
+  });
+  return {
+    ...dataSource,
+    ..._data
+  };
+};
+var PREFIX = "pisell-client-card";
+var renderAvatar = (processedData, avatarConfig = {}, isShowAvatar = true, isShowStatus = false, statusConfig = {}) => {
+  if (!isShowAvatar || !processedData) return null;
+  const { icon, useTextAvatar = false, children } = avatarConfig;
+  const statusIndicator = isShowStatus && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `${PREFIX}__status-indicator`,
+      style: {
+        backgroundColor: statusConfig.color || "#17B26A"
+      }
+    }
+  );
+  if (useTextAvatar) {
+    const text = children || (0, import_utils2.getAvatarText)(
+      processedData.name || processedData.display_name || processedData.nickname || ""
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { className: `${PREFIX}__avatar`, ...avatarConfig }, text), statusIndicator);
+  }
+  if (icon) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellAvatar,
+      {
+        className: `${PREFIX}__avatar`,
+        ...avatarConfig,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: icon })
+      }
+    ), statusIndicator);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellAvatar,
+    {
+      className: `${PREFIX}__avatar`,
+      ...avatarConfig,
+      src: processedData.cover
+    }
+  ), statusIndicator);
+};
+var renderTags = (processedData, isShowTag = true, tags = [], tagConfig = {}) => {
+  if (!isShowTag) return null;
+  const tagsToShow = tags.length > 0 ? tags : (processedData == null ? void 0 : processedData.tags) || [];
+  if (!tagsToShow.length) return null;
+  const { gap = 4, flexWrap = "nowrap" } = tagConfig;
+  const isNoWrap = flexWrap === "nowrap";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        `${PREFIX}__tags`,
+        isNoWrap && `${PREFIX}__tags--nowrap`
+      ),
+      style: { gap, flexWrap }
+    },
+    tagsToShow.map((tag, index) => {
+      const content = typeof tag === "string" ? tag : tag.children || tag.label;
+      const tagProps = {
+        key: index,
+        color: typeof tag === "object" ? tag.color : void 0,
+        className: (0, import_classnames.default)(
+          `${PREFIX}__tag`,
+          isNoWrap && `${PREFIX}__tag--nowrap`,
+          !isNoWrap && `${PREFIX}__tag--wrap`
+        )
+      };
+      return import_react.default.createElement(import_antd.Tag, tagProps, content);
+    })
+  );
+};
+var renderContactInfo = (processedData, isShowPhone = true, isShowEmail = true, isShowBirthday = true, isShowAddress = true, gap, cardType) => {
+  if (!processedData) return null;
+  const fields = [];
+  if (cardType === "b2") {
+    if (isShowPhone && processedData.phone) {
+      fields.push({ value: processedData.phone, type: "phone" });
+    } else if (isShowEmail && processedData.email) {
+      fields.push({ value: processedData.email, type: "email" });
+    }
+  } else {
+    if (isShowPhone && processedData.phone) {
+      fields.push({ value: processedData.phone, type: "phone" });
+    }
+    if (isShowEmail && processedData.email) {
+      fields.push({ value: processedData.email, type: "email" });
+    }
+  }
+  if (isShowBirthday && processedData.birthday) {
+    fields.push({ value: processedData.birthday, type: "birthday" });
+  }
+  if (isShowAddress && processedData.address) {
+    fields.push({ value: processedData.address, type: "address" });
+  }
+  if (!fields.length) return null;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__fields`, style: { gap } }, fields.map((field, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: index,
+      className: (0, import_classnames.default)(
+        `${PREFIX}__contact`,
+        field.type === "address" && `${PREFIX}__contact--address`
+      )
+    },
+    field.value
+  )));
+};
+var renderExtraFields = (extraFields = [], gap) => {
+  if (!extraFields.length) return null;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__extra-fields`, style: { gap } }, extraFields.map((field, index) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: index, className: `${PREFIX}__extra-field` }, field.icon && /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Icon,
+      {
+        type: field.icon,
+        className: `${PREFIX}__extra-field-icon`,
+        style: {
+          fontSize: field.iconSize,
+          color: field.iconColor
+        }
+      }
+    ), field.isShowLabel !== false && field.label && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}__extra-field-label` }, field.label, ":"), field.isShowValue !== false && field.value && /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${PREFIX}__extra-field-value`) }, field.value));
+  }));
+};
+var ClientCard = ({
+  // 基础配置
+  type = "b2",
+  direction = "horizontal",
+  dataSource,
+  fieldNames = {},
+  // 样式配置
+  style: customStyle = {},
+  horizontalGap,
+  verticalGap,
+  // 显示配置
+  isShowAvatar = true,
+  isShowName = true,
+  isShowPhone = true,
+  isShowEmail = true,
+  isShowBirthday = true,
+  isShowAddress = true,
+  isShowTag = true,
+  isShowStatus = false,
+  isShowEmptyDescription = true,
+  // 头像配置
+  avatar = {},
+  status = {},
+  // 下拉菜单
+  dropdown,
+  // 姓名样式
+  defaultName,
+  nameStyle = {},
+  // 标签配置
+  tags = [],
+  tag = {},
+  // 额外字段
+  extraFields = [],
+  // 插槽
+  slots = {},
+  // 事件回调
+  onViewClient,
+  onAddClient,
+  onChangeClient,
+  onRemoveClient
+}) => {
+  var _a, _b, _c;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(
+    import_locales.default,
+    ((_c = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.storage) == null ? void 0 : _c.get("umi_locale")) || "en"
+  );
+  const processed = (0, import_react.useMemo)(() => {
+    if (dataSource) {
+      return processClientData(dataSource, fieldNames);
+    }
+    return null;
+  }, [dataSource, fieldNames]);
+  const translatedExtraFields = (0, import_react.useMemo)(() => {
+    const _fields = extraFields.filter((item) => !!item);
+    return _fields;
+  }, [extraFields]);
+  const _dropdownProps = (0, import_react.useMemo)(() => {
+    const _props = {
+      menu: {
+        items: [
+          {
+            key: "change",
+            label: import_utils.locales.getText("pisell2.text.change-client"),
+            onClick: () => {
+              onChangeClient == null ? void 0 : onChangeClient(dataSource);
+            }
+          },
+          {
+            key: "remove",
+            label: import_utils.locales.getText("pisell2.text.remove-client"),
+            onClick: () => {
+              onRemoveClient == null ? void 0 : onRemoveClient(dataSource);
+            }
+          }
+        ]
+      }
+    };
+    if (dropdown && "open" in dropdown) {
+      _props.open = dropdown.open;
+    }
+    return _props;
+  }, [dropdown]);
+  const isWalkIn = (0, import_utils2.isWalkIn)(processed == null ? void 0 : processed.id);
+  if (isWalkIn) {
+    const cardStyle2 = {
+      ...customStyle,
+      gap: horizontalGap
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(PREFIX, `${PREFIX}--empty`),
+        ...{ onClick: () => onAddClient == null ? void 0 : onAddClient() },
+        style: { ...cardStyle2, cursor: "pointer" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__content` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__info` }, isShowAvatar && /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellAvatar,
+        {
+          icon: avatar.icon ? /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: avatar.icon }) : /* @__PURE__ */ import_react.default.createElement(
+            import_icon.User01,
+            {
+              style: {
+                color: "#475467"
+              }
+            }
+          ),
+          size: avatar.size
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__details`, style: { gap: verticalGap } }, isShowName && /* @__PURE__ */ import_react.default.createElement(
+        import_clientName.default,
+        {
+          dataSource: defaultName || import_utils.locales.getText("pisell2.text.add-client"),
+          style: nameStyle
+        }
+      ), isShowEmptyDescription && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__empty-description` }, import_utils.locales.getText("pisell2.text.leave-empty-for-walk-in")))), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__actions` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}__plugin-icon` }, /* @__PURE__ */ import_react.default.createElement(
+        import_icon.PlusCircle,
+        {
+          style: {
+            fontSize: 28,
+            color: "#475467"
+          }
+        }
+      ))))
+    );
+  }
+  if (type === "b1") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_line.default,
+      {
+        dataSource: processed,
+        isShowAvatar,
+        isShowPhone,
+        isShowEmail,
+        isShowStatus,
+        style: customStyle,
+        horizontalGap,
+        avatar,
+        status,
+        nameStyle,
+        tags,
+        tag,
+        slots,
+        onViewClient
+      }
+    );
+  }
+  const cardStyle = {
+    ...customStyle,
+    gap: horizontalGap
+  };
+  const isVertical = direction === "vertical";
+  const isInlineTag = tag.placement === "inline";
+  const getFieldVisibility = () => {
+    switch (type) {
+      case "b2":
+        return {
+          showBirthday: false,
+          showAddress: false,
+          showExtraFields: false
+        };
+      case "b5":
+        return {
+          showBirthday: isShowBirthday,
+          showAddress: isShowAddress,
+          showExtraFields: false
+        };
+      case "b9":
+        return {
+          showBirthday: isShowBirthday,
+          showAddress: isShowAddress,
+          showExtraFields: true
+        };
+      default:
+        return {
+          showBirthday: isShowBirthday,
+          showAddress: isShowAddress,
+          showExtraFields: true
+        };
+    }
+  };
+  const { showBirthday, showAddress, showExtraFields } = getFieldVisibility();
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(PREFIX, `${PREFIX}--${type}`, {
+        [`${PREFIX}--vertical`]: isVertical,
+        [`${PREFIX}--horizontal`]: !isVertical
+      }),
+      style: { ...cardStyle, cursor: "pointer" },
+      ...{ onClick: () => dataSource && (onViewClient == null ? void 0 : onViewClient(dataSource)) }
+    },
+    slots.top,
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__content` }, slots.left && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__slot-left` }, slots.left), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__info` }, renderAvatar(processed, avatar, isShowAvatar, isShowStatus, status), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__details`, style: { gap: verticalGap } }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          `${PREFIX}__name-tags`,
+          isInlineTag && `${PREFIX}__name-tags--inline`
+        )
+      },
+      isShowName && /* @__PURE__ */ import_react.default.createElement(
+        import_clientName.default,
+        {
+          dataSource: processed,
+          style: nameStyle,
+          className: "pisell-client-card__name "
+        }
+      ),
+      isInlineTag && renderTags(processed, isShowTag, tags, tag)
+    ), !isInlineTag && renderTags(processed, isShowTag, tags, tag), renderContactInfo(
+      processed,
+      isShowPhone,
+      isShowEmail,
+      showBirthday,
+      showAddress,
+      typeof verticalGap === "number" ? verticalGap : void 0,
+      type
+    ), showExtraFields && renderExtraFields(
+      translatedExtraFields,
+      typeof verticalGap === "number" ? verticalGap : void 0
+    ))), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${PREFIX}__actions`,
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Dropdown,
+        {
+          trigger: ["click"],
+          placement: "bottomRight",
+          ..._dropdownProps
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Button,
+          {
+            type: "text",
+            className: `${PREFIX}__menu-button`,
+            size: "large",
+            icon: /* @__PURE__ */ import_react.default.createElement(
+              import_materials.Icon,
+              {
+                type: "pisell2-dots-vertical",
+                className: `${PREFIX}__menu-button-icon`
+              }
+            ),
+            ...(dropdown == null ? void 0 : dropdown.buttonProps) || {},
+            onClick: (e) => {
+              var _a2, _b2;
+              e.stopPropagation();
+              (_b2 = (_a2 = dropdown == null ? void 0 : dropdown.buttonProps) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e);
+            }
+          }
+        )
+      )
+    ), slots.right && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__slot-right` }, slots.right)),
+    slots.bottom
+  );
+};
+var clientCard_default = ClientCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PREFIX,
+  processClientData
+});