diff --git a/README.md b/README.md index 49ebb82..e768f97 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 ------------- | ------------- -`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}` +| 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 | 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}` +| 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}` | diff --git a/shorthandStyles.js b/shorthandStyles.js index 242a0db..854362c 100644 --- a/shorthandStyles.js +++ b/shorthandStyles.js @@ -3,9 +3,19 @@ const shorthandStyles = (margin, padding) => Object.assign( getSpacing('padding', padding) ) -function getSpacing(type, spacing) { - const s = {} +function parseSpacing(spacing) { + if (typeof spacing === "string") { + let spacingArray = spacing.split(' ') + spacingArray.map(s => Number.parseInt(s)) + return spacingArray.length === 1 ? + Number.parseInt(spacing) : 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 +45,4 @@ function getSpacing(type, spacing) { return s } -export default shorthandStyles \ No newline at end of file +export default shorthandStyles 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