@pisell/private-materials 3.4.78 → 3.4.80

package/lib/pro/Cards/components/SKUCard/index.d.ts

@@ -1,60 +1,5 @@
 import React from 'react';
+import { SKUCardProps } from './types';
 import './index.less';
-/**
- * SKU Card 文本样式配置
- */
-interface SkuCardTextConfig {
-    /** 是否显示 */
-    visible?: boolean;
-    /** 字体大小 */
-    fontSize?: number;
-    /** 颜色 */
-    color?: string;
-    /** 字体粗细 */
-    fontWeight?: 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-    /** 展示行数 */
-    lineClamp?: number;
-}
-/**
- * SKU Card 图片配置
- */
-interface SkuCardImageConfig {
-    /** 是否显示 */
-    visible?: boolean;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 圆角 */
-    borderRadius?: number | string;
-    /** 边框 */
-    border?: string;
-}
-/**
- * SKU Card 配置
- */
-interface SkuCardConfig {
-    /** 主标题配置 */
-    title?: SkuCardTextConfig;
-    /** 副标题配置 */
-    subTitle?: SkuCardTextConfig;
-    /** 价格配置 */
-    price?: Omit<SkuCardTextConfig, 'lineClamp'>;
-    /** 图片配置 */
-    image?: SkuCardImageConfig;
-}
-interface SKUCardProps {
-    cover?: string;
-    title?: string;
-    subtitle?: string;
-    price?: string;
-    arrow?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    renderRight?: React.ReactNode | (() => React.ReactNode);
-    /** SKU Card 配置 */
-    skuCardConfig?: SkuCardConfig;
-}
 declare const SKUCard: React.FC<SKUCardProps>;
 export default SKUCard;

package/lib/pro/Cards/components/SKUCard/index.js

@@ -36,6 +36,8 @@ var import_react = __toESM(require("react"));
 var import_materials = require("@pisell/materials");
 var import_utils = require("@pisell/utils");
 var import_classnames = __toESM(require("classnames"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_locales = __toESM(require("./locales"));
 var import_index = require("./index.less");
 var SKUCard = ({
   cover,
@@ -47,9 +49,13 @@ var SKUCard = ({
   disabled,
   onClick,
   renderRight,
-  skuCardConfig
+  skuCardConfig,
+  skuDisabled
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const context = (0, import_useEngineContext.default)();
+  const language = ((_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.storage) == null ? void 0 : _c.get("umi_locale")) || "en";
+  import_utils.locales.init(import_locales.default, language);
   const titleStyle = (0, import_react.useMemo)(() => {
     const config = skuCardConfig == null ? void 0 : skuCardConfig.title;
     const style = {};
@@ -126,10 +132,25 @@ var SKUCard = ({
     }
     return style;
   }, [skuCardConfig == null ? void 0 : skuCardConfig.image]);
-  const showTitle = ((_a = skuCardConfig == null ? void 0 : skuCardConfig.title) == null ? void 0 : _a.visible) !== false;
-  const showSubTitle = ((_b = skuCardConfig == null ? void 0 : skuCardConfig.subTitle) == null ? void 0 : _b.visible) !== false;
-  const showPrice = ((_c = skuCardConfig == null ? void 0 : skuCardConfig.price) == null ? void 0 : _c.visible) !== false;
-  const showImage = ((_d = skuCardConfig == null ? void 0 : skuCardConfig.image) == null ? void 0 : _d.visible) !== false;
+  const disabledTextStyle = (0, import_react.useMemo)(() => {
+    const config = skuCardConfig == null ? void 0 : skuCardConfig.disabledText;
+    const style = {};
+    if (config == null ? void 0 : config.color) {
+      style.color = config.color;
+    }
+    if (config == null ? void 0 : config.fontSize) {
+      style.fontSize = config.fontSize;
+    }
+    if (config == null ? void 0 : config.fontWeight) {
+      style.fontWeight = config.fontWeight;
+    }
+    return style;
+  }, [skuCardConfig == null ? void 0 : skuCardConfig.disabledText]);
+  const showTitle = ((_d = skuCardConfig == null ? void 0 : skuCardConfig.title) == null ? void 0 : _d.visible) !== false;
+  const showSubTitle = ((_e = skuCardConfig == null ? void 0 : skuCardConfig.subTitle) == null ? void 0 : _e.visible) !== false;
+  const showPrice = ((_f = skuCardConfig == null ? void 0 : skuCardConfig.price) == null ? void 0 : _f.visible) !== false;
+  const showImage = ((_g = skuCardConfig == null ? void 0 : skuCardConfig.image) == null ? void 0 : _g.visible) !== false;
+  const showDisabledText = ((_h = skuCardConfig == null ? void 0 : skuCardConfig.disabledText) == null ? void 0 : _h.visible) !== false;
   const titleText = (0, import_react.useMemo)(() => {
     if (!title) return "";
     if (title.length < 2) {
@@ -137,6 +158,7 @@ var SKUCard = ({
     }
     return title.substring(0, 2).toUpperCase();
   }, [title]);
+  console.log("disabledTextStyle >>>>>>>>>", disabledTextStyle);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -154,6 +176,14 @@ var SKUCard = ({
         cursor: disabled ? "not-allowed" : "pointer"
       }
     },
+    !!skuDisabled && !!showDisabledText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-disabled-mask" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-pro-cards-sku-card-disabled-text",
+        style: disabledTextStyle
+      },
+      ((_i = skuCardConfig == null ? void 0 : skuCardConfig.disabledText) == null ? void 0 : _i.text) || import_utils.locales.getText("pisell2.pro.cards.skuCard.disabledText")
+    )),
     showImage && /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -177,16 +207,25 @@ var SKUCard = ({
       },
       subtitle
     ), showPrice && price && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-price", style: priceStyle }, price)),
-    arrow || renderRight ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-right" }, renderRight ? typeof renderRight === "function" ? renderRight() : renderRight : /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Iconfont,
+    arrow || renderRight ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        type: "pisell2-chevron-right",
-        style: {
-          fontSize: "28px",
-          color: disabled ? "#f2f2f2" : "#475467"
+        className: "pisell-pro-cards-sku-card-right",
+        style: renderRight ? {} : {
+          alignItems: "center"
         }
-      }
-    )) : null
+      },
+      renderRight ? typeof renderRight === "function" ? renderRight() : renderRight : /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Iconfont,
+        {
+          type: "pisell2-chevron-right",
+          style: {
+            fontSize: "28px",
+            color: disabled ? "#f2f2f2" : "#475467"
+          }
+        }
+      )
+    ) : null
   );
 };
 var SKUCard_default = SKUCard;

