@creekjs/web-components 1.0.5 → 1.0.6

package/src/creek-table/hooks/useResizableColumns.tsx

@@ -0,0 +1,323 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { useMemoizedFn } from 'ahooks';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Resizable, ResizeCallbackData } from 'react-resizable';
+
+interface ResizableTitleProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  onResize?: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+  onResizeStart?: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+  onResizeStop?: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+  width?: number | string;
+  minWidth?: number;
+}
+
+// 样式定义
+const useStyles = createStyles(({ token }) => ({
+  'resizable-handle': {
+    position: 'absolute',
+    right: -5,
+    bottom: 0,
+    zIndex: 10,
+    width: 10,
+    height: '100%',
+    cursor: 'col-resize',
+    touchAction: 'none',
+    userSelect: 'none',
+    
+    // 添加一个小竖线作为视觉提示
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: '50%',
+      width: 1,
+      opacity: 0,
+      transition: 'all 0.3s',
+      transform: 'translateX(-50%)',
+    },
+
+    '&:hover::after': {
+      opacity: 1,
+    },
+
+    '&:active::after': {
+      opacity: 1,
+    },
+  },
+  'resizable-th': {
+    position: 'relative',
+    '&:hover .resizable-handle::after': {
+      opacity: 0.5,
+    },
+  },
+}));
+
+const ResizableTitle = (props: ResizableTitleProps) => {
+  const { onResize, onResizeStart, onResizeStop, width, className, minWidth, ...restProps } = props;
+  const { styles } = useStyles();
+
+  // 2. 如果 width 不是数字，尝试测量（降级处理）
+  const ref = useRef<HTMLTableCellElement>(null);
+  const [realWidth, setRealWidth] = useState<number | undefined>(undefined);
+
+  // 本地状态，用于控制拖动过程中的平滑更新
+  // 初始化为 props.width (如果是数字) 或 undefined
+  const [localWidth, setLocalWidth] = useState<number | undefined>(typeof width === 'number' ? width : undefined);
+  const [isResizing, setIsResizing] = useState(false);
+
+  // 当外部 width 变化且非拖动状态时，同步到内部
+  useEffect(() => {
+    if (!isResizing && typeof width === 'number') {
+      setLocalWidth(width);
+    }
+  }, [width, isResizing]);
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const w = ref.current.getBoundingClientRect().width;
+      setRealWidth(w);
+      // 如果没有传入具体数字宽度，初始化 localWidth 为测量值
+      if (typeof width !== 'number') {
+        setLocalWidth(w);
+      }
+    }
+  }, []); // 只在挂载时测量一次
+
+  const handleResizeStart = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
+    setIsResizing(true);
+    // 增加全局样式防止选中文字
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+    if (onResizeStart) {
+      onResizeStart(e, data);
+    }
+  };
+
+  const handleResizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
+    setIsResizing(false);
+    document.body.style.userSelect = '';
+    document.body.style.cursor = '';
+    // 拖动结束时，确保最后一次更新传递出去
+    if (onResizeStop) {
+      onResizeStop(e, data);
+    }
+  };
+
+  const handleResize = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
+    // 1. 立即更新本地状态，保证 handle 跟手
+    setLocalWidth(data.size.width);
+    
+    // 2. 调用外部 onResize (可能会被节流)
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+
+  // 1. 如果 width 是数字，直接使用，避免任何 state/effect 开销
+  // 修改逻辑：只要有 localWidth 就使用 Resizable
+  const currentWidth = localWidth ?? realWidth;
+
+  if (typeof currentWidth === 'number' && onResize) {
+    return (
+      <Resizable
+        width={currentWidth}
+        height={0}
+        minConstraints={[minWidth || 0, 0]}
+        handle={
+          <span
+            className={classnames(styles['resizable-handle'], 'resizable-handle')}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseEnter={(e) => {
+               // 鼠标进入 handle 时触发一次 onResizeStart，用于预先锁定其他列宽度
+               // 这样可以避免在 onResizeStart (mousedown) 时触发重渲染导致 drag 失败
+               if (onResizeStart) {
+                 // 构造一个假的 event 和 data，因为这里只需要触发锁定逻辑
+                 onResizeStart(e, { node: e.currentTarget, size: { width: currentWidth, height: 0 }, handle: 'e' as any });
+               }
+            }}
+          />
+        }
+        onResize={handleResize}
+        onResizeStart={handleResizeStart}
+        onResizeStop={handleResizeStop}
+        draggableOpts={{ enableUserSelectHack: false }} // 我们自己处理了 userSelect
+        axis="x"
+      >
+        <th {...restProps} className={classnames(className, styles['resizable-th'])} style={{ ...restProps.style, width: currentWidth }} />
+      </Resizable>
+    );
+  }
+
+  if (!onResize || !realWidth) {
+    return <th {...restProps} className={className} ref={ref} />;
+  }
+
+  // Fallback (虽然逻辑上可能不需要了，保留以防万一)
+  return (
+    <Resizable
+      width={realWidth}
+      height={0}
+      minConstraints={[minWidth || 0, 0]}
+      handle={
+        <span
+          className={classnames(styles['resizable-handle'], 'resizable-handle')}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onMouseEnter={(e) => {
+             if (onResizeStart) {
+               onResizeStart(e, { node: e.currentTarget, size: { width: realWidth, height: 0 }, handle: 'e' as any });
+             }
+          }}
+        />
+      }
+      onResize={handleResize}
+      onResizeStart={handleResizeStart}
+      onResizeStop={handleResizeStop}
+      draggableOpts={{ enableUserSelectHack: false }}
+      axis="x"
+    >
+      <th {...restProps} className={classnames(className, styles['resizable-th'])} style={{ ...restProps.style, width: realWidth }} />
+    </Resizable>
+  );
+};
+
+export const useResizableColumns = <T, ValueType>(
+  columns: ProColumns<T, ValueType>[] | undefined,
+  resizable: boolean = true,
+  resizedWidthsProp?: Record<string, number>,
+  setResizedWidthsProp?: React.Dispatch<React.SetStateAction<Record<string, number>>>,
+  tableRef?: React.RefObject<HTMLDivElement>,
+): { 
+  columns: ProColumns<T, ValueType>[] | undefined;
+  components: { header: { cell: React.ComponentType<ResizableTitleProps> } } | undefined;
+  resizedWidths: Record<string, number>;
+} => {
+  // 存储用户手动调整的列宽
+  const [internalResizedWidths, setInternalResizedWidths] = useState<Record<string, number>>({});
+  // 存储列的初始自动计算宽度，作为最小宽度限制
+  const [minWidths, setMinWidths] = useState<Record<string, number>>({});
+
+  const resizedWidths = resizedWidthsProp || internalResizedWidths;
+  const setResizedWidths = setResizedWidthsProp || setInternalResizedWidths;
+
+  // 性能优化：Resize 过程中不更新 state，只在 Stop 时更新
+  // handleResize 仅用于 potential future usage (e.g. events) or removed if not needed
+  const handleResize = useMemoizedFn((key: string) => (_: React.SyntheticEvent, { size }: ResizeCallbackData) => {
+     // Intentionally empty or minimal logic to avoid re-renders during drag
+     // ResizableTitle handles visual updates locally
+  });
+  
+  const handleResizeStop = useMemoizedFn((key: string) => (_: React.SyntheticEvent, { size }: ResizeCallbackData) => {
+    setResizedWidths((prev) => ({
+        ...prev,
+        [key]: size.width,
+    }));
+  });
+
+  const handleResizeStart = useMemoizedFn(() => {
+    // 只有当 tableRef 存在时才能获取当前宽度
+    if (!tableRef?.current) return;
+
+    // 查找所有表头单元格
+    const thElements = tableRef.current.querySelectorAll('th[data-column-key]');
+    if (!thElements || thElements.length === 0) return;
+
+    const currentWidths: Record<string, number> = {};
+    thElements.forEach((th) => {
+      const key = th.getAttribute('data-column-key');
+      const width = th.getBoundingClientRect().width;
+      if (key && width) {
+        currentWidths[key] = width;
+      }
+    });
+
+    setResizedWidths((prev) => {
+      // 只有当之前的状态中缺少某些列的宽度时，才合并当前宽度
+      // 这样可以避免覆盖用户已经调整过的值，同时填补未调整列的宽度
+      // 实际上，我们希望一旦开始 resize，所有列都有明确的宽度
+      const next = { ...currentWidths, ...prev };
+      
+      // 简单的浅比较，如果内容没变就不更新，避免重渲染
+      const isSame = Object.keys(next).every(k => next[k] === prev[k]) && Object.keys(prev).length === Object.keys(next).length;
+      if (isSame) return prev;
+
+      return next;
+    });
+
+    // 记录初始宽度作为 minWidth
+    setMinWidths((prev) => {
+      const next = { ...prev };
+      let hasChange = false;
+      Object.keys(currentWidths).forEach((key) => {
+        // 只有当没有记录该列的最小宽度时才记录
+        // 这样可以确保 minWidth 始终是第一次捕获时的宽度（即 auto 宽度）
+        if (next[key] === undefined) {
+          next[key] = currentWidths[key];
+          hasChange = true;
+        }
+      });
+      return hasChange ? next : prev;
+    });
+  });
+
+  const resizableColumns = useMemo(() => {
+    if (!resizable || !columns) return columns;
+
+    return columns.map((col, index) => {
+      // 优先使用 key，如果没有则使用 dataIndex，如果都没有则使用 index
+      const key = (col.key as string) || (col.dataIndex as string) || `col-${index}`;
+      
+      // 针对 valueType 为 'option' 的操作列，不启用 resizing
+      if (col.valueType === 'option') {
+        return col;
+      }
+      
+      // 只有当存在 resizedWidths[key] 时才使用它，否则完全依赖外部传入的 col.width（即 useAutoWidthColumns 计算出的宽度）
+      const width = resizedWidths[key] ?? col.width;
+
+      // 从 col 中获取 calculatedWidth 作为 minWidth
+      const calculatedMinWidth = (col as any).calculatedWidth || 0;
+      // 使用捕获到的 auto 宽度作为最小宽度，如果没有则使用 0
+      const autoMinWidth = minWidths[key] || 0;
+      
+      // 最终的 minWidth 取两者的最大值，确保至少是 auto 宽度
+      const minWidth = Math.max(calculatedMinWidth, autoMinWidth);
+
+      return {
+        ...col,
+        width, // 应用调整后的宽度
+        onHeaderCell: (column: any) => ({
+          width: width, // 传递给 ResizableTitle
+          minWidth: minWidth,
+          onResize: handleResize(key),
+          onResizeStart: handleResizeStart,
+          onResizeStop: handleResizeStop(key),
+          'data-column-key': key, // 用于在 DOM 中查找
+          ...(col.onHeaderCell ? col.onHeaderCell(column) : null),
+        }) as React.HTMLAttributes<HTMLElement>,
+      };
+    });
+  }, [columns, resizable, resizedWidths, handleResize, handleResizeStart, handleResizeStop]);
+
+  const components = useMemo(() => {
+    if (!resizable) return undefined;
+
+    return {
+      header: {
+        cell: ResizableTitle,
+      },
+    };
+  }, [resizable]);
+
+  return {
+    columns: resizableColumns,
+    components,
+    resizedWidths,
+  };
+};

