@laser-ui/components 1.6.1 → 2.0.0

package/internal/transition/CollapseTransition.js

@@ -1,101 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isNumber, isUndefined } from 'lodash';
-import { useRef } from 'react';
-import { Transition } from './Transition';
-export function CollapseTransition(props) {
-    const { children, originalSize: originalSizeProp, collapsedSize, styles } = props, restProps = __rest(props, ["children", "originalSize", "collapsedSize", "styles"]);
-    const dataRef = useRef({
-        width: 0,
-        height: 0,
-    });
-    const elRef = useRef(null);
-    const isHorizontal = !isUndefined(originalSizeProp.width);
-    const getSizeStyle = (val) => (isUndefined(val) ? '' : isNumber(val) ? `${val}px` : val);
-    return (_jsx(Transition, Object.assign({}, restProps, { afterRender: () => {
-            var _a, _b, _c, _d, _e;
-            (_a = restProps.afterRender) === null || _a === void 0 ? void 0 : _a.call(restProps);
-            if (elRef.current) {
-                if (originalSizeProp.width === 'auto') {
-                    const cssText = elRef.current.style.cssText;
-                    elRef.current.style.width = 'auto';
-                    elRef.current.style.paddingLeft = getSizeStyle((_b = originalSizeProp.padding) === null || _b === void 0 ? void 0 : _b[3]);
-                    elRef.current.style.paddingRight = getSizeStyle((_c = originalSizeProp.padding) === null || _c === void 0 ? void 0 : _c[1]);
-                    dataRef.current.width = elRef.current.offsetWidth;
-                    elRef.current.style.cssText = cssText;
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    elRef.current.offsetTop;
-                }
-                else if (originalSizeProp.height === 'auto') {
-                    const cssText = elRef.current.style.cssText;
-                    elRef.current.style.height = 'auto';
-                    elRef.current.style.paddingTop = getSizeStyle((_d = originalSizeProp.padding) === null || _d === void 0 ? void 0 : _d[0]);
-                    elRef.current.style.paddingBottom = getSizeStyle((_e = originalSizeProp.padding) === null || _e === void 0 ? void 0 : _e[2]);
-                    dataRef.current.height = elRef.current.offsetHeight;
-                    elRef.current.style.cssText = cssText;
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    elRef.current.offsetTop;
-                }
-            }
-        }, children: (state) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-            const transitionStyle = Object.assign({}, styles[state]);
-            const originalSize = {
-                [isHorizontal ? 'width' : 'height']: isHorizontal
-                    ? originalSizeProp.width === 'auto'
-                        ? dataRef.current.width
-                        : originalSizeProp.width
-                    : originalSizeProp.height === 'auto'
-                        ? dataRef.current.height
-                        : originalSizeProp.height,
-            };
-            if (!isUndefined(originalSizeProp.padding)) {
-                originalSize.padding = originalSizeProp.padding.map((p) => getSizeStyle(p)).join(' ');
-            }
-            const collapsedStyle = Object.assign({
-                [isHorizontal ? 'width' : 'height']: collapsedSize[isHorizontal ? 'width' : 'height'],
-                overflow: 'hidden',
-            }, isHorizontal
-                ? {
-                    paddingLeft: (_b = (_a = collapsedSize.padding) === null || _a === void 0 ? void 0 : _a[3]) !== null && _b !== void 0 ? _b : 0,
-                    paddingRight: (_d = (_c = collapsedSize.padding) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0,
-                    marginLeft: (_f = (_e = collapsedSize.margin) === null || _e === void 0 ? void 0 : _e[3]) !== null && _f !== void 0 ? _f : 0,
-                    marginRight: (_h = (_g = collapsedSize.margin) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0,
-                }
-                : {
-                    paddingTop: (_k = (_j = collapsedSize.padding) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : 0,
-                    paddingBottom: (_m = (_l = collapsedSize.padding) === null || _l === void 0 ? void 0 : _l[2]) !== null && _m !== void 0 ? _m : 0,
-                    marginTop: (_p = (_o = collapsedSize.margin) === null || _o === void 0 ? void 0 : _o[0]) !== null && _p !== void 0 ? _p : 0,
-                    marginBottom: (_r = (_q = collapsedSize.margin) === null || _q === void 0 ? void 0 : _q[2]) !== null && _r !== void 0 ? _r : 0,
-                });
-            switch (state) {
-                case 'enter':
-                    Object.assign(transitionStyle, collapsedStyle);
-                    break;
-                case 'entering':
-                    Object.assign(transitionStyle, originalSize, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                case 'leave':
-                    if (elRef.current) {
-                        originalSize[isHorizontal ? 'width' : 'height'] = elRef.current[isHorizontal ? 'offsetWidth' : 'offsetHeight'];
-                    }
-                    Object.assign(transitionStyle, originalSize, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                case 'leaving':
-                    Object.assign(transitionStyle, collapsedStyle);
-                    break;
-                case 'leaved':
-                    Object.assign(transitionStyle, collapsedStyle, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                default:
-                    break;
-            }
-            return children(elRef, transitionStyle, state);
-        } })));
-}

package/internal/transition/Transition.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { TransitionProps } from './types';
-export declare function Transition(props: TransitionProps): JSX.Element | null;

package/internal/transition/Transition.js

@@ -1,87 +0,0 @@
-import { useAsync } from '@laser-ui/hooks';
-import { isArray, isBoolean, isNumber } from 'lodash';
-import { useEffect, useMemo, useRef, useState } from 'react';
-export function Transition(props) {
-    const { children, enter: enterProp, defaultEnter, during: duringProp, mountBeforeFirstEnter = true, skipFirstTransition = true, destroyWhenLeaved = false, afterRender, afterEnter, afterLeave, } = props;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initEnter = useMemo(() => (isBoolean(enterProp) ? enterProp : defaultEnter), []);
-    const initState = useMemo(() => {
-        const [skipEnter, skipLeave] = isArray(skipFirstTransition) ? skipFirstTransition : [skipFirstTransition, skipFirstTransition];
-        if (initEnter) {
-            return skipEnter ? 'entered' : 'enter';
-        }
-        else {
-            return skipLeave ? 'leaved' : 'leave';
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const dataRef = useRef({
-        prevEnter: initEnter,
-        isFirstEnter: !initEnter,
-        state: initState,
-    });
-    const enter = isBoolean(enterProp) ? enterProp : enterProp(dataRef.current.prevEnter);
-    const async = useAsync();
-    const [stateChange, setStateChange] = useState(0);
-    if (dataRef.current.prevEnter !== enter) {
-        dataRef.current.prevEnter = enter;
-        dataRef.current.state = enter ? 'enter' : 'leave';
-        dataRef.current.isFirstEnter = false;
-    }
-    const state = dataRef.current.state;
-    const nextFrame = (cb) => {
-        dataRef.current.clearTid = async.requestAnimationFrame(() => {
-            dataRef.current.clearTid = async.setTimeout(cb);
-        });
-    };
-    useEffect(() => {
-        if (state === 'entered') {
-            afterRender === null || afterRender === void 0 ? void 0 : afterRender();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        var _a, _b;
-        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (state === 'enter') {
-            afterRender === null || afterRender === void 0 ? void 0 : afterRender();
-            nextFrame(() => {
-                dataRef.current.state = 'entering';
-                setStateChange((prevStateChange) => prevStateChange + 1);
-            });
-        }
-        else if (state === 'leave') {
-            nextFrame(() => {
-                dataRef.current.state = 'leaving';
-                setStateChange((prevStateChange) => prevStateChange + 1);
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enter]);
-    useEffect(() => {
-        if (dataRef.current.state === 'entering' || dataRef.current.state === 'leaving') {
-            const during = isNumber(duringProp) ? duringProp : enter ? duringProp.enter : duringProp.leave;
-            dataRef.current.clearTid = async.setTimeout(() => {
-                dataRef.current.state = enter ? 'entered' : 'leaved';
-                setStateChange((prevStateChange) => prevStateChange + 1);
-            }, during);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stateChange]);
-    useEffect(() => {
-        if (dataRef.current.state === 'entered' || dataRef.current.state === 'leaved') {
-            enter ? afterEnter === null || afterEnter === void 0 ? void 0 : afterEnter() : afterLeave === null || afterLeave === void 0 ? void 0 : afterLeave();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stateChange]);
-    const shouldRender = (() => {
-        if (state === 'leaved' && destroyWhenLeaved) {
-            return false;
-        }
-        if (dataRef.current.isFirstEnter && !mountBeforeFirstEnter) {
-            return false;
-        }
-        return true;
-    })();
-    return shouldRender ? children(state) : null;
-}

package/internal/transition/types.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-export {};
-export type TransitionState = 'enter' | 'entering' | 'entered' | 'leave' | 'leaving' | 'leaved';
-export interface TransitionProps {
-    children: (state: TransitionState) => JSX.Element | null;
-    enter: boolean | ((prev: boolean) => boolean);
-    defaultEnter?: boolean;
-    during: number | {
-        enter: number;
-        leave: number;
-    };
-    mountBeforeFirstEnter?: boolean;
-    skipFirstTransition?: boolean | [boolean, boolean];
-    destroyWhenLeaved?: boolean;
-    afterRender?: () => void;
-    afterEnter?: () => void;
-    afterLeave?: () => void;
-}
-export interface CollapseTransitionProps extends Omit<TransitionProps, 'children'> {
-    children: (ref: React.RefObject<any>, style: React.CSSProperties, state: TransitionState) => JSX.Element | null;
-    originalSize: {
-        width?: string | number;
-        height?: string | number;
-        padding?: [string | number, string | number, string | number, string | number];
-    };
-    collapsedSize: {
-        width?: string | number;
-        height?: string | number;
-        padding?: [string | number, string | number, string | number, string | number];
-        margin?: [string | number, string | number, string | number, string | number];
-    };
-    styles: Partial<Record<TransitionState, React.CSSProperties>>;
-}

package/internal/wave/Wave.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { WaveProps, WaveRef } from './types';
-export declare const Wave: import("react").ForwardRefExoticComponent<WaveProps & import("react").RefAttributes<WaveRef>>;