@canlooks/can-ui 0.0.1

package/dist/cjs/utils/curd.d.ts

@@ -0,0 +1,23 @@
+import { CurdColumn, CurdFormItemProps, CurdProps } from '../components/curd';
+import { ColumnType, RowType } from '../components/dataGrid';
+import { Id, Obj } from '../../types';
+/**
+ * 将Curd的Columns转换为FilterItem
+ * @param columns
+ */
+export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)[]): CurdFormItemProps[] | undefined;
+/**
+ * 将Curd的Columns转换为FormItem
+ * @param columns
+ */
+export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): CurdFormItemProps[] | undefined;
+/**
+ * 统一处理Columns
+ */
+export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, V>, 'columns' | 'columnConfigurable'>): {
+    orderedColumns: any[];
+    actualColumns: (symbol | ColumnType<R>)[];
+    innerVisible: import("react").MutableRefObject<Id[]>;
+    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
+    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
+};

package/dist/cjs/utils/curd.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnsToFilterItem = columnsToFilterItem;
+exports.columnsToFormItem = columnsToFormItem;
+exports.useCurdColumns = useCurdColumns;
+const react_1 = require("react");
+const dataGrid_1 = require("./dataGrid");
+const hooks_1 = require("./hooks");
+const utils_1 = require("./utils");
+/**
+ * 将Curd的Columns转换为FilterItem
+ * @param columns
+ */
+function columnsToFilterItem(columns) {
+    return columnsTransfer(columns, 'filter');
+}
+/**
+ * 将Curd的Columns转换为FormItem
+ * @param columns
+ */
+function columnsToFormItem(columns, row) {
+    return columnsTransfer(columns, 'form', row);
+}
+function columnsTransfer(columns, type = 'filter', row) {
+    return columns
+        ?.flatMap(col => {
+        if (typeof col === 'symbol') {
+            return [];
+        }
+        let item = typeof col[type] === 'function' ? col[type](row) : col[type];
+        if ((0, utils_1.isUnset)(item)) {
+            return [];
+        }
+        const key = (0, dataGrid_1.setDefaultColumnKey)(col);
+        if ((0, react_1.isValidElement)(item)) {
+            return item.key ? item : (0, react_1.cloneElement)(item, { key });
+        }
+        if (item === true) {
+            // filter为true当作空对象处理
+            item = {};
+        }
+        if (typeof item === 'object') {
+            return {
+                field: col.field,
+                label: col.title,
+                ...item,
+                ...type === 'form' && {
+                    children: item.children ?? (row
+                        ? (0, dataGrid_1.renderCell)(col, row)
+                        : null)
+                },
+                key
+            };
+        }
+        // filter为ReactNode直接原样返回
+        return item;
+    })
+        .sort((a, b) => (a.order || 0) - (b.order || 0));
+}
+/**
+ * 统一处理Columns
+ */
+function useCurdColumns({ columns, columnConfigurable }) {
+    const columnMapByKey = (0, dataGrid_1.useColumnMap)(columns);
+    if (typeof columnConfigurable !== 'object') {
+        columnConfigurable = {};
+    }
+    let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
+    if (!defaultVisible || !defaultOrder) {
+        const defaultKeys = columns?.flatMap((col) => col._key ?? []) || [];
+        defaultVisible ||= defaultKeys;
+        defaultOrder ||= defaultKeys;
+    }
+    const [innerOrder, setInnerOrder] = (0, hooks_1.useControlled)(defaultOrder, order, onOrderChange);
+    const [innerVisible, setInnerVisible] = (0, hooks_1.useControlled)(defaultVisible, visible, onVisibleChange);
+    const symbolBoundToNext = (0, react_1.useRef)(new WeakMap());
+    // 移除symbol，并将其与后一列绑定
+    const pureColumns = (0, react_1.useMemo)(() => {
+        const ret = [];
+        let symbolArr = [];
+        columns?.forEach(col => {
+            if (typeof col === 'symbol') {
+                symbolArr.push(col);
+                return;
+            }
+            if (col.hideInTable) {
+                return;
+            }
+            ret.push(col);
+            if (symbolArr.length) {
+                symbolBoundToNext.current.set(col, symbolArr);
+                symbolArr = [];
+            }
+        });
+        return ret;
+    }, [columns]);
+    // 只排序不筛选，用于设置项
+    const orderedColumns = (0, react_1.useMemo)(() => {
+        if (!innerOrder.current.length) {
+            return pureColumns;
+        }
+        const set = new Set(pureColumns);
+        return [
+            ...innerOrder.current.flatMap(k => {
+                const col = columnMapByKey.get(k);
+                if (col) {
+                    set.delete(col);
+                    return col;
+                }
+                return [];
+            }),
+            ...set
+        ];
+    }, [innerOrder.current, pureColumns]);
+    const visibleSet = (0, react_1.useMemo)(() => {
+        return new Set(innerVisible.current);
+    }, [innerVisible.current]);
+    // 筛选表格上可见的列，并将symbol回填
+    const actualColumns = (0, react_1.useMemo)(() => {
+        return orderedColumns.flatMap(col => {
+            if (!(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key)) {
+                const symbolArr = symbolBoundToNext.current.get(col) || [];
+                // 移除DataGrid不需要的属性
+                const { filter, form, ...c } = col;
+                return [...symbolArr, { ...c }];
+            }
+            return [];
+        });
+    }, [innerVisible.current, orderedColumns]);
+    return { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder };
+}

