@canlooks/can-ui 0.0.42 → 0.0.44

package/dist/cjs/components/pinchable/pinchable.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pinchable = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const pinchable_style_1 = require("./pinchable.style");
+exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, ...props }) => {
+    (0, react_1.useImperativeHandle)(ref, () => {
+        if (wrapperRef.current) {
+            wrapperRef.current.zoomIn = () => {
+                zoomFn(innerScale.current * 1.5);
+            };
+            wrapperRef.current.zoomOut = () => {
+                zoomFn(innerScale.current * .5);
+            };
+            wrapperRef.current.zoomTo = zoomFn;
+            wrapperRef.current.rotate =
+                wrapperRef.current.rotateLeft = () => {
+                    rotateFn(innerRotate.current - 90);
+                };
+            wrapperRef.current.rotateRight = () => {
+                rotateFn(innerRotate.current + 90);
+            };
+            wrapperRef.current.reset = resetAll;
+        }
+        return wrapperRef.current;
+    });
+    const wrapperRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    const [innerScale, setInnerScale] = (0, utils_1.useControlled)(defaultScale, scale, onScaleChange);
+    const [innerTranslate, setInnerTranslate] = (0, utils_1.useControlled)(defaultTranslate, translate, onTranslateChange);
+    const [innerRotate, setInnerRotate] = (0, utils_1.useControlled)(defaultRotate, rotate, onRotateChange);
+    const { draggableHandles, pinchableHandles } = (0, utils_1.useGesture)({
+        ...gestureOptions,
+        pinchable: true,
+        onDragStart(info) {
+            gestureOptions?.onDragStart?.(info);
+            return [...innerTranslate.current];
+        },
+        onDrag(info, e) {
+            gestureOptions?.onDrag?.(info, e);
+            const { diff: [dx, dy], data: [startX, startY] } = info;
+            setInnerTranslate(translateLimitFn(startX + dx, startY + dy));
+        },
+        onPinchStart(info) {
+            gestureOptions?.onPinchStart?.(info);
+            const { startSpacing, startMiddle: [sx, sy] } = info;
+            const { x, y, width, height } = contentRef.current.getBoundingClientRect();
+            const startDiagonal = Math.sqrt(width ** 2 + height ** 2);
+            return {
+                startScale: innerScale.current,
+                startTranslate: [...innerTranslate.current],
+                middlePosition: [
+                    (sx - x - width / 2) / width,
+                    (sy - y - height / 2) / height
+                ],
+                startDiagonal,
+                rectRatio: width / height,
+                spacingRatio: startSpacing / startDiagonal
+            };
+        },
+        onPinch(info) {
+            gestureOptions?.onPinch?.(info);
+            const { currentSpacing, diffSpacing, diffMiddle: [dx, dy], data: { spacingRatio, startDiagonal, startScale, rectRatio, startTranslate, middlePosition } } = info;
+            const targetDiagonal = currentSpacing / spacingRatio;
+            const targetScale = targetDiagonal / startDiagonal;
+            const newScale = (0, utils_1.range)(startScale * targetScale, ...scaleLimit);
+            setInnerScale(newScale);
+            const diffDiagonal = diffSpacing / spacingRatio;
+            const diffH = diffDiagonal / Math.sqrt(rectRatio ** 2 + 1);
+            const diffW = diffH * rectRatio;
+            const newX = startTranslate[0] - diffW * middlePosition[0] + dx;
+            const newY = startTranslate[1] - diffH * middlePosition[1] + dy;
+            setInnerTranslate(translateLimitFn(newX, newY, newScale));
+        }
+    });
+    if (!children) {
+        return;
+    }
+    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current) => {
+        if (translateLimit) {
+            return translateLimit(x, y, scale);
+        }
+        const { clientWidth: wrapperWidth, clientHeight: wrapperHeight } = wrapperRef.current;
+        const { offsetWidth, offsetHeight } = contentRef.current;
+        const isRotated = deg % 180 !== 0;
+        const contentWidth = (isRotated ? offsetHeight : offsetWidth) * scale;
+        const contentHeight = (isRotated ? offsetWidth : offsetHeight) * scale;
+        const limitX = contentWidth > wrapperWidth ? (contentWidth - wrapperWidth) / 2 : 0;
+        const limitY = contentHeight > wrapperHeight ? (contentHeight - wrapperHeight) / 2 : 0;
+        return [
+            (0, utils_1.range)(x, -limitX, limitX),
+            (0, utils_1.range)(y, -limitY, limitY)
+        ];
+    };
+    const childrenProps = children.props;
+    const allowTransition = () => {
+        contentRef.current && (contentRef.current.dataset.transition = 'true');
+    };
+    const zoomFn = (targetScale, originX, originY) => {
+        allowTransition();
+        const content = contentRef.current;
+        const newScale = (0, utils_1.range)(targetScale, ...scaleLimit);
+        const newWidth = content.offsetWidth * newScale;
+        const newHeight = content.offsetHeight * newScale;
+        if (typeof originX === 'undefined' || typeof originY === 'undefined') {
+            const { x, y, width, height } = wrapperRef.current.getBoundingClientRect();
+            originX = x + (width / 2);
+            originY = y + (height / 2);
+        }
+        const { x, y, width, height } = contentRef.current.getBoundingClientRect();
+        const diffW = newWidth - width;
+        const diffH = newHeight - height;
+        const positionX = (originX - x - width / 2) / width;
+        const positionY = (originY - y - height / 2) / height;
+        const newX = innerTranslate.current[0] - diffW * positionX;
+        const newY = innerTranslate.current[1] - diffH * positionY;
+        setInnerScale(newScale);
+        setInnerTranslate(translateLimitFn(newX, newY, newScale));
+    };
+    const resetZoom = (transition = true) => {
+        transition && allowTransition();
+        setInnerScale((0, utils_1.range)(1, ...scaleLimit));
+        setInnerTranslate([0, 0]);
+    };
+    const rotateFn = (deg) => {
+        allowTransition();
+        setInnerRotate(deg);
+        setInnerTranslate(translateLimitFn(...innerTranslate.current, innerScale.current, deg));
+    };
+    const resetAll = (transition = true) => {
+        transition && allowTransition();
+        resetZoom(false);
+        setInnerRotate(0);
+    };
+    const doubleClickHandler = (e) => {
+        childrenProps.onDoubleClick?.(e);
+        if (innerScale.current < 1.5) {
+            zoomFn(3, e.clientX, e.clientY);
+        }
+        else {
+            resetZoom();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: pinchable_style_1.style, className: (0, utils_1.clsx)(pinchable_style_1.classes.root, props.className), ...pinchableHandles, children: (0, react_1.cloneElement)(children, {
+            ref: (0, utils_1.cloneRef)(contentRef, childrenProps.ref),
+            className: (0, utils_1.clsx)(pinchable_style_1.classes.content, childrenProps.className),
+            style: {
+                ...childrenProps?.style,
+                scale: innerScale.current,
+                translate: `${innerTranslate.current[0]}px ${innerTranslate.current[1]}px`,
+                rotate: innerRotate.current + 'deg',
+                transformOrigin: 'center'
+            },
+            ...draggableHandles,
+            onDoubleClick: doubleClickHandler,
+            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+        }) }));
+});

