@pisell/private-materials 6.3.3 → 6.3.4

package/lib/plus/productSelect/ProductList/gridComponents.js

@@ -0,0 +1,148 @@
+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/productSelect/ProductList/gridComponents.tsx
+var gridComponents_exports = {};
+__export(gridComponents_exports, {
+  GRID_LAYOUTS: () => GRID_LAYOUTS,
+  createCustomGrid: () => createCustomGrid,
+  createGridComponents: () => createGridComponents,
+  createTwoColumnGrid: () => createTwoColumnGrid,
+  parseGridConfig: () => parseGridConfig
+});
+module.exports = __toCommonJS(gridComponents_exports);
+var import_react = __toESM(require("react"));
+var parseGridConfig = (config) => {
+  return config.split(":").map((num) => parseInt(num, 10)).filter((num) => !isNaN(num));
+};
+var calculateColumnWidth = (columns, index) => {
+  const total = columns.reduce((sum, col) => sum + col, 0);
+  const percentage = columns[index] / total * 100;
+  return `${percentage}%`;
+};
+var createGridComponents = (layout) => {
+  if (!layout) {
+    layout = GRID_LAYOUTS.SINGLE_COLUMN;
+  }
+  const columns = parseGridConfig(layout.config);
+  const isGrid = layout.grid && columns.length > 1;
+  const GridListComponent = (0, import_react.memo)(({ children, ...props }) => {
+    if (!isGrid) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "product-list-wrapper",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px"
+          },
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "product-grid-wrapper",
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "12px",
+          ...props.style
+        },
+        ...props
+      },
+      children
+    );
+  });
+  const GridItemComponent = (0, import_react.memo)(({ children, index, item, ...props }) => {
+    if (!isGrid) {
+      if (item && item.__typename === "category") {
+        return /* @__PURE__ */ import_react.default.createElement("div", { id: `ps_category_${item.id}`, ...props }, children);
+      }
+      return /* @__PURE__ */ import_react.default.createElement("div", { ...props }, children);
+    }
+    if (item && item.__typename === "category") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          id: `ps_category_${item.id}`,
+          style: {
+            width: "100%",
+            flexShrink: 0,
+            ...props.style
+          },
+          ...props
+        },
+        children
+      );
+    }
+    const columnIndex = index % columns.length;
+    const width = calculateColumnWidth(columns, columnIndex);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          width: `calc(${width} - ${(columns.length - 1) * 12 / columns.length}px)`,
+          flexShrink: 0,
+          ...props.style
+        },
+        ...props
+      },
+      children
+    );
+  });
+  GridListComponent.displayName = `GridListComponent_${layout.config}`;
+  GridItemComponent.displayName = `GridItemComponent_${layout.config}`;
+  return {
+    List: GridListComponent,
+    Item: GridItemComponent
+  };
+};
+var GRID_LAYOUTS = {
+  SINGLE_COLUMN: { grid: false, config: "12" },
+  TWO_COLUMNS: { grid: true, config: "12:12" },
+  THREE_COLUMNS: { grid: true, config: "8:8:8" },
+  FOUR_COLUMNS: { grid: true, config: "6:6:6:6" },
+  UNEQUAL_TWO: { grid: true, config: "8:16" },
+  // 1:2 比例
+  UNEQUAL_THREE: { grid: true, config: "6:12:6" }
+  // 1:2:1 比例
+};
+var createTwoColumnGrid = () => createGridComponents(GRID_LAYOUTS.TWO_COLUMNS);
+var createCustomGrid = (config) => createGridComponents({ grid: true, config });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRID_LAYOUTS,
+  createCustomGrid,
+  createGridComponents,
+  createTwoColumnGrid,
+  parseGridConfig
+});

