@uxf/core-react 11.72.3 → 11.74.0

package/swipeable/use-swipeable.js

@@ -1,314 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UP = exports.RIGHT = exports.LEFT = exports.DOWN = void 0;
-exports.useSwipeable = useSwipeable;
-const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
-const react_1 = require("react");
-const types_1 = require("./types");
-Object.defineProperty(exports, "DOWN", { enumerable: true, get: function () { return types_1.DOWN; } });
-Object.defineProperty(exports, "LEFT", { enumerable: true, get: function () { return types_1.LEFT; } });
-Object.defineProperty(exports, "RIGHT", { enumerable: true, get: function () { return types_1.RIGHT; } });
-Object.defineProperty(exports, "UP", { enumerable: true, get: function () { return types_1.UP; } });
-const defaultProps = {
-    delta: 10,
-    preventScrollOnSwipe: false,
-    rotationAngle: 0,
-    trackMouse: false,
-    trackTouch: true,
-    swipeDuration: Infinity,
-    touchEventOptions: { passive: true },
-};
-const initialState = {
-    first: true,
-    initial: [0, 0],
-    start: 0,
-    swiping: false,
-    xy: [0, 0],
-};
-const mouseMove = "mousemove";
-const mouseUp = "mouseup";
-const touchEnd = "touchend";
-const touchMove = "touchmove";
-const touchStart = "touchstart";
-function getDirection(absX, absY, deltaX, deltaY) {
-    if (absX > absY) {
-        if (deltaX > 0) {
-            return types_1.RIGHT;
-        }
-        return types_1.LEFT;
-    }
-    else if (deltaY > 0) {
-        return types_1.DOWN;
-    }
-    return types_1.UP;
-}
-function rotateXYByAngle(pos, angle) {
-    if (angle === 0) {
-        return pos;
-    }
-    const angleInRadians = (Math.PI / 180) * angle;
-    const x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
-    const y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
-    return [x, y];
-}
-function getHandlers(set, handlerProps) {
-    const onStart = (event) => {
-        const isTouch = "touches" in event;
-        // if more than a single touch don't track, for now...
-        if (isTouch && event.touches.length > 1) {
-            return;
-        }
-        set((state, props) => {
-            var _a;
-            // setup mouse listeners on document to track swipe since swipe can leave container
-            if (props.trackMouse && !isTouch) {
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                document.addEventListener(mouseMove, onMove);
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                document.addEventListener(mouseUp, onUp);
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            (_a = props.onTouchStartOrOnMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, { event });
-            return {
-                ...state,
-                ...initialState,
-                initial: xy.slice(),
-                xy,
-                start: event.timeStamp || 0,
-            };
-        });
-    };
-    const onMove = (event) => {
-        // eslint-disable-next-line complexity
-        set((state, props) => {
-            var _a, _b;
-            const isTouch = "touches" in event;
-            // Discount a swipe if additional touches are present after
-            // a swipe has started.
-            if (isTouch && event.touches.length > 1) {
-                return state;
-            }
-            // if swipe has exceeded duration stop tracking
-            if (event.timeStamp - state.start > props.swipeDuration) {
-                return state.swiping ? { ...state, swiping: false } : state;
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            const deltaX = x - state.xy[0];
-            const deltaY = y - state.xy[1];
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            const time = (event.timeStamp || 0) - state.start;
-            const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
-            const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
-            const dir = getDirection(absX, absY, deltaX, deltaY);
-            // if swipe is under delta and we have not started to track a swipe: skip update
-            const delta = typeof props.delta === "number"
-                ? props.delta
-                : props.delta[dir.toLowerCase()] || defaultProps.delta;
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            if (absX < delta && absY < delta && !state.swiping) {
-                return state;
-            }
-            const eventData = {
-                absX,
-                absY,
-                deltaX,
-                deltaY,
-                dir,
-                event,
-                first: state.first,
-                initial: state.initial,
-                velocity,
-                vxvy,
-            };
-            // call onSwipeStart if present and is first swipe event
-            if (eventData.first) {
-                (_a = props.onSwipeStart) === null || _a === void 0 ? void 0 : _a.call(props, eventData);
-            }
-            // call onSwiping if present
-            (_b = props.onSwiping) === null || _b === void 0 ? void 0 : _b.call(props, eventData);
-            // track if a swipe is cancelable (handler for swiping or swiped(dir) exists)
-            // so we can call preventDefault if needed
-            let cancelablePageSwipe = false;
-            if (props.onSwiping || props.onSwiped || props[`onSwiped${dir}`]) {
-                cancelablePageSwipe = true;
-            }
-            if (cancelablePageSwipe && props.preventScrollOnSwipe && props.trackTouch && event.cancelable) {
-                event.preventDefault();
-            }
-            return {
-                ...state,
-                // first is now always false
-                first: false,
-                eventData,
-                swiping: true,
-            };
-        });
-    };
-    const onEnd = (event) => {
-        set((state, props) => {
-            var _a, _b, _c;
-            let eventData;
-            if (state.swiping && state.eventData) {
-                // if swipe is less than duration fire swiped callbacks
-                if (event.timeStamp - state.start < props.swipeDuration) {
-                    eventData = { ...state.eventData, event };
-                    (_a = props.onSwiped) === null || _a === void 0 ? void 0 : _a.call(props, eventData);
-                    const onSwipedDir = props[`onSwiped${eventData.dir}`];
-                    onSwipedDir === null || onSwipedDir === void 0 ? void 0 : onSwipedDir(eventData);
-                }
-            }
-            else {
-                (_b = props.onTap) === null || _b === void 0 ? void 0 : _b.call(props, { event });
-            }
-            (_c = props.onTouchEndOrOnMouseUp) === null || _c === void 0 ? void 0 : _c.call(props, { event });
-            return { ...state, ...initialState, eventData };
-        });
-    };
-    const cleanUpMouse = () => {
-        // safe to just call removeEventListener
-        document.removeEventListener(mouseMove, onMove);
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        document.removeEventListener(mouseUp, onUp);
-    };
-    const onUp = (e) => {
-        cleanUpMouse();
-        onEnd(e);
-    };
-    /**
-     * The value of passive on touchMove depends on `preventScrollOnSwipe`:
-     * - true => { passive: false }
-     * - false => { passive: true } // Default
-     *
-     * NOTE: When preventScrollOnSwipe is true, we attempt to call preventDefault to prevent scroll.
-     *
-     * props.touchEventOptions can also be set for all touch event listeners,
-     * but for `touchmove` specifically when `preventScrollOnSwipe` it will
-     * supersede and force passive to false.
-     *
-     */
-    const attachTouch = (el, props) => {
-        // eslint-disable-next-line no-empty-function
-        let cleanup = () => { };
-        if ((0, is_not_nil_1.isNotNil)(el) && (0, is_not_nil_1.isNotNil)(el.addEventListener)) {
-            const baseOptions = {
-                ...defaultProps.touchEventOptions,
-                ...props.touchEventOptions,
-            };
-            // attach touch event listeners and handlers
-            const tls = [
-                [touchStart, onStart, baseOptions],
-                // preventScrollOnSwipe option supersedes touchEventOptions.passive
-                [
-                    touchMove,
-                    onMove,
-                    {
-                        ...baseOptions,
-                        ...(props.preventScrollOnSwipe ? { passive: false } : {}),
-                    },
-                ],
-                [touchEnd, onEnd, baseOptions],
-            ];
-            tls.forEach(([e, h, o]) => el.addEventListener(e, h, o));
-            // return properly scoped cleanup method for removing listeners, options not required
-            cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));
-        }
-        return cleanup;
-    };
-    const onRef = (el) => {
-        // "inline" ref functions are called twice on render, once with null then again with DOM element
-        // ignore null here
-        if (el === null) {
-            return;
-        }
-        set((state, props) => {
-            // if the same DOM el as previous just return state
-            if (state.el === el) {
-                return state;
-            }
-            const addState = {};
-            // if new DOM el clean up old DOM and reset cleanUpTouch
-            if (state.el && state.el !== el && state.cleanUpTouch) {
-                state.cleanUpTouch();
-                addState.cleanUpTouch = void 0;
-            }
-            // only attach if we want to track touch
-            if (props.trackTouch) {
-                addState.cleanUpTouch = attachTouch(el, props);
-            }
-            // store event attached DOM el for comparison, clean up, and re-attachment
-            return { ...state, el, ...addState };
-        });
-    };
-    // set ref callback to attach touch event listeners
-    const output = {
-        ref: onRef,
-    };
-    // if track mouse attach mouse down listener
-    if (handlerProps.trackMouse) {
-        output.onMouseDown = onStart;
-    }
-    return [output, attachTouch];
-}
-function updateTransientState(state, props, previousProps, attachTouch) {
-    // if trackTouch is off or there is no el, then remove handlers if necessary and exit
-    if (!props.trackTouch || !state.el) {
-        if (state.cleanUpTouch) {
-            state.cleanUpTouch();
-        }
-        return {
-            ...state,
-            cleanUpTouch: undefined,
-        };
-    }
-    // trackTouch is on, so if there are no handlers attached, attach them and exit
-    if (!state.cleanUpTouch) {
-        return {
-            ...state,
-            cleanUpTouch: attachTouch(state.el, props),
-        };
-    }
-    // trackTouch is on and handlers are already attached, so if preventScrollOnSwipe changes value,
-    // remove and reattach handlers (this is required to update the passive option when attaching
-    // the handlers)
-    if (props.preventScrollOnSwipe !== previousProps.preventScrollOnSwipe ||
-        props.touchEventOptions.passive !== previousProps.touchEventOptions.passive) {
-        state.cleanUpTouch();
-        return {
-            ...state,
-            cleanUpTouch: attachTouch(state.el, props),
-        };
-    }
-    return state;
-}
-function useSwipeable(options) {
-    const { trackMouse } = options;
-    const transientState = (0, react_1.useRef)({ ...initialState });
-    const transientProps = (0, react_1.useRef)({
-        ...defaultProps,
-    });
-    // track previous rendered props
-    const previousProps = (0, react_1.useRef)({
-        ...transientProps.current,
-    });
-    previousProps.current = { ...transientProps.current };
-    // update current render props & defaults
-    transientProps.current = {
-        ...defaultProps,
-        ...options,
-    };
-    // Force defaults for config properties
-    let defaultKey;
-    for (defaultKey in defaultProps) {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (transientProps.current[defaultKey] === void 0) {
-            transientProps.current[defaultKey] = defaultProps[defaultKey];
-        }
-    }
-    const [handlers, attachTouch] = (0, react_1.useMemo)(() => getHandlers((stateSetter) => (transientState.current = stateSetter(transientState.current, transientProps.current)), { trackMouse }), [trackMouse]);
-    transientState.current = updateTransientState(transientState.current, transientProps.current, previousProps.current, attachTouch);
-    return handlers;
-}

