@gluestack-style/animation-resolver
Version:
A gluestack-style plugin for resolving animation properties, utilizing animation libraries.
132 lines (131 loc) • 6.58 kB
JavaScript
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