@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/selectionContext/selectionContext.d.ts

@@ -1,27 +1,29 @@
-import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
-import { Id, Obj } from '../../../types';
+import { Id, Obj, SelectableProps } from '../../../types';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface OptionType<V extends Id = Id> extends Obj {
     children?: OptionType<V>[];
+    /** @private */
     _parentId?: V;
 }
 export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
     options?: O[];
-    /** @default "id" */
+    /** 默认为`id` */
     primaryKey?: keyof O;
+    /** 默认为`children` */
     childrenKey?: keyof O;
     /**
      * 节点之间的关系
-     * @enum {"dependent"}：会自动判断子父节点的选中关系。
-     * @enum {"standalone"}：所有节点相互独立。
-     * @default "dependent"
+     * @enum {'dependent'} 会自动判断子父节点的选中关系。
+     * @enum {'standalone'} 所有节点相互独立。
+     * 默认为`dependent`
      */
     relation?: 'dependent' | 'standalone';
     /**
      * 选中值的整合方式，relation为'dependent'时生效
-     * @enum {"shallowest"}：尽可能向上归集。
-     * @enum {"deepest"}：尽可能向下展开。
-     * @enum {"all"}：所有选中的值。
-     * @default "shallowest"
+     * @enum {'shallowest'} 尽可能向上归集。
+     * @enum {'deepest'} 尽可能向下展开。
+     * @enum {'all'} 所有选中的值。
+     * 默认为`"shallowest"`
      */
     integration?: 'shallowest' | 'deepest' | 'all';
     /** 单选模式必须指定clearable才能清空选择 */
@@ -29,31 +31,27 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /**
+     * 是否使用浅层选择模式，默认为`false`，即使用树形选择。
+     * 开启后{@link childrenKey}, {@link relation}, {@link integration}都将无效
+     */
+    shallow?: boolean;
 };
-export interface SelectionContextSingleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-export interface SelectionContextMultipleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextSingleProps<O, V> | SelectionContextMultipleProps<O, V>;
+export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextBaseProps<O, V> & SelectableProps<V>;
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection?: true;
     disabled?: boolean;
-    innerValue?: MutableRefObject<undefined | V | V[]>;
-    setInnerValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
-    innerOptions?: MutableRefObject<undefined | O[]>;
-    setInnerOptions?: Dispatch<SetStateAction<undefined | O[]>>;
+    value?: V | V[];
+    setValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
+    options?: O[];
+    setOptions?: Dispatch<SetStateAction<undefined | O[]>>;
     optionsMap?: Map<V, O>;
     selectionStatus?: Map<V, 1 | 2>;
     toggleSelected?(value: V, option?: O): void;
     onToggle?(checked: boolean, value: V, option?: O): void;
 };
+type ToRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+export type OSelectionContext<O extends OptionType<V>, V extends Id = Id> = ToRequired<ISelectionContext<O, V>, 'inSelection' | 'setValue' | 'setOptions' | 'optionsMap' | 'selectionStatus' | 'toggleSelected'>;
 export declare function useSelectionContext<O extends OptionType<V>, V extends Id = Id>(): ISelectionContext<O, V>;
 export declare function SelectionContext<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/selectionContext/selectionContext.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-import { useTreeSelect } from './selectionHook';
