@pisell/materials 1.0.1057 → 1.0.1059

package/lib/components/pisellEntityCard/PisellEntityCard.js

@@ -0,0 +1,426 @@
+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/pisellEntityCard/PisellEntityCard.tsx
+var PisellEntityCard_exports = {};
+__export(PisellEntityCard_exports, {
+  PisellEntityCard: () => PisellEntityCard
+});
+module.exports = __toCommonJS(PisellEntityCard_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_pisellBaseCard = require("../pisellBaseCard");
+var import_PisellEntityCard = require("./PisellEntityCard.less");
+var SWIPE_DELETE_WIDTH = 72;
+var SWIPE_THRESHOLD = 36;
+function getSecondaryLineClampByDensity(density) {
+  switch (density) {
+    case "B1":
+      return 0;
+    case "B2":
+      return 2;
+    case "B5":
+      return 5;
+    case "B9":
+    default:
+      return void 0;
+  }
+}
+function getSecondaryMaxItemsByDensity(density) {
+  switch (density) {
+    case "B1":
+      return 0;
+    case "B2":
+      return 2;
+    case "B5":
+      return 5;
+    case "B9":
+    default:
+      return 999;
+  }
+}
+function getTagsMaxByDensity(density) {
+  switch (density) {
+    case "B1":
+      return 2;
+    case "B2":
+      return 2;
+    case "B5":
+      return 5;
+    case "B9":
+    default:
+      return 999;
+  }
+}
+function renderMediaNode(config) {
+  const size = config.size ?? 40;
+  const sizePx = typeof size === "number" ? `${size}px` : size;
+  const shape = config.shape ?? "circle";
+  if (config.type === "icon" && config.icon) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "pisell-entity-card-media pisell-entity-card-media-icon",
+        style: {
+          width: sizePx,
+          height: sizePx,
+          color: config.color,
+          fontSize: sizePx,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      config.icon
+    );
+  }
+  if (config.type === "avatar" || config.type === "thumbnail") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Avatar,
+      {
+        src: config.src,
+        alt: config.alt,
+        shape: shape === "circle" ? "circle" : "square",
+        style: {
+          width: sizePx,
+          height: sizePx,
+          flexShrink: 0
+        },
+        className: "pisell-entity-card-media pisell-entity-card-media-avatar"
+      }
+    );
+  }
+  return null;
+}
+function PisellEntityCard({
+  // BaseCard 透传
+  children,
+  className,
+  style,
+  hoverStyle,
+  activeStyle,
+  disabledStyle,
+  clickable = true,
+  disabled = false,
+  onClick,
+  // 数据源
+  media,
+  primaryText,
+  subtitleText,
+  secondaryTexts = [],
+  tags = [],
+  actions = [],
+  // 显隐
+  showMedia = true,
+  showPrimaryText = true,
+  showSubtitle = true,
+  showSecondaryText = true,
+  showTags = true,
+  showActions = false,
+  // 密度与布局
+  density = "B2",
+  layout = "horizontal",
+  width = "content",
+  // 左滑删除
+  swipeToDelete = false,
+  onDelete,
+  // 样式扩展
+  tagPosition = "below",
+  contentGap,
+  primaryLineClamp,
+  secondaryLineClamp: secondaryLineClampProp,
+  // 插槽
+  renderMedia,
+  renderPrimary,
+  renderSubtitle,
+  renderSecondary,
+  renderTags,
+  renderActions
+}) {
+  const [swipeOffset, setSwipeOffset] = (0, import_react.useState)(0);
+  const [swipeStart, setSwipeStart] = (0, import_react.useState)(null);
+  const swipeStartDataRef = (0, import_react.useRef)(null);
+  const swipeOffsetRef = (0, import_react.useRef)(swipeOffset);
+  swipeOffsetRef.current = swipeOffset;
+  const swipeContainerRef = (0, import_react.useRef)(null);
+  const secondaryLineClamp = secondaryLineClampProp ?? getSecondaryLineClampByDensity(density);
+  const secondaryMaxItems = getSecondaryMaxItemsByDensity(density);
+  const tagsMaxItems = getTagsMaxByDensity(density);
+  const effectiveSecondary = (0, import_react.useMemo)(
+    () => secondaryLineClamp === 0 ? [] : secondaryTexts.slice(0, secondaryMaxItems),
+    [secondaryTexts, secondaryLineClamp, secondaryMaxItems]
+  );
+  const effectiveTags = (0, import_react.useMemo)(
+    () => tags.slice(0, tagsMaxItems),
+    [tags, tagsMaxItems]
+  );
+  const rootWidthStyle = (0, import_react.useMemo)(() => {
+    if (width === "full") return { width: "100%" };
+    if (typeof width === "number") return { width: `${width}px` };
+    return { width: "fit-content" };
+  }, [width]);
+  const handleSwipeStart = (0, import_react.useCallback)(
+    (x, isTouch) => {
+      if (!swipeToDelete || !onDelete) return;
+      swipeStartDataRef.current = { x, isTouch };
+      setSwipeStart({ x, isTouch });
+    },
+    [swipeToDelete, onDelete]
+  );
+  const handleSwipeMove = (0, import_react.useCallback)((currentX) => {
+    const start = swipeStartDataRef.current;
+    if (start === null) return;
+    const delta = start.x - currentX;
+    const next = Math.max(-SWIPE_DELETE_WIDTH, Math.min(0, -delta));
+    swipeOffsetRef.current = next;
+    setSwipeOffset(next);
+  }, []);
+  const handleSwipeEnd = (0, import_react.useCallback)(() => {
+    const start = swipeStartDataRef.current;
+    const offset = swipeOffsetRef.current;
+    swipeStartDataRef.current = null;
+    if (start === null) return;
+    const committed = offset <= -SWIPE_THRESHOLD ? -SWIPE_DELETE_WIDTH : 0;
+    setSwipeOffset(committed);
+    setSwipeStart(null);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if ((swipeStart == null ? void 0 : swipeStart.isTouch) !== false) return;
+    const onDocMove = (e) => {
+      const start = swipeStartDataRef.current;
+      if (start === null) return;
+      const delta = start.x - e.clientX;
+      const next = Math.max(-SWIPE_DELETE_WIDTH, Math.min(0, -delta));
+      swipeOffsetRef.current = next;
+      setSwipeOffset(next);
+    };
+    const onDocUp = () => {
+      const start = swipeStartDataRef.current;
+      const offset = swipeOffsetRef.current;
+      if (start === null) return;
+      const committed = offset <= -SWIPE_THRESHOLD ? -SWIPE_DELETE_WIDTH : 0;
+      setSwipeOffset(committed);
+      setSwipeStart(null);
+    };
+    document.addEventListener("mousemove", onDocMove);
+    document.addEventListener("mouseup", onDocUp);
+    return () => {
+      document.removeEventListener("mousemove", onDocMove);
+      document.removeEventListener("mouseup", onDocUp);
+    };
+  }, [swipeStart == null ? void 0 : swipeStart.isTouch]);
+  const onTouchStart = (0, import_react.useCallback)(
+    (e) => handleSwipeStart(e.touches[0].clientX, true),
+    [handleSwipeStart]
+  );
+  const onTouchMove = (0, import_react.useCallback)(
+    (e) => {
+      if (swipeStartDataRef.current !== null) {
+        e.preventDefault();
+        handleSwipeMove(e.touches[0].clientX);
+      }
+    },
+    [handleSwipeMove]
+  );
+  const onTouchEnd = (0, import_react.useCallback)(() => handleSwipeEnd(), [handleSwipeEnd]);
+  const onMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      handleSwipeStart(e.clientX, false);
+    },
+    [handleSwipeStart]
+  );
+  const onMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      var _a;
+      if (((_a = swipeStartDataRef.current) == null ? void 0 : _a.isTouch) === false) handleSwipeMove(e.clientX);
+    },
+    [handleSwipeMove]
+  );
+  const onMouseUp = (0, import_react.useCallback)(() => handleSwipeEnd(), [handleSwipeEnd]);
+  const onMouseLeave = (0, import_react.useCallback)(() => {
+    if (swipeStartDataRef.current !== null) {
+      swipeStartDataRef.current = null;
+      setSwipeOffset(0);
+      setSwipeStart(null);
+    }
+  }, []);
+  const handleDeleteClick = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      onDelete == null ? void 0 : onDelete();
+    },
+    [onDelete]
+  );
+  const hasSwipe = swipeToDelete && !!onDelete;
+  (0, import_react.useEffect)(() => {
+    if (!hasSwipe || !swipeContainerRef.current) return;
+    const el = swipeContainerRef.current;
+    const onTouchMoveNative = (e) => {
+      if (swipeStartDataRef.current !== null) {
+        e.preventDefault();
+        handleSwipeMove(e.touches[0].clientX);
+      }
+    };
+    el.addEventListener("touchmove", onTouchMoveNative, { passive: false });
+    return () => el.removeEventListener("touchmove", onTouchMoveNative);
+  }, [hasSwipe, handleSwipeMove]);
+  (0, import_react.useEffect)(() => {
+    if (!hasSwipe || swipeOffset >= 0) return;
+    const closeIfOutside = (e) => {
+      const target = e.target;
+      if (target && swipeContainerRef.current && !swipeContainerRef.current.contains(target)) {
+        setSwipeOffset(0);
+        setSwipeStart(null);
+      }
+    };
+    document.addEventListener("click", closeIfOutside);
+    document.addEventListener("touchend", closeIfOutside);
+    return () => {
+      document.removeEventListener("click", closeIfOutside);
+      document.removeEventListener("touchend", closeIfOutside);
+    };
+  }, [hasSwipe, swipeOffset]);
+  const contentGapStyle = contentGap !== void 0 ? { gap: typeof contentGap === "number" ? `${contentGap}px` : contentGap } : void 0;
+  const defaultCardStyle = {
+    padding: 8,
+    borderRadius: 8,
+    border: "1px solid #d0d5dd",
+    backgroundColor: "#ffffff",
+    boxShadow: "none"
+  };
+  const mergedCardStyle = (0, import_react.useMemo)(
+    () => style ? { ...defaultCardStyle, ...style } : defaultCardStyle,
+    [style]
+  );
+  const summaryContent = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showMedia && (media || renderMedia) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-media-wrap" }, renderMedia ? renderMedia() : media ? renderMediaNode(media) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-text-wrap", style: contentGapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-primary-row" }, showPrimaryText && (primaryText != null || renderPrimary) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-primary" }, renderPrimary ? renderPrimary() : /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Typography.Text,
+    {
+      className: (0, import_classnames.default)(
+        "pisell-entity-card-primary-text",
+        primaryLineClamp && "pisell-entity-card-primary-text-has-line-clamp"
+      ),
+      ellipsis: primaryLineClamp ? void 0 : true,
+      style: primaryLineClamp ? {
+        display: "-webkit-box",
+        WebkitLineClamp: primaryLineClamp,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        whiteSpace: "normal",
+        textOverflow: "ellipsis"
+      } : void 0
+    },
+    primaryText
+  )), (showSubtitle && (subtitleText != null || renderSubtitle) || tagPosition === "inline" && showTags && effectiveTags.length > 0 && !renderTags) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-primary-extra" }, showSubtitle && (subtitleText != null || renderSubtitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-subtitle-wrap" }, renderSubtitle ? renderSubtitle() : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-entity-card-subtitle" }, subtitleText)), tagPosition === "inline" && showTags && effectiveTags.length > 0 && !renderTags && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-tags pisell-entity-card-tags-inline" }, effectiveTags.map((t, i) => /* @__PURE__ */ import_react.default.createElement("span", { key: i, className: "pisell-entity-card-tag", style: t.style }, t.text))))), showSecondaryText && effectiveSecondary.length > 0 && !renderSecondary && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-secondary" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-entity-card-secondary-text",
+      style: secondaryLineClamp ? {
+        display: "-webkit-box",
+        WebkitLineClamp: secondaryLineClamp,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden"
+      } : void 0
+    },
+    effectiveSecondary.map((item, i) => /* @__PURE__ */ import_react.default.createElement("span", { key: i, className: "pisell-entity-card-secondary-line" }, item.showTooltip && /* @__PURE__ */ import_react.default.createElement(import_icons.InfoCircleOutlined, { className: "pisell-entity-card-secondary-tooltip-icon" }), item.text))
+  )), renderSecondary && renderSecondary(), tagPosition === "below" && showTags && (effectiveTags.length > 0 || renderTags) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-tags pisell-entity-card-tags-below" }, renderTags ? renderTags() : effectiveTags.map((t, i) => /* @__PURE__ */ import_react.default.createElement("span", { key: i, className: "pisell-entity-card-tag", style: t.style }, t.text)))));
+  const cardBody = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-summary", "data-layout": layout, style: contentGapStyle }, summaryContent), showActions && (actions.length > 0 || renderActions) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-actions" }, renderActions ? renderActions() : actions.map((a, i) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: i,
+      type: "button",
+      className: (0, import_classnames.default)(
+        "pisell-entity-card-action",
+        `pisell-entity-card-action-${a.type}`,
+        a.className
+      ),
+      style: a.style,
+      onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = a.onClick) == null ? void 0 : _a.call(a);
+      }
+    },
+    a.icon,
+    (a.type === "text" || a.type === "button") && a.label
+  )))), children);
+  const wrappedByBaseCard = /* @__PURE__ */ import_react.default.createElement(
+    import_pisellBaseCard.PisellBaseCard,
+    {
+      className: (0, import_classnames.default)("pisell-entity-card-root", className),
+      style: mergedCardStyle,
+      hoverStyle,
+      activeStyle,
+      disabledStyle,
+      clickable,
+      disabled,
+      onClick
+    },
+    cardBody
+  );
+  if (!hasSwipe) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-wrap", style: rootWidthStyle }, wrappedByBaseCard);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-entity-card-wrap pisell-entity-card-wrap-swipe", style: rootWidthStyle }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: swipeContainerRef,
+      className: "pisell-entity-card-swipe-container",
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onMouseLeave
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-entity-card-swipe-delete",
+        style: { width: SWIPE_DELETE_WIDTH },
+        onClick: handleDeleteClick
+      },
+      "删除"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-entity-card-swipe-content",
+        style: { transform: `translateX(${swipeOffset}px)` }
+      },
+      wrappedByBaseCard
+    )
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellEntityCard
+});