@pisell/private-materials 6.7.9 → 6.8.1

package/es/pro/Selector/components/Card/index.js

@@ -0,0 +1,96 @@
+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 _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 from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var stopPropagation = function stopPropagation(e) {
+  e.stopPropagation();
+};
+
+/**
+ * 自定义内容渲染函数
+ * 1. 默认展示最精简内容，仅展示label信息，另外 numberSelector 不为空则展示
+ * 2. selectedIcon 仅在最精简模式，且 selected 为 true, 且 numberSelector 为空时展示
+ * 3. 当传入 renderContent 函数时，优先使用自定义内容渲染函数
+ *    a. triger 及 numberSelector 默认展示在卡片右侧或者底部局中位置（根据 layout 确定）
+ *    b. numberSelector 优先级高于 trigger
+ *    c. layout 为 vertical, 且 selectedTypeVariant 为 cornered 时，trigger 展示在 卡片右上角
+ */
+var CardItem = function CardItem(_ref) {
+  var dataSource = _ref.dataSource,
+    disabled = _ref.disabled,
+    selected = _ref.selected,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
+    _ref$selectedTypeVari = _ref.selectedTypeVariant,
+    selectedTypeVariant = _ref$selectedTypeVari === void 0 ? 'default' : _ref$selectedTypeVari,
+    selectedIcon = _ref.selectedIcon,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    renderContent = _ref.renderContent,
+    trigger = _ref.trigger,
+    numberSelector = _ref.numberSelector;
+  // 判断是否为最精简模式（没有自定义renderContent函数）
+  var isMinimalMode = typeof renderContent !== 'function';
+
+  // 判断是否为cornered特殊布局
+  var isCorneredLayout = layout === 'vertical' && selectedTypeVariant === 'cornered';
+
+  // 渲染主要内容
+  var _renderMainContent = function _renderMainContent() {
+    if (typeof renderContent === 'function') {
+      return renderContent(dataSource);
+    }
+    // 最精简模式：仅展示label信息
+    var contentClass = classNames('pisell-selector_card-content', {
+      'content-start': selectedIcon || numberSelector
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: contentClass
+    }, (dataSource === null || dataSource === void 0 ? void 0 : dataSource._label) || '');
+  };
+  var _renderExtra = function _renderExtra() {
+    // numberSelector 优先级高于 trigger
+    // 但在cornered布局下，trigger 必须显示在右上角，无视优先级
+    var controller = null;
+    if (numberSelector) {
+      controller = numberSelector;
+    } else {
+      // 精简模式下，selectedIcon 优先级高于 trigger
+      if (isMinimalMode) {
+        controller = selectedIcon && selected ? /*#__PURE__*/React.createElement("span", {
+          className: "pisell-selector_card-selected-icon"
+        }, selectedIcon) : null;
+      } else {
+        controller = isCorneredLayout ? null : trigger;
+      }
+    }
+    if (!controller) return null;
+    var controllerClass = classNames('pisell-selector_card-extra', {
+      'extra-horizontal': layout === 'horizontal',
+      'extra-vertical': layout === 'vertical'
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: controllerClass,
+      onClick: numberSelector ? stopPropagation : undefined
+    }, controller);
+  };
+
+  // 渲染cornered布局的trigger（特殊情况：必须显示在右上角，无视优先级）
+  var _renderCorneredTrigger = function _renderCorneredTrigger() {
+    if (isMinimalMode || !isCorneredLayout || !trigger) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-selector_card-trigger-cornered"
+    }, trigger);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    style: style,
+    className: classNames('pisell-selector_card-item', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "pisell-selector_card-item-".concat(layout), layout), "selected-".concat(selectedTypeVariant), selected), "bordered", bordered), "disabled", disabled), 'has-extra', numberSelector || trigger), 'cornered-layout', isCorneredLayout))
+  }, _renderCorneredTrigger(), _renderMainContent(), _renderExtra());
+};
+export default CardItem;

package/es/pro/Selector/components/Card/index.less

