From ef00d12adee9e5f84f2ca5c69f1166a91cf87661 Mon Sep 17 00:00:00 2001 From: Luis Rizo Date: Thu, 27 Dec 2018 20:05:55 -0500 Subject: [PATCH 1/6] Margin/Padding String shorthand This allows for the use of a syntax like `margin="20 15 10"` as suggested by #12, while also maintaining compatibility with `margin={20}` and also `margin={[20.15]}`. --- shorthandStyles.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/shorthandStyles.js b/shorthandStyles.js index 242a0db..9c8cb73 100644 --- a/shorthandStyles.js +++ b/shorthandStyles.js @@ -3,9 +3,17 @@ const shorthandStyles = (margin, padding) => Object.assign( getSpacing('padding', padding) ) -function getSpacing(type, spacing) { - const s = {} +const parseSpacing(spacing) { + if (typeof spacing === "string") { + let spacingArray = String.split(spacing, ' ') + spacingArray.map(s => Number.parseInt(s)) + return spacingArray + } + return spacing +function getSpacing(type, _spacing) { + const s = {} + const spacing = parseSpacing(_spacing) if (typeof spacing === "number") { s[type] = spacing } else if (Array.isArray(spacing)){ switch (spacing.length) { @@ -35,4 +43,4 @@ function getSpacing(type, spacing) { return s } -export default shorthandStyles \ No newline at end of file +export default shorthandStyles From eb7e4151354556e4e5415ea44fcd85bbd658cd89 Mon Sep 17 00:00:00 2001 From: Luis Rizo Date: Thu, 27 Dec 2018 20:08:27 -0500 Subject: [PATCH 2/6] Fix syntax errors Fix errors caused by using Github as a text editor --- shorthandStyles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/shorthandStyles.js b/shorthandStyles.js index 9c8cb73..fd59bb6 100644 --- a/shorthandStyles.js +++ b/shorthandStyles.js @@ -5,11 +5,12 @@ const shorthandStyles = (margin, padding) => Object.assign( const parseSpacing(spacing) { if (typeof spacing === "string") { - let spacingArray = String.split(spacing, ' ') + let spacingArray = spacing.split(' ') spacingArray.map(s => Number.parseInt(s)) return spacingArray } return spacing +} function getSpacing(type, _spacing) { const s = {} From d42aa1238913b7bb1243dfaef2e58c9650f9ad02 Mon Sep 17 00:00:00 2001 From: LuisRizo Date: Thu, 27 Dec 2018 20:36:22 -0500 Subject: [PATCH 3/6] Add patch to turn margin="20" to margin={20} --- shorthandStyles.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/shorthandStyles.js b/shorthandStyles.js index fd59bb6..854362c 100644 --- a/shorthandStyles.js +++ b/shorthandStyles.js @@ -3,11 +3,12 @@ const shorthandStyles = (margin, padding) => Object.assign( getSpacing('padding', padding) ) -const parseSpacing(spacing) { +function parseSpacing(spacing) { if (typeof spacing === "string") { let spacingArray = spacing.split(' ') spacingArray.map(s => Number.parseInt(s)) - return spacingArray + return spacingArray.length === 1 ? + Number.parseInt(spacing) : spacingArray } return spacing } From e87372df6688d8c44fe6a97e5ecb02b196bdf282 Mon Sep 17 00:00:00 2001 From: LuisRizo Date: Thu, 27 Dec 2018 20:41:46 -0500 Subject: [PATCH 4/6] Added tests --- shorthandStyles.test.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/shorthandStyles.test.js b/shorthandStyles.test.js index 143f482..adf7880 100644 --- a/shorthandStyles.test.js +++ b/shorthandStyles.test.js @@ -42,3 +42,40 @@ test("top right bottom left", () => { marginLeft: 5 }); }); + +test("[String] margin", () => { + expect(getStyles("20")).toEqual({ + margin: 20 + }); +}); + +test("[String] margin padding", () => { + expect(getStyles("20", "20")).toEqual({ + margin: 20, + padding: 20 + }); +}); + +test("[String] vertical horizontal", () => { + expect(getStyles("20 15")).toEqual({ + marginVertical: 20, + marginHorizontal: 15 + }); +}); + +test("[String] top horizontal bottom", () => { + expect(getStyles("20 15 10")).toEqual({ + marginTop: 20, + marginHorizontal: 15, + marginBottom: 10 + }); +}); + +test("[String] top right bottom left", () => { + expect(getStyles("20 15 10 5")).toEqual({ + marginTop: 20, + marginRight: 15, + marginBottom: 10, + marginLeft: 5 + }); +}); \ No newline at end of file From 28d7015f06f2172bda741951e40d2299d03886f3 Mon Sep 17 00:00:00 2001 From: LuisRizo Date: Thu, 27 Dec 2018 20:54:42 -0500 Subject: [PATCH 5/6] Updated docs --- README.md | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 49ebb82..716d1b7 100644 --- a/README.md +++ b/README.md @@ -152,25 +152,35 @@ becomes +### The string shorthand + +Passing a string value to the `margin` or `padding` props in both `View` and `Row` components allows you to write the common CSS shorthand syntax + + margin: 10px 5px 10px 5px + +as + + margin="10 5 10 5" + #### margin -Shorthand | Style Result +Shorthand | String Alternative | Style Result ------------ | ------------- -`margin={20}` | `{margin: 20}` -`margin={[20]}` | `{marginVertical: 20}` -`margin={[20,15]}` | `{marginVertical: 20, marginHorizontal: 15 }` -`margin={[20,15,10]}` | `{marginTop: 20, marginHorizontal: 15, marginBottom: 10}` -`margin={[20,15,10,5]}` | `{marginTop: 20, marginRight: 15, marginBottom: 10, marginLeft: 5}` +`margin={20}` | `margin="20"` | `{margin: 20}` +`margin={[20]}` | N/A | `{marginVertical: 20}` +`margin={[20,15]}` | `margin="20 15"` | `{marginVertical: 20, marginHorizontal: 15 }` +`margin={[20,15,10]}` | `margin="20 15 10"` | `{marginTop: 20, marginHorizontal: 15, marginBottom: 10}` +`margin={[20,15,10,5]}` | `margin="20 15 10 5"` | `{marginTop: 20, marginRight: 15, marginBottom: 10, marginLeft: 5}` #### padding -Shorthand | Style Result +Shorthand | String Alternative | Style Result ------------ | ------------- -`padding={20}` | `{padding: 20}` -`padding={[20]}` | `{paddingVertical: 20}` -`padding={[20,15]}` | `{paddingVertical: 20, paddingHorizontal: 15}` -`padding={[20,15,10]}` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}` -`padding={[20,15,10,5]}` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}` +`padding={20}` | `padding="20"` | `{padding: 20}` +`padding={[20]}` | N/A | `{paddingVertical: 20}` +`padding={[20,15]}` | `padding="20 15"` | `{paddingVertical: 20, paddingHorizontal: 15}` +`padding={[20,15,10]}` | `padding="20 15 10"` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}` +`padding={[20,15,10,5]}` | `padding="20 15 10 5"` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}` From af8c0bbe6153a328e685d538043f6c80528957f6 Mon Sep 17 00:00:00 2001 From: LuisRizo Date: Thu, 27 Dec 2018 21:01:54 -0500 Subject: [PATCH 6/6] Fix broken table on README --- README.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 716d1b7..e768f97 100644 --- a/README.md +++ b/README.md @@ -164,23 +164,23 @@ as #### margin -Shorthand | String Alternative | Style Result ------------- | ------------- -`margin={20}` | `margin="20"` | `{margin: 20}` -`margin={[20]}` | N/A | `{marginVertical: 20}` -`margin={[20,15]}` | `margin="20 15"` | `{marginVertical: 20, marginHorizontal: 15 }` -`margin={[20,15,10]}` | `margin="20 15 10"` | `{marginTop: 20, marginHorizontal: 15, marginBottom: 10}` -`margin={[20,15,10,5]}` | `margin="20 15 10 5"` | `{marginTop: 20, marginRight: 15, marginBottom: 10, marginLeft: 5}` +| Shorthand | String Alternative | Style Result | +| ----------------------- | --------------------- | ------------------------------------------------------------------- | +| `margin={20}` | `margin="20"` | `{margin: 20}` | +| `margin={[20]}` | N/A | `{marginVertical: 20}` | +| `margin={[20,15]}` | `margin="20 15"` | `{marginVertical: 20, marginHorizontal: 15 }` | +| `margin={[20,15,10]}` | `margin="20 15 10"` | `{marginTop: 20, marginHorizontal: 15, marginBottom: 10}` | +| `margin={[20,15,10,5]}` | `margin="20 15 10 5"` | `{marginTop: 20, marginRight: 15, marginBottom: 10, marginLeft: 5}` | #### padding -Shorthand | String Alternative | Style Result ------------- | ------------- -`padding={20}` | `padding="20"` | `{padding: 20}` -`padding={[20]}` | N/A | `{paddingVertical: 20}` -`padding={[20,15]}` | `padding="20 15"` | `{paddingVertical: 20, paddingHorizontal: 15}` -`padding={[20,15,10]}` | `padding="20 15 10"` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}` -`padding={[20,15,10,5]}` | `padding="20 15 10 5"` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}` +| Shorthand | String Alternative | Style Result | +| ------------------------ | ---------------------- | ----------------------------------------------------------------------- | +| `padding={20}` | `padding="20"` | `{padding: 20}` | +| `padding={[20]}` | N/A | `{paddingVertical: 20}` | +| `padding={[20,15]}` | `padding="20 15"` | `{paddingVertical: 20, paddingHorizontal: 15}` | +| `padding={[20,15,10]}` | `padding="20 15 10"` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}` | +| `padding={[20,15,10,5]}` | `padding="20 15 10 5"` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}` |