UNPKG

@gluestack-style/animation-resolver

Version:

A gluestack-style plugin for resolving animation properties, utilizing animation libraries.

132 lines (131 loc) 6.58 kB
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } import React from 'react'; import { useStyled } from '@gluestack-style/react'; const getAnimationResolverPlugin = plugins => { let pluginData; plugins === null || plugins === void 0 || plugins.forEach(plugin => { if (plugin.name === 'AnimationResolver') { pluginData = plugin; } }); return pluginData; }; const animatedComponent = (componentName, _props) => { return /*#__PURE__*/React.forwardRef(({ ...props }, ref) => { var _getAnimationResolver, _ctx$config; const ctx = useStyled(); // let animationDriverData = ctx?.config?.plugins[0]?.componentDriver; let animationDriverData = (_getAnimationResolver = getAnimationResolverPlugin(ctx === null || ctx === void 0 || (_ctx$config = ctx.config) === null || _ctx$config === void 0 ? void 0 : _ctx$config.plugins)) === null || _getAnimationResolver === void 0 ? void 0 : _getAnimationResolver.componentDriver; if (animationDriverData !== null && animationDriverData !== void 0 && animationDriverData.engine[componentName]) { const Component = animationDriverData.engine[componentName]; return /*#__PURE__*/React.createElement(Component, _extends({}, _props, props, { ref: ref })); } return /*#__PURE__*/React.createElement(React.Fragment, _extends({}, _props, props, { ref: ref })); }); }; const AnimatedText = props => { const Component = animatedComponent('Text', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedView = props => { const Component = animatedComponent('props', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedPressable = props => { // @ts-ignore const Component = animatedComponent('Pressable', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedImage = props => { const Component = animatedComponent('Image', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedScrollView = props => { const Component = animatedComponent('ScrollView', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedSafeAreaView = props => { const Component = animatedComponent('SafeAreaView', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedFlatList = props => { const Component = animatedComponent('FlatList', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedSectionList = props => { const Component = animatedComponent('SectionList', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedSvg = props => { const Component = animatedComponent('Svg', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedRect = props => { const Component = animatedComponent('Rect', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedCircle = props => { const Component = animatedComponent('Circle', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedEllipse = props => { const Component = animatedComponent('Ellipse', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedLine = props => { const Component = animatedComponent('Line', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedPolyline = props => { const Component = animatedComponent('Polyline', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedPath = props => { const Component = animatedComponent('Path', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedTSpan = props => { const Component = animatedComponent('TSpan', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedTextPath = props => { const Component = animatedComponent('TextPath', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedG = props => { const Component = animatedComponent('G', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatedClipPath = props => { const Component = animatedComponent('ClipPath', props); return /*#__PURE__*/React.createElement(Component, props); }; const AnimatePresence = animatedComponent('AnimatePresence', {}); AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText'; AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView'; AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable'; AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage'; AnimatedScrollView.displayName = 'Gluestack-AnimatedResolver-AnimatedScrollView'; AnimatedSafeAreaView.displayName = 'Gluestack-AnimatedResolver-AnimatedSafeAreaView'; AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList'; AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList'; AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence'; AnimatedSvg.displayName = 'Gluestack-AnimatedResolver-AnimatedSvg'; AnimatedRect.displayName = 'Gluestack-AnimatedResolver-AnimatedRect'; AnimatedCircle.displayName = 'Gluestack-AnimatedResolver-AnimatedCircle'; AnimatedEllipse.displayName = 'Gluestack-AnimatedResolver-AnimatedEllipse'; AnimatedLine.displayName = 'Gluestack-AnimatedResolver-AnimatedLine'; AnimatedPolyline.displayName = 'Gluestack-AnimatedResolver-AnimatedPolyline'; AnimatedPath.displayName = 'Gluestack-AnimatedResolver-AnimatedPath'; AnimatedTSpan.displayName = 'Gluestack-AnimatedResolver-AnimatedTSpan'; AnimatedTextPath.displayName = 'Gluestack-AnimatedResolver-AnimatedTextPath'; AnimatedG.displayName = 'Gluestack-AnimatedResolver-AnimatedG'; AnimatedClipPath.displayName = 'Gluestack-AnimatedResolver-AnimatedClipPath'; export { AnimatedText, AnimatedView, AnimatedPressable, AnimatedImage, AnimatedScrollView, AnimatedSafeAreaView, AnimatedFlatList, AnimatedSectionList, AnimatePresence, AnimatedSvg, AnimatedRect, AnimatedCircle, AnimatedEllipse, AnimatedLine, AnimatedPolyline, AnimatedPath, AnimatedTSpan, AnimatedTextPath, AnimatedG, AnimatedClipPath }; //# sourceMappingURL=index.js.map