@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellCards/components/GraphicTextCard/components/GraphicArea.js

@@ -0,0 +1,103 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 from 'react';
+import classNames from 'classnames';
+import PisellImageCard from "../../PisellImageCard";
+import Iconfont from "../../../../iconfont";
+/**
+ * GraphicArea 图形区域组件
+ * 负责渲染图片或图标
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 渲染图片
+ * <GraphicArea
+ *   image="https://example.com/image.png"
+ *   config={{ width: 60, height: 60, borderRadius: 8 }}
+ * />
+ *
+ * // 渲染图标
+ * <GraphicArea
+ *   icon={<SmileIcon />}
+ *   config={{ width: 36, height: 36, iconSize: 24, iconColor: '#7F56D9' }}
+ * />
+ * ```
+ */
+var GraphicArea = function GraphicArea(props) {
+  var _config$dataSource, _config$dataSource2, _config$dataSource3;
+  var image = props.image,
+    icon = props.icon,
+    _props$config = props.config,
+    config = _props$config === void 0 ? {} : _props$config,
+    className = props.className;
+  var width = config.width,
+    height = config.height,
+    borderRadius = config.borderRadius,
+    background = config.background,
+    border = config.border,
+    boxShadow = config.boxShadow,
+    padding = config.padding,
+    iconSize = config.iconSize,
+    iconColor = config.iconColor,
+    customStyle = config.style,
+    hidden = config.hidden,
+    aliWidth = config.aliWidth;
+
+  /**
+   * 图形区域容器样式
+   */
+  var graphicStyle = _objectSpread({
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    background: background,
+    border: border,
+    boxShadow: boxShadow,
+    padding: padding
+  }, customStyle);
+  if (hidden) {
+    return null;
+  }
+
+  /**
+   * 图标样式
+   */
+  var iconStyle = {
+    fontSize: iconSize,
+    color: iconColor,
+    width: iconSize,
+    height: iconSize
+  };
+
+  // 其次渲染图标
+  if (icon) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('graphic-text-card__graphic', className),
+      style: graphicStyle
+    }, /*#__PURE__*/React.createElement(Iconfont, {
+      style: iconStyle,
+      type: icon
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('graphic-text-card__graphic', className),
+    style: graphicStyle
+  }, /*#__PURE__*/React.createElement(PisellImageCard, _extends({}, config, {
+    dataSource: {
+      src: image,
+      alt: (_config$dataSource = config.dataSource) === null || _config$dataSource === void 0 ? void 0 : _config$dataSource.alt,
+      errorSrc: (_config$dataSource2 = config.dataSource) === null || _config$dataSource2 === void 0 ? void 0 : _config$dataSource2.errorSrc,
+      fallbackSrc: (_config$dataSource3 = config.dataSource) === null || _config$dataSource3 === void 0 ? void 0 : _config$dataSource3.fallbackSrc
+    },
+    width: '100%',
+    height: '100%',
+    aliWidth: aliWidth
+  })));
+};
+export default GraphicArea;

