@canlooks/can-ui 0.0.1

package/dist/cjs/utils/hooks.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrev = usePrev;
+exports.useSync = useSync;
+exports.useSyncState = useSyncState;
+exports.useForceUpdate = useForceUpdate;
+exports.useDerivedState = useDerivedState;
+exports.useUnmounted = useUnmounted;
+exports.useControlled = useControlled;
+exports.useControlledSelect = useControlledSelect;
+exports.useLoading = useLoading;
+const react_1 = require("react");
+const utils_1 = require("./utils");
+/**
+ * 获取渲染前的值
+ * @param value
+ */
+function usePrev(value) {
+    const v = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        v.current = value;
+    });
+    return v.current;
+}
+/**
+ * 将某个值使用ref同步，主要用于对付组件的闭包问题
+ * @param value
+ */
+function useSync(value) {
+    const v = (0, react_1.useRef)(value);
+    v.current = value;
+    return v;
+}
+function useSyncState(initialState) {
+    const [state, setState] = (0, react_1.useState)(initialState);
+    const synState = useSync(state);
+    return [
+        synState,
+        (0, react_1.useCallback)(state => {
+            const newState = typeof state === 'function' ? state(synState.current) : state;
+            synState.current !== newState && setState(synState.current = newState);
+        }, [])
+    ];
+}
+/**
+ * 强制更新组件
+ */
+function useForceUpdate() {
+    const [, setState] = (0, react_1.useState)();
+    return (0, react_1.useCallback)(() => {
+        setState(Symbol());
+    }, []);
+}
+function useDerivedState(referredState, deps) {
+    const derivedState = (0, react_1.useRef)();
+    const updateState = (state) => {
+        const newState = typeof state === 'function' ? state(derivedState.current) : state;
+        if (derivedState.current !== newState) {
+            derivedState.current = newState;
+            return true;
+        }
+        return false;
+    };
+    (0, react_1.useMemo)(() => {
+        updateState(referredState);
+    }, deps || [referredState]);
+    const forceUpdate = useForceUpdate();
+    return [
+        derivedState,
+        (0, react_1.useCallback)((state) => {
+            // updateState()返回true才需要强制更新
+            updateState(state) && forceUpdate();
+        }, [])
+    ];
+}
+/**
+ * 组件卸载后得到{current: true}
+ * @returns
+ */
+function useUnmounted() {
+    const isUnmounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => () => {
+        isUnmounted.current = true;
+    }, []);
+    return isUnmounted;
+}
+function useControlled(defaultValue, value, onChange) {
+    const [state, setState] = (0, react_1.useState)(defaultValue);
+    const sync = useSync({ value, onChange });
+    const innerState = useSync(typeof value !== 'undefined' ? value : state);
+    return [
+        innerState,
+        (0, react_1.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
+ */
+function useControlledSelect(params) {
+    const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
+    const sync = useSync(params);
+    return [
+        innerValue,
+        (0, react_1.useCallback)(value => {
+            if (sync.current.disabled) {
+                return;
+            }
+            const currentSelected = (0, utils_1.isSelected)(value, innerValue.current);
+            if (sync.current.multiple) {
+                setInnerValue((o) => {
+                    o = (0, utils_1.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包裹
+ */
+function useLoading(fn, referredLoading = false) {
+    const [loading, setLoading] = useDerivedState(referredLoading);
+    const syncFn = useSync(fn);
+    const unmounted = useUnmounted();
+    return [
+        loading,
+        (0, react_1.useCallback)(async (...args) => {
+            const res = syncFn.current(...args);
+            if ((0, utils_1.isPromise)(res) && await (0, utils_1.getPromiseState)(res) === 'pending') {
+                setLoading(true);
+                try {
+                    return await res;
+                }
+                finally {
+                    !unmounted.current && setLoading(false);
+                }
+            }
+            return res;
+        }, []),
+        setLoading
+    ];
+}

package/dist/cjs/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';

package/dist/cjs/utils/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./bezier"), exports);
+tslib_1.__exportStar(require("./curd"), exports);
+tslib_1.__exportStar(require("./dataGrid"), exports);
+tslib_1.__exportStar(require("./dnd"), exports);
+tslib_1.__exportStar(require("./form"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
+tslib_1.__exportStar(require("./keyboard"), exports);
+tslib_1.__exportStar(require("./style"), exports);
+tslib_1.__exportStar(require("./tree"), exports);
+tslib_1.__exportStar(require("./utils"), exports);

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

@@ -0,0 +1,31 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export type UseKeyboardReturn = {
+    verticalIndex: MutableRefObject<number>;
+    setVerticalIndex: Dispatch<SetStateAction<number>>;
+    horizontalIndex: MutableRefObject<number>;
+    setHorizontalIndex: Dispatch<SetStateAction<number>>;
+};
+export type CallbackInfo = {
+    verticalIndex: number;
+    verticalCount: number;
+    horizontalIndex: number;
+    horizontalCount: number;
+};
+export declare function useKeyboard({ disabled, verticalCount, allowVertical, horizontalCount, allowHorizontal, open, setOpen, onEnter, onKeyDown }: {
+    disabled?: boolean;
+    verticalCount?: number | ((horizontalIndex: number) => number);
+    allowVertical?: boolean;
+    horizontalCount?: number | ((verticalIndex: number) => number);
+    allowHorizontal?: boolean;
+    open?: boolean;
+    setOpen?(open: boolean): void;
+    onEnter?(info: CallbackInfo, e: KeyboardEvent): void;
+    onKeyDown?(info: CallbackInfo, e: KeyboardEvent): void;
+}): UseKeyboardReturn;
+/**
+ * 绑定ESC键，关闭遮罩层
+ */
+export declare function useEscapeClosable({ escapeClosable, close }: {
+    escapeClosable?: boolean;
+    close?(reason: 'escape'): void;
+}, onEscape?: (e: KeyboardEvent) => void): import("react").RefObject<HTMLDivElement>;

package/dist/cjs/utils/keyboard.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboard = useKeyboard;
+exports.useEscapeClosable = useEscapeClosable;
+const react_1 = require("react");
+const hooks_1 = require("./hooks");
+function useKeyboard({ disabled, verticalCount, allowVertical, horizontalCount, allowHorizontal, open, setOpen, onEnter, onKeyDown }) {
+    const [verticalIndex, setVerticalIndex] = (0, hooks_1.useSyncState)(-1);
+    const [horizontalIndex, setHorizontalIndex] = (0, hooks_1.useSyncState)(0);
+    const syncOnKeydown = (0, hooks_1.useSync)(onKeyDown);
+    const syncOnEnter = (0, hooks_1.useSync)(onEnter);
+    const vCount = typeof verticalCount === 'function' ? verticalCount(horizontalIndex.current) : verticalCount || 0;
+    const hCount = typeof horizontalCount === 'function' ? horizontalCount(verticalIndex.current) : horizontalCount || 0;
+    (0, react_1.useEffect)(() => {
+        if (!open || disabled) {
+            return;
+        }
+        const _allowVertical = allowVertical && vCount > 0;
+        const _allowHorizontal = allowHorizontal && hCount > 0;
+        const keydown = (e) => {
+            syncOnKeydown.current?.({
+                verticalCount: vCount,
+                verticalIndex: verticalIndex.current,
+                horizontalCount: hCount,
+                horizontalIndex: horizontalIndex.current
+            }, e);
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Escape') {
+                e.preventDefault();
+            }
+            else if (_allowVertical && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                e.preventDefault();
+            }
+            else if (_allowHorizontal && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+                e.preventDefault();
+            }
+            switch (e.key) {
+                case 'ArrowUp':
+                    _allowVertical && setVerticalIndex(o => o <= 0 ? vCount - 1 : o - 1);
+                    break;
+                case 'ArrowDown':
+                    _allowVertical && setVerticalIndex(o => (o + 1) % vCount);
+                    break;
+                case 'ArrowLeft':
+                    _allowHorizontal && setHorizontalIndex(o => o <= 0 ? hCount - 1 : o - 1);
+                    break;
+                case 'ArrowRight':
+                    _allowHorizontal && setHorizontalIndex(o => (o + 1) % hCount);
+                    break;
+                case 'Enter':
+                    syncOnEnter.current?.({
+                        verticalCount: vCount,
+                        verticalIndex: verticalIndex.current,
+                        horizontalCount: hCount,
+                        horizontalIndex: horizontalIndex.current
+                    }, e);
+                    break;
+                case 'Escape':
+                    setOpen?.(false);
+            }
+        };
+        // setTimeout是为了避免使用回车键打开弹框时，立即触发onEnter事件
+        setTimeout(() => {
+            addEventListener('keydown', keydown);
+        });
+        return () => {
+            removeEventListener('keydown', keydown);
+        };
+    }, [open, disabled, vCount, hCount, allowVertical, allowHorizontal]);
+    return {
+        verticalIndex, setVerticalIndex,
+        horizontalIndex, setHorizontalIndex
+    };
+}
+/**
+ * 绑定ESC键，关闭遮罩层
+ */
+function useEscapeClosable({ escapeClosable, close }, onEscape) {
+    const overlayRef = (0, react_1.useRef)(null);
+    const syncOnEscape = (0, hooks_1.useSync)(onEscape);
+    (0, react_1.useEffect)(() => {
+        if (escapeClosable) {
+            const keydown = (e) => {
+                if (e.key === 'Escape') {
+                    const { nextSibling } = overlayRef.current;
+                    if (!nextSibling || nextSibling.dataset.open !== 'true') {
+                        // 后面无元素，或后一个元素已关闭，才能关闭当前
+                        e.preventDefault();
+                        syncOnEscape.current?.(e);
+                        close?.('escape');
+                    }
+                }
+            };
+            addEventListener('keydown', keydown);
+            return () => {
+                removeEventListener('keydown', keydown);
+            };
+        }
+        return;
+    }, [escapeClosable]);
+    return overlayRef;
+}

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

@@ -0,0 +1,69 @@
+import { Theme } from '../components/app';
+import { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../../types';
+import { StatusType } from '../components/status/status';
+/**
+ * 为类名添加统一前缀，通常为内部使用
+ * @param prefixName
+ */
+export declare function definePrefix(prefixName: string): (...names: string[]) => string;
+/**
+ * 统一管理类名
+ * @param prefixName
+ * @param names
+ */
+export declare function defineClasses<T extends string>(prefixName: string): {
+    root: string;
+};
+export declare function defineClasses<T extends string>(prefixName: string, names: T[]): {
+    [P in T]: string;
+} & {
+    root: string;
+};
+/**
+ * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
+ * @param callback
+ */
+export declare function defineCss<T>(callback: (theme: Theme) => T): () => T;
+/**
+ * 使用css的hook，直接在组件或其他hook中调用，相当于{@link defineCss}的立即执行版本
+ * @param callback
+ * @param deps
+ */
+export declare function useCss<T>(callback: (theme: Theme) => T, deps?: any[]): T;
+/**
+ * 将大多数组件的color属性转换为可用的颜色值
+ * @param colorPropsValue
+ * @param theme
+ */
+export declare function colorTransfer(colorPropsValue: ColorPropsValue, theme: Theme): string;
+/**
+ * 将useCss()与colorTransfer()方法结合封装
+ * @param colorPropsValue
+ */
+export declare function useColor(colorPropsValue: ColorPropsValue): string;
+/**
+ * 点击的波纹效果
+ * @param colorPropsValue
+ */
+export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
+/**
+ * 生成响应式样式
+ * @param callback
+ */
+export declare function responsiveVariables(callback: (key: Breakpoints) => string): string;
+/**
+ * 将响应式的值统一转换为对象格式
+ * @param value
+ */
+export declare function responsiveValue(prop?: undefined): undefined;
+export declare function responsiveValue<T = number>(prop: ResponsiveProp<T>): ResponsiveValue<T>;
+/**
+ * 使用hooks监听响应式值的变化
+ * @param prop
+ */
+export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>): NonNullable<T>;
+/**
+ * 使用状态对应的颜色
+ * @param status
+ */
+export declare function useStatusColor(status?: StatusType): string;

package/dist/cjs/utils/style.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.definePrefix = definePrefix;
+exports.defineClasses = defineClasses;
+exports.defineCss = defineCss;
+exports.useCss = useCss;
+exports.colorTransfer = colorTransfer;
+exports.useColor = useColor;
+exports.useTouchRipple = useTouchRipple;
+exports.responsiveVariables = responsiveVariables;
+exports.responsiveValue = responsiveValue;
+exports.useResponsiveValue = useResponsiveValue;
+exports.useStatusColor = useStatusColor;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const app_1 = require("../components/app");
+const utils_1 = require("./utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+/**
+ * 为类名添加统一前缀，通常为内部使用
+ * @param prefixName
+ */
+function definePrefix(prefixName) {
+    const _prefix = `CanUI-${prefixName}`;
+    return (...names) => {
+        return names.length
+            ? names.map(name => `${_prefix}-${name}`).join(' ')
+            : _prefix;
+    };
+}
+function defineClasses(prefixName, names) {
+    const prefix = definePrefix(prefixName);
+    const ret = { root: prefix() };
+    names?.forEach(name => {
+        ret[name] = prefix((0, utils_1.humpToSegmented)(name));
+    });
+    return ret;
+}
+/**
+ * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
+ * @param callback
+ */
+function defineCss(callback) {
+    return () => {
+        const theme = (0, app_1.useTheme)();
+        return (0, react_1.useMemo)(() => callback(theme), [theme]);
+    };
+}
+/**
+ * 使用css的hook，直接在组件或其他hook中调用，相当于{@link defineCss}的立即执行版本
+ * @param callback
+ * @param deps
+ */
+function useCss(callback, deps) {
+    const theme = (0, app_1.useTheme)();
+    return (0, react_1.useMemo)(() => callback(theme), [...deps || [], theme]);
+}
+/**
+ * 将大多数组件的color属性转换为可用的颜色值
+ * @param colorPropsValue
+ * @param theme
+ */
+function colorTransfer(colorPropsValue, theme) {
+    const { colors, text, divider } = theme;
+    return colors[colorPropsValue]
+        || {
+            text: text.secondary,
+            disabled: text.disabled,
+            placeholder: text.placeholder,
+            inverse: text.inverse,
+            divider
+        }[colorPropsValue]
+        || colorPropsValue;
+}
+/**
+ * 将useCss()与colorTransfer()方法结合封装
+ * @param colorPropsValue
+ */
+function useColor(colorPropsValue) {
+    return useCss(theme => {
+        return colorTransfer(colorPropsValue, theme);
+    }, [colorPropsValue]);
+}
+/**
+ * 点击的波纹效果
+ * @param colorPropsValue
+ */
+function useTouchRipple(colorPropsValue) {
+    const theme = (0, app_1.useTheme)();
+    const outlineColor = (0, color_1.default)(useColor(colorPropsValue)).alpha(.6).string();
+    return (element) => {
+        typeof element.animate === 'function' && element.animate([
+            {
+                outlineWidth: '0',
+                outlineStyle: 'solid',
+                outlineColor
+            },
+            {
+                outlineWidth: theme.spacing[2] + 'px',
+                outlineStyle: 'solid',
+                outlineColor: 'transparent'
+            },
+        ], {
+            duration: 400,
+            easing: theme.easing.easeOut
+        });
+    };
+}
+/**
+ * 生成响应式样式
+ * @param callback
+ */
+function responsiveVariables(callback) {
+    let ret = '';
+    for (const k in app_1.breakpoints) {
+        const v = app_1.breakpoints[k];
+        ret += `
+            ${v ? `@media (min-width: ${v}px) {` : ''}
+                ${callback(k) || ''}
+            ${v ? '}' : ''}
+        `;
+    }
+    return ret;
+}
+function responsiveValue(prop) {
+    if ((0, utils_1.isUnset)(prop)) {
+        return;
+    }
+    return typeof prop === 'object' ? prop : { xs: prop };
+}
+/**
+ * 使用hooks监听响应式值的变化
+ * @param prop
+ */
+function useResponsiveValue(prop) {
+    const responsiveObj = responsiveValue(prop);
+    const fn = () => {
+        let maxBreakpoint = 'xs';
+        for (const k in app_1.breakpoints) {
+            if (window.innerWidth < app_1.breakpoints[k]) {
+                break;
+            }
+            if (k in responsiveObj) {
+                maxBreakpoint = k;
+            }
+        }
+        return responsiveObj[maxBreakpoint];
+    };
+    const [value, setValue] = (0, react_1.useState)(fn);
+    (0, react_1.useEffect)(() => {
+        const resize = () => {
+            setValue(fn());
+        };
+        addEventListener('resize', resize);
+        return () => {
+            removeEventListener('resize', resize);
+        };
+    }, []);
+    return value;
+}
+/**
+ * 使用状态对应的颜色
+ * @param status
+ */
+function useStatusColor(status = 'unknown') {
+    const { colors, text } = (0, app_1.useTheme)();
+    return status === 'unknown' ? text.disabled
+        : colors[status === 'info' ? 'primary'
+            : status === 'confirm' ? 'warning'
+                : status];
+}

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

@@ -0,0 +1,27 @@
+import { Id, Obj } from '../../types';
+/**
+ * ------------------------------------------------------------------------
+ * 统一处理树形搜索
+ */
+export type UseTreeSearchParams<N extends Obj, V extends Id = Id> = {
+    nodes?: N[];
+    primaryKey?: keyof N;
+    labelKey?: keyof N;
+    childrenKey?: keyof N;
+    searchTokenKey?: keyof N;
+    defaultExpanded?: V[];
+    expanded?: V[];
+    onExpandedChange?(expanded: V[], nodeValue: V, isExpand: boolean): void;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+};
+export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes, primaryKey, labelKey, childrenKey, searchTokenKey, defaultExpanded, expanded, onExpandedChange, defaultSearchValue, searchValue, onSearchChange }: UseTreeSearchParams<N, V>): {
+    expandedSet: Set<V>;
+    setInnerExpanded: import("react").Dispatch<import("react").SetStateAction<V[]>>;
+    toggleExpanded: (value: V) => void;
+    innerSearchValue: import("react").MutableRefObject<string>;
+    deferredSearchValue: string;
+    setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    filteredTreeData: N[] | undefined;
+};

package/dist/cjs/utils/tree.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeSearch = useTreeSearch;
+const react_1 = require("react");
+const hooks_1 = require("./hooks");
+function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
+    const [innerExpanded, setInnerExpanded] = (0, hooks_1.useControlled)(defaultExpanded, expanded);
+    const expandedSet = (0, react_1.useMemo)(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const toggleExpanded = (0, react_1.useCallback)((value) => {
+        const currentExpanded = expandedSet.has(value);
+        setInnerExpanded(o => {
+            const newExpanded = currentExpanded
+                ? o.filter(v => v !== value)
+                : [...o, value];
+            onExpandedChange?.(newExpanded, value, !currentExpanded);
+            return newExpanded;
+        });
+    }, []);
+    const [innerSearchValue, setInnerSearchValue] = (0, hooks_1.useControlled)(defaultSearchValue, searchValue, onSearchChange);
+    const deferredSearchValue = (0, react_1.useDeferredValue)(innerSearchValue.current.trim());
+    const filteredTreeData = (0, react_1.useMemo)(() => {
+        if (!deferredSearchValue) {
+            return nodes;
+        }
+        const newExpanded = [];
+        const split = deferredSearchValue.split(' ');
+        const fn = (arr) => {
+            return arr?.flatMap(item => {
+                const children = fn(item[childrenKey]);
+                if (children?.length) {
+                    newExpanded.push(item[primaryKey]);
+                    return [{ ...item, children }];
+                }
+                if (item && typeof item === 'object') {
+                    const searchToken = typeof item[labelKey] === 'string' ? item[labelKey] : item[searchTokenKey];
+                    if (typeof searchToken === 'string' &&
+                        split.some(k => {
+                            return k && searchToken.toLowerCase().includes(k.toLowerCase());
+                        })) {
+                        children?.length && newExpanded.push(item[primaryKey]);
+                        return [{ ...item, children }];
+                    }
+                }
+                return [];
+            });
+        };
+        setInnerExpanded(newExpanded);
+        return fn(nodes);
+    }, [nodes, deferredSearchValue, primaryKey, labelKey, searchTokenKey, childrenKey]);
+    return {
+        expandedSet,
+        setInnerExpanded,
+        toggleExpanded,
+        innerSearchValue,
+        deferredSearchValue,
+        setInnerSearchValue,
+        filteredTreeData
+    };
+}