UNPKG

create-expo-cljs-app

Version:

Create a react native application with Expo and Shadow-CLJS!

313 lines (249 loc) 9.1 kB
"use strict"; exports.__esModule = true; exports.default = createStyleResolver; var _ExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment"); var _createCSSStyleSheet = _interopRequireDefault(require("./createCSSStyleSheet")); var _createCompileableStyle = _interopRequireDefault(require("./createCompileableStyle")); var _createOrderedCSSStyleSheet = _interopRequireDefault(require("./createOrderedCSSStyleSheet")); var _flattenArray = _interopRequireDefault(require("../../modules/flattenArray")); var _flattenStyle = _interopRequireDefault(require("./flattenStyle")); var _I18nManager = _interopRequireDefault(require("../I18nManager")); var _i18nStyle = _interopRequireDefault(require("./i18nStyle")); var _compile = require("./compile"); var _initialRules = _interopRequireDefault(require("./initialRules")); var _modality = _interopRequireDefault(require("./modality")); var _constants = require("./constants"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * Copyright (c) Nicolas Gallagher. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * */ /** * WARNING: changes to this file in particular can cause significant changes to * the results of render performance benchmarks. */ function createStyleResolver() { var inserted, sheet, cache; var resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} }; var init = function init() { inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} }; sheet = (0, _createOrderedCSSStyleSheet.default)((0, _createCSSStyleSheet.default)(_constants.STYLE_ELEMENT_ID)); cache = {}; (0, _modality.default)(function (rule) { return sheet.insert(rule, _constants.STYLE_GROUPS.modality); }); _initialRules.default.forEach(function (rule) { sheet.insert(rule, _constants.STYLE_GROUPS.reset); }); }; init(); function addToCache(className, prop, value) { if (!cache[prop]) { cache[prop] = {}; } cache[prop][value] = className; } function getClassName(prop, value) { var val = (0, _compile.stringifyValueWithProperty)(value, prop); return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val]; } function _injectRegisteredStyle(id) { var _I18nManager$getConst = _I18nManager.default.getConstants(), doLeftAndRightSwapInRTL = _I18nManager$getConst.doLeftAndRightSwapInRTL, isRTL = _I18nManager$getConst.isRTL; var dir = isRTL ? doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap' : 'ltr'; if (!inserted[dir][id]) { var style = (0, _createCompileableStyle.default)((0, _i18nStyle.default)((0, _flattenStyle.default)(id))); var results = (0, _compile.atomic)(style); Object.keys(results).forEach(function (key) { var _results$key = results[key], identifier = _results$key.identifier, property = _results$key.property, rules = _results$key.rules, value = _results$key.value; addToCache(identifier, property, value); rules.forEach(function (rule) { var group = _constants.STYLE_GROUPS.custom[property] || _constants.STYLE_GROUPS.atomic; sheet.insert(rule, group); }); }); inserted[dir][id] = true; } } /** * Resolves a React Native style object to DOM attributes */ function resolve(style, classList) { var nextClassList = []; var props = {}; if (!style && !classList) { return props; } if (Array.isArray(classList)) { (0, _flattenArray.default)(classList).forEach(function (identifier) { if (identifier) { if (inserted.css[identifier] == null && resolved.css[identifier] != null) { var item = resolved.css[identifier]; item.rules.forEach(function (rule) { sheet.insert(rule, item.group); }); inserted.css[identifier] = true; } nextClassList.push(identifier); } }); } if (typeof style === 'number') { // fast and cachable _injectRegisteredStyle(style); var key = createCacheKey(style); props = _resolveStyle(style, key); } else if (!Array.isArray(style)) { // resolve a plain RN style object props = _resolveStyle(style); } else { // flatten the style array // cache resolved props when all styles are registered // otherwise fallback to resolving var flatArray = (0, _flattenArray.default)(style); var isArrayOfNumbers = true; var cacheKey = ''; for (var i = 0; i < flatArray.length; i++) { var id = flatArray[i]; if (typeof id !== 'number') { isArrayOfNumbers = false; } else { if (isArrayOfNumbers) { cacheKey += id + '-'; } _injectRegisteredStyle(id); } } var _key = isArrayOfNumbers ? createCacheKey(cacheKey) : null; props = _resolveStyle(flatArray, _key); } nextClassList.push.apply(nextClassList, props.classList); var finalProps = { className: classListToString(nextClassList), classList: nextClassList }; if (props.style) { finalProps.style = props.style; } return finalProps; } /** * Resolves a React Native style object */ function _resolveStyle(style, key) { var _I18nManager$getConst2 = _I18nManager.default.getConstants(), doLeftAndRightSwapInRTL = _I18nManager$getConst2.doLeftAndRightSwapInRTL, isRTL = _I18nManager$getConst2.isRTL; var dir = isRTL ? doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap' : 'ltr'; // faster: memoized if (key != null && resolved[dir][key] != null) { return resolved[dir][key]; } var flatStyle = (0, _flattenStyle.default)(style); var localizedStyle = (0, _createCompileableStyle.default)((0, _i18nStyle.default)(flatStyle)); // slower: convert style object to props and cache var props = Object.keys(localizedStyle).sort().reduce(function (props, styleProp) { var value = localizedStyle[styleProp]; if (value != null) { var className = getClassName(styleProp, value); if (className) { props.classList.push(className); } else { // Certain properties and values are not transformed by 'createReactDOMStyle' as they // require more complex transforms into multiple CSS rules. Here we assume that StyleManager // can bind these styles to a className, and prevent them becoming invalid inline-styles. if (styleProp === 'animationKeyframes' || styleProp === 'placeholderTextColor' || styleProp === 'pointerEvents' || styleProp === 'scrollbarWidth') { var _atomic; var a = (0, _compile.atomic)((_atomic = {}, _atomic[styleProp] = value, _atomic)); Object.keys(a).forEach(function (key) { var _a$key = a[key], identifier = _a$key.identifier, rules = _a$key.rules; props.classList.push(identifier); rules.forEach(function (rule) { sheet.insert(rule, _constants.STYLE_GROUPS.atomic); }); }); } else { if (!props.style) { props.style = {}; } // 4x slower render props.style[styleProp] = value; } } } return props; }, { classList: [] }); if (props.style) { props.style = (0, _compile.inline)(props.style); } if (key != null) { resolved[dir][key] = props; } return props; } return { getStyleSheet: function getStyleSheet() { var textContent = sheet.getTextContent(); // Reset state on the server so critical css is always the result if (!_ExecutionEnvironment.canUseDOM) { init(); } return { id: _constants.STYLE_ELEMENT_ID, textContent: textContent }; }, createCSS: function createCSS(rules, group) { var result = {}; Object.keys(rules).forEach(function (name) { var style = rules[name]; var compiled = (0, _compile.classic)(style, name); Object.keys(compiled).forEach(function (key) { var _compiled$key = compiled[key], identifier = _compiled$key.identifier, rules = _compiled$key.rules; resolved.css[identifier] = { group: group || _constants.STYLE_GROUPS.classic, rules: rules }; result[name] = identifier; }); }); return result; }, resolve: resolve, get sheet() { return sheet; } }; } /** * Misc helpers */ var createCacheKey = function createCacheKey(id) { var prefix = 'rn'; return prefix + "-" + id; }; var classListToString = function classListToString(list) { return list.join(' ').trim(); }; module.exports = exports.default;