/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
'use strict';
const BorderBox = require('./BorderBox');
const Dimensions = require('../Utilities/Dimensions');
const React = require('react');
const StyleSheet = require('../StyleSheet/StyleSheet');
const View = require('../Components/View/View');
const flattenStyle = require('../StyleSheet/flattenStyle');
const resolveBoxStyle = require('./resolveBoxStyle');
class ElementBox extends React.Component<$FlowFixMeProps> {
render(): React.Node {
const style = flattenStyle(this.props.style) || {};
let margin = resolveBoxStyle('margin', style);
let padding = resolveBoxStyle('padding', style);
const frameStyle = {...this.props.frame};
const contentStyle = {
width: this.props.frame.width,
height: this.props.frame.height,
};
if (margin != null) {
margin = resolveRelativeSizes(margin);
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) {
padding = resolveRelativeSizes(padding);
contentStyle.width -= padding.left + padding.right;
contentStyle.height -= padding.top + padding.bottom;
}
return (
);
}
}
const styles = StyleSheet.create({
frame: {
position: 'absolute',
},
content: {
backgroundColor: 'rgba(200, 230, 255, 0.8)', // blue
},
padding: {
borderColor: 'rgba(77, 255, 0, 0.3)', // green
},
margin: {
borderColor: 'rgba(255, 132, 0, 0.3)', // orange
},
});
type Style = {
top: number,
right: number,
bottom: number,
left: number,
...
};
/**
* Resolves relative sizes (percentages and auto) in a style object.
*
* @param style the style to resolve
* @return a modified copy
*/
function resolveRelativeSizes(style: $ReadOnly