@canlooks/can-ui 0.0.1

package/dist/esm/utils/index.js

@@ -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/esm/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/esm/utils/keyboard.js

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import { useSync, useSyncState } from './hooks';
+export function useKeyboard({ disabled, verticalCount, allowVertical, horizontalCount, allowHorizontal, open, setOpen, onEnter, onKeyDown }) {
+    const [verticalIndex, setVerticalIndex] = useSyncState(-1);
+    const [horizontalIndex, setHorizontalIndex] = useSyncState(0);
+    const syncOnKeydown = useSync(onKeyDown);
+    const syncOnEnter = useSync(onEnter);
+    const vCount = typeof verticalCount === 'function' ? verticalCount(horizontalIndex.current) : verticalCount || 0;
+    const hCount = typeof horizontalCount === 'function' ? horizontalCount(verticalIndex.current) : horizontalCount || 0;
+    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键，关闭遮罩层
+ */
+export function useEscapeClosable({ escapeClosable, close }, onEscape) {
+    const overlayRef = useRef(null);
+    const syncOnEscape = useSync(onEscape);
+    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/esm/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/esm/utils/style.js

@@ -0,0 +1,157 @@
+import { useEffect, useMemo, useState } from 'react';
+import { breakpoints, useTheme } from '../components/app';
+import { humpToSegmented, isUnset } from './utils';
+import Color from 'color';
+/**
+ * 为类名添加统一前缀，通常为内部使用
+ * @param prefixName
+ */
+export function definePrefix(prefixName) {
+    const _prefix = `CanUI-${prefixName}`;
+    return (...names) => {
+        return names.length
+            ? names.map(name => `${_prefix}-${name}`).join(' ')
+            : _prefix;
+    };
+}
+export function defineClasses(prefixName, names) {
+    const prefix = definePrefix(prefixName);
+    const ret = { root: prefix() };
+    names?.forEach(name => {
+        ret[name] = prefix(humpToSegmented(name));
+    });
+    return ret;
+}
+/**
+ * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
+ * @param callback
+ */
+export function defineCss(callback) {
+    return () => {
+        const theme = useTheme();
+        return useMemo(() => callback(theme), [theme]);
+    };
+}
+/**
+ * 使用css的hook，直接在组件或其他hook中调用，相当于{@link defineCss}的立即执行版本
+ * @param callback
+ * @param deps
+ */
+export function useCss(callback, deps) {
+    const theme = useTheme();
+    return useMemo(() => callback(theme), [...deps || [], theme]);
+}
+/**
+ * 将大多数组件的color属性转换为可用的颜色值
+ * @param colorPropsValue
+ * @param theme
+ */
+export 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
+ */
+export function useColor(colorPropsValue) {
+    return useCss(theme => {
+        return colorTransfer(colorPropsValue, theme);
+    }, [colorPropsValue]);
+}
+/**
+ * 点击的波纹效果
+ * @param colorPropsValue
+ */
+export function useTouchRipple(colorPropsValue) {
+    const theme = useTheme();
+    const outlineColor = Color(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
+ */
+export function responsiveVariables(callback) {
+    let ret = '';
+    for (const k in breakpoints) {
+        const v = breakpoints[k];
+        ret += `
+            ${v ? `@media (min-width: ${v}px) {` : ''}
+                ${callback(k) || ''}
+            ${v ? '}' : ''}
+        `;
+    }
+    return ret;
+}
+export function responsiveValue(prop) {
+    if (isUnset(prop)) {
+        return;
+    }
+    return typeof prop === 'object' ? prop : { xs: prop };
+}
+/**
+ * 使用hooks监听响应式值的变化
+ * @param prop
+ */
+export function useResponsiveValue(prop) {
+    const responsiveObj = responsiveValue(prop);
+    const fn = () => {
+        let maxBreakpoint = 'xs';
+        for (const k in breakpoints) {
+            if (window.innerWidth < breakpoints[k]) {
+                break;
+            }
+            if (k in responsiveObj) {
+                maxBreakpoint = k;
+            }
+        }
+        return responsiveObj[maxBreakpoint];
+    };
+    const [value, setValue] = useState(fn);
+    useEffect(() => {
+        const resize = () => {
+            setValue(fn());
+        };
+        addEventListener('resize', resize);
+        return () => {
+            removeEventListener('resize', resize);
+        };
+    }, []);
+    return value;
+}
+/**
+ * 使用状态对应的颜色
+ * @param status
+ */
+export function useStatusColor(status = 'unknown') {
+    const { colors, text } = useTheme();
+    return status === 'unknown' ? text.disabled
+        : colors[status === 'info' ? 'primary'
+            : status === 'confirm' ? 'warning'
+                : status];
+}

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

@@ -0,0 +1,58 @@
+import { useCallback, useDeferredValue, useMemo } from 'react';
+import { useControlled } from './hooks';
+export function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const expandedSet = useMemo(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const toggleExpanded = 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] = useControlled(defaultSearchValue, searchValue, onSearchChange);
+    const deferredSearchValue = useDeferredValue(innerSearchValue.current.trim());
+    const filteredTreeData = 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
+    };
+}

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

@@ -0,0 +1,123 @@
+import { MutableRefObject, Ref, ReactNode } from 'react';
+import { Id } from '../../types';
+/**
+ * 生成最简易的随机ID
+ * @param namespace
+ */
+export declare function getEazyID(namespace?: string): string;
+/**
+ * 获取任意长度由随机字母组成的ID
+ * @param length
+ */
+export declare function getShortID(length?: number): string;
+/**
+ * 拼接元素的类名
+ * @param classes
+ */
+export declare function classnames(...classes: any[]): string;
+/**
+ * 驼峰转分隔
+ * @param str
+ * @param separator
+ */
+export declare function humpToSegmented(str: string, separator?: string): string;
+/**
+ * 将某个值统一转换成数组或undefined
+ * @param value
+ */
+export declare function toArray<T>(value: undefined | null | T | T[]): T[] | null;
+/**
+ * 判断某个值是否为已选中
+ * @param value 需要判断的值
+ * @param selectedValue 已选中的值，可能为undefined | V | V[]
+ */
+export declare function isSelected<V extends Id>(value: V | undefined, selectedValue: V | V[] | undefined): boolean;
+/**
+ * 对象深复制
+ */
+export declare function cloneDeep<T>(target: T): T;
+/**
+ * 深度合并对象
+ */
+export declare function mergeDeep<T extends {}, U>(target: T, source: U): T & U;
+export declare function mergeDeep<T extends {}, U, V>(target: T, source: U, source2: V): T & U & V;
+export declare function mergeDeep<T extends {}, U, V, W>(target: T, source: U, source2: V, source3: W): T & U & V & W;
+export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U, source2: V, source3: W, source4: X): T & U & V & W & X;
+export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
+export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
+export declare function mergeDeep(target: object, ...sources: any[]): any;
+/**
+ * 判断元素是否完全在目标容器内，用于Popper组件
+ * @param el
+ * @param container
+ */
+export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
+/**
+ * 下一个事件循环
+ * @param callback
+ */
+export declare function nextTick(callback?: () => void): Promise<void>;
+/**
+ * 克隆Ref
+ * @param refs
+ */
+export declare function cloneRef<T>(...refs: (Ref<T> | MutableRefObject<T | null> | undefined)[]): (r: T | null) => void;
+/**
+ * 判断变量是否为undefined或null
+ * @param it
+ */
+export declare function isUnset(it: any): it is undefined | null;
+/**
+ * 判断变量是否为Promise
+ * @param it
+ */
+export declare function isPromise<T>(it: any): it is Promise<T>;
+/**
+ * 获取promise的状态
+ * @param promise
+ */
+export declare function getPromiseState(promise: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
+/**
+ * 将节点用某个分隔符拼接起来，通常用于渲染多选项
+ * @param arr
+ * @param callback
+ * @param seperator
+ */
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined)[];
+/**
+ * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
+ * @param value
+ * @param param
+ */
+export type FixInputNumberParam = {
+    min?: number;
+    max?: number;
+    precision?: number;
+};
+export declare function fixInputNumber(value: string, { min, max, precision }: FixInputNumberParam): string;
+/**
+ * 判断某个元素是否为另一个元素的子元素
+ * @param target
+ * @param container
+ */
+export declare function isChildOf(target: Element | null, container?: Element | null): boolean;
+/**
+ * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * @param target
+ * @param callback
+ */
+export declare function fineParent(target: Element, callback: (el: Element) => any): HTMLElement | null;
+/**
+ * 将数值限制在某个范围内
+ * @param value
+ * @param {[min, max]}
+ */
+export declare function range(value: number, min?: number, max?: number): number;
+/**
+ * 对象深度查找，也可赋值
+ * @param obj
+ * @param keyPath
+ * @param setValue
+ * @param separator
+ */
+export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;