-const selectionContext = createContext({});
+import { useSelection } from './selectionHook';
+const InnerSelectionContext = createContext({});
 export function useSelectionContext() {
-    return useContext(selectionContext);
+    return useContext(InnerSelectionContext);
 }
 export function SelectionContext(props) {
-    const treeSelect = useTreeSelect(props);
-    return (_jsx(selectionContext.Provider, { value: useMemo(() => ({
-            inSelection: true, disabled: props.disabled,
-            ...treeSelect
-        }), [treeSelect.selectionStatus, props.disabled]), children: props.children }));
+    const selection = useSelection(props);
+    return (_jsx(InnerSelectionContext, { value: useMemo(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
 }

package/dist/esm/components/selectionContext/selectionHook.d.ts

@@ -1,11 +1,12 @@
-import { OptionType, SelectionContextProps } from './selectionContext';
+import { Dispatch, SetStateAction } from 'react';
+import { OptionType, OSelectionContext, SelectionContextProps } from './selectionContext';
 import { Id } from '../../../types';
-export declare function useTreeSelect<O extends OptionType<V>, V extends Id = Id>({ ...props }: Omit<SelectionContextProps<O, V>, 'children'>): {
-    innerValue: import("react").MutableRefObject<V | V[] | undefined>;
-    setInnerValue: import("react").Dispatch<import("react").SetStateAction<V | V[] | undefined>>;
-    innerOptions: import("react").MutableRefObject<O[] | undefined>;
-    setInnerOptions: import("react").Dispatch<import("react").SetStateAction<O[] | undefined>>;
-    optionsMap: Map<V, O>;
-    selectionStatus: Map<V, 1 | 2>;
-    toggleSelected: (value: V, option?: O) => void;
-};
+export declare function useSelection<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): OSelectionContext<O, V>;
+export declare function useShallowSelection<V extends Id | Id[]>(params: {
+    disabled?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    defaultValue?: V;
+    value?: V;
+    onChange?: (value: V) => void;
+}): [V, (value: V) => void, Dispatch<SetStateAction<V>>];

package/dist/esm/components/selectionContext/selectionHook.js

@@ -1,23 +1,23 @@
-import { useMemo, useRef, useCallback } from 'react';
-import { isUnset, toArray, useControlled, useDerivedState, useSync } from '../../utils';
+import { isSelected, isUnset, toArray, useControlled, useDerivedState, useSync } from '../../utils';
+import { useCallback, useMemo, useRef } from 'react';
 import { useSelectionContext } from './selectionContext';
-export function useTreeSelect({ ...props }) {
+export function useSelection(props) {
     props.primaryKey ??= 'id';
     props.childrenKey ??= 'children';
     props.relation ??= 'dependent';
     props.integration ??= 'shallowest';
-    const { options, primaryKey, childrenKey, relation, multiple, defaultValue, value, onChange, } = props;
+    const { defaultValue, value, onChange, options, primaryKey, childrenKey, relation, multiple } = props;
     let [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     let [innerOptions, setInnerOptions] = useDerivedState(options);
     /**
      * ----------------------------------------------------------------
-     * 若嵌套在另个一SelectionContext内，取外层数据
+     * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = useSelectionContext();
     if (context.inSelection) {
-        innerValue = context.innerValue;
-        setInnerValue = context.setInnerValue;
-        innerOptions = context.innerOptions;
+        innerValue.current = context.value;
+        setInnerValue = context.setValue;
+        innerOptions.current = context.options;
     }
     const optionsMap = useMemo(() => {
         if (context.inSelection) {
@@ -36,6 +36,7 @@ export function useTreeSelect({ ...props }) {
         fn(innerOptions.current);
         return map;
     }, [innerOptions.current, primaryKey, childrenKey, context.optionsMap]);
+    const syncOptionsMap = useSync(optionsMap);
     const syncProps = useSync(props);
     const calSelectionStatus = (selectedSet = new Set(toArray(innerValue.current))) => {
         const { multiple, relation, primaryKey, childrenKey } = syncProps.current;
@@ -76,7 +77,7 @@ export function useTreeSelect({ ...props }) {
         }
         return map;
     };
-    const preCalSelectionStatus = useRef();
+    const preCalSelectionStatus = useRef(void 0);
     const selectionStatus = useMemo(() => {
         if (context.inSelection) {
             return context.selectionStatus;
@@ -87,9 +88,9 @@ export function useTreeSelect({ ...props }) {
         return ret;
     }, [innerValue.current, optionsMap, multiple, relation, context.selectionStatus]);
     const syncSelectionStatus = useSync(selectionStatus);
-    const toggleSelected = useCallback((value, option) => {
+    const toggleSelected = useCallback((value) => {
         if (context.inSelection) {
-            context.toggleSelected(value, option);
+            context.toggleSelected(value);
             return;
         }
         const { disabled, onToggle, multiple, relation, integration, primaryKey, childrenKey, clearable } = syncProps.current;
@@ -98,7 +99,7 @@ export function useTreeSelect({ ...props }) {
         }
         const selectionStatus = syncSelectionStatus.current;
         const currentSelected = selectionStatus.get(value) === 2;
-        onToggle?.(!currentSelected, value, option);
+        onToggle?.(!currentSelected, value, syncOptionsMap.current.get(value));
         if (!multiple) {
             if (!currentSelected) {
                 setInnerValue(value);
@@ -120,27 +121,10 @@ export function useTreeSelect({ ...props }) {
             return;
         }
         // relation === 'dependent'
-        /**
-         * 通用的递归方法
-         * @param callback
-         * @param arr
-         * @param payload
-         */
-        const loopOptions = (callback, arr = innerOptions.current, payload) => {
-            arr?.forEach(item => {
-                const id = item[primaryKey];
-                if (isUnset(id)) {
-                    return;
-                }
-                let children = item[childrenKey];
-                children = Array.isArray(children) && children.length ? children : null;
-                const ret = callback(id, children, payload);
-                children && loopOptions(callback, children, ret);
-            });
-        };
+        // 按照deepest方式计算出已选项
         const deepestSelectedSet = new Set(toArray(innerValue.current));
         loopOptions((id, children, parentModifiedTo) => {
-            // 父节点已修改，子节点同步修改；
+            // 父节点已修改，子节点同步修改
             const modifyTo = typeof parentModifiedTo === 'boolean' ? parentModifiedTo
                 // 当前为目标节点，直接修改
                 : id === value ? !currentSelected
@@ -159,6 +143,7 @@ export function useTreeSelect({ ...props }) {
             }
             return modifyTo;
         });
+        // 根据integration模式拆分得到最终值
         if (integration !== 'deepest') {
             const newStatus = preCalSelectionStatus.current = calSelectionStatus(deepestSelectedSet);
             if (integration === 'shallowest') {
@@ -181,10 +166,67 @@ export function useTreeSelect({ ...props }) {
             }
         }
         setInnerValue([...deepestSelectedSet]);
+        /**
+         * 通用的递归方法
+         * @param callback
+         * @param arr
+         * @param payload
+         */
+        function loopOptions(callback, arr = innerOptions.current, payload) {
+            arr?.forEach(item => {
+                const id = item[primaryKey];
+                if (isUnset(id)) {
+                    return;
+                }
+                let children = item[childrenKey];
+                children = Array.isArray(children) && children.length ? children : null;
+                const ret = callback(id, children, payload);
+                children && loopOptions(callback, children, ret);
+            });
+        }
     }, [context.inSelection]);
     return {
-        innerValue, setInnerValue,
-        innerOptions, setInnerOptions,
-        optionsMap, selectionStatus, toggleSelected
+        inSelection: true,
+        disabled: props.disabled,
+        value: innerValue.current,
+        setValue: setInnerValue,
+        options: innerOptions.current,
+        setOptions: setInnerOptions,
+        optionsMap,
+        selectionStatus,
+        toggleSelected,
+        onToggle: props.onToggle
     };
 }
+export function useShallowSelection(params) {
+    const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
+    const sync = useSync(params);
+    return [
+        innerValue.current,
+        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
+    ];
+}

package/dist/esm/components/skeleton/skeleton.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { DIVProps } from '../../../types';
 type SkeletonSharedProps = {
-    /** @default "rounded" */
+    /** 默认为`rounded` */
     variant?: 'circular' | 'rectangular' | 'rounded';
-    /** 是否播放动画，@default false */
+    /** 是否播放动画，默认为`false` */
     animation?: boolean;
 };
 export interface SkeletonProps extends SkeletonSharedProps, DIVProps {
@@ -16,17 +16,17 @@ export declare const Skeleton: {
     Table: typeof SkeletonTable;
 };
 export interface SkeletonCardProps extends SkeletonSharedProps, DIVProps {
-    /** @default false */
+    /** 默认为false */
     showAvatar?: boolean;
-    /** @default true */
+    /** 默认为true */
     showTitle?: boolean;
-    /** @default 3 */
+    /** 默认为3 */
     rows?: number;
 }
-export declare const SkeletonCard: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SkeletonCardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
-export interface SkeletonTableProps extends SkeletonSharedProps, Partial<JSX.IntrinsicElements['table']> {
+export declare const SkeletonCard: React.MemoExoticComponent<({ showAvatar, showTitle, rows, variant, animation, ...props }: SkeletonCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export interface SkeletonTableProps extends SkeletonSharedProps, Partial<React.JSX.IntrinsicElements['table']> {
     columns?: number;
     rows?: number;
 }
-export declare const SkeletonTable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SkeletonTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>>;
+export declare const SkeletonTable: React.MemoExoticComponent<({ columns, rows, variant, animation, ...props }: SkeletonTableProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/esm/components/skeleton/skeleton.js

@@ -1,27 +1,27 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { articalStyle, classes, style, tableStyle } from './skeleton.style';
-export const Skeleton = memo(forwardRef(({ variant = 'rounded', animation = true, width, height, ...props }, ref) => {
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+export const Skeleton = memo(({ variant = 'rounded', animation = true, width, height, ...props }) => {
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), style: {
             width,
             height,
             ...props.style
         }, "data-variant": variant, "data-animation": animation, children: !!props.children &&
             _jsx("div", { className: classes.children, children: props.children }) }));
-}));
-export const SkeletonCard = memo(forwardRef(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }, ref) => {
+});
+export const SkeletonCard = memo(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }) => {
     const commonProps = { variant, animation };
-    return (_jsxs("div", { ...props, ref: ref, css: articalStyle, className: classnames(classes.artical, props.className), children: [_jsx("div", { className: classes.avatar, children: _jsx(Skeleton, { variant: "circular" }) }), _jsxs("div", { className: classes.text, children: [showTitle &&
+    return (_jsxs("div", { ...props, css: articalStyle, className: classnames(classes.artical, props.className), children: [_jsx("div", { className: classes.avatar, children: _jsx(Skeleton, { variant: "circular" }) }), _jsxs("div", { className: classes.text, children: [showTitle &&
                         _jsx(Skeleton, { ...commonProps, style: {
                                 width: '80%',
                                 height: 24,
                                 margin: '4px 0 2em'
                             } }), Array(rows).fill(void 0).map((_, i) => _createElement(Skeleton, { ...commonProps, key: i, style: i === rows - 1 ? { width: '60%' } : void 0 }))] })] }));
-}));
+});
 Skeleton.Card = SkeletonCard;
-export const SkeletonTable = memo(forwardRef(({ columns = 3, rows = 4, variant = 'rounded', animation = true, ...props }, ref) => {
+export const SkeletonTable = memo(({ columns = 3, rows = 4, variant = 'rounded', animation = true, ...props }) => {
     const commonProps = { variant, animation };
     const renderCols = () => {
         return Array(columns).fill(void 0).map((_, i) => _jsx("td", { children: _jsx(Skeleton, { ...commonProps }) }, i));
@@ -29,6 +29,6 @@ export const SkeletonTable = memo(forwardRef(({ columns = 3, rows = 4, variant =
     const renderRows = () => {
         return Array(rows).fill(void 0).map((_, i) => _jsx("tr", { children: renderCols() }, i));
     };
-    return (_jsx("table", { ...props, ref: ref, css: tableStyle, className: classnames(classes.table, props.className), children: _jsx("tbody", { children: renderRows() }) }));
-}));
+    return (_jsx("table", { ...props, css: tableStyle, className: classnames(classes.table, props.className), children: _jsx("tbody", { children: renderRows() }) }));
+});
 Skeleton.Table = SkeletonTable;

package/dist/esm/components/slidableActions/slidableActions.d.ts

@@ -9,11 +9,11 @@ export declare function useSlidableActionsContext(): {
 };
 type ActionType = SlidableActionsActionProps | ReactElement;
 export interface SlidableActionsProps extends DIVProps {
-    /** 元素弹性移动距离，@default 24 */
+    /** 元素弹性移动距离，默认为24 */
     bounceElementTranslate?: number;
-    /** 手指弹性拖拽距离，@default 240 */
+    /** 手指弹性拖拽距离，默认为240 */
     bounceDragDistance?: number;
-    /** 滑动生效的速度，@default 450 (px/s) */
+    /** 滑动生效的速度，默认为450 (px/s) */
     effectiveSpeed?: number;
     leftActions?: ActionType | ActionType[];
     rightActions?: ActionType | ActionType[];

package/dist/esm/components/slidableActions/slidableActions.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useMemo, useRef, useState } from 'react';
+import { cloneElement, createContext, isValidElement, memo, useContext, useMemo, useRef, useState } from 'react';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './slidableActions.style';
 import { cubicBezier, classnames, useSyncState, range, useDraggableHandle, toArray } from '../../utils';
 import { SlidableActionsAction } from './slidableActionsAction';
 const bezier = cubicBezier(0, 0, 0, 1);
-const slidableActionsContext = createContext({
+const SlidableActionsContext = createContext({
     actionsContainer: [],
     translate: 0,
     maxDistance: 0
 });
 export function useSlidableActionsContext() {
-    return useContext(slidableActionsContext);
+    return useContext(SlidableActionsContext);
 }
-export const SlidableActions = memo(forwardRef(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }, ref) => {
+export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }) => {
     const leftActionsContainer = useRef([]);
     const rightActionsContainer = useRef([]);
     const [distanceRange, setDistanceRange] = useSyncState([0, 0]);
@@ -112,16 +112,16 @@ export const SlidableActions = memo(forwardRef(({ bounceElementTranslate = 24, b
                     : child;
         });
     };
-    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { ref: ref, css: style, className: classnames(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(slidableActionsContext.Provider, { value: useMemo(() => ({
+    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { css: style, className: classnames(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(SlidableActionsContext, { value: useMemo(() => ({
                                 actionsContainer: leftActionsContainer.current,
                                 translate,
                                 maxDistance: distanceRange.current[1]
                             }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsLeft, children: !!leftActions &&
-                                    renderActions(leftActions) }) }), _jsx(slidableActionsContext.Provider, { value: useMemo(() => ({
+                                    renderActions(leftActions) }) }), _jsx(SlidableActionsContext, { value: useMemo(() => ({
                                 actionsContainer: rightActionsContainer.current,
                                 translate,
                                 maxDistance: -distanceRange.current[0]
                             }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsRight, children: !!rightActions &&
                                     renderActions(rightActions) }) })] })] }) }));
-}));
+});
 SlidableActions.Action = SlidableActionsAction;

package/dist/esm/components/slidableActions/slidableActions.style.js

@@ -35,7 +35,7 @@ export const style = defineCss(({ background }) => css `
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                color: ${background.card};
+                color: ${background.content};
                 position: absolute;
                 top: 0;
     

package/dist/esm/components/slidableActions/slidableActionsAction.d.ts

@@ -10,4 +10,4 @@ export interface SlidableActionsActionProps extends DIVProps {
     /** @private */
     _index?: number;
 }
-export declare const SlidableActionsAction: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SlidableActionsActionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const SlidableActionsAction: import("react").MemoExoticComponent<({ color, label, icon, buttonProps, buttonRef, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/slidableActions/slidableActionsAction.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { Button } from '../button';
 import { classes } from './slidableActions.style';
 import { classnames, cloneRef, colorTransfer } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { useSlidableActionsContext } from './slidableActions';
-export const SlidableActionsAction = memo(forwardRef(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }, ref) => {
+export const SlidableActionsAction = memo(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }) => {
     const { actionsContainer, translate, maxDistance } = useSlidableActionsContext();
     const innerButtonRef = useRef(null);
     useEffect(() => {
@@ -29,8 +29,8 @@ export const SlidableActionsAction = memo(forwardRef(({ color = 'default', label
             ? '#aaaaaa'
             : colorTransfer(color, theme);
     }, [color, theme]);
-    return (_jsx("div", { ...props, ref: ref, className: classes.actionItem, style: {
+    return (_jsx("div", { ...props, className: classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
         }, children: _jsx(Button, { ref: cloneRef(buttonRef, innerButtonRef), ...buttonProps, className: classnames(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
-}));
+});

package/dist/esm/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import { DraggableOptions } from '../../utils';
 import { ColorPropsValue, DIVProps } from '../../../types';
 import { TooltipProps } from '../tooltip';
@@ -6,8 +6,8 @@ export interface MarkItem extends DIVProps {
     label?: ReactNode;
     /**
      * label的位置
-     * {@link SliderBaseProps.orientation}为"horizontal"时，@default "bottom"
-     * {@link SliderBaseProps.orientation}为"vertical"时，@default "right"
+     * {@link SliderBaseProps.orientation}为`horizontal`时，默认为`bottom`
+     * {@link SliderBaseProps.orientation}为`vertical`时，默认为`right`
      */
     labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
     value: number;
@@ -17,7 +17,7 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     orientation?: 'horizontal' | 'vertical';
     /** variant只改变滑块的样式 */
     variant?: 'filled' | 'outlined';
-    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。@default false */
+    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。默认为`false` */
     inset?: boolean;
     /** 轨道 */
     railSize?: number;
@@ -26,7 +26,7 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     renderRail?(value: [number, number], railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
     /** 滑块 */
     handleSize?: number;
-    handleProps?: JSX.IntrinsicElements['button'];
+    handleProps?: React.JSX.IntrinsicElements['button'];
     /** 禁用默认的滑块外边框 */
     disableHandleOutline?: boolean;
     /** 渲染滑块，range模式时，改方法会触发两次 */
@@ -37,7 +37,7 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     /** 滑块拖动每格的值，为null时必须配合marks使用，滑块只能在marks上 */
     step?: number | null;
     marks?: MarkItem[];
-    /** mark中的标签与滑动轨道的距离，@default 6 */
+    /** mark中的标签与滑动轨道的距离，默认为`6` */
     markLabelOffset?: number;
     markSize?: number;
     disableTrack?: boolean;
@@ -58,5 +58,5 @@ export interface SliderRangeProps extends SliderBaseProps {
     suffix?: ReactNode | ((value: [number, number]) => ReactNode);
 }
 export type SliderProps = SliderSingleProps | SliderRangeProps;
-export declare const Slider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(Omit<SliderSingleProps, "ref"> | Omit<SliderRangeProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Slider: React.MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue, value, onChange, ...props }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/esm/components/slider/slider.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { classnames, cloneRef, isUnset, useControlled, useDraggableHandle } from '../../utils';
 import { classes, useStyle } from './slider.style';
 import { Tooltip } from '../tooltip';
-import { useTheme } from '../app';
-export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const Slider = memo(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }) => {
     const { spacing } = useTheme();
     markLabelOffset ??= inset ? spacing[1] : spacing[2];
     const orderedMarks = useMemo(() => {
@@ -84,7 +84,7 @@ export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horiz
      */
     const railRef = useRef(null);
     const handleRefs = useRef([]);
-    const dragStartData = useRef();
+    const dragStartData = useRef(void 0);
     const draggableHandle = useDraggableHandle({
         ...draggableOptions,
         onDragStart(e) {
@@ -161,7 +161,9 @@ export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horiz
             const _handleProps = {
                 key: index,
                 ...handleProps,
-                ref: cloneRef(r => handleRefs.current[index] = r, handleProps?.ref),
+                ref: cloneRef(r => {
+                    handleRefs.current[index] = r;
+                }, handleProps?.ref),
                 className: classnames(classes.handle, handleProps?.className),
                 style: {
                     width: handleSize,
@@ -185,7 +187,12 @@ export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horiz
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : _jsx(Tooltip, { popperRef: r => tooltipRefs.current[index] = r, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: _createElement("button", { ..._handleProps, key: index }) }, index);
+                : _jsx(Tooltip, { popperRef: r => {
+                        tooltipRefs.current[index] = r;
+                        return () => {
+                            delete tooltipRefs.current[index];
+                        };
+                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: _createElement("button", { ..._handleProps, key: index }) }, index);
         };
         return valueIsArray
             ? innerValue.current.map(fn)
@@ -279,7 +286,7 @@ export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horiz
     const renderExtra = (prop) => {
         return typeof prop === 'function' ? prop(innerValue.current) : prop;
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: renderExtra(prefix) }), renderRailFn(), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: renderExtra(suffix) })] }));
-}));
+});

package/dist/esm/components/slider/slider.style.d.ts

@@ -1,7 +1,7 @@
 import { ColorPropsValue } from '../../../types';
 export declare const classes: {
-    prefix: string;
     label: string;
+    prefix: string;
     mark: string;
     track: string;
     suffix: string;