@canlooks/can-ui 0.0.1

package/dist/esm/utils/curd.js

@@ -0,0 +1,126 @@
+import { cloneElement, isValidElement, useMemo, useRef } from 'react';
+import { renderCell, setDefaultColumnKey, useColumnMap } from './dataGrid';
+import { useControlled } from './hooks';
+import { isUnset } from './utils';
+/**
+ * 将Curd的Columns转换为FilterItem
+ * @param columns
+ */
+export function columnsToFilterItem(columns) {
+    return columnsTransfer(columns, 'filter');
+}
+/**
+ * 将Curd的Columns转换为FormItem
+ * @param columns
+ */
+export 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 (isUnset(item)) {
+            return [];
+        }
+        const key = setDefaultColumnKey(col);
+        if (isValidElement(item)) {
+            return item.key ? item : 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
+                        ? renderCell(col, row)
+                        : null)
+                },
+                key
+            };
+        }
+        // filter为ReactNode直接原样返回
+        return item;
+    })
+        .sort((a, b) => (a.order || 0) - (b.order || 0));
+}
+/**
+ * 统一处理Columns
+ */
+export function useCurdColumns({ columns, columnConfigurable }) {
+    const columnMapByKey = 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] = useControlled(defaultOrder, order, onOrderChange);
+    const [innerVisible, setInnerVisible] = useControlled(defaultVisible, visible, onVisibleChange);
+    const symbolBoundToNext = useRef(new WeakMap());
+    // 移除symbol，并将其与后一列绑定
+    const pureColumns = 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 = 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 = useMemo(() => {
+        return new Set(innerVisible.current);
+    }, [innerVisible.current]);
+    // 筛选表格上可见的列，并将symbol回填
+    const actualColumns = useMemo(() => {
+        return orderedColumns.flatMap(col => {
+            if (!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/esm/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/esm/utils/dataGrid.js

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { DataGrid } from '../components/dataGrid';
+import { stringifyField } from './form';
+import { isUnset, queryDeep } from './utils';
+/**
+ * 为列添加key
+ * @param col
+ */
+export function setDefaultColumnKey(col) {
+    return col._key ??= col.key ?? (col.field ? stringifyField(col.field) : void 0);
+}
+/**
+ * 索引列
+ * @param columns
+ */
+export function useColumnMap(columns) {
+    return useMemo(() => {
+        const map = new Map();
+        columns?.forEach(col => {
+            if (typeof col !== 'symbol') {
+                const _key = setDefaultColumnKey(col);
+                !isUnset(_key) && map.set(_key, col);
+            }
+        });
+        return map;
+    }, [columns]);
+}
+/**
+ * 统一处理DataGrid列
+ * @param param0
+ */
+export function useDataGridColumns({ columns, selectable, childrenKey }) {
+    // 补全选择列与展开列
+    const completedColumns = useMemo(() => {
+        if (!columns) {
+            return;
+        }
+        let ret = columns;
+        if (selectable && !columns.includes(DataGrid.SELECT_COLUMN)) {
+            ret = [DataGrid.SELECT_COLUMN, ...ret];
+        }
+        if (childrenKey && !columns.includes(DataGrid.EXPAND_COLUMN)) {
+            ret = [DataGrid.EXPAND_COLUMN, ...ret];
+        }
+        return ret;
+    }, [columns, selectable, childrenKey]);
+    const flattedColumns = 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
+ */
+export function renderCell({ render, field }, row, rowIndex, rows) {
+    if (render) {
+        return render(row, rowIndex, rows);
+    }
+    if (typeof field === 'undefined') {
+        return null;
+    }
+    const data = queryDeep(row, field);
+    if (typeof data === 'object' || typeof data === 'function' || typeof data === 'symbol') {
+        return null;
+    }
+    return data;
+}

package/dist/esm/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/esm/utils/dnd.js

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useSync } from './hooks';
+import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useAppContext } from '../components/app';
+/**
+ * 默认提供给@dnd-kit的sensors属性
+ */
+export function useDndSensors() {
+    return useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
+}
+/**
+ * <DndContext>组件通用的onDragEnd方法
+ * @param e
+ * @param prevState 传入需要排序的数组
+ */
+export 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 arrayMove(prevState, oldIndex, newIndex);
+}
+export function useDraggableHandle(options = {}) {
+    const { zoom } = useAppContext();
+    options.zoom ||= zoom;
+    const syncOptions = useSync(options);
+    const preventDefaultCallback = useRef();
+    const onTouchStart = useCallback(() => {
+        if (syncOptions.current.disabled || !syncOptions.current.disableNativeTouchMove) {
+            return;
+        }
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+    }, []);
+    const startTime = useRef(0);
+    const startPosition = useRef([0, 0]);
+    const delay = useRef();
+    const onPointerDown = 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));
+    };
+    useEffect(() => removeListener, []);
+    const isDragged = useRef(false);
+    const onClick = useCallback((e) => {
+        if (isDragged.current) {
+            // 已经触发了拖拽，避免触发点击事件
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            syncOptions.current.onClick?.(e);
+        }
+    }, []);
+    const onDragStart = useCallback((e) => {
+        e.preventDefault();
+    }, []);
+    return { onTouchStart, onPointerDown, onClick, onDragStart };
+}