package/lib/plus/productSelect/ProductList/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface IProps {
+    className?: string;
+    loading?: boolean;
+    data: any[];
+    context: {
+        onItemIntersectionIn: (item: any) => void;
+        onItemIntersectionOut: (item: any) => void;
+    };
+    customScrollParent?: Element | null;
+    components?: {
+        List?: React.ComponentType<any>;
+        Item?: React.ComponentType<any>;
+        [key: string]: React.ComponentType<any> | undefined;
+    };
+    itemContent?: (index: number, data: any, context: any) => React.ReactNode;
+    itemSkeleton?: React.ReactNode;
+    [key: string]: any;
+}
+declare const ProductList: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<any>>;
+export default ProductList;
+export { createGridComponents, createTwoColumnGrid, createCustomGrid, GRID_LAYOUTS, type GridConfig, } from './gridComponents';

package/lib/plus/productSelect/ProductList/index.js

@@ -0,0 +1,86 @@
+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/productSelect/ProductList/index.tsx
+var ProductList_exports = {};
+__export(ProductList_exports, {
+  GRID_LAYOUTS: () => import_gridComponents.GRID_LAYOUTS,
+  createCustomGrid: () => import_gridComponents.createCustomGrid,
+  createGridComponents: () => import_gridComponents.createGridComponents,
+  createTwoColumnGrid: () => import_gridComponents.createTwoColumnGrid,
+  default: () => ProductList_default
+});
+module.exports = __toCommonJS(ProductList_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_gridComponents = require("./gridComponents");
+var DefaultListComponent = (0, import_react.memo)(({ children, ...listProps }) => /* @__PURE__ */ import_react.default.createElement("div", { className: "product-list-wrapper", ...listProps }, children));
+var DefaultItemComponent = (0, import_react.memo)(({ children, index, ...itemProps }) => /* @__PURE__ */ import_react.default.createElement("div", { ...itemProps, "data-index": index, "data-item-index": index }, children));
+var ProductList = (0, import_react.forwardRef)((props, ref) => {
+  const { className, data, context, components, itemContent } = props;
+  const ListComponent = (0, import_react.useMemo)(
+    () => (components == null ? void 0 : components.List) || DefaultListComponent,
+    [components == null ? void 0 : components.List]
+  );
+  const ItemComponent = (0, import_react.useMemo)(
+    () => (components == null ? void 0 : components.Item) || DefaultItemComponent,
+    [components == null ? void 0 : components.Item]
+  );
+  const itemContentRenderer = (0, import_react.useMemo)(() => {
+    if (itemContent) {
+      return (item, index) => itemContent(index, item, context);
+    }
+    return (item, index) => /* @__PURE__ */ import_react.default.createElement("div", null, index);
+  }, [itemContent, context]);
+  const renderedItems = (0, import_react.useMemo)(() => {
+    return data == null ? void 0 : data.map((item, index) => {
+      const content = itemContentRenderer(item, index);
+      return /* @__PURE__ */ import_react.default.createElement(
+        ItemComponent,
+        {
+          key: `${item.id || index}-${index}`,
+          item,
+          index,
+          "data-index": index,
+          "data-item-index": index,
+          context
+        },
+        content
+      );
+    });
+  }, [data, ItemComponent, itemContentRenderer]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(className) }, /* @__PURE__ */ import_react.default.createElement(ListComponent, { ref, context }, renderedItems));
+});
+var ProductList_default = ProductList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRID_LAYOUTS,
+  createCustomGrid,
+  createGridComponents,
+  createTwoColumnGrid
+});

