@creekjs/web-components 1.0.0

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

@@ -0,0 +1,90 @@
+import { ParamsType, ProColumnType } from '@ant-design/pro-components';
+import { useMemoizedFn, useSafeState } from 'ahooks';
+import { useMemo } from 'react';
+
+import { CreekSearchValueSelector, useSearchContext } from '../../creek-search';
+import { CreekTableProps } from '../type';
+
+interface UseAutoAddFilterToColumnsProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> {
+  columns: CreekTableProps<T, U, ValueType>['columns'];
+  autoAddFilterForColumn?: boolean;
+}
+
+interface UseAutoAddFilterToColumnsReturn<T extends ParamsType, U extends ParamsType, ValueType> {
+  columnsWithFilter: CreekTableProps<T, U, ValueType>['columns'];
+  getColumnKey: (column: ProColumnType<T, U>) => string;
+}
+
+export const useAutoAddFilterToColumns = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>({
+  columns,
+  autoAddFilterForColumn,
+}: UseAutoAddFilterToColumnsProps<T, U, ValueType>): UseAutoAddFilterToColumnsReturn<T, U, ValueType> => {
+  const { hasOptions, setSelectedColumn, filters } = useSearchContext();
+
+  // 管理每列的下拉框状态
+  const [filterOpenMap, setFilterOpenMap] = useSafeState<Record<string, boolean>>({});
+
+  // 获取列的唯一标识
+  const getColumnKey = useMemoizedFn((column: ProColumnType<T, U>) => {
+    return column.dataIndex as string;
+  });
+
+  // 控制特定列的下拉框开关
+  const setColumnFilterOpen = useMemoizedFn((columnKey: string, open: boolean) => {
+    setFilterOpenMap((prev) => ({
+      ...prev,
+      [columnKey]: open,
+    }));
+  });
+
+  // 关闭特定列的下拉框
+  const closeColumnFilter = useMemoizedFn((columnKey: string) => {
+    setFilterOpenMap((prev) => ({
+      ...prev,
+      [columnKey]: false,
+    }));
+  });
+
+  // 自动为列添加筛选功能
+  const autoAddFilterToColumns = useMemoizedFn((columns: CreekTableProps<T, U, ValueType>['columns'] = []) => {
+    return columns.map((column) => {
+      if (hasOptions(column)) {
+        const newColumn = { ...column };
+        const columnKey = getColumnKey(newColumn as ProColumnType<T, U>);
+
+        return {
+          ...newColumn,
+          filters: newColumn?.filters || true,
+          onFilter: newColumn?.onFilter || false,
+          filtered: filters.map((item) => item.dataIndex).includes(columnKey),
+          filterDropdown: (
+            <CreekSearchValueSelector
+              onConfirm={() => {
+                // 点击确认时关闭当前列的下拉框
+                closeColumnFilter(columnKey);
+              }}
+            />
+          ),
+          filterDropdownProps: {
+            open: filterOpenMap[columnKey] || false,
+            onOpenChange: (open: boolean) => {
+              if (open) {
+                const selectedColumn = columns.find((item) => item.dataIndex === columnKey);
+                setSelectedColumn(selectedColumn);
+              }
+              setColumnFilterOpen(columnKey, open);
+            },
+          },
+        };
+      }
+      return column;
+    });
+  });
+
+  const columnsWithFilter = useMemo(() => (autoAddFilterForColumn ? autoAddFilterToColumns(columns) : columns), [columns, filters, autoAddFilterToColumns, filterOpenMap]);
+
+  return {
+    columnsWithFilter,
+    getColumnKey,
+  };
+};

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