package/dist/esm/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/esm/utils/form.js

@@ -0,0 +1,18 @@
+/**
+ * 从onChange回调中获取表单字段的值
+ * @param e
+ * @param prevValue 传入当前的值作为参考
+ */
+export 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
+ */
+export function stringifyField(field) {
+    return Array.isArray(field) ? field.join('.') : field.toString();
+}

package/dist/esm/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>>
+];

package/dist/esm/utils/hooks.js

@@ -0,0 +1,151 @@
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { isSelected, toArray, isPromise, getPromiseState } from './utils';
+/**
+ * 获取渲染前的值
+ * @param value
+ */
+export function usePrev(value) {
+    const v = useRef();
+    useEffect(() => {
+        v.current = value;
+    });
+    return v.current;
+}
+/**
+ * 将某个值使用ref同步，主要用于对付组件的闭包问题
+ * @param value
+ */
+export function useSync(value) {
+    const v = useRef(value);
+    v.current = value;
+    return v;
+}
+export function useSyncState(initialState) {
+    const [state, setState] = useState(initialState);
+    const synState = useSync(state);
+    return [
+        synState,
+        useCallback(state => {
+            const newState = typeof state === 'function' ? state(synState.current) : state;
+            synState.current !== newState && setState(synState.current = newState);
+        }, [])
+    ];
+}
+/**
+ * 强制更新组件
+ */
+export function useForceUpdate() {
+    const [, setState] = useState();
+    return useCallback(() => {
+        setState(Symbol());
+    }, []);
+}
+export function useDerivedState(referredState, deps) {
+    const derivedState = useRef();
+    const updateState = (state) => {
+        const newState = typeof state === 'function' ? state(derivedState.current) : state;
+        if (derivedState.current !== newState) {
+            derivedState.current = newState;
+            return true;
+        }
+        return false;
+    };
+    useMemo(() => {
+        updateState(referredState);
+    }, deps || [referredState]);
+    const forceUpdate = useForceUpdate();
+    return [
+        derivedState,
+        useCallback((state) => {
+            // updateState()返回true才需要强制更新
+            updateState(state) && forceUpdate();
+        }, [])
+    ];
+}
+/**
+ * 组件卸载后得到{current: true}
+ * @returns
+ */
+export function useUnmounted() {
+    const isUnmounted = useRef(false);
+    useEffect(() => () => {
+        isUnmounted.current = true;
+    }, []);
+    return isUnmounted;
+}
+export function useControlled(defaultValue, value, onChange) {
+    const [state, setState] = useState(defaultValue);
+    const sync = useSync({ value, onChange });
+    const innerState = useSync(typeof value !== 'undefined' ? value : state);
+    return [
+        innerState,
+        useCallback((state) => {
+            const newState = typeof state === 'function' ? state(innerState.current) : state;
+            if (innerState.current !== newState) {
+                typeof sync.current.value === 'undefined' && setState(newState);
+                sync.current.onChange?.(newState);
+            }
+        }, [])
+    ];
+}
+/**
+ * 控制选中状态的通用方法
+ * @param param0
+ */
+export function useControlledSelect(params) {
+    const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
+    const sync = useSync(params);
+    return [
+        innerValue,
+        useCallback(value => {
+            if (sync.current.disabled) {
+                return;
+            }
+            const currentSelected = isSelected(value, innerValue.current);
+            if (sync.current.multiple) {
+                setInnerValue((o) => {
+                    o = toArray(o) || [];
+                    return currentSelected
+                        ? o.filter(v => v !== value)
+                        : [...o, value];
+                });
+            }
+            else {
+                // single
+                if (!currentSelected) {
+                    setInnerValue(value);
+                }
+                else if (sync.current.clearable) {
+                    // 单选模式必须指定clearable才能清空选择
+                    setInnerValue(void 0);
+                }
+            }
+        }, []),
+        setInnerValue
+    ];
+}
+/**
+ * 将某个方法使用loading包裹
+ */
+export function useLoading(fn, referredLoading = false) {
+    const [loading, setLoading] = useDerivedState(referredLoading);
+    const syncFn = useSync(fn);
+    const unmounted = useUnmounted();
+    return [
+        loading,
+        useCallback(async (...args) => {
+            const res = syncFn.current(...args);
+            if (isPromise(res) && await getPromiseState(res) === 'pending') {
+                setLoading(true);
+                try {
+                    return await res;
+                }
+                finally {
+                    !unmounted.current && setLoading(false);
+                }
+            }
+            return res;
+        }, []),
+        setLoading
+    ];
+}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,10 @@
+export * from './bezier';
+export * from './curd';
+export * from './dataGrid';
+export * from './dnd';
+export * from './form';
+export * from './hooks';
+export * from './keyboard';
+export * from './style';
+export * from './tree';
+export * from './utils';