package/utils/compose-refs.d.ts

@@ -1,2 +0,0 @@
-import { Ref, RefCallback } from "react";
-export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;

package/utils/compose-refs.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.composeRefs = composeRefs;
-function composeRefs(...refs) {
-    return (value) => refs.forEach((ref) => {
-        if (!ref) {
-            return;
-        }
-        if (typeof ref === "function") {
-            ref(value);
-            return;
-        }
-        ref.current = value;
-    });
-}

package/utils/compose-refs.test.d.ts

@@ -1 +0,0 @@
-export {};

package/utils/compose-refs.test.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const compose_refs_1 = require("./compose-refs");
-describe("composeRefs", () => {
-    it("should call ref if it is a function", () => {
-        const refCallback = jest.fn();
-        const composedRef = (0, compose_refs_1.composeRefs)(refCallback);
-        composedRef("test-value");
-        expect(refCallback).toHaveBeenCalledWith("test-value");
-    });
-    it("should assign value to a MutableRefObject", () => {
-        const refObject = { current: null };
-        const composedRef = (0, compose_refs_1.composeRefs)(refObject);
-        composedRef("test-value");
-        expect(refObject.current).toBe("test-value");
-    });
-    it("should ignore undefined refs", () => {
-        const composedRef = (0, compose_refs_1.composeRefs)(undefined);
-        expect(() => composedRef("test-value")).not.toThrow();
-    });
-    it("should handle both function and MutableRefObject refs", () => {
-        const refCallback = jest.fn();
-        const refObject = { current: null };
-        const composedRef = (0, compose_refs_1.composeRefs)(refCallback, refObject);
-        composedRef("test-value");
-        expect(refCallback).toHaveBeenCalledWith("test-value");
-        expect(refObject.current).toBe("test-value");
-    });
-    it("should handle multiple refs", () => {
-        const refCallback1 = jest.fn();
-        const refCallback2 = jest.fn();
-        const refObject1 = { current: null };
-        const refObject2 = { current: null };
-        const composedRef = (0, compose_refs_1.composeRefs)(refCallback1, refObject1, refCallback2, refObject2);
-        composedRef("test-value");
-        expect(refCallback1).toHaveBeenCalledWith("test-value");
-        expect(refCallback2).toHaveBeenCalledWith("test-value");
-        expect(refObject1.current).toBe("test-value");
-        expect(refObject2.current).toBe("test-value");
-    });
-});