Adding useAnchor prop to Box and calculating axis coords

This commit is contained in:
Jeff Avallone 2019-01-29 17:47:52 -05:00
parent cdb77255a7
commit 97509773af

View File

@ -43,6 +43,7 @@ Box.propTypes = {
radius: PropTypes.number,
padding: PropTypes.number,
label: PropTypes.string,
useAnchors: PropTypes.bool,
width: PropTypes.number,
height: PropTypes.number,
rectTransform: PropTypes.string,
@ -51,7 +52,7 @@ Box.propTypes = {
};
const layout = data => {
const { label, padding } = {
const { label, padding, useAnchors } = {
...Box.defaultProps,
...data.props
};
@ -60,16 +61,32 @@ const layout = data => {
getBBox(<text style={ style.infoText }>{ label }</text>) :
{ width: 0, height: 0 };
const width = Math.max(childBox.width + 2 * padding, labelBox.width);
const height = childBox.height + 2 * padding;
const content = {
x: (width - childBox.width) / 2,
y: padding + labelBox.height
};
data.box = {
width: Math.max(childBox.width + 2 * padding, labelBox.width),
height: childBox.height + 2 * padding + labelBox.height
width,
height: height + labelBox.height,
axisY: useAnchors
? childBox.axisY + content.y
: height / 2 + labelBox.height,
axisX1: useAnchors
? childBox.axisX1 + content.x
: 0,
axisX2: useAnchors
? childBox.axisX2 + content.x
: width
};
data.props = {
...data.props,
width: data.box.width,
height: childBox.height + 2 * padding,
width,
height,
rectTransform: `translate(0 ${ labelBox.height })`,
contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
contentTransform: `translate(${ content.x } ${ content.y })`
};
return data;
};