@pisell/private-materials 6.2.36 → 6.2.38

package/es/plus/productSelect/CategoryTabs/index.js

@@ -0,0 +1,171 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useCallback, useRef, useState, useEffect } from 'react';
+import IntersectionObserverProvider, { IntersectionTrigger } from "../components/IntersectionObserver";
+import { TabsStructure, useSelectionIndicator } from "../components/TabsStructure";
+import "../components/TabsStructure/TabsStructure.less";
+import CategorySkeleton from "./CategorySkeleton";
+import { PREFIX } from "../index";
+var CategoryTabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var items = props.items,
+    activeKey = props.activeKey,
+    onChange = props.onChange,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    skeleton = props.skeleton;
+  var railRef = useRef(null);
+
+  // 使用IntersectionTrigger来优雅地控制滚动状态
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAtStart = _useState2[0],
+    setIsAtStart = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAtEnd = _useState4[0],
+    setIsAtEnd = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    needsScrollButtons = _useState6[0],
+    setNeedsScrollButtons = _useState6[1];
+
+  // 滚动函数
+  var scrollLeft = useCallback(function () {
+    if (!railRef.current) return;
+    var container = railRef.current;
+    var scrollAmount = container.clientWidth * 0.8;
+    var newPosition = Math.max(0, container.scrollLeft - scrollAmount);
+    container.scrollTo({
+      left: newPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+  var scrollRight = useCallback(function () {
+    if (!railRef.current) return;
+    var container = railRef.current;
+    var scrollAmount = container.clientWidth * 0.8;
+    var maxScroll = container.scrollWidth - container.clientWidth;
+    var newPosition = Math.min(maxScroll, container.scrollLeft + scrollAmount);
+    container.scrollTo({
+      left: newPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+
+  // 检测是否需要滚动按钮
+  useEffect(function () {
+    var updateScrollButtonsVisibility = function updateScrollButtonsVisibility() {
+      if (railRef.current) {
+        var _railRef$current = railRef.current,
+          scrollWidth = _railRef$current.scrollWidth,
+          clientWidth = _railRef$current.clientWidth;
+        console.log('检测滚动按钮需求:', {
+          scrollWidth: scrollWidth,
+          clientWidth: clientWidth,
+          needsScroll: scrollWidth > clientWidth
+        });
+        setNeedsScrollButtons(scrollWidth > clientWidth);
+      }
+    };
+    var resizeObserver = null;
+
+    // 确保DOM已经渲染完成
+    var timer = setTimeout(function () {
+      var container = railRef.current;
+      if (!container) {
+        console.log('容器未找到，跳过滚动按钮检测');
+        return;
+      }
+      updateScrollButtonsVisibility();
+      resizeObserver = new ResizeObserver(updateScrollButtonsVisibility);
+      resizeObserver.observe(container);
+    }, 100);
+    return function () {
+      clearTimeout(timer);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [items]); // 依赖items，当标签项变化时重新检测
+
+  // 获取选择指示器和列表容器属性
+  var _useSelectionIndicato = useSelectionIndicator(railRef, activeKey || ''),
+    selectionIndicatorProps = _useSelectionIndicato.selectionIndicatorProps,
+    listContainerProps = _useSelectionIndicato.listContainerProps;
+
+  // 如果正在加载且提供了骨架屏组件，显示骨架屏
+  if (loading && skeleton) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, skeleton);
+  }
+  return /*#__PURE__*/React.createElement(IntersectionObserverProvider, null, items.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__tabs-wrapper")
+  }, /*#__PURE__*/React.createElement(TabsStructure, {
+    variant: "pill",
+    backgroundVariant: "onPage",
+    selectedTab: activeKey
+  }, needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
+    direction: "prev",
+    disabled: isAtStart,
+    onClick: scrollLeft,
+    style: {
+      marginRight: '8px'
+    }
+  }), /*#__PURE__*/React.createElement(TabsStructure.Rail, {
+    ref: railRef
+  }, /*#__PURE__*/React.createElement(IntersectionTrigger, {
+    onShow: function onShow() {
+      console.log('is start');
+      setIsAtStart(true);
+    },
+    onHide: function onHide() {
+      console.log('is start false');
+      setIsAtStart(false);
+    },
+    style: {
+      width: 1,
+      height: 1,
+      flexShrink: 0,
+      background: 'rgba(0,0,0,0)'
+    },
+    className: "visibility-detector start-detector"
+  }), /*#__PURE__*/React.createElement(TabsStructure.SelectionIndicator, selectionIndicatorProps), /*#__PURE__*/React.createElement(TabsStructure.ListContainer, listContainerProps, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(TabsStructure.Item, {
+      key: item.key,
+      tabId: item.key,
+      "aria-selected": activeKey === item.key,
+      onClick: function onClick() {
+        return onChange(item.key);
+      },
+      className: "tab-item"
+    }, item.label);
+  })), /*#__PURE__*/React.createElement(IntersectionTrigger, {
+    className: "visibility-detector end-detector",
+    onShow: function onShow() {
+      console.log('is end');
+      setIsAtEnd(true);
+    },
+    onHide: function onHide() {
+      console.log('is end false');
+      setIsAtEnd(false);
+    },
+    style: {
+      width: 1,
+      height: 1,
+      flexShrink: 0,
+      background: 'rgba(0,0,0,0)'
+    }
+  })), needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
+    direction: "next",
+    disabled: isAtEnd,
+    onClick: scrollRight,
+    style: {
+      marginLeft: '8px'
+    }
+  }))));
+});
+export default CategoryTabs;
+export { CategorySkeleton };