@@ -0,0 +1,64 @@
+import { useDebounceFn, useEventListener, useLatest } from 'ahooks';
+import { useEffect, useState } from 'react';
+
+type ElementRef = React.RefObject<HTMLElement>;
+
+interface Position {
+  left: number;
+  width: number;
+}
+
+interface Distance {
+  x: number;
+}
+
+const getElementCenter = (element: HTMLElement): Position => {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.left,
+    width: rect.width,
+  };
+};
+
+const calculateDistance = (pos1: Position, pos2: Position): Distance => {
+  const x = Math.abs(pos2.left - pos1.left - pos1.width);
+  return { x };
+};
+
+export const useElementDistance = (element1Ref: ElementRef, element2Ref: ElementRef): Distance | null => {
+  const [distance, setDistance] = useState<Distance | null>(null);
+  const distanceRef = useLatest(distance);
+
+  const { run: calculateAndUpdateDistance } = useDebounceFn(
+    () => {
+      if (!element1Ref.current || !element2Ref.current) {
+        if (distanceRef.current !== null) {
+          setDistance(null);
+        }
+        return;
+      }
+
+      const pos1 = getElementCenter(element1Ref.current);
+      const pos2 = getElementCenter(element2Ref.current);
+      const newDistance = calculateDistance(pos1, pos2);
+
+      // 只有当距离发生变化时才更新，避免不必要的重渲染
+      if (!distanceRef.current || distanceRef.current.x !== newDistance.x) {
+        setDistance(newDistance);
+      }
+    },
+    {
+      wait: 100,
+    },
+  );
+
+  // 初始计算
+  useEffect(() => {
+    calculateAndUpdateDistance();
+  }, [element1Ref, element2Ref]);
+
+  // 监听 window 的 resize 和 scroll 事件
+  useEventListener('resize', calculateAndUpdateDistance, { target: window });
+
+  return distance;
+};

package/src/creek-table/index.tsx

@@ -0,0 +1,16 @@
+import { ParamsType } from '@ant-design/pro-components';
+
+import { CreekSearchProvider } from '../creek-search';
+
+import { SearchProTable } from './SearchTable';
+import { CreekTableProps } from './type';
+
+export const CreekTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
+  const { columns = [],  onSubmit, ...restProps } = props;
+
+  return (
+    <CreekSearchProvider columns={columns} onSubmit={onSubmit}>
+      <SearchProTable columns={columns} {...restProps} />
+    </CreekSearchProvider>
+  );
+};

package/src/creek-table/toolBarRender.tsx

@@ -0,0 +1,28 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from 'antd';
+
+export const toolBarRender = (options: { shouldCollapse: boolean; restProps: any }) => {
+  const { shouldCollapse, restProps } = options;
+
+  const baseActions = restProps.toolBarRender?.() || [];
+  if (!shouldCollapse || baseActions.length <= 1) {
+    return baseActions;
+  }
+
+  const [first, ...rest] = baseActions;
+
+  return [
+    first,
+    <Dropdown
+      key="more"
+      menu={{
+        items: rest.map((item: React.ReactDOM, index: number) => ({ key: index, label: item })),
+      }}
+      trigger={['click']}
+    >
+      <Button>
+        更多 <DownOutlined />
+      </Button>
+    </Dropdown>,
+  ];
+};

package/src/creek-table/type.ts

@@ -0,0 +1,21 @@
+import { ParamsType, ProTableProps } from '@ant-design/pro-components';
+
+export type OptionRenderCustom = {
+  text?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+};
+
+export type CreekTableProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = Omit<ProTableProps<T, U, ValueType>, 'search' | 'options'> & {
+  pageFixedBottom?: boolean; // 是否固定分页在底部
+  pageFixedBottomConfig?: {
+    /** 底部保留空间（如固定在底部的元素高度），默认 0 */
+    bottomFix?: number;
+  };
+  options?: ProTableProps<T, U, ValueType>['options'] & {
+    importConfig?: OptionRenderCustom;
+    exportConfig?: OptionRenderCustom;
+  };
+  // 是否自动为列添加筛选功能，默认 true
+  autoAddFilterForColumn?: boolean;
+};

package/src/index.tsx

@@ -0,0 +1,8 @@
+export * from './bg-center';
+export * from './creek-config-provider';
+export * from './creek-icon';
+export * from './creek-layout';
+export * from './creek-loading';
+export * from './creek-search';
+export * from './creek-table';
+

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@creekjs/lint/dist/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}