package/dist/cjs/components/pinchable/pinchable.style.d.ts

@@ -0,0 +1,6 @@
+export declare const classes: {
+    content: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/pinchable/pinchable.style.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+exports.classes = (0, utils_1.defineClasses)('pinchable', [
+    'content'
+]);
+exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &, .${exports.classes.content} {
+        touch-action: none;
+    }
+
+    .${exports.classes.content}[data-transition=true] {
+        transition: all .25s ${easing.easeOut};
+    }
+`);

package/dist/cjs/components/placeholder/placeholder.style.js

@@ -28,6 +28,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
         font-size: 1.7em;
         margin-top: ${spacing[8]}px;
         font-weight: bold;
+        white-space: nowrap;
     }
     
     .${exports.classes.description} {

package/dist/cjs/components/progress/progress.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 export interface ProgressProps extends DivProps {
     showInfo?: boolean;
-    renderInfo?(value?: number): ReactNode;
+    renderInfo?(value: number): ReactNode;
     color?: ColorPropsValue;
     status?: 'default' | 'processing' | 'success' | 'error';
     variant?: 'linear' | 'circular' | 'gauge';

package/dist/cjs/components/rating/rating.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export type CharacterProps = {
     index: number;
@@ -21,4 +21,4 @@ export interface RatingProps extends Omit<DivProps, 'defaultValue' | 'onChange'>
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Rating: import("react").MemoExoticComponent<({ color, size, count, renderStar, allowHalf, highlightSelectedOnly, defaultValue, value, onChange, readOnly, disabled, ...props }: RatingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Rating: React.MemoExoticComponent<({ color, size, count, renderStar, allowHalf, highlightSelectedOnly, defaultValue, value, onChange, readOnly, disabled, ...props }: RatingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/rating/rating.js

@@ -8,7 +8,7 @@ const rating_style_1 = require("./rating.style");
 const theme_1 = require("../theme");
 const __1 = require("../..");
 const faStar_1 = require("@fortawesome/free-solid-svg-icons/faStar");
-exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faStar_1.faStar }), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
+exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faStar_1.faStar }), allowHalf, highlightSelectedOnly = false, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
@@ -43,9 +43,7 @@ exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, render
             const isHalf = !highlightSelectedOnly && isActive && index > refer - 1;
             return ((0, jsx_runtime_1.jsxs)("div", { className: rating_style_1.classes.star, children: [characterIsFunction
                         ? renderStar({ index })
-                        : (0, react_1.isValidElement)(renderStar)
-                            ? (0, react_1.cloneElement)(renderStar, { index })
-                            : renderStar, isActive && (characterIsFunction
+                        : renderStar, isActive && (characterIsFunction
                         ? renderStar({
                             index,
                             active: true,
@@ -53,7 +51,6 @@ exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, render
                         })
                         : (0, react_1.isValidElement)(renderStar)
                             ? (0, react_1.cloneElement)(renderStar, {
-                                index,
                                 'data-active': true,
                                 'data-half': isHalf
                             })

package/dist/cjs/components/rating/rating.style.js

@@ -27,8 +27,7 @@ function useStyle({ color }) {
                 color: ${colorValue};
 
                 &[data-half=true] {
-                    width: 50%;
-                    overflow: hidden;
+                    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
                 }
             }
 

package/dist/cjs/components/resizable/resizable.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ElementType } from 'react';
 import { ColorPropsValue, DivProps, OverridableComponent, OverridableProps, Placement, SlotsAndProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 type HandleAbbr = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
 export type Handle = Placement | HandleAbbr;
 export interface ResizableOwnProps extends SlotsAndProps<{
@@ -24,7 +24,7 @@ export interface ResizableOwnProps extends SlotsAndProps<{
     fixedRatio?: boolean;
     onResize?(width: number, height: number): void;
     onResizeEnd?(width: number, height: number): void;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
     /** 受控的尺寸 */
     defaultWidth?: CSSProperties['width'];
     defaultHeight?: CSSProperties['height'];

package/dist/cjs/components/resizable/resizable.js

@@ -31,7 +31,7 @@ const handleAlias = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
+exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, gestureOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
     const abbrHandles = (0, react_1.useMemo)(() => {
         return [...(0, utils_1.toArray)(handles).map(h => handleAlias[h])];
     }, [handles]);
@@ -40,10 +40,10 @@ exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}
     const [innerHeight, setInnerHeight] = (0, utils_1.useControlled)(defaultHeight, height);
     const [dragStartState, setDragStartState] = (0, react_1.useState)();
     const syncProps = (0, utils_1.useSync)({ onResize, onResizeEnd });
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
-        ...draggableOptions,
+    const draggableHandles = (0, utils_1.useDraggable)({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const handleType = e.currentTarget.dataset.handle;
             setDragStartState({
                 width: innerRef.current.offsetWidth,
@@ -57,24 +57,24 @@ exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}
             document.body.style.cursor = resizable_style_1.handleCursors[handleType] || '';
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
-            let { deltaX, deltaY } = info;
+            gestureOptions?.onDrag?.(info, e);
+            let { diff: [dx, dy] } = info;
             const { width, height, includeT, includeB, includeL, includeR } = dragStartState;
             if (includeL) {
-                deltaX *= -1;
+                dx *= -1;
             }
             if (includeT) {
-                deltaY *= -1;
+                dy *= -1;
             }
             if (includeL || includeR) {
-                setInnerWidth(width + deltaX);
+                setInnerWidth(width + dx);
             }
             if (includeT || includeB) {
-                setInnerHeight(height + deltaY);
+                setInnerHeight(height + dy);
             }
         },
         onDragEnd(info) {
-            draggableOptions?.onDragEnd?.(info);
+            gestureOptions?.onDragEnd?.(info);
             setDragStartState(void 0);
             document.body.style.cursor = '';
             syncProps.current?.onResizeEnd?.(innerRef.current.offsetWidth, innerRef.current.offsetHeight);
@@ -90,5 +90,5 @@ exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}
             maxHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
-        }, children: [(0, jsx_runtime_1.jsx)(Container, { ...containerProps, className: (0, utils_1.clsx)(resizable_style_1.classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
+        }, children: [(0, jsx_runtime_1.jsx)(Container, { ...containerProps, className: (0, utils_1.clsx)(resizable_style_1.classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandles }, h))] }));
 });

package/dist/cjs/components/scrollbar/scrollbar.d.ts

@@ -12,7 +12,7 @@ export interface ScrollbarOwnProps extends SlotsAndProps<{
     variant?: 'contain' | 'cover';
     /** 是否自动隐藏滚动条，默认为`true` */
     autoHide?: boolean;
-    /** 默认为`1em` */
+    /** 默认为`0.8em` */
     size?: number | string;
     /** 默认的`ref`属性传递至`scroller`元素，外层元素的`ref`需要指定`wrapperRef` */
     wrapperRef?: Ref<HTMLDivElement>;

package/dist/cjs/components/scrollbar/scrollbar.js

@@ -73,7 +73,7 @@ exports.Scrollbar = (({ component: Component = 'div', variant = 'contain', autoH
         thumbYRef.current.style.top = top + 'px';
         scrollerRef.current.scrollTop = top / verticalInfo.current.scrollRatio;
     };
-    const draggableHandleY = (0, utils_1.useDraggableHandle)({
+    const draggableHandleY = (0, utils_1.useDraggable)({
         onDragStart(e) {
             e.stopPropagation();
             containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'true';
@@ -82,8 +82,8 @@ exports.Scrollbar = (({ component: Component = 'div', variant = 'contain', autoH
             }
             return parseInt(thumbYRef.current.style.top || '0');
         },
-        onDrag({ deltaY, startData }) {
-            updateScrollTop(startData + deltaY);
+        onDrag({ diff: [, dy], data }) {
+            updateScrollTop(data + dy);
         },
         onDragEnd() {
             containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'false';
@@ -94,7 +94,7 @@ exports.Scrollbar = (({ component: Component = 'div', variant = 'contain', autoH
         thumbXRef.current.style.left = left + 'px';
         scrollerRef.current.scrollLeft = left / horizontalInfo.current.scrollRatio;
     };
-    const draggableHandleX = (0, utils_1.useDraggableHandle)({
+    const draggableHandleX = (0, utils_1.useDraggable)({
         onDragStart(e) {
             containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'true';
             e.stopPropagation();
@@ -103,8 +103,8 @@ exports.Scrollbar = (({ component: Component = 'div', variant = 'contain', autoH
             }
             return parseInt(thumbXRef.current.style.left || '0');
         },
-        onDrag({ deltaX, startData }) {
-            updateScrollLeft(startData + deltaX);
+        onDrag({ diff: [dx], data }) {
+            updateScrollLeft(data + dx);
         },
         onDragEnd() {
             containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'false';

package/dist/cjs/components/segmented/SegmentedOption.d.ts

@@ -6,6 +6,6 @@ export interface SegmentedOptionProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     value?: Id;
     label?: ReactNode;
-    disabled?: ReactNode;
+    disabled?: boolean;
 }
 export declare const SegmentedOption: import("react").MemoExoticComponent<({ orientation, prefix, suffix, value, label, disabled, ...props }: SegmentedOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/selectedList/selectedItem.js

@@ -12,7 +12,7 @@ function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
     const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
     });
-    (0, react_1.useMemo)(requestFn, []);
+    (0, react_1.useMemo)(requestFn, []).then();
     const closeHandler = (e) => {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);

package/dist/cjs/components/selectedList/selectedList.style.js

@@ -9,7 +9,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('selected-list', [
     'optionWrap'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    .${exports.classes.option}:not(:last-of-type) .${exports.classes.optionWrap} {
+    .${exports.classes.optionWrap} {
         margin-bottom: ${spacing[3]}px;
     }
 

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

@@ -3,7 +3,7 @@ import { DivProps } from '../../types';
 type SkeletonSharedProps = {
     /** 默认为`rounded` */
     variant?: 'circular' | 'rectangular' | 'rounded';
-    /** 是否播放动画，默认为`false` */
+    /** 是否播放动画，默认为`true` */
     animation?: boolean;
 };
 export interface SkeletonProps extends SkeletonSharedProps, DivProps {

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

@@ -1,11 +1,13 @@
 import { ReactElement } from 'react';
 import { DivProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { SlidableActionsAction, SlidableActionsActionProps } from './slidableActionsAction';
 export declare function useSlidableActionsContext(): {
-    actionsContainer: (HTMLElement | null)[];
-    translate: number;
-    maxDistance: number;
+    actionsContainer?: (HTMLElement | null)[];
+    translate?: number;
+    resetTranslate?(): void;
+    maxDistance?: number;
+    autoReturn?: boolean;
 };
 type ActionType = SlidableActionsActionProps | ReactElement;
 export interface SlidableActionsProps extends DivProps {
@@ -17,8 +19,10 @@ export interface SlidableActionsProps extends DivProps {
     effectiveSpeed?: number;
     leftActions?: ActionType | ActionType[];
     rightActions?: ActionType | ActionType[];
+    /** 点击action后是否自动归位，默认为`true` */
+    autoReturn?: boolean;
     disabled?: boolean;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
 }
 export declare const SlidableActions: {
     (props: SlidableActionsProps): ReactElement;

package/dist/cjs/components/slidableActions/slidableActions.js

@@ -8,16 +8,12 @@ const clickAway_1 = require("../clickAway");
 const slidableActions_style_1 = require("./slidableActions.style");
 const utils_1 = require("../../utils");
 const slidableActionsAction_1 = require("./slidableActionsAction");
-const bezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
-const SlidableActionsContext = (0, react_1.createContext)({
-    actionsContainer: [],
-    translate: 0,
-    maxDistance: 0
-});
+const bounceBezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
+const SlidableActionsContext = (0, react_1.createContext)({});
 function useSlidableActionsContext() {
     return (0, react_1.useContext)(SlidableActionsContext);
 }
-exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }) => {
+exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 12, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, autoReturn = true, disabled, gestureOptions, ...props }) => {
     const leftActionsContainer = (0, react_1.useRef)([]);
     const rightActionsContainer = (0, react_1.useRef)([]);
     const [distanceRange, setDistanceRange] = (0, utils_1.useSyncState)([0, 0]);
@@ -35,37 +31,37 @@ exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, boun
     const [translate, setTranslate] = (0, react_1.useState)(0);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const startTranslate = (0, react_1.useRef)(0);
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
-        ...draggableOptions,
+    const draggableHandles = (0, utils_1.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 = (0, utils_1.range)(startTranslate.current + info.deltaX, bounceMin, bounceMax);
+            let newTranslate = (0, utils_1.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())) {
@@ -86,14 +82,14 @@ exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, boun
             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
@@ -101,7 +97,7 @@ exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, boun
                 : setTranslate(0);
         }
     });
-    const onClickAway = () => {
+    const resetTranslate = () => {
         translate && setTranslate(0);
     };
     const renderActions = (actions) => {
@@ -116,16 +112,16 @@ exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, boun
                     : child;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: (0, jsx_runtime_1.jsxs)("div", { css: slidableActions_style_1.style, className: (0, utils_1.clsx)(slidableActions_style_1.classes.root, props.className), "data-dragging": dragging, children: [(0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), (0, jsx_runtime_1.jsxs)("div", { className: slidableActions_style_1.classes.actions, children: [(0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: resetTranslate, children: (0, jsx_runtime_1.jsxs)("div", { ...props, css: slidableActions_style_1.style, className: (0, utils_1.clsx)(slidableActions_style_1.classes.root, props.className), "data-dragging": dragging, children: [(0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.content, ...draggableHandles, style: { translate: `${translate}px 0` }, children: props.children }), (0, jsx_runtime_1.jsxs)("div", { className: slidableActions_style_1.classes.actions, children: [(0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
                                 actionsContainer: leftActionsContainer.current,
-                                translate,
+                                translate, resetTranslate, autoReturn,
                                 maxDistance: distanceRange.current[1]
-                            }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsLeft, children: !!leftActions &&
+                            }), [translate, distanceRange.current, autoReturn]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsLeft, children: !!leftActions &&
                                     renderActions(leftActions) }) }), (0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
                                 actionsContainer: rightActionsContainer.current,
-                                translate,
+                                translate, resetTranslate, autoReturn,
                                 maxDistance: -distanceRange.current[0]
-                            }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsRight, children: !!rightActions &&
+                            }), [translate, distanceRange.current, autoReturn]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsRight, children: !!rightActions &&
                                     renderActions(rightActions) }) })] })] }) }));
 });
 exports.SlidableActions.Action = slidableActionsAction_1.SlidableActionsAction;

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