package/es/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ProductCardSkeletonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    isProductCover?: boolean;
+    item?: any;
+    index?: number;
+}
+declare const ProductCardSkeleton: React.FC<ProductCardSkeletonProps>;
+export default ProductCardSkeleton;

package/es/plus/productSelect/ProductCard/ProductCardSkeleton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Skeleton } from 'antd';
+import { PREFIX } from "../index";
+var ProductCardSkeleton = function ProductCardSkeleton(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$isProductCover = _ref.isProductCover,
+    isProductCover = _ref$isProductCover === void 0 ? true : _ref$isProductCover,
+    item = _ref.item;
+  // 如果item.__typename为'category'，显示简单的输入框骨架屏
+  if ((item === null || item === void 0 ? void 0 : item.__typename) === 'category') {
+    return /*#__PURE__*/React.createElement(Skeleton.Input, {
+      active: true,
+      size: "small",
+      block: false
+    });
+  }
+
+  // 默认显示产品卡片骨架屏
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "__product-card"), className),
+    style: style
+  }, isProductCover && /*#__PURE__*/React.createElement(Skeleton.Image, {
+    active: true,
+    style: {
+      width: 180,
+      height: 126
+    }
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    paragraph: {
+      rows: 2
+    }
+  }));
+};
+export default ProductCardSkeleton;

package/es/plus/productSelect/ProductCard/ProductCardSkeleton.less