package/es/components/PisellCards/components/GraphicTextCard/components/TextContent.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextContentProps } from '../types';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，支持省略和多行显示
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 单行文本
+ * <TextContent text="Tab title" />
+ *
+ * // 自定义样式
+ * <TextContent
+ *   text="Tab title"
+ *   textConfig={{
+ *     fontSize: 16,
+ *     fontWeight: 600,
+ *     color: '#101828',
+ *     maxLines: 2,
+ *     textAlign: 'center'
+ *   }}
+ * />
+ * ```
+ */
+declare const TextContent: React.FC<TextContentProps>;
+export default TextContent;

package/es/components/PisellCards/components/GraphicTextCard/components/TextContent.js

@@ -0,0 +1,99 @@
+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, { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，支持省略和多行显示
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 单行文本
+ * <TextContent text="Tab title" />
+ *
+ * // 自定义样式
+ * <TextContent
+ *   text="Tab title"
+ *   textConfig={{
+ *     fontSize: 16,
+ *     fontWeight: 600,
+ *     color: '#101828',
+ *     maxLines: 2,
+ *     textAlign: 'center'
+ *   }}
+ * />
+ * ```
+ */
+var TextContent = function TextContent(props) {
+  var _active$style5;
+  var text = props.text,
+    _props$textConfig = props.textConfig,
+    textConfig = _props$textConfig === void 0 ? {} : _props$textConfig,
+    className = props.className,
+    active = props.active;
+  var _textConfig$maxLines = textConfig.maxLines,
+    maxLines = _textConfig$maxLines === void 0 ? 1 : _textConfig$maxLines,
+    _textConfig$ellipsis = textConfig.ellipsis,
+    ellipsis = _textConfig$ellipsis === void 0 ? true : _textConfig$ellipsis,
+    fontSize = textConfig.fontSize,
+    fontWeight = textConfig.fontWeight,
+    color = textConfig.color,
+    _textConfig$textAlign = textConfig.textAlign,
+    textAlign = _textConfig$textAlign === void 0 ? 'left' : _textConfig$textAlign;
+
+  /**
+   * 计算文本样式
+   * 处理单行省略和多行省略的样式差异
+   */
+  var textStyle = useMemo(function () {
+    var _active$style, _active$style3;
+    var baseStyle = {
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      color: color,
+      textAlign: textAlign
+    };
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && (_active$style = active.style) !== null && _active$style !== void 0 && _active$style.color) {
+      var _active$style2;
+      baseStyle.color = active === null || active === void 0 || (_active$style2 = active.style) === null || _active$style2 === void 0 ? void 0 : _active$style2.color;
+    }
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && (_active$style3 = active.style) !== null && _active$style3 !== void 0 && _active$style3.fontWeight) {
+      var _active$style4;
+      style.fontWeight = active === null || active === void 0 || (_active$style4 = active.style) === null || _active$style4 === void 0 ? void 0 : _active$style4.fontWeight;
+    }
+
+    // 单行省略
+    if (ellipsis && maxLines === 1) {
+      return _objectSpread(_objectSpread({}, baseStyle), {}, {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      });
+    }
+
+    // 多行省略
+    if (ellipsis && maxLines > 1) {
+      return _objectSpread(_objectSpread({}, baseStyle), {}, {
+        display: '-webkit-box',
+        WebkitLineClamp: maxLines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        wordBreak: 'break-word',
+        whiteSpace: 'normal'
+      });
+    }
+
+    // 不省略
+    return baseStyle;
+  }, [fontSize, fontWeight, color, textAlign, ellipsis, maxLines, active === null || active === void 0 || (_active$style5 = active.style) === null || _active$style5 === void 0 ? void 0 : _active$style5.color, active === null || active === void 0 ? void 0 : active.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('graphic-text-card__text', className),
+    style: textStyle
+  }, text);
+};
+export default TextContent;

package/es/components/PisellCards/components/GraphicTextCard/components/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 子组件统一导出
+ */
+export { default as GraphicArea } from './GraphicArea';
+export { default as TextContent } from './TextContent';
+export { default as BadgeWrapper } from './BadgeWrapper';

package/es/components/PisellCards/components/GraphicTextCard/components/index.js

@@ -0,0 +1,6 @@
+/**
+ * 子组件统一导出
+ */
+export { default as GraphicArea } from "./GraphicArea";
+export { default as TextContent } from "./TextContent";
+export { default as BadgeWrapper } from "./BadgeWrapper";

package/es/components/PisellCards/components/GraphicTextCard/hooks/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hooks 统一导出
+ */
+export { useGraphicTextCardStyle } from './useGraphicTextCardStyle';
+export { useGraphicTextCardClick } from './useGraphicTextCardClick';

package/es/components/PisellCards/components/GraphicTextCard/hooks/index.js

@@ -0,0 +1,5 @@
+/**
+ * Hooks 统一导出
+ */
+export { useGraphicTextCardStyle } from "./useGraphicTextCardStyle";
+export { useGraphicTextCardClick } from "./useGraphicTextCardClick";

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardClick.d.ts

@@ -0,0 +1,15 @@
+import { GraphicTextCardProps } from '../types';
+/**
+ * useGraphicTextCardClick Hook
+ * 处理组件点击事件的逻辑
+ *
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 点击事件处理函数
+ *
+ * @example
+ * ```tsx
+ * const handleClick = useGraphicTextCardClick(props);
+ * <div onClick={handleClick}>...</div>
+ * ```
+ */
+export declare const useGraphicTextCardClick: (props: GraphicTextCardProps) => (event: React.MouseEvent<HTMLDivElement>) => void;

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardClick.js

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+/**
+ * useGraphicTextCardClick Hook
+ * 处理组件点击事件的逻辑
+ * 
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 点击事件处理函数
+ * 
+ * @example
+ * ```tsx
+ * const handleClick = useGraphicTextCardClick(props);
+ * <div onClick={handleClick}>...</div>
+ * ```
+ */
+export var useGraphicTextCardClick = function useGraphicTextCardClick(props) {
+  var onClick = props.onClick,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    _props$clickable = props.clickable,
+    clickable = _props$clickable === void 0 ? true : _props$clickable;
+
+  /**
+   * 处理点击事件
+   * 在禁用或加载状态下不触发点击
+   * 自动更新 active 状态（如果提供了 onChange）
+   */
+  var handleClick = useCallback(function (event) {
+    // 禁用、加载或不可点击状态下阻止事件
+    if (disabled !== null && disabled !== void 0 && disabled.value || loading !== null && loading !== void 0 && loading.value || !clickable) {
+      event.preventDefault();
+      return;
+    }
+
+    // 触发 active.onChange（如果提供且未激活）
+    if (active !== null && active !== void 0 && active.onChange && !active.value) {
+      active.onChange(true);
+    }
+
+    // 触发 onClick 回调
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, active, disabled, loading, clickable]);
+  return handleClick;
+};

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardStyle.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { GraphicTextCardProps } from '../types';
+/**
+ * useGraphicTextCardStyle Hook
+ * 处理组件样式和类名的合并逻辑
+ *
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 合并后的样式和类名
+ *
+ * @example
+ * ```tsx
+ * const { mergedStyle, mergedClassName } = useGraphicTextCardStyle(props);
+ * ```
+ */
+export declare const useGraphicTextCardStyle: (props: GraphicTextCardProps) => {
+    mergedStyle: CSSProperties;
+    mergedClassName: string;
+};

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardStyle.js

