@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
108 lines • 4.86 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBorderAnimation = void 0;
const react_1 = __importDefault(require("react"));
const animation_utils_1 = require("../utils/animation.utils");
const FIRST_QUARTER = 25;
const SECOND_QUARTER = 50;
const THIRD_QUARTER = 75;
const ZERO = 0;
const MAX = '100%';
const resetMeasure = (element, measure) => {
if (element) {
element.style.transition = 'none';
// Force reflow to ensure the transition disabled is applied
element.offsetHeight;
element.style[measure] = '0%';
element.style.removeProperty('transition');
}
};
const useBorderAnimation = ({ ...props }) => {
const topRef = react_1.default.useRef(null);
const rightRef = react_1.default.useRef(null);
const bottomRef = react_1.default.useRef(null);
const leftRef = react_1.default.useRef(null);
const [allowRightAnimation, setAllowRightAnimation] = react_1.default.useState(false);
const [allowBottomAnimation, setAllowBottomAnimation] = react_1.default.useState(false);
const [allowLeftAnimation, setAllowLeftAnimation] = react_1.default.useState(false);
const handleTopAnimationStart = () => {
if (props.percentage >= ZERO && topRef?.current) {
topRef.current.style.width = `${(0, animation_utils_1.getTopBarWith)(props.percentage)}%`;
}
};
const handleRightAnimationStart = () => {
if (allowRightAnimation && props.percentage > FIRST_QUARTER && rightRef?.current) {
rightRef.current.style.height = `${(0, animation_utils_1.getRightBarHeight)(props.percentage)}%`;
}
};
const handleBottomAnimationStart = () => {
if (allowBottomAnimation && props.percentage > SECOND_QUARTER && bottomRef?.current) {
bottomRef.current.style.width = `${(0, animation_utils_1.getBottomBarWith)(props.percentage)}%`;
}
};
const handleLeftAnimationStart = () => {
if (allowLeftAnimation && props.percentage > THIRD_QUARTER && leftRef?.current) {
leftRef.current.style.height = `${(0, animation_utils_1.getLeftBarHeight)(props.percentage)}%`;
}
};
// Reset animation when the animation is completed
const resetAnimation = () => {
resetMeasure(topRef.current, 'width');
resetMeasure(rightRef.current, 'height');
resetMeasure(bottomRef.current, 'width');
resetMeasure(leftRef.current, 'height');
setAllowRightAnimation(false);
setAllowBottomAnimation(false);
setAllowLeftAnimation(false);
};
react_1.default.useEffect(() => {
if (props.percentage === 0) {
resetAnimation();
}
else if (props.percentage > 0) {
handleTopAnimationStart();
handleRightAnimationStart();
handleBottomAnimationStart();
handleLeftAnimationStart();
}
}, [props.percentage, allowRightAnimation, allowBottomAnimation, allowLeftAnimation]);
react_1.default.useEffect(() => {
// Add event listeners to handle animation end
// and call onAnimationCompleted when the last animation is completed
const handleTopTransitionEnd = () => {
setAllowRightAnimation(topRef.current?.style.width === MAX);
};
const handleRightTransitionEnd = () => {
setAllowBottomAnimation(rightRef.current?.style.height === MAX);
};
const handleBottomTransitionEnd = () => {
setAllowLeftAnimation(bottomRef.current?.style.width === MAX);
};
const handleLeftTransitionEnd = () => {
if (leftRef.current?.style.height === MAX) {
props.onAnimationCompleted?.();
}
};
topRef.current?.addEventListener('transitionend', handleTopTransitionEnd);
rightRef.current?.addEventListener('transitionend', handleRightTransitionEnd);
bottomRef.current?.addEventListener('transitionend', handleBottomTransitionEnd);
leftRef.current?.addEventListener('transitionend', handleLeftTransitionEnd);
return () => {
topRef.current?.removeEventListener('transitionend', handleTopTransitionEnd);
rightRef.current?.removeEventListener('transitionend', handleRightTransitionEnd);
bottomRef.current?.removeEventListener('transitionend', handleBottomTransitionEnd);
leftRef.current?.removeEventListener('transitionend', handleLeftTransitionEnd);
};
}, []);
return {
topRef,
rightRef,
bottomRef,
leftRef,
};
};
exports.useBorderAnimation = useBorderAnimation;
//# sourceMappingURL=useBorderAnimation.js.map