@gluestack-style/animation-plugin
Version:
A gluestack-style plugin for animation properties, utilizing animation libraries.
278 lines (272 loc) • 14.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AnimationResolver = void 0;
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@gluestack-style/react");
var _utils = require("./utils");
var _motion = require("@legendapp/motion");
var _propertyTokenMap = require("./propertyTokenMap");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
function tokenizeAnimationPropsFromConfig() {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let config = arguments.length > 1 ? arguments[1] : undefined;
let animationAliases = arguments.length > 2 ? arguments[2] : undefined;
let path = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
let tokenizedAnimatedProps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
for (const prop in props) {
if (Array.isArray(props[prop])) {
path.push(prop);
(0, _utils.setObjectKeyValue)(tokenizedAnimatedProps, path, props[prop]);
path.pop();
} else if (animationAliases[prop]) {
path.push(prop);
const tokenizedValue = (0, _utils.resolvedTokenization)(props[prop], config);
(0, _utils.setObjectKeyValue)(tokenizedAnimatedProps, path, tokenizedValue);
path.pop();
} else if (typeof props[prop] === 'object') {
path.push(prop);
const tokenizedValue = (0, _utils.resolvedTokenization)(props[prop], config);
(0, _utils.setObjectKeyValue)(tokenizedAnimatedProps, path, tokenizedValue);
// path.pop();
tokenizeAnimationPropsFromConfig(props[prop], config, animationAliases, path, tokenizedAnimatedProps);
path.pop();
} else {
path.push(prop);
(0, _utils.setObjectKeyValue)(tokenizedAnimatedProps, path, props[prop]);
path.pop();
}
}
return tokenizedAnimatedProps;
}
function getVariantProps(props, theme) {
const variantTypes = theme !== null && theme !== void 0 && theme.variants ? Object.keys(theme.variants) : [];
const restProps = {
...props
};
const variantProps = {};
variantTypes === null || variantTypes === void 0 || variantTypes.forEach(variant => {
if (props[variant]) {
variantProps[variant] = props[variant];
// delete restProps[variant];
}
});
return {
variantProps,
restProps
};
}
function resolveVariantAnimationProps(variantProps, styledObject) {
let resolvedVariant = {};
Object.keys(variantProps).forEach(variant => {
var _styledObject$variant;
const variantValue = variantProps[variant];
const variantObject = styledObject === null || styledObject === void 0 || (_styledObject$variant = styledObject.variants) === null || _styledObject$variant === void 0 || (_styledObject$variant = _styledObject$variant[variant]) === null || _styledObject$variant === void 0 ? void 0 : _styledObject$variant[variantValue];
resolvedVariant = (0, _utils.deepMerge)(resolvedVariant, variantObject);
});
return resolvedVariant;
}
class AnimationResolver {
styledUtils = {
aliases: {
':animate': 'animate',
':initial': 'initial',
':exit': 'exit',
':initialProps': 'initialProps',
':animateProps': 'animateProps',
':transition': 'transition',
':transformOrigin': 'transformOrigin',
':whileTap': 'whileTap',
':whileHover': 'whileHover',
':onAnimationComplete': 'onAnimationComplete'
}
};
register(styledUtils) {
if (this.styledUtils) {
var _this$styledUtils, _this$styledUtils2;
this.styledUtils.aliases = {
...((_this$styledUtils = this.styledUtils) === null || _this$styledUtils === void 0 ? void 0 : _this$styledUtils.aliases),
...(styledUtils === null || styledUtils === void 0 ? void 0 : styledUtils.aliases)
};
// @ts-ignore
this.styledUtils.tokens = {
// @ts-ignore
...((_this$styledUtils2 = this.styledUtils) === null || _this$styledUtils2 === void 0 ? void 0 : _this$styledUtils2.tokens),
...(styledUtils === null || styledUtils === void 0 ? void 0 : styledUtils.tokens)
};
// @ts-ignore
this.styledUtils.ref = styledUtils === null || styledUtils === void 0 ? void 0 : styledUtils.ref;
}
}
constructor(styledUtils) {
this.register(styledUtils);
this.name = 'AnimationResolver';
}
#childrenExitPropsMap = {};
#extendedConfig = {};
inputMiddleWare() {
let styledObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let shouldUpdateConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// this.#childrenExitPropsMap = deepClone(styledObj);
const resolvedAnimatedProps = this.updateStyledObject(styledObj, shouldUpdateConfig);
const resolvedStyledObjectWithAnimatedProps = (0, _utils.deepMerge)(styledObj, resolvedAnimatedProps);
if (shouldUpdateConfig) {
// @ts-ignore
return styledObj;
}
return resolvedStyledObjectWithAnimatedProps;
}
updateStyledObject() {
var _this$styledUtils3;
let styledObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let shouldUpdateConfig = arguments.length > 1 ? arguments[1] : undefined;
let resolvedStyledObject = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
let keyPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
const aliases = (_this$styledUtils3 = this.styledUtils) === null || _this$styledUtils3 === void 0 ? void 0 : _this$styledUtils3.aliases;
for (const prop in styledObject) {
if (typeof styledObject[prop] === 'object') {
keyPath.push(prop);
this.updateStyledObject(styledObject[prop], shouldUpdateConfig, resolvedStyledObject, keyPath);
keyPath.pop();
}
// @ts-ignore
if (aliases && aliases !== null && aliases !== void 0 && aliases[prop]) {
if (shouldUpdateConfig) {
// this.#childrenExitPropsMap[prop] = styledObject[prop];
(0, _utils.setObjectKeyValue)(this.#childrenExitPropsMap, [...keyPath, prop], styledObject[prop]);
}
const value = styledObject[prop];
// @ts-ignore
keyPath.push('props', aliases[prop]);
(0, _utils.setObjectKeyValue)(resolvedStyledObject, keyPath, value);
keyPath.pop();
keyPath.pop();
delete styledObject[prop];
}
}
return resolvedStyledObject;
}
componentMiddleWare(_ref) {
let {
Component,
ExtendedConfig
} = _ref;
const styledConfig = this.#childrenExitPropsMap;
this.#childrenExitPropsMap = {};
const NewComponent = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
var _this$styledUtils4;
const {
sx,
...rest
} = props;
const styledContext = (0, _react2.useStyled)();
const CONFIG = (0, _react.useMemo)(() => ({
...styledContext.config,
propertyTokenMap: _propertyTokenMap.propertyTokenMap
}), [styledContext.config]);
this.#extendedConfig = CONFIG;
if (ExtendedConfig) {
this.#extendedConfig = (0, _utils.deepMerge)(CONFIG, ExtendedConfig);
}
let tokenizedAnimatedProps = {};
const {
variantProps,
restProps
} = getVariantProps(rest, styledConfig);
const variantStyledObject = resolveVariantAnimationProps(variantProps, styledConfig);
const componentStyledObject = (0, _utils.deepMerge)(variantStyledObject, styledConfig);
const animationAliases = (_this$styledUtils4 = this.styledUtils) === null || _this$styledUtils4 === void 0 ? void 0 : _this$styledUtils4.aliases;
const config = this.#extendedConfig;
tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(componentStyledObject, config, animationAliases);
const tokenizedSxAnimationProps = tokenizeAnimationPropsFromConfig(sx, config, animationAliases);
const mergedAnimatedProps = (0, _utils.deepMerge)(tokenizedAnimatedProps, tokenizedSxAnimationProps);
const resolvedAnimatedStyledWithStyledObject = this.inputMiddleWare(mergedAnimatedProps, false);
let isState = false;
Object.keys((restProps === null || restProps === void 0 ? void 0 : restProps.states) ?? {}).forEach(state => {
isState = restProps.states[state] ? true : false;
});
const animatedProps = !isState ? // @ts-ignore
resolvedAnimatedStyledWithStyledObject === null || resolvedAnimatedStyledWithStyledObject === void 0 ? void 0 : resolvedAnimatedStyledWithStyledObject.props : {};
return /*#__PURE__*/_react.default.createElement(Component, _extends({}, animatedProps, {
sx: resolvedAnimatedStyledWithStyledObject
}, restProps, {
ref: ref
}));
});
if (NewComponent) {
//@ts-ignore
NewComponent.styled = {};
//@ts-ignore
NewComponent.styled.config = {};
//@ts-ignore
NewComponent.styled.config = styledConfig;
//@ts-ignore
NewComponent.isStyledComponent = Component === null || Component === void 0 ? void 0 : Component.isStyledComponent;
//@ts-ignore
NewComponent.isComposedComponent = Component === null || Component === void 0 ? void 0 : Component.isComposedComponent;
NewComponent.displayName = 'StyledComponent';
return NewComponent;
}
return null;
}
wrapperComponentMiddleWare() {
const AnimatedPresenceComp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
let {
children,
...props
} = _ref2;
const clonedChildren = [];
const styledContext = (0, _react2.useStyled)();
const CONFIG = (0, _react.useMemo)(() => ({
...styledContext.config,
propertyTokenMap: _propertyTokenMap.propertyTokenMap
}), [styledContext.config]);
this.#extendedConfig = CONFIG;
_react.default.Children.toArray(children).forEach(child => {
var _child$type;
if ((child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'StyledComponent') {
var _this$styledUtils5, _child$type2, _child$props;
let tokenizedAnimatedProps = {};
const animationAliases = (_this$styledUtils5 = this.styledUtils) === null || _this$styledUtils5 === void 0 ? void 0 : _this$styledUtils5.aliases;
const componentStyledObject = child === null || child === void 0 || (_child$type2 = child.type) === null || _child$type2 === void 0 || (_child$type2 = _child$type2.styled) === null || _child$type2 === void 0 ? void 0 : _child$type2.config;
const {
variantProps,
restProps
} = getVariantProps(child === null || child === void 0 ? void 0 : child.props, componentStyledObject);
const config = CONFIG;
if (child.type.styled.resolvedProps) {
var _child$type3;
tokenizedAnimatedProps = child === null || child === void 0 || (_child$type3 = child.type) === null || _child$type3 === void 0 || (_child$type3 = _child$type3.styled) === null || _child$type3 === void 0 ? void 0 : _child$type3.resolvedProps;
} else {
const variantStyledObject = resolveVariantAnimationProps(variantProps, componentStyledObject);
const componentStyledObjectWithVariants = (0, _utils.deepMergeObjects)(componentStyledObject, variantStyledObject);
tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(componentStyledObjectWithVariants, config, animationAliases);
child.type.styled.resolvedProps = tokenizedAnimatedProps;
}
const tokenizedSxAnimationProps = tokenizeAnimationPropsFromConfig(child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.sx, config, animationAliases);
const mergedAnimatedProps = (0, _utils.deepMergeObjects)({}, tokenizedSxAnimationProps, tokenizedAnimatedProps);
const clonedChild = /*#__PURE__*/_react.default.cloneElement(child, {
exit: mergedAnimatedProps === null || mergedAnimatedProps === void 0 ? void 0 : mergedAnimatedProps[':exit'],
...restProps
});
clonedChildren.push(clonedChild);
} else {
clonedChildren.push(child);
}
});
return /*#__PURE__*/_react.default.createElement(_motion.AnimatePresence, _extends({
ref: ref
}, props), clonedChildren);
});
AnimatedPresenceComp.displayName = `AnimatePresence`;
return {
Component: AnimatedPresenceComp,
AnimatePresence: AnimatedPresenceComp
};
}
}
exports.AnimationResolver = AnimationResolver;
//# sourceMappingURL=index.js.map