@@ -0,0 +1,85 @@
+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 { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * useGraphicTextCardStyle Hook
+ * 处理组件样式和类名的合并逻辑
+ * 
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 合并后的样式和类名
+ * 
+ * @example
+ * ```tsx
+ * const { mergedStyle, mergedClassName } = useGraphicTextCardStyle(props);
+ * ```
+ */
+export var useGraphicTextCardStyle = function useGraphicTextCardStyle(props) {
+  var _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'vertical-image' : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    className = props.className,
+    style = props.style,
+    _props$widthMode = props.widthMode,
+    widthMode = _props$widthMode === void 0 ? 'auto' : _props$widthMode,
+    width = props.width,
+    _props$maxWidth = props.maxWidth,
+    maxWidth = _props$maxWidth === void 0 ? 400 : _props$maxWidth,
+    _props$clickable = props.clickable,
+    clickable = _props$clickable === void 0 ? true : _props$clickable;
+  /**
+   * 合并样式
+   * 处理宽度模式和状态样式
+   * 优先级：loading > disabled > active
+   */
+  var mergedStyle = useMemo(function () {
+    var finalStyle = _objectSpread({
+      height: '100%'
+    }, style);
+
+    // 宽度处理
+    if (widthMode === 'auto') {
+      finalStyle.width = 'auto';
+      finalStyle.maxWidth = maxWidth;
+    } else if (widthMode === 'fixed' && width) {
+      finalStyle.width = width;
+    } else if (widthMode === 'full') {
+      finalStyle.width = '100%';
+    }
+
+    // 状态样式合并（优先级：loading > disabled > active）
+    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), loading.style);
+    } else if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), disabled.style);
+    } else if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), active.style);
+    }
+    return finalStyle;
+  }, [style, active, disabled, loading, widthMode, width, maxWidth]);
+
+  /**
+   * 合并类名
+   * 包含基础类名、变体类名、尺寸类名、状态类名
+   */
+  var mergedClassName = useMemo(function () {
+    return classNames('graphic-text-card', "graphic-text-card--".concat(variant), "graphic-text-card--".concat(size), className, {
+      'graphic-text-card--active': active === null || active === void 0 ? void 0 : active.value,
+      'graphic-text-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
+      'graphic-text-card--loading': loading === null || loading === void 0 ? void 0 : loading.value,
+      'graphic-text-card--clickable': clickable && !(disabled !== null && disabled !== void 0 && disabled.value) && !(loading !== null && loading !== void 0 && loading.value)
+    }, (active === null || active === void 0 ? void 0 : active.value) && (active === null || active === void 0 ? void 0 : active.className), (disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.className), (loading === null || loading === void 0 ? void 0 : loading.value) && (loading === null || loading === void 0 ? void 0 : loading.className));
+  }, [className, variant, size, active, disabled, loading, clickable]);
+  return {
+    mergedStyle: mergedStyle,
+    mergedClassName: mergedClassName
+  };
+};

package/es/components/PisellCards/components/GraphicTextCard/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * GraphicTextCard 组件入口文件
+ */
+export { default } from './GraphicTextCard';
+export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicTextCardWidthMode, GraphicConfig, BadgeConfig, TextConfig, } from './types';

package/es/components/PisellCards/components/GraphicTextCard/index.js

@@ -0,0 +1,4 @@
+/**
+ * GraphicTextCard 组件入口文件
+ */
+export { default } from "./GraphicTextCard";