@gechiui/components
Version:
UI components for GeChiUI.
310 lines (247 loc) • 14.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BLOCK_STYLE_ATTRIBUTES = void 0;
exports.getBlockColors = getBlockColors;
exports.getBlockPaddings = getBlockPaddings;
exports.getBlockTypography = getBlockTypography;
exports.getGlobalStyles = getGlobalStyles;
exports.getMappedValues = getMappedValues;
exports.parseStylesVariables = parseStylesVariables;
var _lodash = require("lodash");
var _reactNative = require("react-native");
var _blockEditor = require("@gechiui/block-editor");
/**
* External dependencies
*/
/**
* GeChiUI dependencies
*/
const BLOCK_STYLE_ATTRIBUTES = ['textColor', 'backgroundColor', 'style', 'color', 'fontSize']; // Mapping style properties name to native
exports.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
textColor: 'color',
text: 'color',
background: 'backgroundColor',
link: 'linkColor',
placeholder: 'placeholderColor'
};
const PADDING = 12; // $solid-border-space
const UNKNOWN_VALUE = 'undefined';
function getBlockPaddings(mergedStyle, wrapperPropsStyle, blockStyleAttributes, blockColors) {
const blockPaddings = {};
if (!mergedStyle.padding && (wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 && wrapperPropsStyle.backgroundColor || blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.backgroundColor || blockColors !== null && blockColors !== void 0 && blockColors.backgroundColor)) {
blockPaddings.padding = PADDING;
return blockPaddings;
} // Prevent adding extra paddings to inner blocks without background colors
if (mergedStyle !== null && mergedStyle !== void 0 && mergedStyle.padding && !(wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 && wrapperPropsStyle.backgroundColor) && !(blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.backgroundColor) && !(blockColors !== null && blockColors !== void 0 && blockColors.backgroundColor)) {
blockPaddings.padding = undefined;
}
return blockPaddings;
}
function getBlockColors(blockStyleAttributes, defaultColors, blockName, baseGlobalStyles) {
var _blockStyleAttributes, _baseGlobalStyles$blo, _baseGlobalStyles$sty, _baseGlobalStyles$sty2;
const blockStyles = {};
const customBlockStyles = (blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : (_blockStyleAttributes = blockStyleAttributes.style) === null || _blockStyleAttributes === void 0 ? void 0 : _blockStyleAttributes.color) || {};
const blockGlobalStyles = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$blo = baseGlobalStyles.blocks) === null || _baseGlobalStyles$blo === void 0 ? void 0 : _baseGlobalStyles$blo[blockName]; // Global styles colors
if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.color) {
Object.entries(blockGlobalStyles.color).forEach(_ref => {
let [key, value] = _ref;
const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[key];
if (styleKey && value !== UNKNOWN_VALUE) {
var _customBlockStyles$ke;
const color = (_customBlockStyles$ke = customBlockStyles[key]) !== null && _customBlockStyles$ke !== void 0 ? _customBlockStyles$ke : value;
blockStyles[styleKey] = color;
}
});
} else if (baseGlobalStyles !== null && baseGlobalStyles !== void 0 && (_baseGlobalStyles$sty = baseGlobalStyles.styles) !== null && _baseGlobalStyles$sty !== void 0 && (_baseGlobalStyles$sty2 = _baseGlobalStyles$sty.color) !== null && _baseGlobalStyles$sty2 !== void 0 && _baseGlobalStyles$sty2.text) {
var _baseGlobalStyles$sty3, _baseGlobalStyles$sty4;
blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.text] = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$sty3 = baseGlobalStyles.styles) === null || _baseGlobalStyles$sty3 === void 0 ? void 0 : (_baseGlobalStyles$sty4 = _baseGlobalStyles$sty3.color) === null || _baseGlobalStyles$sty4 === void 0 ? void 0 : _baseGlobalStyles$sty4.text;
} // Global styles elements
if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.elements) {
var _blockGlobalStyles$el, _blockGlobalStyles$el2, _blockGlobalStyles$el3;
const linkColor = (_blockGlobalStyles$el = blockGlobalStyles.elements) === null || _blockGlobalStyles$el === void 0 ? void 0 : (_blockGlobalStyles$el2 = _blockGlobalStyles$el.link) === null || _blockGlobalStyles$el2 === void 0 ? void 0 : (_blockGlobalStyles$el3 = _blockGlobalStyles$el2.color) === null || _blockGlobalStyles$el3 === void 0 ? void 0 : _blockGlobalStyles$el3.text;
const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
if (styleKey && linkColor && linkColor !== UNKNOWN_VALUE) {
blockStyles[styleKey] = linkColor;
}
} // Custom colors
Object.entries(blockStyleAttributes).forEach(_ref2 => {
let [key, value] = _ref2;
const isCustomColor = (0, _lodash.startsWith)(value, '#');
let styleKey = key;
if (BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey]) {
styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey];
}
if (!isCustomColor) {
const mappedColor = (0, _lodash.find)(defaultColors, {
slug: value
});
if (mappedColor) {
blockStyles[styleKey] = mappedColor.color;
}
} else {
blockStyles[styleKey] = value;
}
}); // Color placeholder
if (blockStyles !== null && blockStyles !== void 0 && blockStyles.color) {
blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder] = blockStyles.color;
}
return blockStyles;
}
function getBlockTypography(blockStyleAttributes, fontSizes, blockName, baseGlobalStyles) {
var _blockStyleAttributes2, _baseGlobalStyles$blo2;
const typographyStyles = {};
const customBlockStyles = (blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : (_blockStyleAttributes2 = blockStyleAttributes.style) === null || _blockStyleAttributes2 === void 0 ? void 0 : _blockStyleAttributes2.typography) || {};
const blockGlobalStyles = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$blo2 = baseGlobalStyles.blocks) === null || _baseGlobalStyles$blo2 === void 0 ? void 0 : _baseGlobalStyles$blo2[blockName]; // Global styles
if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.typography) {
var _blockGlobalStyles$ty, _blockGlobalStyles$ty2;
const fontSize = blockGlobalStyles === null || blockGlobalStyles === void 0 ? void 0 : (_blockGlobalStyles$ty = blockGlobalStyles.typography) === null || _blockGlobalStyles$ty === void 0 ? void 0 : _blockGlobalStyles$ty.fontSize;
const lineHeight = blockGlobalStyles === null || blockGlobalStyles === void 0 ? void 0 : (_blockGlobalStyles$ty2 = blockGlobalStyles.typography) === null || _blockGlobalStyles$ty2 === void 0 ? void 0 : _blockGlobalStyles$ty2.lineHeight;
if (fontSize) {
if (parseInt(fontSize, 10)) {
typographyStyles.fontSize = fontSize;
} else {
const mappedFontSize = (0, _lodash.find)(fontSizes, {
slug: fontSize
});
if (mappedFontSize) {
typographyStyles.fontSize = mappedFontSize === null || mappedFontSize === void 0 ? void 0 : mappedFontSize.size;
}
}
}
if (lineHeight) {
typographyStyles.lineHeight = lineHeight;
}
}
if (blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.fontSize) {
const mappedFontSize = (0, _lodash.find)(fontSizes, {
slug: blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : blockStyleAttributes.fontSize
});
if (mappedFontSize) {
typographyStyles.fontSize = mappedFontSize === null || mappedFontSize === void 0 ? void 0 : mappedFontSize.size;
}
} // Custom styles
if (customBlockStyles !== null && customBlockStyles !== void 0 && customBlockStyles.fontSize) {
typographyStyles.fontSize = customBlockStyles === null || customBlockStyles === void 0 ? void 0 : customBlockStyles.fontSize;
}
if (customBlockStyles !== null && customBlockStyles !== void 0 && customBlockStyles.lineHeight) {
typographyStyles.lineHeight = customBlockStyles === null || customBlockStyles === void 0 ? void 0 : customBlockStyles.lineHeight;
}
return typographyStyles;
}
function parseStylesVariables(styles, mappedValues, customValues) {
let stylesBase = styles;
const variables = ['preset', 'custom'];
if (!stylesBase) {
return styles;
}
variables.forEach(variable => {
// Examples
// var(--gc--preset--color--gray)
// var(--gc--custom--body--typography--font-family)
const regex = new RegExp(`var\\(--gc--${variable}--(.*?)\\)`, 'g');
if (variable === 'preset') {
stylesBase = stylesBase.replace(regex, (_$1, $2) => {
const path = $2.split('--');
const mappedPresetValue = mappedValues[path[0]];
if (mappedPresetValue && mappedPresetValue.slug) {
const matchedValue = (0, _lodash.find)(mappedPresetValue.values, {
slug: path[1]
});
return matchedValue === null || matchedValue === void 0 ? void 0 : matchedValue[mappedPresetValue.slug];
}
return UNKNOWN_VALUE;
});
}
if (variable === 'custom') {
const customValuesData = customValues !== null && customValues !== void 0 ? customValues : JSON.parse(stylesBase);
stylesBase = stylesBase.replace(regex, (_$1, $2) => {
const path = $2.split('--');
if ((0, _lodash.has)(customValuesData, path)) {
return (0, _lodash.get)(customValuesData, path);
} // Check for camelcase properties
return (0, _lodash.get)(customValuesData, [...path.slice(0, path.length - 1), (0, _lodash.camelCase)(path[path.length - 1])]);
});
}
});
return JSON.parse(stylesBase);
}
function getMappedValues(features, palette) {
var _typography$fontSizes, _typography$fontSizes2;
const typography = features === null || features === void 0 ? void 0 : features.typography;
const colors = { ...(palette === null || palette === void 0 ? void 0 : palette.theme),
...(palette === null || palette === void 0 ? void 0 : palette.custom)
};
const fontSizes = { ...(typography === null || typography === void 0 ? void 0 : (_typography$fontSizes = typography.fontSizes) === null || _typography$fontSizes === void 0 ? void 0 : _typography$fontSizes.theme),
...(typography === null || typography === void 0 ? void 0 : (_typography$fontSizes2 = typography.fontSizes) === null || _typography$fontSizes2 === void 0 ? void 0 : _typography$fontSizes2.custom)
};
const mappedValues = {
color: {
values: colors,
slug: 'color'
},
'font-size': {
values: fontSizes,
slug: 'size'
}
};
return mappedValues;
}
/**
* Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
*
* @param {Object} fontSizes found in global styles.
* @return {Object} normalized sizes.
*/
function normalizeFontSizes(fontSizes) {
// Adds normalized PX values for each of the different keys
if (!fontSizes) {
return fontSizes;
}
const normalizedFontSizes = {};
const dimensions = _reactNative.Dimensions.get('window');
['default', 'theme', 'user'].forEach(key => {
if (fontSizes[key]) {
var _fontSizes$key;
normalizedFontSizes[key] = (_fontSizes$key = fontSizes[key]) === null || _fontSizes$key === void 0 ? void 0 : _fontSizes$key.map(fontSizeObject => {
fontSizeObject.sizePx = (0, _blockEditor.getPxFromCssUnit)(fontSizeObject.size, {
width: dimensions.width,
height: dimensions.height,
fontSize: 16
});
return fontSizeObject;
});
}
});
return normalizedFontSizes;
}
function getGlobalStyles(rawStyles, rawFeatures) {
var _features$color, _features$color2, _features$typography, _features$color$text, _features$color3, _features$color$backg, _features$color4, _features$custom;
const features = rawFeatures ? JSON.parse(rawFeatures) : {};
const mappedValues = getMappedValues(features, features === null || features === void 0 ? void 0 : (_features$color = features.color) === null || _features$color === void 0 ? void 0 : _features$color.palette);
const colors = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : features.color), mappedValues);
const gradients = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : (_features$color2 = features.color) === null || _features$color2 === void 0 ? void 0 : _features$color2.gradients), mappedValues);
const customValues = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : features.custom), mappedValues);
const globalStyles = parseStylesVariables(rawStyles, mappedValues, customValues);
const fontSizes = normalizeFontSizes(features === null || features === void 0 ? void 0 : (_features$typography = features.typography) === null || _features$typography === void 0 ? void 0 : _features$typography.fontSizes);
return {
colors,
gradients,
__experimentalFeatures: {
color: {
palette: colors === null || colors === void 0 ? void 0 : colors.palette,
gradients,
text: (_features$color$text = features === null || features === void 0 ? void 0 : (_features$color3 = features.color) === null || _features$color3 === void 0 ? void 0 : _features$color3.text) !== null && _features$color$text !== void 0 ? _features$color$text : true,
background: (_features$color$backg = features === null || features === void 0 ? void 0 : (_features$color4 = features.color) === null || _features$color4 === void 0 ? void 0 : _features$color4.background) !== null && _features$color$backg !== void 0 ? _features$color$backg : true
},
typography: {
fontSizes,
customLineHeight: features === null || features === void 0 ? void 0 : (_features$custom = features.custom) === null || _features$custom === void 0 ? void 0 : _features$custom['line-height']
}
},
__experimentalGlobalStylesBaseStyles: globalStyles
};
}
//# sourceMappingURL=utils.native.js.map