diff --git a/Libraries/Inspector/resolveBoxStyle.js b/Libraries/Inspector/resolveBoxStyle.js index 0a0e58e120f6ea..767b9edbc5f061 100644 --- a/Libraries/Inspector/resolveBoxStyle.js +++ b/Libraries/Inspector/resolveBoxStyle.js @@ -10,48 +10,103 @@ 'use strict'; +const I18nManager = require('I18nManager'); + /** - * Resolve a style property into it's component parts, e.g. + * Resolve a style property into its component parts. + * + * For example: * - * resolveProperties('margin', {margin: 5, marginBottom: 10}) - * -> - * {top: 5, left: 5, right: 5, bottom: 10} + * > resolveProperties('margin', {margin: 5, marginBottom: 10}) + * {top: 5, left: 5, right: 5, bottom: 10} * - * If none are set, returns false. + * If no parts exist, this returns null. */ -function resolveBoxStyle(prefix: string, style: Object): ?Object { - const res = {}; - const subs = ['top', 'left', 'bottom', 'right']; - let set = false; - subs.forEach(sub => { - res[sub] = style[prefix] || 0; - }); - if (style[prefix]) { - set = true; - } - if (style[prefix + 'Vertical']) { - res.top = res.bottom = style[prefix + 'Vertical']; - set = true; +function resolveBoxStyle( + prefix: string, + style: Object, +): ?$ReadOnly<{| + bottom: number, + left: number, + right: number, + top: number, +|}> { + let hasParts = false; + const result = { + bottom: 0, + left: 0, + right: 0, + top: 0, + }; + + // TODO: Fix issues with multiple properties affecting the same side. + + const styleForAll = style[prefix]; + if (styleForAll != null) { + for (const key of Object.keys(result)) { + result[key] = styleForAll; + } + hasParts = true; } - if (style[prefix + 'Horizontal']) { - res.left = res.right = style[prefix + 'Horizontal']; - set = true; + + const styleForHorizontal = style[prefix + 'Horizontal']; + if (styleForHorizontal != null) { + result.left = styleForHorizontal; + result.right = styleForHorizontal; + hasParts = true; + } else { + const styleForLeft = style[prefix + 'Left']; + if (styleForLeft != null) { + result.left = styleForLeft; + hasParts = true; + } + + const styleForRight = style[prefix + 'Right']; + if (styleForRight != null) { + result.right = styleForRight; + hasParts = true; + } + + const styleForEnd = style[prefix + 'End']; + if (styleForEnd != null) { + if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) { + result.left = styleForEnd; + } else { + result.right = styleForEnd; + } + hasParts = true; + } + const styleForStart = style[prefix + 'Start']; + if (styleForStart != null) { + if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) { + result.right = styleForStart; + } else { + result.left = styleForStart; + } + hasParts = true; + } } - subs.forEach(sub => { - const val = style[prefix + capFirst(sub)]; - if (val) { - res[sub] = val; - set = true; + + const styleForVertical = style[prefix + 'Vertical']; + if (styleForVertical != null) { + result.bottom = styleForVertical; + result.top = styleForVertical; + hasParts = true; + } else { + const styleForBottom = style[prefix + 'Bottom']; + if (styleForBottom != null) { + result.bottom = styleForBottom; + hasParts = true; + } + + const styleForTop = style[prefix + 'Top']; + if (styleForTop != null) { + result.top = styleForTop; + hasParts = true; } - }); - if (!set) { - return; } - return res; -} -function capFirst(text) { - return text[0].toUpperCase() + text.slice(1); + return hasParts ? result : null; } module.exports = resolveBoxStyle;