package/dist/cjs/utils/dataGrid.d.ts

@@ -0,0 +1,29 @@
+import { Id, Obj } from '../../types';
+import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
+/**
+ * 为列添加key
+ * @param col
+ */
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>): string | number | undefined;
+/**
+ * 索引列
+ * @param columns
+ */
+export declare function useColumnMap<C extends ColumnType<any>>(columns?: (C | symbol)[]): Map<Id, C>;
+/**
+ * 统一处理DataGrid列
+ * @param param0
+ */
+export declare function useDataGridColumns<R extends RowType, V extends Id = Id>({ columns, selectable, childrenKey }: Pick<DataGridProps<R, V>, 'columns' | 'selectable' | 'childrenKey'>): {
+    completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    columnMapByKey: Map<Id, ColumnType<R>>;
+    flattedColumns: (symbol | ColumnType<R>)[];
+};
+/**
+ * 渲染单元格内容
+ * @param column
+ * @param row
+ * @param rowIndex
+ * @param rows
+ */
+export declare function renderCell<R extends RowType>({ render, field }: Pick<ColumnType<R>, 'render' | 'field'>, row: R, rowIndex?: number, rows?: R[]): any;

package/dist/cjs/utils/dataGrid.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDefaultColumnKey = setDefaultColumnKey;
+exports.useColumnMap = useColumnMap;
+exports.useDataGridColumns = useDataGridColumns;
+exports.renderCell = renderCell;
+const react_1 = require("react");
+const dataGrid_1 = require("../components/dataGrid");
+const form_1 = require("./form");
+const utils_1 = require("./utils");
+/**
+ * 为列添加key
+ * @param col
+ */
+function setDefaultColumnKey(col) {
+    return col._key ??= col.key ?? (col.field ? (0, form_1.stringifyField)(col.field) : void 0);
+}
+/**
+ * 索引列
+ * @param columns
+ */
+function useColumnMap(columns) {
+    return (0, react_1.useMemo)(() => {
+        const map = new Map();
+        columns?.forEach(col => {
+            if (typeof col !== 'symbol') {
+                const _key = setDefaultColumnKey(col);
+                !(0, utils_1.isUnset)(_key) && map.set(_key, col);
+            }
+        });
+        return map;
+    }, [columns]);
+}
+/**
+ * 统一处理DataGrid列
+ * @param param0
+ */
+function useDataGridColumns({ columns, selectable, childrenKey }) {
+    // 补全选择列与展开列
+    const completedColumns = (0, react_1.useMemo)(() => {
+        if (!columns) {
+            return;
+        }
+        let ret = columns;
+        if (selectable && !columns.includes(dataGrid_1.DataGrid.SELECT_COLUMN)) {
+            ret = [dataGrid_1.DataGrid.SELECT_COLUMN, ...ret];
+        }
+        if (childrenKey && !columns.includes(dataGrid_1.DataGrid.EXPAND_COLUMN)) {
+            ret = [dataGrid_1.DataGrid.EXPAND_COLUMN, ...ret];
+        }
+        return ret;
+    }, [columns, selectable, childrenKey]);
+    const flattedColumns = (0, react_1.useMemo)(() => {
+        const flatted = [];
+        const fn = (arr) => {
+            arr?.forEach(col => {
+                if (typeof col !== 'symbol' && col.children?.length) {
+                    fn(col.children);
+                }
+                else {
+                    flatted.push(col);
+                }
+            });
+        };
+        fn(completedColumns);
+        return flatted;
+    }, [completedColumns]);
+    const columnMapByKey = useColumnMap(flattedColumns);
+    return { completedColumns, columnMapByKey, flattedColumns };
+}
+/**
+ * 渲染单元格内容
+ * @param column
+ * @param row
+ * @param rowIndex
+ * @param rows
+ */
+function renderCell({ render, field }, row, rowIndex, rows) {
+    if (render) {
+        return render(row, rowIndex, rows);
+    }
+    if (typeof field === 'undefined') {
+        return null;
+    }
+    const data = (0, utils_1.queryDeep)(row, field);
+    if (typeof data === 'object' || typeof data === 'function' || typeof data === 'symbol') {
+        return null;
+    }
+    return data;
+}

