diff --git a/README.md b/README.md index ea80f31..346177f 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,7 @@ Use reverse to change `row` to `row-reverse` or `column` to `column-reverse`: -### Margin and Padding shorthand +### Margin, Padding, and Position shorthand Extra benefits are gained by using react-native-view instead of the core `View` in that you can use shorthands for `margin` and `padding` styles that are based on the css shorthand convention @@ -172,6 +172,18 @@ Shorthand | Style Result `padding={[20,15,10]}` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}` `padding={[20,15,10,5]}` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}` +#### pos + +Shorthand | Style Result +------------ | ------------- +`pos={0}` | `{position: "absolute", top:0, left: 0, bottom: 0, right: 0}` +`pos={[0]}` | `{position: "absolute", top:0}` +`pos={[10,10]}` | `{position: "absolute", top:10, left:10}` +`pos={[0,1,0]}` | `{position: "absolute", top:0, left:1, bottom:0}` +`pos={[null,null,0,0]}` | `{position: "absolute", top:null, left:null, bottom:0, right:0}` + + + Contributions and issues very much welcome! diff --git a/Row.js b/Row.js index 5582044..71b9a40 100644 --- a/Row.js +++ b/Row.js @@ -6,21 +6,20 @@ const Row = (props) => { const { dial = 0, - flex: _flex, spaceBetween, spaceAround, stretch, margin, padding, style, + pos, reverse, ...otherProps, } = props; const _dial = dial > 0 && dial < 10 ? dial : 0; - const flex = typeof(_flex) === "number" ? _flex : !_flex ? null : 1 - const _shorthandStyles = shorthandStyles(margin, padding) + const _shorthandStyles = shorthandStyles(margin, padding, pos) const justifyContent = spaceBetween ? 'space-between' : spaceAround ? 'space-around' : _dial === 0 ? null : _dial % 3 === 0 ? 'flex-end' : _dial % 3 === 2 ? 'center' : 'flex-start'; @@ -30,8 +29,17 @@ const Row = (props) => { const flexDirection = reverse ? 'row-reverse' : 'row'; + const position = typeof pos === 'number' || Array.isArray(pos) ? 'absolute' : null + + const _style = { + flexDirection, + justifyContent, + alignItems, + position, + }; + return ( - + {props.children} ); diff --git a/View.js b/View.js index c04e429..addd14e 100644 --- a/View.js +++ b/View.js @@ -7,21 +7,20 @@ const View = (props) => { const { dial = 0, - flex: _flex, style, spaceBetween, spaceAround, stretch, margin, padding, + pos, reverse, ...otherProps, } = props; const _dial = dial > 0 && dial < 10 ? dial : 0; - const flex = typeof(_flex) === "number" ? _flex : !_flex ? null : 1 - const _shorthandStyles = shorthandStyles(margin, padding) + const _shorthandStyles = shorthandStyles(margin, padding, pos) const justifyContent = spaceBetween ? 'space-between' : spaceAround ? 'space-around' : _dial === 0 ? null : _dial > 6 ? 'flex-end' : _dial > 3 ? 'center' : 'flex-start'; @@ -31,8 +30,17 @@ const View = (props) => { const flexDirection = reverse ? 'column-reverse' : 'column'; + const position = typeof pos === 'number' || Array.isArray(pos) ? 'absolute' : null + + const _style = { + flexDirection, + justifyContent, + alignItems, + position, + } + return ( - + {props.children} ); diff --git a/package.json b/package.json index ba5f57d..a8510a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-row", - "version": "1.1.1", + "version": "1.2.0", "description": "A wrapper around the react-native View component enabling concise assignment of flexbox properties", "main": "index.js", "scripts": { diff --git a/shorthandStyles.js b/shorthandStyles.js index ad1e107..d9d78a6 100644 --- a/shorthandStyles.js +++ b/shorthandStyles.js @@ -1,4 +1,4 @@ -const shorthandStyles = (margin, padding) => { +const shorthandStyles = (margin, padding, position) => { let s = {} @@ -41,7 +41,32 @@ const shorthandStyles = (margin, padding) => { s['paddingLeft'] = padding[3] } } - + + if (typeof position === "number") { + s['top'] = position + s['left'] = position + s['bottom'] = position + s['right'] = position + } + else if (Array.isArray(position)){ + switch (position.length) { + case 1: + s['top'] = position[0] + case 2: + s['top'] = position[0] + s['left'] = position[1] + case 3: + s['top'] = position[0] + s['left'] = position[1] + s['bottom'] = position[2] + case 4: + s['top'] = position[0] + s['left'] = position[1] + s['bottom'] = position[2] + s['right'] = position[3] + } + } + return s }