package/lib/pro/Cards/components/SKUCard/index.less

@@ -1,4 +1,5 @@
 .pisell-pro-cards-sku-card {
+  position: relative;
   display: flex;
   padding: 8px;
   align-items: center;
@@ -9,6 +10,26 @@
   cursor: pointer;
   width: 100%;
 
+  &-disabled-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 8px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &-disabled-text {
+    font-size: 16px;
+    font-weight: 700;
+    color: #000000;
+    transform: rotate(45deg);
+  }
+
   &-with-image {
     min-height: 80px;
   }

package/lib/pro/Cards/components/SKUCard/locales.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    en: {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+    'zh-CN': {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+    'zh-HK': {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+};
+export default _default;

package/lib/pro/Cards/components/SKUCard/locales.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Cards/components/SKUCard/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  default: () => locales_default
+});
+module.exports = __toCommonJS(locales_exports);
+var locales_default = {
+  en: {
+    "pisell2.pro.cards.skuCard.disabledText": "Sold out"
+  },
+  "zh-CN": {
+    "pisell2.pro.cards.skuCard.disabledText": "已售罄"
+  },
+  "zh-HK": {
+    "pisell2.pro.cards.skuCard.disabledText": "已售罄"
+  }
+};

package/lib/pro/Cards/components/SKUCard/types.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+/**
+ * SKU Card 文本样式配置
+ */
+export interface SkuCardTextConfig {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 字体大小 */
+    fontSize?: number;
+    /** 颜色 */
+    color?: string;
+    /** 字体粗细 */
+    fontWeight?: 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    /** 展示行数 */
+    lineClamp?: number;
+}
+/**
+ * SKU Card 图片配置
+ */
+export interface SkuCardImageConfig {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 圆角 */
+    borderRadius?: number | string;
+    /** 边框 */
+    border?: string;
+}
+/**
+ * SKU Card disabled文本配置
+ */
+export interface SkuCardDisabledTextConfig extends Omit<SkuCardTextConfig, 'lineClamp'> {
+    /** 文本 */
+    text?: string;
+}
+/**
+ * SKU Card 配置
+ */
+export interface SkuCardConfig {
+    /** 主标题配置 */
+    title?: SkuCardTextConfig;
+    /** 副标题配置 */
+    subTitle?: SkuCardTextConfig;
+    /** 价格配置 */
+    price?: Omit<SkuCardTextConfig, 'lineClamp'>;
+    /** 图片配置 */
+    image?: SkuCardImageConfig;
+    /** disabled文本展示 */
+    disabledText?: SkuCardDisabledTextConfig;
+}
+export interface SKUCardProps {
+    cover?: string;
+    title?: string;
+    subtitle?: string;
+    price?: string;
+    arrow?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    renderRight?: React.ReactNode | (() => React.ReactNode);
+    /** SKU Card 配置 */
+    skuCardConfig?: SkuCardConfig;
+    /** SKU 是否禁用 */
+    skuDisabled?: boolean;
+}

package/lib/pro/Cards/components/SKUCard/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Cards/components/SKUCard/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);