package/dist/cjs/utils/dnd.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes } from 'react';
+import { DragEndEvent } from '@dnd-kit/core';
+import { Obj } from '../../types';
+/**
+ * 默认提供给@dnd-kit的sensors属性
+ */
+export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+/**
+ * <DndContext>组件通用的onDragEnd方法
+ * @param e
+ * @param prevState 传入需要排序的数组
+ */
+export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
+export type DraggableOptions<T extends Element = Element> = {
+    /** 按下后经过一段时间才触发拖拽事件，单位ms */
+    delay?: number;
+    /** 拖拽一段距离后才触发拖拽事件，单位px */
+    distance?: number;
+    disabled?: boolean;
+    onDragStart?(e: React.PointerEvent<T>): void;
+    onDrag?(info: DragInfo, e: PointerEvent): void;
+    onDragEnd?(info: DragEndInfo): void;
+    onDragCancel?(info: DragEndInfo): void;
+    /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用 */
+    disableNativeTouchMove?: boolean;
+    /** 托管原有的onPointerDown、onTouchStart、onClick事件 */
+    onPointerDown?(e: React.PointerEvent<T>): void;
+    onTouchStart?(e: React.TouchEvent<T>): void;
+    onClick?(e: React.MouseEvent<T>): void;
+    /** 若拖拽节点受zoom样式的影响，需要传入zoom值 */
+    zoom?: number;
+};
+export type DragInfo = {
+    /** 开始位置 */
+    startX: number;
+    startY: number;
+    /** 当前位置 */
+    currentX: number;
+    currentY: number;
+    /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
+    deltaX: number;
+    deltaY: number;
+};
+export interface DragEndInfo extends DragInfo {
+    /** 从按下到抬起经过的时长（ms） */
+    duration: number;
+    /** 拖拽速度（px/ms） */
+    speedX: number;
+    speedY: number;
+}
+export type HandleProps<T extends Element> = Required<Pick<HTMLAttributes<T>, 'onPointerDown' | 'onTouchStart' | 'onClick' | 'onDragStart'>>;
+export declare function useDraggableHandle<T extends Element>(options?: DraggableOptions<T>): HandleProps<T>;

