@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
47 lines • 2.2 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThirdPartyAnimation = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const lottie_web_1 = __importDefault(require("lottie-web"));
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const thirdPartyAnimationStandAlone_1 = require("./thirdPartyAnimationStandAlone");
const THIRD_PARTY_ANIMATION_STYLES = 'THIRD_PARTY_ANIMATION_STYLES';
const ThirdPartyAnimationComponent = ({ autoplay = true, loop = true, variant, ...props }, ref) => {
const [animation, setAnimation] = react_1.default.useState();
const variantTheme = (0, useStyles_1.useStyles)(THIRD_PARTY_ANIMATION_STYLES, variant);
const { thirdPartyAnimationData } = variantTheme;
const element = react_1.default.useRef(null);
react_1.default.useImperativeHandle(ref, () => {
return element.current;
}, []);
react_1.default.useEffect(() => {
if (element.current) {
animation?.destroy();
const newAnimation = lottie_web_1.default.loadAnimation({
autoplay,
loop,
animationData: thirdPartyAnimationData,
container: element.current,
});
setAnimation(newAnimation);
}
return () => {
animation?.destroy();
};
}, [thirdPartyAnimationData]);
return (0, jsx_runtime_1.jsx)(thirdPartyAnimationStandAlone_1.ThirdPartyAnimationStandAlone, { ref: element, ...props });
};
/**
* @deprecated This component has been deprecated and will be removed in the next MAJOR release.
*
* ThirdPartyAnimation component is a component that can be used to create third-party animations.
* @param {React.PropsWithChildren<IThirdPartyAnimation<V>>} props
* @returns {JSX.Element}
*/
const ThirdPartyAnimation = react_1.default.forwardRef(ThirdPartyAnimationComponent);
exports.ThirdPartyAnimation = ThirdPartyAnimation;
//# sourceMappingURL=thirdPartyAnimation.js.map