package/lib/plus/productSelect/components/IntersectionObserver.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+declare global {
+    interface Window {
+        IntersectionObserver: typeof IntersectionObserver;
+    }
+}
+interface IntersectionObserverContextValue {
+    initialized: boolean;
+    register: (params: {
+        ref: React.RefObject<HTMLElement>;
+        callback: (entry: IntersectionObserverEntry) => void;
+    }) => void;
+    unregister: (params: {
+        ref: React.RefObject<HTMLElement>;
+    }) => void;
+}
+declare type PriorityMode = 'top' | 'bottom' | 'left' | 'right' | undefined;
+interface IntersectionObserverProps {
+    children: ReactNode;
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    priorityMode?: PriorityMode;
+}
+interface IntersectionTriggerOptions {
+    once?: boolean;
+    onHide?: (cleanup: () => void) => void;
+    onShow?: (cleanup: () => void) => void;
+}
+interface IntersectionTriggerProps extends IntersectionTriggerOptions {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
+declare const Consumer: React.Consumer<IntersectionObserverContextValue>;
+export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
+export declare const IntersectionTrigger: React.FC<IntersectionTriggerProps>;
+export type { IntersectionObserverProps, IntersectionTriggerProps, IntersectionTriggerOptions, IntersectionObserverContextValue, PriorityMode, };
+export { IntersectionObserverContext, Consumer as IntersectionObserverConsumer, };
+export default IntersectionObserverProvider;

package/lib/plus/productSelect/components/IntersectionObserver.js

@@ -0,0 +1,269 @@
+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/productSelect/components/IntersectionObserver.tsx
+var IntersectionObserver_exports = {};
+__export(IntersectionObserver_exports, {
+  IntersectionObserverConsumer: () => Consumer,
+  IntersectionObserverContext: () => IntersectionObserverContext,
+  IntersectionObserverProvider: () => IntersectionObserverProvider,
+  IntersectionTrigger: () => IntersectionTrigger,
+  default: () => IntersectionObserver_default
+});
+module.exports = __toCommonJS(IntersectionObserver_exports);
+var import_react = __toESM(require("react"));
+var IntersectionObserverContext = (0, import_react.createContext)({
+  initialized: false,
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+var { Provider, Consumer } = IntersectionObserverContext;
+var IntersectionObserverProvider = ({
+  children,
+  root = null,
+  rootMargin = "0px",
+  threshold = 0,
+  priorityMode
+}) => {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const [initialized, setInitialized] = (0, import_react.useState)(false);
+  const observerRef = (0, import_react.useRef)(null);
+  const callbackMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const findCallback = (0, import_react.useCallback)((target) => {
+    return callbackMapRef.current.get(target);
+  }, []);
+  const selectPriorityEntry = (0, import_react.useCallback)(
+    (entries, mode) => {
+      if (entries.length === 0) return void 0;
+      if (entries.length === 1) return entries[0];
+      switch (mode) {
+        case "top":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev
+          );
+        case "bottom":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.bottom > prev.boundingClientRect.bottom ? curr : prev
+          );
+        case "left":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.left < prev.boundingClientRect.left ? curr : prev
+          );
+        case "right":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.right > prev.boundingClientRect.right ? curr : prev
+          );
+        default:
+          return entries[0];
+      }
+    },
+    []
+  );
+  const observerOptions = (0, import_react.useMemo)(
+    () => ({
+      root,
+      rootMargin,
+      threshold
+    }),
+    [root, rootMargin, threshold]
+  );
+  const createObserver = (0, import_react.useCallback)(() => {
+    if (typeof window !== "undefined" && !window.IntersectionObserver) {
+      console.warn("IntersectionObserver is not supported in this browser");
+      return null;
+    }
+    return new IntersectionObserver((entries) => {
+      if (entries.length === 0) return;
+      try {
+        if (!priorityMode) {
+          entries.forEach((entry) => {
+            const callback = findCallback(entry.target);
+            if (callback) {
+              callback(entry);
+            }
+          });
+          return;
+        }
+        const visibleEntries = [];
+        const invisibleEntries = [];
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            visibleEntries.push(entry);
+          } else {
+            invisibleEntries.push(entry);
+          }
+        });
+        invisibleEntries.forEach((entry) => {
+          const callback = findCallback(entry.target);
+          if (callback) {
+            callback(entry);
+          }
+        });
+        if (visibleEntries.length > 0) {
+          const selectedEntry = selectPriorityEntry(
+            visibleEntries,
+            priorityMode
+          );
+          if (selectedEntry) {
+            const callback = findCallback(selectedEntry.target);
+            if (callback) {
+              callback(selectedEntry);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("IntersectionObserver callback error:", error);
+      }
+    }, observerOptions);
+  }, [observerOptions, priorityMode, findCallback, selectPriorityEntry]);
+  const register = (0, import_react.useCallback)(
+    ({
+      ref,
+      callback
+    }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        if (callbackMapRef.current.has(element)) {
+          return;
+        }
+        callbackMapRef.current.set(element, callback);
+        observerRef.current.observe(element);
+      }
+    },
+    []
+  );
+  const unregister = (0, import_react.useCallback)(
+    ({ ref }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        callbackMapRef.current.delete(element);
+        observerRef.current.unobserve(element);
+      }
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (mounted) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      observerRef.current = createObserver();
+      setInitialized(true);
+    }
+  }, [mounted, createObserver]);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        callbackMapRef.current.clear();
+        setInitialized(false);
+      }
+    };
+  }, []);
+  const contextValue = {
+    initialized,
+    register,
+    unregister
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Provider, { value: contextValue }, children);
+};
+var useIntersectionTrigger = (elementRef, options = {}) => {
+  const { once = false, onHide, onShow } = options;
+  const { initialized, register, unregister } = (0, import_react.useContext)(
+    IntersectionObserverContext
+  );
+  const [isIntersecting, setIsIntersecting] = (0, import_react.useState)(false);
+  const cleanup = (0, import_react.useCallback)(
+    () => unregister({ ref: elementRef }),
+    [elementRef, unregister]
+  );
+  const intersectionCallback = (0, import_react.useCallback)(
+    (entry) => {
+      if (entry.isIntersecting) {
+        onShow == null ? void 0 : onShow(cleanup);
+        if (once) {
+          unregister({ ref: elementRef });
+        }
+      } else {
+        onHide == null ? void 0 : onHide(cleanup);
+      }
+      setIsIntersecting(entry.isIntersecting);
+    },
+    [onShow, onHide, once, cleanup, unregister, elementRef]
+  );
+  const registerRef = (0, import_react.useRef)();
+  registerRef.current = () => {
+    return register({
+      ref: elementRef,
+      callback: intersectionCallback
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (initialized) {
+      (_a = registerRef.current) == null ? void 0 : _a.call(registerRef);
+    }
+    return () => {
+      cleanup();
+    };
+  }, [initialized, cleanup]);
+  return { isIntersecting };
+};
+var IntersectionTrigger = ({
+  children,
+  className,
+  style = {},
+  ...options
+}) => {
+  const elementRef = (0, import_react.useRef)(null);
+  const { isIntersecting } = useIntersectionTrigger(elementRef, options);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className,
+      ref: elementRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...style
+      }
+    },
+    children
+  );
+};
+var IntersectionObserver_default = IntersectionObserverProvider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IntersectionObserverConsumer,
+  IntersectionObserverContext,
+  IntersectionObserverProvider,
+  IntersectionTrigger
+});