package/dist/cjs/utils/dnd.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndSensors = useDndSensors;
+exports.onDndDragEnd = onDndDragEnd;
+exports.useDraggableHandle = useDraggableHandle;
+const react_1 = require("react");
+const hooks_1 = require("./hooks");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const app_1 = require("../components/app");
+/**
+ * 默认提供给@dnd-kit的sensors属性
+ */
+function useDndSensors() {
+    return (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
+}
+/**
+ * <DndContext>组件通用的onDragEnd方法
+ * @param e
+ * @param prevState 传入需要排序的数组
+ */
+function onDndDragEnd(e, prevState, primaryKey = 'id') {
+    const { active, over } = e;
+    if (!over || active.id === over.id) {
+        // 并未产生顺序的改变，返回undefined
+        return;
+    }
+    const oldIndex = prevState.findIndex(v => v[primaryKey] === active.id);
+    const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
+    return (0, sortable_1.arrayMove)(prevState, oldIndex, newIndex);
+}
+function useDraggableHandle(options = {}) {
+    const { zoom } = (0, app_1.useAppContext)();
+    options.zoom ||= zoom;
+    const syncOptions = (0, hooks_1.useSync)(options);
+    const preventDefaultCallback = (0, react_1.useRef)();
+    const onTouchStart = (0, react_1.useCallback)(() => {
+        if (syncOptions.current.disabled || !syncOptions.current.disableNativeTouchMove) {
+            return;
+        }
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+    }, []);
+    const startTime = (0, react_1.useRef)(0);
+    const startPosition = (0, react_1.useRef)([0, 0]);
+    const delay = (0, react_1.useRef)();
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (syncOptions.current.disabled) {
+            return;
+        }
+        isDragged.current = false;
+        const dragStart = () => {
+            startTime.current = Date.now();
+            startPosition.current = [e.clientX, e.clientY];
+            syncOptions.current.onDragStart?.(e);
+        };
+        if (syncOptions.current.delay) {
+            delay.current = setTimeout(() => {
+                delay.current = void 0;
+                dragStart();
+            }, syncOptions.current.delay);
+        }
+        else {
+            dragStart();
+        }
+        addEventListener('pointermove', onPointerMove);
+        addEventListener('pointerup', onPointerUp);
+        addEventListener('pointercancel', onPointerCancel);
+    }, []);
+    const buildDragInfo = ({ clientX, clientY }) => {
+        const [startX, startY] = startPosition.current;
+        const deltaX = (clientX - startX) / (syncOptions.current.zoom || 1);
+        const deltaY = (clientY - startY) / (syncOptions.current.zoom || 1);
+        return {
+            startX, startY,
+            currentX: clientX, currentY: clientY,
+            deltaX, deltaY
+        };
+    };
+    const onPointerMove = (e) => {
+        e.preventDefault();
+        const dragInfo = buildDragInfo(e);
+        const absDeltaX = Math.abs(dragInfo.deltaX);
+        const absDeltaY = Math.abs(dragInfo.deltaY);
+        if (delay.current) {
+            // 延迟尚未结束，但偏移量过大，取消拖拽
+            (absDeltaX > 5 || absDeltaY > 5) && onPointerCancel(e);
+            return;
+        }
+        const distance = syncOptions.current.distance || 0;
+        if (absDeltaX < distance && absDeltaY < distance) {
+            // 拖拽距离未达到起步距离
+            return;
+        }
+        isDragged.current = true;
+        syncOptions.current.onDrag?.(dragInfo, e);
+    };
+    const removeListener = () => {
+        delay.current && clearTimeout(delay.current);
+        delay.current = void 0;
+        if (preventDefaultCallback.current) {
+            removeEventListener('touchmove', preventDefaultCallback.current);
+            preventDefaultCallback.current = void 0;
+        }
+        removeEventListener('pointermove', onPointerMove);
+        removeEventListener('pointerup', onPointerUp);
+        removeEventListener('pointercancel', onPointerCancel);
+    };
+    const buildDragEndInfo = (e) => {
+        const dragInfo = buildDragInfo(e);
+        const duration = Date.now() - startTime.current;
+        return {
+            ...dragInfo,
+            duration,
+            speedX: Math.abs(dragInfo.deltaX / duration),
+            speedY: Math.abs(dragInfo.deltaY / duration)
+        };
+    };
+    const onPointerUp = (e) => {
+        removeListener();
+        syncOptions.current.onDragEnd?.(buildDragEndInfo(e));
+    };
+    const onPointerCancel = (e) => {
+        removeListener();
+        const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
+        callback?.(buildDragEndInfo(e));
+    };
+    (0, react_1.useEffect)(() => removeListener, []);
+    const isDragged = (0, react_1.useRef)(false);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (isDragged.current) {
+            // 已经触发了拖拽，避免触发点击事件
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            syncOptions.current.onClick?.(e);
+        }
+    }, []);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    return { onTouchStart, onPointerDown, onClick, onDragStart };
+}