@@ -0,0 +1,81 @@
+.product-card-skeleton {
+  display: flex;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+  &__cover {
+    width: 180px;
+    height: 126px;
+    border-radius: 6px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__title {
+    height: 20px;
+    border-radius: 4px;
+  }
+
+  &__specs {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  &__spec-item {
+    height: 24px;
+    width: 60px;
+    border-radius: 12px;
+  }
+
+  &__price {
+    height: 18px;
+    width: 60%;
+    border-radius: 4px;
+  }
+}
+
+.skeleton-item {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
+
+  &--animated {
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+// 网格布局中的产品卡片骨架屏样式调整
+.product-grid-wrapper {
+  .product-card-skeleton {
+    min-width: unset;
+    width: 100%;
+  }
+}
+
+// 列表布局中的产品卡片骨架屏样式调整
+.product-list-wrapper {
+  .product-card-skeleton {
+    width: 100%;
+  }
+}

package/es/plus/productSelect/ProductCard/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import ProductCardSkeleton from './ProductCardSkeleton';
+import './index.less';
+declare type BoolConfigVal = 0 | 1;
+export interface ProductCardConfig {
+    isProductCover?: BoolConfigVal;
+    imgWidth?: string;
+    imgHeight?: string;
+    radius?: number;
+    isTitle?: BoolConfigVal;
+    isSubtitle?: BoolConfigVal;
+    showSpec?: boolean;
+    isTag?: BoolConfigVal;
+    isPrice?: BoolConfigVal;
+    isOriginPrice?: BoolConfigVal;
+    showZeroPrice?: boolean;
+    showMarketingTag?: boolean;
+    showRemark?: boolean;
+    isStock?: BoolConfigVal;
+}
+export interface ProductCardProps {
+    item: any;
+    index: number;
+    context?: {
+        onItemIntersectionIn: (item: any) => void;
+        onItemIntersectionOut: (item: any) => void;
+    };
+    className?: string;
+    onSelectProduct?: (item: any) => void;
+    currentProductId?: number;
+    onSelect?: (item: any) => void;
+    isSelected?: boolean;
+    decorateConfig?: ProductCardConfig;
+}
+export declare const ProductCard: React.MemoExoticComponent<({ item, index, context, onSelect, isSelected, className, decorateConfig, }: ProductCardProps) => JSX.Element>;
+export declare const DefaultItemContent: React.MemoExoticComponent<(props: {
+    item: any;
+    index: number;
+    context?: {
+        onItemIntersectionIn: (item: any) => void;
+        onItemIntersectionOut: (item: any) => void;
+    } | undefined;
+}) => JSX.Element>;
+export default ProductCard;
+export { ProductCardSkeleton };

package/es/plus/productSelect/ProductCard/index.js

@@ -0,0 +1,170 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import { locales, image as imageAli } from '@pisell/utils';
+import Decimal from 'decimal.js';
+import { IntersectionTrigger } from "../components/IntersectionObserver";
+import PisellPriceText from "../components/pisellPriceText";
+import ProductCardSkeleton from "./ProductCardSkeleton";
+import "./index.less";
+import { PREFIX } from "../index";
+
+// 产品卡片配置接口
+
+// 产品卡片属性接口
+
+// 默认配置
+var defaultConfig = {
+  isProductCover: 1,
+  imgWidth: '180px',
+  imgHeight: '126px',
+  radius: 8,
+  isTitle: 1,
+  isSubtitle: 0,
+  showSpec: true,
+  isTag: 0,
+  isPrice: 0,
+  isOriginPrice: 0,
+  showZeroPrice: false,
+  showMarketingTag: true,
+  showRemark: true,
+  isStock: 0
+};
+
+// 产品卡片组件
+export var ProductCard = /*#__PURE__*/memo(function (_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    context = _ref.context,
+    onSelect = _ref.onSelect,
+    isSelected = _ref.isSelected,
+    className = _ref.className,
+    _ref$decorateConfig = _ref.decorateConfig,
+    decorateConfig = _ref$decorateConfig === void 0 ? {} : _ref$decorateConfig;
+  var finalConfig = _objectSpread(_objectSpread({}, defaultConfig), decorateConfig);
+  var imgHeight = finalConfig.imgHeight,
+    imgWidth = finalConfig.imgWidth,
+    isOriginPrice = finalConfig.isOriginPrice,
+    isPrice = finalConfig.isPrice,
+    isProductCover = finalConfig.isProductCover,
+    isStock = finalConfig.isStock,
+    isSubtitle = finalConfig.isSubtitle,
+    isTitle = finalConfig.isTitle,
+    radius = finalConfig.radius,
+    showZeroPrice = finalConfig.showZeroPrice;
+  var __typename = item.__typename;
+
+  // 如果是分类，显示分类样式
+  if (__typename === 'category') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "__product-category"), className),
+      "data-index": index,
+      "data-item-index": index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "category-title"
+    }, item.name));
+  }
+
+  // 获取库存文本
+  var getStockText = function getStockText(item) {
+    if (item.is_track === 0) {
+      return false;
+    }
+    return "".concat(locales.getText('pisell2.product-select.stock'), "\uFF1A").concat(item.stock_quantity);
+  };
+  var getTextCover = function getTextCover(title) {
+    if (!title) return '';
+    var cleanTitle = title.trim();
+    if (cleanTitle.length === 0) return '';
+    return cleanTitle.substring(0, 2).toUpperCase();
+  };
+
+  // 渲染价格
+  var renderPrice = function renderPrice(item) {
+    var _price = item.price,
+      _original_price = item.original_price,
+      is_bundle = item.is_bundle,
+      minimum_markup_price = item.minimum_markup_price;
+    var price = _price;
+    var original_price = _original_price;
+    if (is_bundle) {
+      price = new Decimal(price).plus(new Decimal(minimum_markup_price)).toFixed(2);
+      original_price = new Decimal(original_price).plus(new Decimal(minimum_markup_price)).toFixed(2);
+    }
+    if (!showZeroPrice && !parseFloat(price)) return null;
+    return !!isPrice || !!isOriginPrice ? /*#__PURE__*/React.createElement("div", {
+      className: "price-info"
+    }, isPrice ? /*#__PURE__*/React.createElement("div", {
+      className: "price"
+    }, /*#__PURE__*/React.createElement(PisellPriceText, {
+      value: price,
+      isMini: is_bundle
+    })) : null, !!isOriginPrice && parseFloat(original_price) ? /*#__PURE__*/React.createElement("div", {
+      className: "original-price"
+    }, /*#__PURE__*/React.createElement(PisellPriceText, {
+      value: original_price,
+      isMini: is_bundle
+    })) : null) : null;
+  };
+
+  // 产品卡片内容
+  var cardContent = /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "__product-card"), className, {
+      selected: isSelected
+    }),
+    onClick: function onClick() {
+      onSelect === null || onSelect === void 0 || onSelect(item);
+    },
+    "data-index": index,
+    "data-item-index": index
+  }, isProductCover ? /*#__PURE__*/React.createElement("div", {
+    className: "card-left",
+    style: {
+      width: imgWidth || 'auto',
+      height: imgHeight || 'auto'
+    }
+  }, item.cover ? /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    src: imageAli.ali(item.cover, 360),
+    alt: item.title,
+    style: {
+      borderRadius: radius
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "text-cover",
+    style: {
+      borderRadius: radius
+    }
+  }, getTextCover(item.title))) : null, /*#__PURE__*/React.createElement("div", {
+    className: "card-right"
+  }, !!isTitle ? /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, item.title) : null, !!isSubtitle && item.subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: "subtitle"
+  }, item.subtitle) : null, !!isStock && !!item.is_track ? /*#__PURE__*/React.createElement("div", {
+    className: "stock"
+  }, getStockText(item)) : null, renderPrice(item)));
+  if (context) {
+    return /*#__PURE__*/React.createElement(IntersectionTrigger, {
+      onShow: function onShow() {
+        return context.onItemIntersectionIn(item);
+      }
+      // onHide={() => context.onItemIntersectionOut(item)}
+    }, cardContent);
+  }
+  return cardContent;
+});
+ProductCard.displayName = 'ProductCard';
+
+// 默认的ItemContent组件（保持向后兼容）
+export var DefaultItemContent = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/React.createElement(ProductCard, props);
+});
+DefaultItemContent.displayName = 'DefaultItemContent';
+export default ProductCard;
+export { ProductCardSkeleton };