@gluestack-style/animation-resolver
Version:
A gluestack-style plugin for resolving animation properties, utilizing animation libraries.
203 lines (197 loc) • 7.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.deepMerge = exports.deepClone = void 0;
exports.deepMergeObjects = deepMergeObjects;
exports.getObjectProperty = void 0;
exports.getResolvedTokenValueFromConfig = getResolvedTokenValueFromConfig;
exports.getTokenFromConfig = void 0;
exports.resolveAliasesFromConfig = resolveAliasesFromConfig;
exports.resolveStringToken = resolveStringToken;
exports.resolveTokensFromConfig = resolveTokensFromConfig;
exports.resolvedTokenization = resolvedTokenization;
exports.setObjectKeyValue = void 0;
const deepClone = obj => JSON.parse(JSON.stringify(obj));
exports.deepClone = deepClone;
const deepMerge = (target = {}, source) => {
for (const key in source) {
if (source.hasOwnProperty(key)) {
if (typeof target[key] === 'object' && typeof source[key] === 'object') {
deepMerge(target[key], source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
};
exports.deepMerge = deepMerge;
const setObjectKeyValue = (obj, keys, value) => {
let current = obj;
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
if (i === keys.length - 1) {
// we've reached the desired key, so update its value
current[key] = value;
} else {
// we're still traversing the object, so create the key if it doesn't exist
if (!current[key]) {
current[key] = {};
}
current = current[key];
}
}
return obj;
};
exports.setObjectKeyValue = setObjectKeyValue;
function deepMergeObjects(...objects) {
const isObject = obj => obj && typeof obj === 'object';
return objects.reduce((prev, obj) => {
if (isObject(prev) && isObject(obj)) {
Object.keys(obj).forEach(key => {
if (isObject(obj[key])) {
if (!prev[key] || !isObject(prev[key])) {
prev[key] = {};
}
prev[key] = deepMerge(prev[key], obj[key]);
} else {
prev[key] = obj[key];
}
});
}
return prev;
}, {});
}
function resolvedTokenization(props, config) {
const aliasedResolvedProps = resolveAliasesFromConfig(config, props);
const newProps = resolveTokensFromConfig(config, aliasedResolvedProps);
return newProps;
}
function resolveAliasesFromConfig(config, props) {
const aliasResolvedProps = {};
Object.keys(props).map(key => {
var _config$aliases;
if (config !== null && config !== void 0 && (_config$aliases = config.aliases) !== null && _config$aliases !== void 0 && _config$aliases[key]) {
var _config$aliases2;
aliasResolvedProps[(_config$aliases2 = config.aliases) === null || _config$aliases2 === void 0 ? void 0 : _config$aliases2[key]] = props[key];
} else {
aliasResolvedProps[key] = props[key];
}
});
return aliasResolvedProps;
}
function resolveTokensFromConfig(config, props) {
let newProps = {};
Object.keys(props).map(prop => {
const value = props[prop];
newProps[prop] = getResolvedTokenValueFromConfig(config, props, prop, value);
});
// console.log('&&&&&', newProps);
return newProps;
}
function getResolvedTokenValueFromConfig(config, _props, prop, value) {
let resolvedTokenValue = getTokenFromConfig(config, prop, value);
// Special case for token ends with em on mobile
// This will work for lineHeight and letterSpacing
// console.log('hello from token ends with em on mobile', resolvedTokenValue);
// if (
// typeof resolvedTokenValue === 'string' &&
// resolvedTokenValue.endsWith('em') &&
// Platform.OS !== 'web'
// ) {
// const fontSize = getTokenFromConfig(config, 'fontSize', props?.fontSize);
// resolvedTokenValue =
// parseFloat(resolvedTokenValue) * parseFloat(fontSize ?? BASE_FONT_SIZE);
// }
return resolvedTokenValue;
}
const getTokenFromConfig = (config, prop, value) => {
const aliasTokenType = config.propertyTokenMap[prop];
// const tokenScale = config?.tokens?.[aliasTokenType];
let token;
// resolveStringToken(value, config, config.propertyTokenMap);
if (typeof value === 'string' && value.includes('$')) {
var _config$propertyResol;
if ((_config$propertyResol = config.propertyResolver) !== null && _config$propertyResol !== void 0 && _config$propertyResol[prop]) {
var _config$propertyResol2;
let transformer = (_config$propertyResol2 = config.propertyResolver) === null || _config$propertyResol2 === void 0 ? void 0 : _config$propertyResol2[prop];
token = transformer(value, (value1, scale = aliasTokenType) => resolveStringToken(value1, config, config.propertyTokenMap, prop, scale));
} else {
token = resolveStringToken(value, config, config.propertyTokenMap, prop);
}
} else {
var _config$propertyResol3;
if ((_config$propertyResol3 = config.propertyResolver) !== null && _config$propertyResol3 !== void 0 && _config$propertyResol3[prop]) {
var _config$propertyResol4;
let transformer = (_config$propertyResol4 = config.propertyResolver) === null || _config$propertyResol4 === void 0 ? void 0 : _config$propertyResol4[prop];
token = transformer(value, (value, scale = aliasTokenType) => {
if (typeof value === 'string' && value.includes('$')) {
return resolveStringToken(value, config, config.propertyTokenMap, prop, scale);
} else {
return value;
}
});
} else {
token = value;
}
// console.log(token, typeof token, prop, '******');
}
return token;
};
exports.getTokenFromConfig = getTokenFromConfig;
function isNumeric(str) {
return typeof str === 'number' ? true : false;
// return /^[-+]?[0-9]*\.?[0-9]+$/.test(str);
}
function resolveStringToken(string, config, tokenScaleMap, propName, scale) {
let typeofResult = 'string';
const token_scale = scale ?? tokenScaleMap[propName];
const splitTokenBySpace = string.split(' ');
const result = splitTokenBySpace.map(currentToken => {
let splitCurrentToken = currentToken.split('$');
if (currentToken.startsWith('$')) {
splitCurrentToken = splitCurrentToken.slice(1);
}
if (splitCurrentToken.length > 1) {
const tokenValue = getObjectProperty(config.tokens, splitCurrentToken);
typeofResult = typeof tokenValue;
return tokenValue;
} else {
if (tokenScaleMap[propName]) {
if (!config || !config.tokens) {
throw new Error('You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.');
}
if (config !== null && config !== void 0 && config.tokens[token_scale] && config !== null && config !== void 0 && config.tokens[token_scale].hasOwnProperty(splitCurrentToken[0])) {
const tokenValue = config === null || config === void 0 ? void 0 : config.tokens[token_scale][splitCurrentToken[0]];
typeofResult = typeof tokenValue;
if (typeof tokenValue !== 'undefined' && tokenValue !== null) {
return tokenValue;
} else {
return '';
}
}
}
return splitCurrentToken[splitCurrentToken.length - 1];
}
});
let finalResult = result;
if (finalResult === '') {
return undefined;
} else {
finalResult = result.join(' ');
if (isNumeric(finalResult) || typeofResult === 'number') {
return parseFloat(finalResult);
} else {
return finalResult;
}
}
}
const getObjectProperty = (object, keyPath) => {
if (!Array.isArray(keyPath)) {
keyPath = [keyPath];
}
return keyPath.reduce((baseObj, key) => baseObj && baseObj[key], object);
};
exports.getObjectProperty = getObjectProperty;
//# sourceMappingURL=utils.js.map