package/src/creek-table/hooks/useStatusColumns.tsx

@@ -0,0 +1,252 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { Badge, Tag } from 'antd';
+import { get } from 'lodash';
+import React, { useMemo } from 'react';
+
+// Preset colors for automatic assignment when no semantic match is found
+const PRESET_COLORS = [
+  'blue',
+  'green',
+  'volcano',
+  'orange',
+  'gold',
+  'lime',
+  'cyan',
+  'geekblue',
+  'purple',
+  'magenta',
+];
+
+// Semantic keywords mapping
+const SEMANTIC_STATUS_MAP: Record<string, string> = {
+  // Success / Green
+  success: 'success',
+  ok: 'success',
+  pass: 'success',
+  complete: 'success',
+  finish: 'success',
+  online: 'success',
+  active: 'success',
+  enable: 'success',
+  published: 'success',
+  open: 'success',
+  正常: 'success',
+  成功: 'success',
+  完成: 'success',
+  通过: 'success',
+  启用: 'success',
+  在线: 'success',
+  发布: 'success',
+  开启: 'success',
+  已发布: 'success',
+
+  // Error / Red
+  fail: 'error',
+  error: 'error',
+  reject: 'error',
+  stop: 'error',
+  close: 'error',
+  offline: 'error',
+  disable: 'error',
+  banned: 'error',
+  exception: 'error',
+  blocked: 'error',
+  失败: 'error',
+  错误: 'error',
+  拒绝: 'error',
+  停止: 'error',
+  关闭: 'error',
+  离线: 'error',
+  禁用: 'error',
+  异常: 'error',
+  封禁: 'error',
+
+  // Processing / Blue
+  process: 'processing',
+  running: 'processing',
+  pending: 'processing',
+  waiting: 'processing',
+  loading: 'processing',
+  init: 'processing',
+  doing: 'processing',
+  进行中: 'processing',
+  处理中: 'processing',
+  等待: 'processing',
+  加载: 'processing',
+  初始化: 'processing',
+  启动: 'processing',
+  运行中: 'processing',
+
+  // Warning / Warning
+  warn: 'warning',
+  timeout: 'warning',
+  expire: 'warning',
+  risk: 'warning',
+  abnormal: 'warning',
+  警告: 'warning',
+  超时: 'warning',
+  过期: 'warning',
+  风险: 'warning',
+
+  // Default
+  default: 'default',
+  normal: 'default',
+  unknown: 'default',
+  默认: 'default',
+  未知: 'default',
+};
+
+// Helper to determine status color based on text or key
+const inferStatusColor = (key: string | number, text: string): string => {
+  const normalizedKey = String(key).toLowerCase();
+  const normalizedText = String(text).toLowerCase();
+
+  // 1. Try to match key first
+  for (const keyword in SEMANTIC_STATUS_MAP) {
+    if (normalizedKey.includes(keyword)) {
+      return SEMANTIC_STATUS_MAP[keyword];
+    }
+  }
+
+  // 2. Try to match text
+  for (const keyword in SEMANTIC_STATUS_MAP) {
+    if (normalizedText.includes(keyword)) {
+      return SEMANTIC_STATUS_MAP[keyword];
+    }
+  }
+
+  // 3. Fallback to deterministic hash color
+  // Use a simple hash of the key to pick a color from PRESET_COLORS
+  let hash = 0;
+  for (let i = 0; i < normalizedKey.length; i++) {
+    hash = normalizedKey.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const index = Math.abs(hash) % PRESET_COLORS.length;
+  return PRESET_COLORS[index];
+};
+
+export const useStatusColumns = <T, ValueType>(
+  columns?: ProColumns<T, ValueType>[],
+) => {
+  return useMemo(() => {
+    return columns?.map((col) => {
+      // If user has custom render, we respect it and do nothing
+      if (col.render) {
+        return col;
+      }
+
+      // If no valueEnum, we do nothing
+      if (!col.valueEnum) {
+        return col;
+      }
+
+      // Check fieldProps for explicit status render mode: 'tag' | 'badge' | 'none' | undefined (auto)
+      // We use fieldProps because it's a standard place to put custom column props without TS errors
+      const statusRender = (col.fieldProps as any)?.statusRender;
+    
+
+      if (statusRender === 'none') {
+        return col;
+      }
+
+      // We wrap the render function to support Tag and Badge automatically based on valueEnum properties
+      return {
+        ...col,
+        render: (
+          dom: React.ReactNode,
+          entity: T,
+          index: number,
+          action: any,
+          schema: any,
+        ) => {
+          const valueEnum = schema?.valueEnum;
+          if (!valueEnum) {
+            return dom;
+          }
+
+          // Get raw value
+          const dataIndex = col.dataIndex || col.key;
+          // dataIndex can be array or string
+          const rawValue =
+            typeof dataIndex === 'string' || Array.isArray(dataIndex)
+              ? get(entity, dataIndex as any)
+              : undefined;
+
+          if (rawValue === undefined || rawValue === null) {
+            return dom;
+          }
+
+          // valueEnum can be Map or Object
+          let enumItem = null;
+          if (valueEnum instanceof Map) {
+            enumItem = valueEnum.get(rawValue);
+            // Try string key if number key fails, or vice versa
+            if (!enumItem && typeof rawValue === 'number') {
+              enumItem = valueEnum.get(String(rawValue));
+            } else if (!enumItem && typeof rawValue === 'string') {
+              enumItem = valueEnum.get(Number(rawValue));
+            }
+          } else {
+            enumItem = valueEnum[rawValue as string];
+          }
+
+          if (!enumItem) {
+            return dom;
+          }
+
+          // 1. If color is present, render Tag (unless forced to badge)
+          if (enumItem.color && statusRender !== 'badge') {
+            return (
+              <Tag color={enumItem.color} style={{ margin: 0 }}>
+                {enumItem.text || dom}
+              </Tag>
+            );
+          }
+
+          // 2. If status is present, render Badge (unless forced to tag)
+          // ProTable usually handles this, but since we overrode render, we must handle it
+          if (enumItem.status && statusRender !== 'tag') {
+            const status = String(enumItem.status).toLowerCase();
+            return <Badge status={status as any} text={enumItem.text || dom} />;
+          }
+
+          // 3. If neither is present, try to infer color automatically
+          // Only infer if it's NOT explicitly set to null/false (in case user wants plain text)
+          if (enumItem.status === null || enumItem.status === false) {
+            return dom;
+          }
+          const inferred = inferStatusColor(
+            rawValue,
+            enumItem.text || String(rawValue),
+          );
+
+          // Force Tag mode
+          if (statusRender === 'tag') {
+             // Map semantic status to actual colors for Tag
+            let tagColor = inferred;
+            if (inferred === 'processing') tagColor = 'blue';
+            if (inferred === 'error') tagColor = 'error';
+            if (inferred === 'success') tagColor = 'success';
+            if (inferred === 'warning') tagColor = 'warning';
+            if (inferred === 'default') tagColor = 'default';
+
+            return (
+                <Tag color={tagColor} style={{ margin: 0 }}>
+                  {enumItem.text || dom}
+                </Tag>
+            );
+          }
+
+          // Default / Force Badge mode
+          // If it is a semantic status, use status prop
+          if (['success', 'processing', 'error', 'default', 'warning'].includes(inferred)) {
+            return <Badge status={inferred as any} text={enumItem.text || dom} />;
+          }
+
+          // Otherwise use color prop (for preset colors like 'volcano', 'gold', etc.)
+          return <Badge color={inferred} text={enumItem.text || dom} />;
+        },
+      } as ProColumns<T, ValueType>;
+    });
+  }, [columns]);
+};

package/src/creek-table/hooks/useTableOptions.tsx

@@ -0,0 +1,81 @@
+import { ParamsType, ProTableProps } from '@ant-design/pro-components';
+import { useSafeState } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { DensityIcon } from '../components';
+
+/**
+ * Hook to manage ProTable options logic including density and settings
+ * 
+ * @param options User provided options configuration
+ * @param size User provided size (density)
+ * @returns { finalOptions, tableSize, setTableSize }
+ */
+export const useTableOptions = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(
+  options: ProTableProps<T, U, ValueType>['options'],
+  size?: ProTableProps<T, U, ValueType>['size'],
+  optionsRender?: ProTableProps<T, U, ValueType>['optionsRender']
+): {
+  finalOptions: ProTableProps<T, U, ValueType>['options'];
+  tableSize: ProTableProps<T, U, ValueType>['size'];
+  setTableSize: React.Dispatch<React.SetStateAction<ProTableProps<T, U, ValueType>['size']>>;
+  showDensity: boolean;
+  finalOptionsRender: ProTableProps<T, U, ValueType>['optionsRender'];
+} => {
+  // Manage table density state, defaulting to 'small' (compact)
+  // Supports controlled mode and switching
+  const [tableSize, setTableSize] = useSafeState<ProTableProps<T, U, ValueType>['size']>(size || 'small');
+
+  // Sync internal state if size prop changes
+  useEffect(() => {
+    if (size) {
+      setTableSize(size);
+    }
+  }, [size]);
+
+  // Use ref to store latest tableSize to avoid stale closures in optionsRender
+  const tableSizeRef = useRef(tableSize);
+  tableSizeRef.current = tableSize;
+
+  // Merge default options with user provided options
+  // Default: show density and setting, hide reload and fullScreen
+  const showDensity = options !== false && (options?.density !== false);
+
+  const finalOptions: ProTableProps<T, U, ValueType>['options'] =
+    options === false
+      ? false
+      : {
+          setting: true,
+          reload: false,
+          fullScreen: false,
+          ...options,
+          density: false,
+        };
+
+  const finalOptionsRender: ProTableProps<T, U, ValueType>['optionsRender'] = (opts, defaultDom) => {
+    const doms = [...defaultDom];
+    const currentTableSize = tableSizeRef.current;
+    
+    if (showDensity) {
+      doms.unshift(
+        <DensityIcon 
+          key="density" 
+          tableSize={currentTableSize} 
+          setTableSize={setTableSize} 
+        />
+      );
+    }
+
+    if (optionsRender) {
+      return optionsRender(opts, doms);
+    }
+    return doms;
+  };
+
+  return {
+    finalOptions,
+    tableSize,
+    setTableSize,
+    showDensity,
+    finalOptionsRender,
+  };
+};