mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-02-10 09:12:46 +08:00
7be471d1fe
Summary: This shows margin and padding visually when inspecting an element. @public Test Plan: Go to the "UIExplorer", to the <View> page. Open the inspector, and start selecting things. Padding and margin should be indicated. (Padding in dark blue and margin in orange).
62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule resolveBoxStyle
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* Resolve a style property into it's component parts, e.g.
|
|
*
|
|
* resolveProperties('margin', {margin: 5, marginBottom: 10})
|
|
* ->
|
|
* {top: 5, left: 5, right: 5, bottom: 10}
|
|
*
|
|
* If none are set, returns false.
|
|
*/
|
|
function resolveBoxStyle(prefix: String, style: Object): ?Object {
|
|
var res = {};
|
|
var subs = ['top', 'left', 'bottom', 'right'];
|
|
var set = false;
|
|
if (style[prefix]) {
|
|
subs.forEach(sub => {
|
|
res[sub] = style[prefix];
|
|
});
|
|
set = true;
|
|
}
|
|
if (style[prefix + 'Vertical']) {
|
|
res.top = res.bottom = style[prefix + 'Vertical'];
|
|
set = true;
|
|
}
|
|
if (style[prefix + 'Horizontal']) {
|
|
res.left = res.right = style[prefix + 'Horizontal'];
|
|
set = true;
|
|
}
|
|
subs.forEach(sub => {
|
|
var val = style[prefix + capFirst(sub)];
|
|
if (val) {
|
|
res[sub] = val;
|
|
}
|
|
if (res[sub]) {
|
|
set = true;
|
|
}
|
|
});
|
|
if (!set) {
|
|
return;
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function capFirst(text) {
|
|
return text[0].toUpperCase() + text.slice(1);
|
|
}
|
|
|
|
module.exports = resolveBoxStyle;
|
|
|