@@ -0,0 +1,132 @@
+/* Card组件样式 */
+.pisell-selector_card-item {
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s;
+  overflow: hidden;
+
+  .pisell-selector_card-label {
+    flex: 1;
+  }
+
+  &:hover {
+    border-color: #7f56d9;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: #98a2b3;
+    background-color: #f9fafb;
+
+    &:hover {
+      border-color: #d0d5dd;
+      box-shadow: none;
+    }
+  }
+
+  &.bordered {
+    border: 1px solid #d0d5dd;
+  }
+
+  &:not(.bordered) {
+    border: none;
+  }
+
+  /* 垂直布局 */
+  &.pisell-selector_card-item-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: 12px;
+
+    .pisell-selector_card-content {
+      justify-content: center;
+    }
+
+    .pisell-selector_card-extra {
+      padding: 20px;
+      width: 100%;
+    }
+  }
+
+  /* 水平布局 */
+  &.pisell-selector_card-item-horizontal {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+
+    .pisell-selector_card-content {
+      flex: 1;
+    }
+  }
+
+  /* 选中状态样式 */
+  &.selected-default {
+    border-color: #7f56d9;
+    background-color: #f9f5ff;
+    color: #7f56d9;
+  }
+
+  &.selected-filled {
+    border-color: #7f56d9;
+    background-color: #7f56d9;
+    color: #ffffff;
+
+    .pisell-selector_card-selected-icon {
+      color: #ffffff;
+    }
+  }
+
+  &.selected-cornered {
+    border-color: #7f56d9;
+    position: relative;
+  }
+}
+
+/* 卡片内容区域 */
+.pisell-selector_card-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  min-height: 32px;
+
+  &.content-start {
+    justify-content: flex-start;
+  }
+}
+
+/* 控制器区域 */
+.pisell-selector_card-extra {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Cornered布局的trigger（右上角） */
+.pisell-selector_card-trigger-cornered {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* trigger和numberSelector的样式优化 */
+.pisell-selector_card-item {
+  :global(.pisell-selector_radio-trigger),
+  :global(.pisell-selector_checkbox-trigger) {
+    margin: 0;
+
+    .ant-radio,
+    .ant-checkbox {
+      margin-right: 0;
+    }
+  }
+}

package/es/pro/Selector/components/IntersectionObserver.d.ts

@@ -0,0 +1,105 @@
+/**
+ * IntersectionObserver 组件
+ * 用于监听一组 DOM 元素的可见性状态，并获取第一个可见元素的索引。
+ * @example
+ * function App() {
+ *   return (
+ *     <IntersectionObserverProvider
+ *       onFirstVisibleIndexChange={(index) => {
+ *         console.log('第一个可见元素的索引:', index);
+ *       }}
+ *       rootMargin="0px 0px -10% 0px" // 自定义根边距
+ *     >
+ *       <ScrollContainer>
+ *         {items.map((item, index) => (
+ *           <IntersectionItem key={item.id} index={index}>
+ *             <ItemComponent data={item} />
+ *           </IntersectionItem>
+ *         ))}
+ *       </ScrollContainer>
+ *     </IntersectionObserverProvider>
+ *   );
+ * }
+ */
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+declare global {
+    interface Window {
+        IntersectionObserver: typeof IntersectionObserver;
+    }
+}
+/**
+ * 元素信息接口
+ */
+interface ElementInfo {
+    element: HTMLElement;
+    index: number;
+    isVisible: boolean;
+}
+/**
+ * IntersectionObserver 上下文值接口
+ */
+interface IntersectionObserverContextValue {
+    /** 是否已初始化 */
+    initialized: boolean;
+    /** 注册元素 */
+    registerElement: (element: HTMLElement, index: number) => void;
+    /** 注销元素 */
+    unregisterElement: (element: HTMLElement) => void;
+    /** 批量注册元素 */
+    registerElements: (elements: Array<{
+        element: HTMLElement;
+        index: number;
+    }>) => void;
+    /** 清除所有注册的元素 */
+    clearAll: () => void;
+    /** 第一个可见元素的索引，-1 表示没有可见元素 */
+    firstVisibleIndex: number;
+}
+/**
+ * IntersectionObserver Provider 属性接口
+ */
+interface IntersectionObserverProps {
+    children: ReactNode;
+    /** 根容器，默认为视口 */
+    root?: Element | null;
+    /** 根边距 */
+    rootMargin?: string;
+    /** 阈值 */
+    threshold?: number | number[];
+    /** 第一个可见元素索引变化时的回调 */
+    onFirstVisibleIndexChange?: (index: number) => void;
+    /** 是否禁用组件，禁用后不会创建 IntersectionObserver */
+    disabled?: boolean;
+}
+/**
+ * IntersectionItem 组件属性接口
+ */
+interface IntersectionItemProps {
+    /** 元素索引 */
+    index: number;
+    /** 子元素 */
+    children?: ReactNode;
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+}
+/**
+ * IntersectionObserver 上下文
+ */
+declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
+export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
+/**
+ * 使用 IntersectionObserver 的 Hook
+ * @returns {Object} 包含注册元素函数和第一个可见元素索引的对象
+ */
+export declare const useIntersectionObserver: () => IntersectionObserverContextValue;
+/**
+ * IntersectionItem 组件
+ * 自动注册元素到 IntersectionObserver 中
+ */
+export declare const IntersectionItem: React.FC<IntersectionItemProps>;
+export type { IntersectionObserverProps, IntersectionItemProps, IntersectionObserverContextValue, ElementInfo, };
+export { IntersectionObserverContext, };
+export default IntersectionObserverProvider;