@canlooks/can-ui 0.0.41 → 0.0.43

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

@@ -2,18 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, createContext, isValidElement, memo, useContext, useMemo, useRef, useState } from 'react';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './slidableActions.style';
-import { cubicBezier, clsx, useSyncState, range, useDraggableHandle, toArray } from '../../utils';
+import { cubicBezier, clsx, useSyncState, range, toArray, useDraggable } from '../../utils';
 import { SlidableActionsAction } from './slidableActionsAction';
-const bezier = cubicBezier(0, 0, 0, 1);
-const SlidableActionsContext = createContext({
-    actionsContainer: [],
-    translate: 0,
-    maxDistance: 0
-});
+const bounceBezier = cubicBezier(0, 0, 0, 1);
+const SlidableActionsContext = createContext({});
 export function useSlidableActionsContext() {
     return useContext(SlidableActionsContext);
 }
-export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }) => {
+export const SlidableActions = memo(({ bounceElementTranslate = 12, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, autoReturn = true, disabled, gestureOptions, ...props }) => {
     const leftActionsContainer = useRef([]);
     const rightActionsContainer = useRef([]);
     const [distanceRange, setDistanceRange] = useSyncState([0, 0]);
@@ -31,37 +27,37 @@ export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDi
     const [translate, setTranslate] = useState(0);
     const [dragging, setDragging] = useState(false);
     const startTranslate = useRef(0);
-    const draggableHandle = useDraggableHandle({
-        ...draggableOptions,
+    const draggableHandles = useDraggable({
+        ...gestureOptions,
         disabled,
-        disableNativeTouchMove: true,
+        preventNativeTouchMove: true,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             setDragging(true);
             startTranslate.current = translate;
             getDistanceRange();
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
+            gestureOptions?.onDrag?.(info, e);
             const [min, max] = distanceRange.current;
             const bounceMin = min < 0 ? min - bounceDragDistance : min;
             const bounceMax = max > 0 ? max + bounceDragDistance : max;
-            let newTranslate = range(startTranslate.current + info.deltaX, bounceMin, bounceMax);
+            let newTranslate = range(startTranslate.current + info.diff[0], bounceMin, bounceMax);
             // 拖拽超过正常距离，模拟弹性
             if (newTranslate < min) {
-                newTranslate = min - bezier(-(newTranslate - min) / bounceDragDistance) * bounceElementTranslate;
+                newTranslate = min - bounceBezier(-(newTranslate - min) / bounceDragDistance) * bounceElementTranslate;
             }
             else if (newTranslate > max) {
-                newTranslate = max + bezier((newTranslate - max) / bounceDragDistance) * bounceElementTranslate;
+                newTranslate = max + bounceBezier((newTranslate - max) / bounceDragDistance) * bounceElementTranslate;
             }
             setTranslate(newTranslate);
         },
         onDragEnd(info) {
-            draggableOptions?.onDragEnd?.(info);
+            gestureOptions?.onDragEnd?.(info);
             setDragging(false);
             const start = startTranslate.current;
             const [min, max] = distanceRange.current;
-            const isSpeedSatisfied = () => effectiveSpeed && info.speedX * 1000 >= effectiveSpeed;
+            const isSpeedSatisfied = () => effectiveSpeed && info.speed[0] * 1000 >= effectiveSpeed;
             // 拖拽距离达到一半，或者满足速度要求
             if (start < 0) {
                 if (translate > start && (translate >= min / 2 || isSpeedSatisfied())) {
@@ -82,14 +78,14 @@ export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDi
             else {
                 // 原本在中间
                 if (translate < min / 2 || translate > max / 2 || isSpeedSatisfied()) {
-                    return setTranslate(info.deltaX > 0 ? max : min);
+                    return setTranslate(info.diff[0] > 0 ? max : min);
                 }
             }
             // 未满足条件，返回原位
             setTranslate(startTranslate.current);
         },
         onDragCancel(info) {
-            draggableOptions?.onDragCancel?.(info);
+            gestureOptions?.onDragCancel?.(info);
             setDragging(false);
             const [min, max] = distanceRange.current;
             translate < min / 2 && translate > max / 2
@@ -97,7 +93,7 @@ export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDi
                 : setTranslate(0);
         }
     });
-    const onClickAway = () => {
+    const resetTranslate = () => {
         translate && setTranslate(0);
     };
     const renderActions = (actions) => {
@@ -112,16 +108,16 @@ export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDi
                     : child;
         });
     };
-    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { css: style, className: clsx(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(() => ({
+    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: resetTranslate, children: _jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandles, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(SlidableActionsContext, { value: useMemo(() => ({
                                 actionsContainer: leftActionsContainer.current,
-                                translate,
+                                translate, resetTranslate, autoReturn,
                                 maxDistance: distanceRange.current[1]
-                            }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsLeft, children: !!leftActions &&
+                            }), [translate, distanceRange.current, autoReturn]), children: _jsx("div", { className: classes.actionsLeft, children: !!leftActions &&
                                     renderActions(leftActions) }) }), _jsx(SlidableActionsContext, { value: useMemo(() => ({
                                 actionsContainer: rightActionsContainer.current,
-                                translate,
+                                translate, resetTranslate, autoReturn,
                                 maxDistance: -distanceRange.current[0]
-                            }), [translate, distanceRange.current]), children: _jsx("div", { className: classes.actionsRight, children: !!rightActions &&
+                            }), [translate, distanceRange.current, autoReturn]), children: _jsx("div", { className: classes.actionsRight, children: !!rightActions &&
                                     renderActions(rightActions) }) })] })] }) }));
 });
 SlidableActions.Action = SlidableActionsAction;

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