package/dist/cjs/utils/form.d.ts

@@ -0,0 +1,13 @@
+import { Id } from '../../types';
+/**
+ * 从onChange回调中获取表单字段的值
+ * @param e
+ * @param prevValue 传入当前的值作为参考
+ */
+export declare function getValueOnChange(e: any, prevValue?: any): any;
+export type FieldPath = Id | Id[];
+/**
+ * 将name字段统一转换成字符串方便处理
+ * @param field
+ */
+export declare function stringifyField(field: FieldPath): string;

package/dist/cjs/utils/form.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValueOnChange = getValueOnChange;
+exports.stringifyField = stringifyField;
+/**
+ * 从onChange回调中获取表单字段的值
+ * @param e
+ * @param prevValue 传入当前的值作为参考
+ */
+function getValueOnChange(e, prevValue) {
+    if (typeof e === 'object' && e !== null && typeof e.target === 'object' && e.target !== null) {
+        return typeof prevValue === 'boolean' ? e.target.checked : e.target.value;
+    }
+    return e;
+}
+/**
+ * 将name字段统一转换成字符串方便处理
+ * @param field
+ */
+function stringifyField(field) {
+    return Array.isArray(field) ? field.join('.') : field.toString();
+}

package/dist/cjs/utils/hooks.d.ts

@@ -0,0 +1,62 @@
+import { MutableRefObject, Dispatch, SetStateAction } from 'react';
+import { Id } from '../../types';
+/**
+ * 获取渲染前的值
+ * @param value
+ */
+export declare function usePrev<T>(value: T): T | undefined;
+/**
+ * 将某个值使用ref同步，主要用于对付组件的闭包问题
+ * @param value
+ */
+export declare function useSync<T>(value: T): MutableRefObject<T>;
+/**
+ * 同步的状态，state包裹在ref内，主要用于对付组件的闭包问题
+ * @param initialState
+ */
+export declare function useSyncState<T>(initialState: T | (() => T)): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useSyncState<T = undefined>(): [MutableRefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
+/**
+ * 强制更新组件
+ */
+export declare function useForceUpdate(): () => void;
+/**
+ * 派生状态
+ * @param state 原始状态
+ * @param deps 依赖，类似useMemo的第二个参数，当依赖改变时会更新派生状态，若无该参数，则状态本身将会作为依赖
+ */
+export declare function useDerivedState<T>(referredState: (prevState: T | undefined) => T, deps: any[]): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useDerivedState<T>(referredState: T, deps?: any[]): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
+/**
+ * 组件卸载后得到{current: true}
+ * @returns
+ */
+export declare function useUnmounted(): MutableRefObject<boolean>;
+/**
+ * 处理受控组件的外部属性与内部属性
+ * @param defaultValue
+ * @param value
+ * @param onChange
+ */
+export declare function useControlled<T = any>(defaultValue: T, value?: T, onChange?: (value: T) => void): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useControlled<T = any>(defaultValue?: T, value?: T, onChange?: (value: T) => void): [MutableRefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
+/**
+ * 控制选中状态的通用方法
+ * @param param0
+ */
+export declare function useControlledSelect<T extends Id | Id[]>(params: {
+    disabled?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    defaultValue?: T;
+    value?: T;
+    onChange?: (value: T) => void;
+}): [MutableRefObject<T>, (value: T) => void, Dispatch<SetStateAction<T>>];
+/**
+ * 将某个方法使用loading包裹
+ */
+export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | Promise<R>, referredLoading?: boolean): [
+    MutableRefObject<boolean>,
+    (...args: A) => Promise<R>,
+    Dispatch<SetStateAction<boolean>>
+];