status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

RN: Fix Element Inspector w/ Negative Margins 

Summary:
There is a bug with the React Native element inspector when the inspected element has negative margins because negative margins actually subtract from the content width and height. This fixes the bug.

@public

Reviewed By: TheSavior

Differential Revision: D8607389

fbshipit-source-id: 2cea0d9160b5437fe775b2ba25373072bafd70b9
This commit is contained in:
Tim Yung 2018-06-26 13:31:04 -07:00 committed by Facebook Github Bot
parent 80f7891287
commit 8b6f1c37ce
1 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
Libraries/Inspector/ElementBox.js
View File

@ -10,38 +10,51 @@
'use strict';
const React = require('React');
const View = require('View');
const StyleSheet = require('StyleSheet');
const BorderBox = require('BorderBox');
const resolveBoxStyle = require('resolveBoxStyle');
const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');
const flattenStyle = require('flattenStyle');
const resolveBoxStyle = require('resolveBoxStyle');
class ElementBox extends React.Component<$FlowFixMeProps> {
render() {
const style = flattenStyle(this.props.style) || {};
const margin = resolveBoxStyle('margin', style);
const padding = resolveBoxStyle('padding', style);
let frameStyle = this.props.frame;
if (margin) {
frameStyle = {
top: frameStyle.top - margin.top,
left: frameStyle.left - margin.left,
height: frameStyle.height + margin.top + margin.bottom,
width: frameStyle.width + margin.left + margin.right,
};
}
let contentStyle = {
const frameStyle = {...this.props.frame};
const contentStyle = {
width: this.props.frame.width,
height: this.props.frame.height,
};
if (padding) {
contentStyle = {
width: contentStyle.width - padding.left - padding.right,
height: contentStyle.height - padding.top - padding.bottom,
};
if (margin != null) {
frameStyle.top -= margin.top;
frameStyle.left -= margin.left;
frameStyle.height += margin.top + margin.bottom;
frameStyle.width += margin.left + margin.right;
if (margin.top < 0) {
contentStyle.height += margin.top;
}
if (margin.bottom < 0) {
contentStyle.height += margin.bottom;
}
if (margin.left < 0) {
contentStyle.width += margin.left;
}
if (margin.right < 0) {
contentStyle.width += margin.right;
}
}
if (padding != null) {
contentStyle.width -= padding.left + padding.right;
contentStyle.height -= padding.top + padding.bottom;
}
return (
<View style={[styles.frame, frameStyle]} pointerEvents="none">
<BorderBox box={margin} style={styles.margin}>
@ -59,13 +72,13 @@ const styles = StyleSheet.create({
position: 'absolute',
},
content: {
backgroundColor: 'rgba(200, 230, 255, 0.8)',
backgroundColor: 'rgba(200, 230, 255, 0.8)', // blue
},
padding: {
borderColor: 'rgba(77, 255, 0, 0.3)',
borderColor: 'rgba(77, 255, 0, 0.3)', // green
},
margin: {
borderColor: 'rgba(255, 132, 0, 0.3)',
borderColor: 'rgba(255, 132, 0, 0.3)', // orange
},
});