@pisell/private-materials 6.4.62 → 6.4.64

package/lib/plus/contactInfo/components/SwipeAction/index.less

@@ -0,0 +1,74 @@
+.pisell-custom-swipe-action {
+  cursor: grab;
+  overflow: hidden;
+  touch-action: pan-y;
+  &-track {
+    position: relative;
+    overflow: visible;
+  }
+  &-content {
+  }
+  &-actions {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    width: auto;
+    white-space: nowrap;
+    &-right {
+      left: 100%;
+      top: 0;
+      height: 100%;
+    }
+    &-left {
+      right: 100%;
+      top: 0;
+      height: 100%;
+    }
+  }
+  &-action-button {
+    --border-radius: 0;
+    --border-width: 0;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+}
+
+.pisell-custom-swipe-action-action-button {
+  min-width: 80px;
+}
+
+/* 容器样式 */
+.pisell-custom-swipe-action-height-large {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+  justify-content: flex-start;
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+.pisell-custom-swipe-action-height-medium {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+/* 按钮样式 */
+.pisell-custom-swipe-action-action-height-large {
+  height: 60px;
+  width: 200px;
+}
+
+.pisell-custom-swipe-action-action-height-medium {
+  flex: 1;
+  width: 200px;
+}

package/lib/plus/contactInfo/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ContactInfoProps } from './types';
+import './index.less';
+export declare const PREFIX = "pisell-plus-contact-info";
+declare const ContactInfo: React.FC<ContactInfoProps>;
+export default ContactInfo;

package/lib/plus/contactInfo/index.js

@@ -0,0 +1,226 @@
+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/contactInfo/index.tsx
+var contactInfo_exports = {};
+__export(contactInfo_exports, {
+  PREFIX: () => PREFIX,
+  default: () => contactInfo_default
+});
+module.exports = __toCommonJS(contactInfo_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_Avatar = __toESM(require("./components/Avatar"));
+var import_SwipeAction = require("./components/SwipeAction");
+var import_contactInfoModal = __toESM(require("../contactInfoModal"));
+var import_locales = __toESM(require("./locales"));
+var import_index = require("./index.less");
+var PREFIX = "pisell-plus-contact-info";
+var ContactInfo = (props) => {
+  var _a, _b, _c;
+  console.log("props>>>>>>>>>", props);
+  const {
+    dataSource,
+    defaultName,
+    placeholder,
+    direction = "horizontal",
+    isShowDelete,
+    isShowAvatar,
+    isShowPhone,
+    isShowEmail,
+    horizontalGap,
+    verticalGap,
+    onSave,
+    onDelete,
+    onCancel
+  } = props;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(
+    import_locales.default,
+    ((_b = (_a = context.appHelper.utils) == null ? void 0 : _a.storage) == null ? void 0 : _b.get("umi_locale")) || "en"
+  );
+  const [modalVisible, setModalVisible] = (0, import_react.useState)(false);
+  const isHorizontal = (0, import_react.useMemo)(() => {
+    return direction === "horizontal";
+  }, [direction]);
+  const displayName = (0, import_react.useMemo)(() => {
+    const { first_name, last_name } = dataSource || {};
+    if (!first_name && !last_name) {
+      return defaultName || "";
+    }
+    return `${first_name || ""} ${last_name || ""}`;
+  }, [dataSource, defaultName]);
+  const displayPhone = (0, import_react.useMemo)(() => {
+    const { country_calling_code, phone } = (dataSource == null ? void 0 : dataSource.phone) || {};
+    if (!country_calling_code || !phone) {
+      return "";
+    }
+    const countryCallingCode = (country_calling_code == null ? void 0 : country_calling_code.startsWith("+")) ? country_calling_code : `+${country_calling_code}`;
+    return `${countryCallingCode || ""} ${phone || ""}`;
+  }, [dataSource == null ? void 0 : dataSource.phone]);
+  const isEmpty = (0, import_react.useMemo)(() => {
+    var _a2;
+    return !(dataSource == null ? void 0 : dataSource.first_name) && !(dataSource == null ? void 0 : dataSource.last_name) && !((_a2 = dataSource == null ? void 0 : dataSource.phone) == null ? void 0 : _a2.phone) && !(dataSource == null ? void 0 : dataSource.email);
+  }, [dataSource]);
+  const handleClick = () => {
+    console.log("handleClick");
+    setModalVisible(true);
+  };
+  const _rightActions = (0, import_react.useMemo)(() => {
+    const deleteAction = {
+      key: "delete",
+      text: /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
+            cursor: "pointer",
+            padding: "10px 0px",
+            borderRadius: "8px"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_materials.Iconfont,
+          {
+            type: "pisell2-trash-01",
+            style: { fontSize: 20, marginRight: 4 }
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 12, fontWeight: 500 } }, import_utils.locales.getText("pisell2.text.contact-info.actions.delete"))
+      ),
+      color: "danger",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onDelete == null ? void 0 : onDelete();
+      }
+    };
+    return [deleteAction];
+  }, [dataSource, onDelete]);
+  const renderContent = () => {
+    var _a2;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${PREFIX}__${direction}`,
+        style: { gap: verticalGap, padding: ((_a2 = props == null ? void 0 : props.style) == null ? void 0 : _a2.padding) || "8px" }
+      },
+      isHorizontal ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}__horizontal-left`,
+          style: { gap: horizontalGap }
+        },
+        isShowAvatar && /* @__PURE__ */ import_react.default.createElement(import_Avatar.default, { config: props.avatar, name: displayName, cover: "" }),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${PREFIX}__horizontal-left-content`,
+            style: { gap: verticalGap }
+          },
+          isEmpty ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__empty-description` }, placeholder || import_utils.locales.getText("pisell2.text.contact-info.placeholder")) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__name-horizontal-container` }, /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: `${PREFIX}__name-horizontal`,
+              style: props.nameStyle
+            },
+            displayName
+          ), isShowPhone && displayPhone && /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: `${PREFIX}__phone-horizontal`,
+              style: props.textStyle
+            },
+            "(",
+            displayPhone,
+            ")"
+          )), isShowEmail && (dataSource == null ? void 0 : dataSource.email) && /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: `${PREFIX}__text`,
+              style: props.textStyle
+            },
+            dataSource == null ? void 0 : dataSource.email
+          ))
+        )
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__horizontal-right` }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Iconfont,
+        {
+          type: isEmpty ? "pisell2-plus-circle" : "pisell2-edit-05",
+          className: `${PREFIX}__horizontal-right-icon`
+        }
+      ))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isShowAvatar && /* @__PURE__ */ import_react.default.createElement(import_Avatar.default, { config: props.avatar, name: "hhhhh", cover: "" }), isEmpty ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__empty-description` }, placeholder || import_utils.locales.getText("pisell2.text.contact-info.placeholder")) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__name`, style: props.nameStyle }, displayName), isShowPhone && displayPhone && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__text`, style: props.textStyle }, displayPhone), isShowEmail && (dataSource == null ? void 0 : dataSource.email) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__text`, style: props.textStyle }, dataSource == null ? void 0 : dataSource.email)))
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `${PREFIX}`,
+      style: { ...props.style || {}, padding: 0 },
+      onClick: handleClick
+    },
+    isShowDelete && !isEmpty ? /* @__PURE__ */ import_react.default.createElement(
+      import_SwipeAction.SwipeAction,
+      {
+        closeOnAction: false,
+        rightActions: _rightActions,
+        style: { borderRadius: ((_c = props == null ? void 0 : props.style) == null ? void 0 : _c.borderRadius) || 0 }
+      },
+      renderContent()
+    ) : renderContent()
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_contactInfoModal.default,
+    {
+      open: modalVisible,
+      dataSource,
+      isShowDelete,
+      onCancel: () => {
+        setModalVisible(false);
+        onCancel == null ? void 0 : onCancel();
+      },
+      onSave: (value) => {
+        setModalVisible(false);
+        onSave == null ? void 0 : onSave(value);
+      },
+      onDelete: () => {
+        setModalVisible(false);
+        onDelete == null ? void 0 : onDelete();
+      }
+    }
+  ));
+};
+var contactInfo_default = ContactInfo;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PREFIX
+});