@@ -4,7 +4,7 @@ export declare const classes: {
     actionsLeft: string;
     actionsRight: string;
     actionItem: string;
-    actionItemWrap: string;
+    actionItemButton: string;
     actionItemIcon: string;
 } & {
     root: string;

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

@@ -6,29 +6,29 @@ export const classes = defineInnerClasses('slidable-actions', [
     'actionsLeft',
     'actionsRight',
     'actionItem',
-    'actionItemWrap',
+    'actionItemButton',
     'actionItemIcon'
 ]);
 export const style = defineCss(({ background }) => css `
     position: relative;
     overflow: hidden;
-    
+
     .${classes.content} {
         touch-action: pan-y;
         position: relative;
         z-index: 1;
     }
-    
+
     .${classes.actions} {
         position: absolute;
         inset: 0;
-    
+
         .${classes.actionsLeft}, .${classes.actionsRight} {
             width: 100%;
             height: 100%;
             position: absolute;
             top: 0;
-    
+
             .${classes.actionItem} {
                 width: 100%;
                 height: 100%;
@@ -38,34 +38,35 @@ export const style = defineCss(({ background }) => css `
                 color: ${background.content};
                 position: absolute;
                 top: 0;
-    
-                .${classes.actionItemWrap} {
+
+                .${classes.actionItemButton} {
                     flex: 1;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
-                    padding: 0 18px;    
+                    padding: 0 18px;
+                    border-radius: 0;
                 }
-    
+
                 .${classes.actionItemIcon} {
                     display: flex;
                 }
             }
         }
-    
+
         .${classes.actionsLeft} {
             right: 100%;
-    
+
             .${classes.actionItem} {
                 align-items: flex-end;
                 right: 0;
             }
         }
-    
+
         .${classes.actionsRight} {
             left: 100%;
-    
+
             .${classes.actionItem} {
                 align-items: flex-start;
                 left: 0;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 import { ButtonProps } from '../button';
 export interface SlidableActionsActionProps extends DivProps {
@@ -6,7 +6,9 @@ export interface SlidableActionsActionProps extends DivProps {
     label?: ReactNode;
     icon?: ReactNode;
     buttonProps?: Omit<ButtonProps, 'onClick'>;
+    /** 点击action后是否自动归位，默认为`true` */
+    autoReturn?: boolean;
     /** @private */
     _index?: number;
 }
-export declare const SlidableActionsAction: import("react").MemoExoticComponent<({ color, label, icon, buttonProps, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const SlidableActionsAction: React.MemoExoticComponent<({ color, label, icon, buttonProps, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -6,7 +6,7 @@ import { clsx, cloneRef, colorTransfer } from '../../utils';
 import { useTheme } from '../theme';
 import { useSlidableActionsContext } from './slidableActions';
 export const SlidableActionsAction = memo(({ color = 'default', label, icon, buttonProps, _index, ...props }) => {
-    const { actionsContainer, translate, maxDistance } = useSlidableActionsContext();
+    const { actionsContainer, translate, resetTranslate, maxDistance, autoReturn } = useSlidableActionsContext();
     const innerButtonRef = useRef(null);
     useEffect(() => {
         actionsContainer[_index] = innerButtonRef.current;
@@ -29,8 +29,12 @@ export const SlidableActionsAction = memo(({ color = 'default', label, icon, but
             ? '#aaaaaa'
             : colorTransfer(color, theme);
     }, [color, theme]);
+    const clickHandler = (e) => {
+        props.onClick?.(e);
+        autoReturn && resetTranslate();
+    };
     return (_jsx("div", { ...props, className: classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "text.primary", children: label }) }));
+        }, onClick: clickHandler, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemButton, buttonProps?.className), prefix: icon, color: color, variant: "flatted", children: label }) }));
 });

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode, JSX } from 'react';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { ColorPropsValue, DivProps } from '../../types';
 import { TooltipProps } from '../tooltip';
 export interface MarkItem extends DivProps {
@@ -41,7 +41,7 @@ interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | '
     markLabelOffset?: number;
     markSize?: number;
     disableTrack?: boolean;
-    draggableOptions?: DraggableOptions;
+    gestureOptions?: GestureOptions;
 }
 export interface SliderSingleProps extends SliderBaseProps {
     defaultValue?: number;
@@ -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<({ 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 declare const Slider: import("react").MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, gestureOptions, 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 { memo, useEffect, useMemo, useRef } from 'react';
-import { clsx, cloneRef, isUnset, useControlled, useDraggableHandle } from '../../utils';
+import { clsx, cloneRef, isUnset, useControlled, useDraggable } from '../../utils';
 import { classes, useStyle } from './slider.style';
 import { Tooltip } from '../tooltip';
 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 }) => {
+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, gestureOptions, defaultValue = min, value, onChange, ...props }) => {
     const { spacing } = useTheme();
     markLabelOffset ??= inset ? spacing[1] : spacing[2];
     const orderedMarks = useMemo(() => {
@@ -87,10 +87,10 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
     const railRef = useRef(null);
     const handleRefs = useRef([]);
     const dragStartData = useRef(void 0);
-    const draggableHandle = useDraggableHandle({
-        ...draggableOptions,
+    const draggableHandles = useDraggable({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const railLength = orientation === 'horizontal' ? railRef.current.offsetWidth : railRef.current.offsetHeight;
             let handleIndex = 0;
             let percent;
@@ -147,9 +147,9 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
             dragStartData.current = { railLength, percent, handleIndex };
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
+            gestureOptions?.onDrag?.(info, e);
             const { percent, railLength, handleIndex } = dragStartData.current;
-            const delta = orientation === 'horizontal' ? info.deltaX : -info.deltaY;
+            const delta = orientation === 'horizontal' ? info.diff[0] : -info.diff[1];
             setInnerValue(percentToValue(percent + delta / railLength * 100), handleIndex);
         }
     });
@@ -184,7 +184,7 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
                 onPointerDown(e) {
                     e.stopPropagation();
                     handleProps?.onPointerDown?.(e);
-                    draggableHandle.onPointerDown(e);
+                    draggableHandles.onPointerDown(e);
                 }
             };
             return renderHandle
@@ -226,7 +226,7 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
             },
             onPointerDown: e => {
                 railProps?.onPointerDown?.(e);
-                draggableHandle.onPointerDown(e);
+                draggableHandles.onPointerDown(e);
             },
             children: (_jsxs("div", { className: classes.railWrap, children: [!disableTrack &&
                         _jsx("div", { className: classes.track, style: valueIsArray

package/dist/esm/components/tabs/tabs.js

@@ -94,7 +94,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
             });
         };
         if (position === 'top' || position === 'bottom') {
-            scroller.addEventListener('wheel', onWheel, { passive: false });
+            scroller.addEventListener('wheel', onWheel);
         }
         const resizeObserver = new ResizeObserver(setShadow);
         resizeObserver.observe(scroller);

package/dist/esm/components/theme/themeVariables.js

@@ -103,7 +103,7 @@ export const defaultBreakpoints = {
     sm: 600,
     md: 900,
     lg: 1200,
-    xl: 1536
+    xl: 1500
 };
 export const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',

package/dist/esm/components/upload/itemStatus.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, Ref, SetStateAction } from 'react';
 import { UploadSharedProps, UploadFile, UploadStatus } from './upload';
 export type ItemRef<R, A extends any[]> = {
-    upload(...args: A): Promise<R>;
+    upload(...args: A): Promise<R | undefined>;
     setStatus: Dispatch<SetStateAction<UploadStatus>>;
     setProgress: Dispatch<SetStateAction<number>>;
 };

package/dist/esm/components/upload/itemStatus.js

@@ -4,6 +4,9 @@ export function useItemStatus(props) {
         props.file.url ||= URL.createObjectURL(props.file);
     }
     const upload = props.file.upload = async (...args) => {
+        if (!props.onUpload) {
+            return;
+        }
         try {
             setStatus('uploading');
             setProgress(0);

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

@@ -8,11 +8,11 @@ export interface UploadFile<R, A extends any[]> extends File {
     progress?: number;
     status?: UploadStatus;
     url?: string;
-    upload?(...args: A): Promise<R>;
+    upload?(...args: A): Promise<R | undefined>;
 }
 export interface UploadSharedProps<R, A extends any[]> {
     type?: 'file' | 'image';
-    onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
+    onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
 export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     inputProps?: JSX.IntrinsicElements['input'];
@@ -37,7 +37,7 @@ export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>
     onChange?(value: UploadFile<R, A>[]): void;
 }
 export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElement {
-    upload(...args: A): Promise<R>;
+    upload(...args: A): Promise<R | undefined>;
 }
 export declare const Upload: {
     <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;

package/dist/esm/components/upload/upload.js

@@ -31,7 +31,7 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
                 itemRef?.setProgress(0);
             }
             try {
-                const ret = await onUpload(innerValue.current, progress => {
+                const ret = await onUpload?.(innerValue.current, progress => {
                     for (const [, itemRef] of itemRefs.current) {
                         itemRef?.setProgress(progress);
                     }

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -7,8 +7,7 @@ import { Button } from '../../components/button';
 import { iframeStyle } from './documentViewer.style';
 import { useDerivedState, useLoading } from '../../utils';
 import { PdfViewer } from './pdfViewer';
-import { ImagePreview } from '../../components/image';
-import { Icon } from '../..';
+import { Gallery, Icon } from '../..';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 export const DocumentViewer = memo(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = useMemo(() => {
@@ -59,7 +58,7 @@ export const DocumentViewer = memo(({ src, filename, onError, type, extension, s
     }
     // image
     if (mimeType.includes('image/')) {
-        return _jsx(ImagePreview, { src: src, open: true, showClose: false });
+        return _jsx(Gallery, { src: src, open: true, showClose: false });
     }
     return empty;
 });

package/dist/esm/index.d.ts

@@ -37,6 +37,7 @@ export * from './components/dropdown';
 export * from './components/flex';
 export * from './components/form';
 export * from './components/formDialog';
+export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
 export * from './components/image';
@@ -52,6 +53,7 @@ export * from './components/overlayBase';
 export * from './components/pagination';
 export * from './components/palette';
 export * from './components/pickerDialog';
+export * from './components/pinchable';
 export * from './components/placeholder';
 export * from './components/popper';
 export * from './components/progress';

package/dist/esm/index.js

@@ -37,6 +37,7 @@ export * from './components/dropdown';
 export * from './components/flex';
 export * from './components/form';
 export * from './components/formDialog';
+export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
 export * from './components/image';
@@ -52,6 +53,7 @@ export * from './components/overlayBase';
 export * from './components/pagination';
 export * from './components/palette';
 export * from './components/pickerDialog';
+export * from './components/pinchable';
 export * from './components/placeholder';
 export * from './components/popper';
 export * from './components/progress';

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

@@ -1,4 +1,3 @@
-import React, { HTMLAttributes } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import { Obj } from '../types';
 /**
@@ -12,44 +11,3 @@ export declare function useDndSensors(): import("@dnd-kit/core").SensorDescripto
  * @param primaryKey 索引用的主键
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
-export type DraggableOptions<T extends Element = Element, D = any> = {
-    disabled?: boolean;
-    /** 按下后经过一段时间才触发拖拽事件，单位ms */
-    delay?: number;
-    /** 拖拽一段距离后才触发拖拽事件，单位px */
-    distance?: number;
-    onDragStart?(e: React.PointerEvent<T>): D;
-    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
-    onDragEnd?(info: DragEndInfo<D>): void;
-    onDragCancel?(info: DragEndInfo<D>): 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<T> = {
-    /** 开始位置 */
-    startX: number;
-    startY: number;
-    /** 当前位置 */
-    currentX: number;
-    currentY: number;
-    /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
-    deltaX: number;
-    deltaY: number;
-    /** `onDragStart`的返回值 */
-    startData: T | undefined;
-};
-export interface DragEndInfo<T> extends DragInfo<T> {
-    /** 从按下到抬起经过的时长（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, D = any>(options?: DraggableOptions<T, D>): HandleProps<T>;

package/dist/esm/utils/dnd.js

@@ -1,8 +1,5 @@
-import { useCallback, useRef } from 'react';
-import { useSync } from './hooks';
 import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
-import { useTheme } from '../components/theme';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -29,120 +26,3 @@ export function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
     return arrayMove(prevState, oldIndex, newIndex);
 }
-export function useDraggableHandle(options = {}) {
-    const { zoom } = useTheme();
-    options.zoom ||= zoom;
-    const syncOptions = useSync(options);
-    const preventDefaultCallback = useRef(void 0);
-    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(void 0);
-    const data = useRef(void 0);
-    const onPointerDown = useCallback((e) => {
-        if (syncOptions.current.disabled) {
-            return;
-        }
-        isDragged.current = false;
-        const dragStart = () => {
-            startTime.current = Date.now();
-            startPosition.current = [e.clientX, e.clientY];
-            data.current = syncOptions.current.onDragStart?.(e);
-            document.documentElement.style.userSelect = 'none';
-        };
-        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);
-        const deltaY = (clientY - startY) / (syncOptions.current.zoom);
-        return {
-            startX, startY,
-            currentX: clientX, currentY: clientY,
-            deltaX, deltaY,
-            startData: data.current
-        };
-    };
-    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;
-        }
-        document.documentElement.style.userSelect = '';
-        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));
-    };
-    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 };
-}