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