package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { TabsStructureProps, TabListContainerProps, TabItemProps, RailProps, SelectionIndicatorProps, ScrollShadowProps, ChevronControlsProps, ChevronButtonProps } from './types';
+declare global {
+    interface WeakRef<T extends object> {
+        deref(): T | undefined;
+    }
+    interface WeakRefConstructor {
+        new <T extends object>(target: T): WeakRef<T>;
+    }
+    const WeakRef: WeakRefConstructor | undefined;
+}
+declare const TabListContainer: React.ForwardRefExoticComponent<Omit<TabListContainerProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const TabItem: React.ForwardRefExoticComponent<Omit<TabItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Rail: React.ForwardRefExoticComponent<Omit<RailProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectionIndicator: React.ForwardRefExoticComponent<Omit<SelectionIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollShadow: React.ForwardRefExoticComponent<Omit<ScrollShadowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChevronButton: React.ForwardRefExoticComponent<Omit<ChevronButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ChevronControls: React.FC<ChevronControlsProps>;
+declare type TabsStructureComponent = React.FC<TabsStructureProps> & {
+    Rail: typeof Rail;
+    ListContainer: typeof TabListContainer;
+    Item: typeof TabItem;
+    SelectionIndicator: typeof SelectionIndicator;
+    ScrollShadow: typeof ScrollShadow;
+    ChevronControls: typeof ChevronControls;
+    ChevronButton: typeof ChevronButton;
+};
+declare const TabsStructureWithSubComponents: TabsStructureComponent;
+export default TabsStructureWithSubComponents;
+export { TabListContainer, TabItem, Rail, SelectionIndicator, ScrollShadow, ChevronControls, ChevronButton, };