UNPKG

@gluestack-style/animation-resolver

Version:

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

157 lines (155 loc) 7.99 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.AnimatedView = exports.AnimatedTextPath = exports.AnimatedText = exports.AnimatedTSpan = exports.AnimatedSvg = exports.AnimatedSectionList = exports.AnimatedScrollView = exports.AnimatedSafeAreaView = exports.AnimatedRect = exports.AnimatedPressable = exports.AnimatedPolyline = exports.AnimatedPath = exports.AnimatedLine = exports.AnimatedImage = exports.AnimatedG = exports.AnimatedFlatList = exports.AnimatedEllipse = exports.AnimatedClipPath = exports.AnimatedCircle = exports.AnimatePresence = void 0; var _react = _interopRequireDefault(require("react")); var _react2 = require("@gluestack-style/react"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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); } 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.default.forwardRef(({ ...props }, ref) => { var _getAnimationResolver, _ctx$config; const ctx = (0, _react2.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.default.createElement(Component, _extends({}, _props, props, { ref: ref })); } return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, _extends({}, _props, props, { ref: ref })); }); }; const AnimatedText = props => { const Component = animatedComponent('Text', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedText = AnimatedText; const AnimatedView = props => { const Component = animatedComponent('props', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedView = AnimatedView; const AnimatedPressable = props => { // @ts-ignore const Component = animatedComponent('Pressable', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedPressable = AnimatedPressable; const AnimatedImage = props => { const Component = animatedComponent('Image', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedImage = AnimatedImage; const AnimatedScrollView = props => { const Component = animatedComponent('ScrollView', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedScrollView = AnimatedScrollView; const AnimatedSafeAreaView = props => { const Component = animatedComponent('SafeAreaView', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedSafeAreaView = AnimatedSafeAreaView; const AnimatedFlatList = props => { const Component = animatedComponent('FlatList', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedFlatList = AnimatedFlatList; const AnimatedSectionList = props => { const Component = animatedComponent('SectionList', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedSectionList = AnimatedSectionList; const AnimatedSvg = props => { const Component = animatedComponent('Svg', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedSvg = AnimatedSvg; const AnimatedRect = props => { const Component = animatedComponent('Rect', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedRect = AnimatedRect; const AnimatedCircle = props => { const Component = animatedComponent('Circle', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedCircle = AnimatedCircle; const AnimatedEllipse = props => { const Component = animatedComponent('Ellipse', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedEllipse = AnimatedEllipse; const AnimatedLine = props => { const Component = animatedComponent('Line', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedLine = AnimatedLine; const AnimatedPolyline = props => { const Component = animatedComponent('Polyline', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedPolyline = AnimatedPolyline; const AnimatedPath = props => { const Component = animatedComponent('Path', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedPath = AnimatedPath; const AnimatedTSpan = props => { const Component = animatedComponent('TSpan', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedTSpan = AnimatedTSpan; const AnimatedTextPath = props => { const Component = animatedComponent('TextPath', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedTextPath = AnimatedTextPath; const AnimatedG = props => { const Component = animatedComponent('G', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedG = AnimatedG; const AnimatedClipPath = props => { const Component = animatedComponent('ClipPath', props); return /*#__PURE__*/_react.default.createElement(Component, props); }; exports.AnimatedClipPath = AnimatedClipPath; const AnimatePresence = exports.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'; //# sourceMappingURL=index.js.map