From 3cdc257625715bc7406cd6170829eec2dd07f27d Mon Sep 17 00:00:00 2001 From: Sam Doyle Date: Mon, 28 Oct 2019 21:19:33 -0400 Subject: [PATCH 01/33] re-add onRef prop --- src/Input.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Input.js b/src/Input.js index eba00ae..915d6a0 100644 --- a/src/Input.js +++ b/src/Input.js @@ -27,6 +27,7 @@ function Input({ iconSize, iconContent, password, + onRef, ...rest }) { const [isPassword, setIsPassword] = React.useState(false); @@ -87,6 +88,7 @@ function Input({ {left && !right && iconInstance} Date: Fri, 10 Jan 2020 17:38:00 +0200 Subject: [PATCH 02/33] FEAT: color scheme and sizes --- src/theme/README.md | 73 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 55 insertions(+), 18 deletions(-) diff --git a/src/theme/README.md b/src/theme/README.md index a64dbf5..032798e 100644 --- a/src/theme/README.md +++ b/src/theme/README.md @@ -12,8 +12,8 @@ - custom theme constants will **overwrite** the default galio theme constants ```js const customTheme = { - SIZES: { BASE: 18, } // this will overwrite the Galio SIZES BASE value 16 - COLORS: { PRIMARY: 'red', } // this will overwrite the Galio COLORS PRIMARY color #B23AFC + SIZES: { BASE: 16, } // this will overwrite the Galio SIZES BASE value 16 + COLORS: { PRIMARY: 'red', } // this will overwrite the Galio COLORS PRIMARY color #FE2472 }; @@ -32,25 +32,54 @@ FACEBOOK | #3B5998 | ![](https://dummyimage.com/40x12/3B5998/000000.png&text=+) TWITTER | #5BC0DE | ![](https://dummyimage.com/40x12/5BC0DE/000000.png&text=+) For social Twitter button DRIBBBLE | #EA4C89 | ![](https://dummyimage.com/40x12/EA4C89/000000.png&text=+) For social Dribble button **GALIO** | -THEME | #B23AFC | ![](https://dummyimage.com/40x12/B23AFC/000000.png&text=+) Theme default color -PRIMARY | #B23AFC | ![](https://dummyimage.com/40x12/B23AFC/000000.png&text=+) Primary color for Buttons -INFO | #1232FF | ![](https://dummyimage.com/40x12/1232FF/000000.png&text=+) Info color for Buttons & Text -ERROR | #FE2472 | ![](https://dummyimage.com/40x12/FE2472/000000.png&text=+) Info color for error messages -WARNING | #FF9C09 | ![](https://dummyimage.com/40x12/FF9C09/000000.png&text=+) Warning color for warning messages -SUCCESS | #45DF31 | ![](https://dummyimage.com/40x12/45DF31/000000.png&text=+) Success color for success messages -**COMPONENTS** | -INPUT | #808080 | ![](https://dummyimage.com/40x12/808080/000000.png&text=+) Input backgroundColor -PLACEHOLDER | #9FA5AA | ![](https://dummyimage.com/40x12/9FA5AA/000000.png&text=+) Input placeholder text color -NAVBAR | #F9F9F9 | ![](https://dummyimage.com/40x12/F9F9F9/000000.png&text=+) NavBar text color -BLOCK | #808080 | ![](https://dummyimage.com/40x12/808080/000000.png&text=+) Block border color -ICON | #000000 | ![](https://dummyimage.com/40x12/000000/000000.png&text=+) Icon default color +THEME | #FE2472 | ![](https://dummyimage.com/40x12/FE2472/000000.png&text=+) Theme default color +PRIMARY | #FE2472 | ![](https://dummyimage.com/40x12/FE2472/000000.png&text=+) Primary color for Buttons & Text +DARK_PRIMARY | #F4075C | ![](https://dummyimage.com/40x12/F4075C/000000.png&text=+) Dark Primary color +LIGHT_PRIMARY | #FF8AB9 | ![](https://dummyimage.com/40x12/FF8AB9/000000.png&text=+) Light Primary color +BRIGHT_PRIMARY | #FFD1E4 | ![](https://dummyimage.com/40x12/FFD1E4/000000.png&text=+) Bright Primary color +INFO | #0E2ADD | ![](https://dummyimage.com/40x12/0E2ADD/000000.png&text=+) Info color for Buttons & Text +DARK_INFO | #0520D0 | ![](https://dummyimage.com/40x12/0520D0/000000.png&text=+) Dark Info color +LIGHT_INFO | #8794FF | ![](https://dummyimage.com/40x12/8794FF/000000.png&text=+) Light Info color +BRIGHT_INFO | #D1D6FF | ![](https://dummyimage.com/40x12/D1D6FF/000000.png&text=+) Bright Info color +DANGER | #FF3F31 | ![](https://dummyimage.com/40x12/FF3F31/000000.png&text=+) Danger color for Buttons & Text +DARK_DANGER | #F43324 | ![](https://dummyimage.com/40x12/F43324/000000.png&text=+) Dark Danger color +LIGHT_DANGER | #FF7167 | ![](https://dummyimage.com/40x12/FF7167/000000.png&text=+) Light Danger color +BRIGHT_DANGER | #FFCAC6 | ![](https://dummyimage.com/40x12/FFCAC6/000000.png&text=+) Bright Danger color +WARNING | #FF9C09 | ![](https://dummyimage.com/40x12/FF9C09/000000.png&text=+) Warning color for Buttons & Text +DARK_WARNING | #EE8E00 | ![](https://dummyimage.com/40x12/EE8E00/000000.png&text=+) Dark Warning color +LIGHT_WARNING | #FFCC76 | ![](https://dummyimage.com/40x12/FFCC76/000000.png&text=+) Light Warning color +BRIGHT_WARNING | #FFEBCB | ![](https://dummyimage.com/40x12/FFEBCB/000000.png&text=+) Bright Warning color +SUCCESS | #18CE0F | ![](https://dummyimage.com/40x12/18CE0F/000000.png&text=+) Success color for Buttons & Text +DARK_SUCCESS | #24AD12 | ![](https://dummyimage.com/40x12/24AD12/000000.png&text=+) Dark Success color +LIGHT_SUCCESS | #88F38E | ![](https://dummyimage.com/40x12/88F38E/000000.png&text=+) Light Success color +BRIGHT_SUCCESS | #D2FBD3 | ![](https://dummyimage.com/40x12/D2FBD3/000000.png&text=+) Bright Success color **STANDARD** | WHITE | #FFFFFF | ![](https://dummyimage.com/40x12/FFFFFF/000000.png&text=+) White color -BLACK | #000000 | ![](https://dummyimage.com/40x12/000000/000000.png&text=+) Black color -GREY | #898989 | ![](https://dummyimage.com/40x12/898989/000000.png&text=+) Grey color -MUTED | #9FA5AA | ![](https://dummyimage.com/40x12/9FA5AA/000000.png&text=+) Text muted color +BLACK | #161D28 | ![](https://dummyimage.com/40x12/161D28/000000.png&text=+) Black color +DARK_BLACK | #000B19 | ![](https://dummyimage.com/40x12/000B19/000000.png&text=+) Dark Black color +LIGHT_BLACK | #2A2F36 | ![](https://dummyimage.com/40x12/2A2F36/000000.png&text=+) Light Black color +BRIGHT_BLACK | #3D4144 | ![](https://dummyimage.com/40x12/3D4144/000000.png&text=+) Bright Black color +SECONDARY | #9FA5AA | ![](https://dummyimage.com/40x12/9FA5AA/000000.png&text=+) Grey color +DARK_SECONDARY | #62676B | ![](https://dummyimage.com/40x12/62676B/000000.png&text=+) Dark Black color +LIGHT_SECONDARY | #D6DADD | ![](https://dummyimage.com/40x12/D6DADD/000000.png&text=+) Light Black color +BRIGHT_SECONDARY | #EEF1F3 | ![](https://dummyimage.com/40x12/EEF1F3/000000.png&text=+) Bright Black color +GREY | #E9EBEF | ![](https://dummyimage.com/40x12/E9EBEF/000000.png&text=+) Text muted color +DARK_GREY | #E0E4EA | ![](https://dummyimage.com/40x12/E0E4EA/000000.png&text=+) Dark Black color +LIGHT_GREY | #F0F1F4 | ![](https://dummyimage.com/40x12/F0F1F4/000000.png&text=+) Light Black color +BRIGHT_GREY | #F7F8F9 | ![](https://dummyimage.com/40x12/F7F8F9/000000.png&text=+) Bright Black color TRANSPARENT | transparent | Transparent value for Block, Button and other components NEUTRAL | rgba(255,255,255, 0.65) | Text neutral color white with 65% transparency +**SHADOWS** | +PRIMARY | 0 13px 11px -8 rgba(254, 36, 114, .30) | ![](https://dummyimage.com/40x12/fe2472/000000.png&text=+) Primary shadow +INFO | 0 13px 11px -8 rgba(14, 42, 221, .30) | ![](https://dummyimage.com/40x12/0E2ADD/000000.png&text=+) Info shadow +SUCCESS | 0 13px 11px -8 rgba(24, 206, 15, .30) | ![](https://dummyimage.com/40x12/18CE0F/000000.png&text=+) Success shadow +WARNING | 0 13px 11px -8 rgba(255, 156, 9, .30) | ![](https://dummyimage.com/40x12/FF9C09/000000.png&text=+) Warning shadow +DANGER | 0 13px 11px -8 rgba(255, 63, 49, .30) | ![](https://dummyimage.com/40x12/FF3F31/000000.png&text=+) Danger shadow +BLACK | 0 13px 11px -8 rgba(0, 0, 0, .30) | ![](https://dummyimage.com/40x12/161D28/000000.png&text=+) Black shadow +WHITE | 0 10px 20px -8 rgba(210, 210, 210, .100) | ![](https://dummyimage.com/40x12/FFFFFF/000000.png&text=+) White shadow +GREY | 0 13px 11px -8 rgba(152, 152, 152, .30) | ![](https://dummyimage.com/40x12/9FA5AA/000000.png&text=+) Grey shadow +LIGHT GREY | 0 13px 11px -8 rgba(149, 149, 149, .30) | ![](https://dummyimage.com/40x12/E9EBEF/000000.png&text=+) Light Grey shadow + #### SIZES reference table `const { height, width } = Dimensions.get('screen');` @@ -60,8 +89,16 @@ By default the size of **16** is used to calculate all the sizes :--- | :---: **THEME** | BASE | 16 | -FONT | 16 | +PARAGRAPH | 16 | ICON | 16 | +H1 | 16 * 2,75 | +H2 | 16 * 2,375 | +H3 | 16 * 1,875 | +H4 | 16 * 1,5 | +H5 | 16 * 1,3125 | +H6 | 16 * 1,125 | +BODY | 16 * 0,875 | +SMALL| 16 * 0,75 | OPACITY | 0.8 | BORDER_RADIUS | 6 | BORDER_WIDTH | 0.8 | From 526bd1198093c624ee509c642f6642f1d82a9321 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Mon, 13 Jan 2020 12:06:15 +0200 Subject: [PATCH 03/33] feat: changes sizes --- src/theme/README.md | 74 ++++++++++++++++++++++----------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/theme/README.md b/src/theme/README.md index 032798e..a07a07e 100644 --- a/src/theme/README.md +++ b/src/theme/README.md @@ -86,11 +86,11 @@ LIGHT GREY | 0 13px 11px -8 rgba(149, 149, 149, .30) | ![](https://dummyimage.co By default the size of **16** is used to calculate all the sizes **Size name** | **Default value** -:--- | :---: -**THEME** | -BASE | 16 | -PARAGRAPH | 16 | -ICON | 16 | +:--- | :---: +**THEME** | +BASE | 16 | +PARAGRAPH | 16 | +ICON | 16 | H1 | 16 * 2,75 | H2 | 16 * 2,375 | H3 | 16 * 1,875 | @@ -99,46 +99,46 @@ H5 | 16 * 1,3125 | H6 | 16 * 1,125 | BODY | 16 * 0,875 | SMALL| 16 * 0,75 | -OPACITY | 0.8 | -BORDER_RADIUS | 6 | -BORDER_WIDTH | 0.8 | -**BUTTON** | -BUTTON_WIDTH | 16 * 9 | -BUTTON_HEIGHT | 16 * 2.75 | -BUTTON_SHADOW_RADIUS | 10 | +OPACITY | 0.8 | +BORDER_RADIUS | 4 | +BORDER_WIDTH | 1 | +**BUTTON** | +BUTTON_WIDTH | 16 * 9 | +BUTTON_HEIGHT | 16 * 2.75 | +BUTTON_SHADOW_RADIUS | {x: 0 , y: 13, blur: 11, spread: -8 } | **BLOCK** | -BLOCK_SHADOW_OPACITY | 0.15 | -BLOCK_SHADOW_RADIUS | 8 | +BLOCK_SHADOW_OPACITY | 0.15 | +BLOCK_SHADOW_RADIUS | 8 | ANDROID_ELEVATION | 1 | -**CARD** | -CARD_BORDER_RADIUS | 16 * 0.4 | -CARD_BORDER_WIDTH | 16 * 0.05 | -CARD_WIDTH | width - (16 * 2) | -CARD_MARGIN_VERTICAL | 16 * 0.875 | -CARD_FOOTER_HORIZONTAL | 16 * 0.75 | -CARD_FOOTER_VERTICAL | 16 * 0.75 | -CARD_AVATAR_WIDTH | 16 * 2.5 | -CARD_AVATAR_HEIGHT | 16 * 2.5 | -CARD_AVATAR_RADIUS | 16 * 1.25 | -CARD_IMAGE_HEIGHT | 16 * 12.5 | -CARD_ROUND | 16 * 0.1875 | -CARD_ROUNDED | 16 * 0.5 | -**INPUT** | -INPUT_BORDER_RADIUS | 16 * 0.5 | -INPUT_BORDER_WIDTH | 16 * 0.05 | +**CARD** | +CARD_BORDER_RADIUS | 16 * 0.4 | +CARD_BORDER_WIDTH | 16 * 0.05 | +CARD_WIDTH | width - (16 * 2) | +CARD_MARGIN_VERTICAL | 16 * 0.875 | +CARD_FOOTER_HORIZONTAL | 16 * 0.75 | +CARD_FOOTER_VERTICAL | 16 * 0.75 | +CARD_AVATAR_WIDTH | 16 * 2.5 | +CARD_AVATAR_HEIGHT | 16 * 2.5 | +CARD_AVATAR_RADIUS | 16 * 1.25 | +CARD_IMAGE_HEIGHT | 16 * 12.5 | +CARD_ROUND | 16 * 0.1875 | +CARD_ROUNDED | 16 * 0.5 | +**INPUT** | +INPUT_BORDER_RADIUS | 16 * 0.25 | +INPUT_BORDER_WIDTH | 16 * 0.0625 | INPUT_HEIGHT | 16 * 2.75 | -INPUT_HORIZONTAL | 16 | -INPUT_TEXT | 16 * 0.875 | -INPUT_LABEL_TEXT | 16 * 0.9 | -INPUT_LABEL_BOTTOM | 16 / 4 | -INPUT_HELP_TEXT | 16 * 0.8 | -INPUT_ROUNDED | 16 * 1.7 | +INPUT_PADDING_HORIZONTAL | 16 | +INPUT_TEXT | 14 | +INPUT_LABEL | 14 | +INPUT_LABEL_MARGIN_BOTTOM | 16 * 0.5 | +INPUT_HELP_TEXT | 14 | +INPUT_ROUNDED | 16 * 1.5 | **NAVBAR** | NAVBAR_HEIGHT | 16 * 4.125 | NAVBAR_VERTICAL | 16 | NAVBAR_TITLE_FLEX | 2 | NAVBAR_TITLE_HEIGHT | height * 0.07 | -NAVBAR_TITLE_TEXT | 16 * 0.875 | +NAVBAR_TITLE_TEXT | 14 | NAVBAR_LEFT_FLEX | 0.5 | NAVBAR_LEFT_HEIGHT | height * 0.07 | NAVBAR_LEFT_MARGIN | 16 | From 727f2ca3ce10094cddf0d13e72f1483330471bf5 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Mon, 13 Jan 2020 16:46:32 +0200 Subject: [PATCH 04/33] refactor: changed variables --- src/theme/colors.js | 51 ++++++++++++++++++++++++++--- src/theme/sizes.js | 78 +++++++++++++++++++++++++++------------------ 2 files changed, 93 insertions(+), 36 deletions(-) diff --git a/src/theme/colors.js b/src/theme/colors.js index 4db73e5..498c051 100644 --- a/src/theme/colors.js +++ b/src/theme/colors.js @@ -5,14 +5,55 @@ export const SOCIAL = { }; export const THEME = { - THEME: '#B23AFC', - PRIMARY: '#B23AFC', - INFO: '#1232FF', - ERROR: '#FE2472', + THEME: '#FE2472', + PRIMARY: '#FE2472', + DARK_PRIMARY: '#F4075C', + LIGHT_PRIMARY: '#FF8AB9', + BRIGHT_PRIMARY: '#FFD1E4', + INFO: '#0E2ADD', + DARK_INFO: '#0520D0', + LIGHT_INFO: '#8794FF', + BRIGHT_INFO: '#D1D6FF', + DANGER: '#FF3F31', + DARK_DANGER: '#F43324', + LIGHT_DANGER: '#FF7167', + BRIGHT_DANGER: '#FFCAC6', WARNING: '#FF9C09', - SUCCESS: '#45DF31', + DARK_WARNING: '#EE8E00', + LIGHT_WARNING: '#FFCC76', + BRIGHT_WARNING: '#FFEBCB', + SUCCESS: '#18CE0F', + DARK_SUCCESS: '#24AD12', + LIGHT_SUCCESS: '#88F38E', + BRIGHT_SUCCESS: '#D2FBD3', + WHITE: '#FFFFFF', + DARK_BLACK: '#000B19', + BLACK: '#161D28', + BRIGHT_BLACK: '#3D4144', + LIGHT_BLACK: '#2A2F36', + DARK_SECONDARY: '#62676B', + SECONDARY: '#9FA5AA', + BRIGHT_SECONDARY: '#EEF1F3', + LIGHT_SECONDARY: '#D6DADD', + DARK_GREY: '#E0E4EA', + GREY: '#E9EBEF', + BRIGHT_GREY: '#F7F8F9', + LIGHT_GREY: '#F0F1F4', + NEUTRAL: 'rgba(255,255,255, 0.65)', }; +// export const SHADOWS = { +// PRIMARY: 0 13px 11px -8 rgba(254, 36, 114, .30), +// INFO: 0 13px 11px -8 rgba(14, 42, 221, .30), +// SUCCESS: 0 13px 11px -8 rgba(24, 206, 15, .30), +// WARNING: 0 13px 11px -8 rgba(255, 156, 9, .30), +// DANGER: 0 13px 11px -8 rgba(255, 63, 49, .30), +// BLACK: 0 13px 11px -8 rgba(0, 0, 0, .30), +// WHITE: 0 10px 20px -8 rgba(210, 210, 210, .100), +// GREY: 0 13px 11px -8 rgba(152, 152, 152, .30), +// LIGHT_GREY: 0 13px 11px -8 rgba(149, 149, 149, .30), +// }; + export const COMPONENTS = { INPUT: '#808080', PLACEHOLDER: '#9FA5AA', diff --git a/src/theme/sizes.js b/src/theme/sizes.js index d55732f..2b258d3 100644 --- a/src/theme/sizes.js +++ b/src/theme/sizes.js @@ -2,17 +2,33 @@ import { Dimensions } from 'react-native'; const { height, width } = Dimensions.get('screen'); +export const BASE = 16; + const SIZES = { - BASE: 16, - FONT: 16, - ICON: 16, + BASE: BASE, + FONT: BASE, OPACITY: 0.8, BORDER_RADIUS: 6, BORDER_WIDTH: 0.8, + // Typography + H1: BASE * 2.75, + H2: BASE * 2.375, + H3: BASE * 1.875, + H4: BASE * 1.5, + H5: BASE * 1.3125, + H6: BASE * 1.125, + BODY: BASE * 0.875, + SMALL: BASE * 0.75, + + // Icons + ICON: BASE, + ICON_MEDIUM: BASE * 1.5, + ICON_LARGE: BASE * 2, + // Button styles - BUTTON_WIDTH: 16 * 9, - BUTTON_HEIGHT: 16 * 2.75, + BUTTON_WIDTH: BASE * 9, + BUTTON_HEIGHT: BASE * 2.75, BUTTON_SHADOW_RADIUS: 10, // Block styles @@ -21,42 +37,42 @@ const SIZES = { ANDROID_ELEVATION: 1, // Card styles - CARD_BORDER_RADIUS: 16 * 0.4, - CARD_BORDER_WIDTH: 16 * 0.05, - CARD_WIDTH: width - (16 * 2), - CARD_MARGIN_VERTICAL: 16 * 0.875, - CARD_FOOTER_HORIZONTAL: 16 * 0.75, - CARD_FOOTER_VERTICAL: 16 * 0.75, - CARD_AVATAR_WIDTH: 16 * 2.5, - CARD_AVATAR_HEIGHT: 16 * 2.5, - CARD_AVATAR_RADIUS: 16 * 1.25, - CARD_IMAGE_HEIGHT: 16 * 12.5, - CARD_ROUND: 16 * 0.1875, - CARD_ROUNDED: 16 * 0.5, + CARD_BORDER_RADIUS: BASE * 0.4, + CARD_BORDER_WIDTH: BASE * 0.05, + CARD_WIDTH: width - (BASE * 2), + CARD_MARGIN_VERTICAL: BASE * 0.875, + CARD_FOOTER_HORIZONTAL: BASE * 0.75, + CARD_FOOTER_VERTICAL: BASE * 0.75, + CARD_AVATAR_WIDTH: BASE * 2.5, + CARD_AVATAR_HEIGHT: BASE * 2.5, + CARD_AVATAR_RADIUS: BASE * 1.25, + CARD_IMAGE_HEIGHT: BASE * 12.5, + CARD_ROUND: BASE * 0.1875, + CARD_ROUNDED: BASE * 0.5, // Input styles - INPUT_BORDER_RADIUS: 16 * 0.5, - INPUT_BORDER_WIDTH: 16 * 0.05, - INPUT_HEIGHT: 16 * 2.75, - INPUT_HORIZONTAL: 16, - INPUT_TEXT: 16 * 0.875, - INPUT_LABEL_TEXT: 16 * 0.9, - INPUT_LABEL_BOTTOM: 16 / 4, - INPUT_HELP_TEXT: 16 * 0.8, - INPUT_ROUNDED: 16 * 1.7, + INPUT_BORDER_RADIUS: BASE * 0.5, + INPUT_BORDER_WIDTH: BASE * 0.05, + INPUT_HEIGHT: BASE * 2.75, + INPUT_HORIZONTAL: BASE, + INPUT_TEXT: BASE * 0.875, + INPUT_LABEL_TEXT: BASE * 0.9, + INPUT_LABEL_BOTTOM: BASE / 4, + INPUT_HELP_TEXT: BASE * 0.8, + INPUT_ROUNDED: BASE * 1.7, // NavBar styles - NAVBAR_HEIGHT: 16 * 4.125, - NAVBAR_VERTICAL: 16, + NAVBAR_HEIGHT: BASE * 4.125, + NAVBAR_VERTICAL: BASE, NAVBAR_TITLE_FLEX: 2, NAVBAR_TITLE_HEIGHT: height * 0.07, - NAVBAR_TITLE_TEXT: 16 * 0.875, + NAVBAR_TITLE_TEXT: BASE * 0.875, NAVBAR_LEFT_FLEX: 0.5, NAVBAR_LEFT_HEIGHT: height * 0.07, - NAVBAR_LEFT_MARGIN: 16, + NAVBAR_LEFT_MARGIN: BASE, NAVBAR_RIGHT_FLEX: 0.5, NAVBAR_RIGHT_HEIGHT: height * 0.07, - NAVBAR_RIGHT_MARGIN: 16, + NAVBAR_RIGHT_MARGIN: BASE, // Checkbox CHECKBOX_WIDTH: 20, From ddc3bd2eb91167bb4e8a8dc7f44e264dd130e558 Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Mon, 13 Jan 2020 17:31:50 +0200 Subject: [PATCH 05/33] Icon component done --- src/Icon.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Icon.js b/src/Icon.js index 43ef204..f6fddf3 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -19,6 +19,8 @@ function Icon({ color, styles, theme, + medium, + large, ...rest }) { if (family === 'Galio') { @@ -26,8 +28,8 @@ function Icon({ return ( ); @@ -38,8 +40,8 @@ function Icon({ return ( ); From 486f0760a19ae896e80807aa9e8f07f8d5cae53a Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Mon, 13 Jan 2020 17:35:51 +0200 Subject: [PATCH 06/33] refactor: changed the variables and integrated the new ones --- src/Text.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/Text.js b/src/Text.js index 2e93d4f..9b5825c 100644 --- a/src/Text.js +++ b/src/Text.js @@ -12,7 +12,10 @@ function Typography({ h3, h4, h5, + h6, p, + body, + small, muted, neutral, size, @@ -32,8 +35,11 @@ function Typography({ h2 && { fontSize: normalize(38) }, h3 && { fontSize: normalize(30) }, h4 && { fontSize: normalize(24) }, - h5 && { fontSize: normalize(18) }, + h5 && { fontSize: normalize(21) }, + h6 && { fontSize: normalize(18) }, p && { fontSize: normalize(16) }, + body && { fontSize: normalize(14) }, + small && { fontSize: normalize(12) }, muted && { color: theme.COLORS.MUTED }, neutral && { color: theme.COLORS.NEUTRAL }, size && { fontSize: size }, @@ -57,7 +63,10 @@ Typography.defaultProps = { h3: false, h4: false, h5: false, + h6: false, p: false, + body: false, + small: false, size: 0, color: null, muted: false, @@ -75,7 +84,10 @@ Typography.propTypes = { h3: PropTypes.bool, h4: PropTypes.bool, h5: PropTypes.bool, + h6: PropTypes.bool, p: PropTypes.bool, + body: PropTypes.bool, + small: PropTypes.bool, size: PropTypes.number, color: PropTypes.string, muted: PropTypes.bool, From dca612ec62c2e1b3c6adcc59c9490a0e2241fc4d Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Tue, 14 Jan 2020 15:18:59 +0200 Subject: [PATCH 07/33] feat: Link component --- src/Link.js | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 src/Link.js diff --git a/src/Link.js b/src/Link.js new file mode 100644 index 0000000..5bf9242 --- /dev/null +++ b/src/Link.js @@ -0,0 +1,103 @@ +import React from 'react'; +import { Text } from 'react-native'; +import PropTypes from 'prop-types'; + +import normalize from './helpers/normalize'; +import GalioTheme, { withGalio } from './theme'; + +function Typography({ + style, + h1, + h2, + h3, + h4, + h5, + h6, + p, + body, + small, + muted, + neutral, + size, + color, + bold, + italic, + center, + children, + styles, + theme, + ...rest + }) { + return ( + Linking.openURL(url)}> + + {children}> + Google + + + ); + } + + Typography.defaultProps = { + children: null, + style: null, + h1: false, + h2: false, + h3: false, + h4: false, + h5: false, + h6: false, + p: false, + body: false, + small: false, + size: 0, + color: null, + muted: false, + bold: false, + italic: false, + styles: {}, + theme: GalioTheme, + }; + + Typography.propTypes = { + children: PropTypes.any, + style: PropTypes.any, + h1: PropTypes.bool, + h2: PropTypes.bool, + h3: PropTypes.bool, + h4: PropTypes.bool, + h5: PropTypes.bool, + h6: PropTypes.bool, + p: PropTypes.bool, + body: PropTypes.bool, + small: PropTypes.bool, + size: PropTypes.number, + color: PropTypes.string, + muted: PropTypes.bool, + bold: PropTypes.bool, + italic: PropTypes.bool, + styles: PropTypes.any, + theme: PropTypes.any, + }; + + export default withGalio(Typography); + \ No newline at end of file From 6a65c6d871f6c91b791c6821aada77c1e83cdfbb Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Wed, 15 Jan 2020 11:35:55 +0200 Subject: [PATCH 08/33] Refactor: review changes --- src/Link.js | 101 +++++++++++++--------------------------------------- 1 file changed, 25 insertions(+), 76 deletions(-) diff --git a/src/Link.js b/src/Link.js index 5bf9242..973540f 100644 --- a/src/Link.js +++ b/src/Link.js @@ -1,103 +1,52 @@ import React from 'react'; -import { Text } from 'react-native'; import PropTypes from 'prop-types'; +import { StyleSheet } from 'react-native'; +import { Text } from './src'; -import normalize from './helpers/normalize'; import GalioTheme, { withGalio } from './theme'; -function Typography({ - style, - h1, - h2, - h3, - h4, - h5, - h6, - p, - body, - small, - muted, - neutral, - size, +function Link({ + props, color, - bold, - italic, - center, - children, - styles, - theme, + onPress, ...rest }) { return ( - Linking.openURL(url)}> - - {children}> - Google - - + onPress()} + {...rest}> + {children}> + Google + + ); } - Typography.defaultProps = { + Link.defaultProps = { children: null, - style: null, - h1: false, - h2: false, - h3: false, - h4: false, - h5: false, - h6: false, - p: false, - body: false, - small: false, + style: true, size: 0, - color: null, - muted: false, - bold: false, - italic: false, + color: theme.COLORS.PRIMARY, styles: {}, theme: GalioTheme, }; - Typography.propTypes = { + Link.propTypes = { children: PropTypes.any, style: PropTypes.any, - h1: PropTypes.bool, - h2: PropTypes.bool, - h3: PropTypes.bool, - h4: PropTypes.bool, - h5: PropTypes.bool, - h6: PropTypes.bool, - p: PropTypes.bool, - body: PropTypes.bool, - small: PropTypes.bool, size: PropTypes.number, color: PropTypes.string, - muted: PropTypes.bool, - bold: PropTypes.bool, - italic: PropTypes.bool, styles: PropTypes.any, theme: PropTypes.any, }; + +const styles = StyleSheet.create({ + primary: { + color: theme.COLORS.PRIMARY, + } +}) + - export default withGalio(Typography); + export default withGalio(Link, styles); \ No newline at end of file From 4b1b4be41a1b3000a985ecb3f23f127cc0ce6014 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Wed, 15 Jan 2020 14:50:01 +0200 Subject: [PATCH 09/33] Refactor: link component --- src/Link.js | 37 ++++++++++++++++--------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/Link.js b/src/Link.js index 973540f..13ffa24 100644 --- a/src/Link.js +++ b/src/Link.js @@ -1,37 +1,34 @@ import React from 'react'; import PropTypes from 'prop-types'; import { StyleSheet } from 'react-native'; -import { Text } from './src'; - +import { Text } from './'; import GalioTheme, { withGalio } from './theme'; function Link({ - props, - color, + children, onPress, + theme, + style, + styles, ...rest }) { return ( - onPress()} {...rest}> - {children}> - Google + {children} - ); } - + Link.defaultProps = { children: null, style: true, - size: 0, - color: theme.COLORS.PRIMARY, styles: {}, theme: GalioTheme, }; - + Link.propTypes = { children: PropTypes.any, style: PropTypes.any, @@ -41,12 +38,10 @@ function Link({ theme: PropTypes.any, }; -const styles = StyleSheet.create({ - primary: { - color: theme.COLORS.PRIMARY, - } + const styles = theme => StyleSheet.create({ + linkDefault: { + fontSize: 16, + color: theme.COLORS.PRIMARY + } }) - - - export default withGalio(Link, styles); - \ No newline at end of file +export default withGalio(Link, styles); \ No newline at end of file From 62b17af280f34905a8e8ef1aba691519f7347e04 Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Wed, 15 Jan 2020 16:35:16 +0200 Subject: [PATCH 10/33] error and helper styles --- src/Input.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Input.js b/src/Input.js index 915d6a0..d39094f 100644 --- a/src/Input.js +++ b/src/Input.js @@ -28,6 +28,7 @@ function Input({ iconContent, password, onRef, + error, ...rest }) { const [isPassword, setIsPassword] = React.useState(false); @@ -41,6 +42,7 @@ function Input({ bgColor && { backgroundColor: bgColor }, rounded && styles.rounded, borderless && styles.borderless, + error && { borderColor: theme.COLORS.DANGER}, style, ]; @@ -58,7 +60,7 @@ function Input({ family={family} size={iconSize || theme.SIZES.BASE * 1.0625} style={{ marginRight: left && !right ? theme.SIZES.BASE * 0.2 : 0 }} - color={iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER} + color={(error && theme.COLORS.DANGER) || iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER} /> ) : ( iconContent @@ -190,8 +192,11 @@ const styles = theme => marginBottom: theme.SIZES.INPUT_LABEL_BOTTOM, }, helpText: { + color: theme.COLORS.SECONDARY, fontSize: theme.SIZES.INPUT_HELP_TEXT, - fontStyle: 'italic', + marginVertical: 8, + paddingHorizontal: 16, + fontSize: 14 }, rounded: { borderRadius: theme.SIZES.INPUT_ROUNDED, From 7b32d6669e08243604622ed0adb0f8e2106ab6b2 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Wed, 15 Jan 2020 18:36:32 +0200 Subject: [PATCH 11/33] Refactor: button component --- src/Button.js | 107 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 101 insertions(+), 6 deletions(-) diff --git a/src/Button.js b/src/Button.js index 7338431..34e6e42 100644 --- a/src/Button.js +++ b/src/Button.js @@ -124,7 +124,18 @@ Button.defaultProps = { Button.propTypes = { ...TouchableOpacity.propTypes, color: PropTypes.oneOfType([ - PropTypes.oneOf(['primary', 'theme', 'error', 'warning', 'success', 'transparent', 'info']), + PropTypes.oneOf([ + 'theme', + 'primary', 'dark_primary', 'light_primary', 'bright_primary', + 'info', 'dark_info', 'light_info', 'bright_info', + 'danger', 'dark_danger', 'light_danger', 'bright_danger', + 'warning', 'dark_warning', 'light_warning', 'bright_warning', + 'success', 'dark_success', 'light_success', 'bright_success', + 'black', 'dark_black', 'light_black', 'bright_black', + 'grey', 'dark_grey', 'light_grey', 'bright_grey', + 'secondary', 'dark_secondary', 'light_secondary', 'bright_secondary', + 'transparent', 'white', + ]), PropTypes.string, ]), size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'small']), PropTypes.number]), @@ -150,7 +161,7 @@ Button.propTypes = { const styles = theme => StyleSheet.create({ defaultButton: { - borderRadius: 3, + borderRadius: 4, width: theme.SIZES.BUTTON_WIDTH, height: theme.SIZES.BUTTON_HEIGHT, alignItems: 'center', @@ -166,24 +177,108 @@ const styles = theme => fontSize: theme.SIZES.FONT, color: theme.COLORS.WHITE, }, + theme: { + backgroundColor: theme.COLORS.THEME, + }, primary: { backgroundColor: theme.COLORS.PRIMARY, }, - theme: { - backgroundColor: theme.COLORS.THEME, + dark_primary: { + backgroundColor: theme.COLORS.DARK_PRIMARY, + }, + light_primary: { + backgroundColor: theme.COLORS.LIGHT_PRIMARY, + }, + bright_primary: { + backgroundColor: theme.COLORS.BRIGHT_PRIMARY, }, info: { backgroundColor: theme.COLORS.INFO, }, - error: { - backgroundColor: theme.COLORS.ERROR, + dark_info: { + backgroundColor: theme.COLORS.DARK_INFO, + }, + light_info: { + backgroundColor: theme.COLORS.LIGHT_INFO, + }, + bright_info: { + backgroundColor: theme.COLORS.BRIGHT_INFO, + }, + danger: { + backgroundColor: theme.COLORS.DANGER, + }, + dark_danger: { + backgroundColor: theme.COLORS.DARK_DANGER, + }, + light_danger: { + backgroundColor: theme.COLORS.LIGHT_DANGER, + }, + bright_danger: { + backgroundColor: theme.COLORS.BRIGHT_DANGER, }, warning: { backgroundColor: theme.COLORS.WARNING, }, + dark_warning: { + backgroundColor: theme.COLORS.DARK_WARNING, + }, + light_warning: { + backgroundColor: theme.COLORS.LIGHT_WARNING, + }, + bright_warning: { + backgroundColor: theme.COLORS.BRIGHT_WARNING, + }, success: { backgroundColor: theme.COLORS.SUCCESS, }, + dark_success: { + backgroundColor: theme.COLORS.DARK_SUCCESS, + }, + light_success: { + backgroundColor: theme.COLORS.LIGHT_SUCCESS, + }, + bright_success: { + backgroundColor: theme.COLORS.BRIGHT_SUCCESS, + }, + white: { + backgroundColor: theme.COLORS.WHITE, + }, + black: { + backgroundColor: theme.COLORS.BLACK, + }, + dark_black: { + backgroundColor: theme.COLORS.DARK_BLACK, + }, + light_black: { + backgroundColor: theme.COLORS.LIGHT_BLACK, + }, + bright_black: { + backgroundColor: theme.COLORS.BRIGHT_BLACK, + }, + secondary: { + backgroundColor: theme.COLORS.SECONDARY, + }, + dark_secondary: { + backgroundColor: theme.COLORS.DARK_SECONDARY, + }, + light_secondary: { + backgroundColor: theme.COLORS.LIGHT_SECONDARY, + }, + bright_secondary: { + backgroundColor: theme.COLORS.BRIGHT_SECONDARY, + }, + grey: { + backgroundColor: theme.COLORS.GREY, + }, + dark_grey: { + backgroundColor: theme.COLORS.DARK_GREY, + }, + light_grey: { + backgroundColor: theme.COLORS.LIGHT_GREY, + }, + bright_grey: { + backgroundColor: theme.COLORS.BRIGHT_GREY, + }, transparent: { backgroundColor: theme.COLORS.TRANSPARENT, }, From d355b5263466711183a1abce203e1db748c7bc7a Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Thu, 16 Jan 2020 11:10:56 +0200 Subject: [PATCH 12/33] Refactor: erased some variables --- src/Button.js | 72 --------------------------------------------------- 1 file changed, 72 deletions(-) diff --git a/src/Button.js b/src/Button.js index 34e6e42..610c748 100644 --- a/src/Button.js +++ b/src/Button.js @@ -183,102 +183,30 @@ const styles = theme => primary: { backgroundColor: theme.COLORS.PRIMARY, }, - dark_primary: { - backgroundColor: theme.COLORS.DARK_PRIMARY, - }, - light_primary: { - backgroundColor: theme.COLORS.LIGHT_PRIMARY, - }, - bright_primary: { - backgroundColor: theme.COLORS.BRIGHT_PRIMARY, - }, info: { backgroundColor: theme.COLORS.INFO, }, - dark_info: { - backgroundColor: theme.COLORS.DARK_INFO, - }, - light_info: { - backgroundColor: theme.COLORS.LIGHT_INFO, - }, - bright_info: { - backgroundColor: theme.COLORS.BRIGHT_INFO, - }, danger: { backgroundColor: theme.COLORS.DANGER, }, - dark_danger: { - backgroundColor: theme.COLORS.DARK_DANGER, - }, - light_danger: { - backgroundColor: theme.COLORS.LIGHT_DANGER, - }, - bright_danger: { - backgroundColor: theme.COLORS.BRIGHT_DANGER, - }, warning: { backgroundColor: theme.COLORS.WARNING, }, - dark_warning: { - backgroundColor: theme.COLORS.DARK_WARNING, - }, - light_warning: { - backgroundColor: theme.COLORS.LIGHT_WARNING, - }, - bright_warning: { - backgroundColor: theme.COLORS.BRIGHT_WARNING, - }, success: { backgroundColor: theme.COLORS.SUCCESS, }, - dark_success: { - backgroundColor: theme.COLORS.DARK_SUCCESS, - }, - light_success: { - backgroundColor: theme.COLORS.LIGHT_SUCCESS, - }, - bright_success: { - backgroundColor: theme.COLORS.BRIGHT_SUCCESS, - }, white: { backgroundColor: theme.COLORS.WHITE, }, black: { backgroundColor: theme.COLORS.BLACK, }, - dark_black: { - backgroundColor: theme.COLORS.DARK_BLACK, - }, - light_black: { - backgroundColor: theme.COLORS.LIGHT_BLACK, - }, - bright_black: { - backgroundColor: theme.COLORS.BRIGHT_BLACK, - }, secondary: { backgroundColor: theme.COLORS.SECONDARY, }, - dark_secondary: { - backgroundColor: theme.COLORS.DARK_SECONDARY, - }, - light_secondary: { - backgroundColor: theme.COLORS.LIGHT_SECONDARY, - }, - bright_secondary: { - backgroundColor: theme.COLORS.BRIGHT_SECONDARY, - }, grey: { backgroundColor: theme.COLORS.GREY, }, - dark_grey: { - backgroundColor: theme.COLORS.DARK_GREY, - }, - light_grey: { - backgroundColor: theme.COLORS.LIGHT_GREY, - }, - bright_grey: { - backgroundColor: theme.COLORS.BRIGHT_GREY, - }, transparent: { backgroundColor: theme.COLORS.TRANSPARENT, }, From 31ff5b7ccd4eb4da6850ddf7db89cc0f5fed2ac5 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Thu, 16 Jan 2020 11:36:19 +0200 Subject: [PATCH 13/33] Refactor: last edit on Link component --- src/Link.js | 18 ++---------------- src/index.js | 3 +++ 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/Link.js b/src/Link.js index 13ffa24..66a51b5 100644 --- a/src/Link.js +++ b/src/Link.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet } from 'react-native'; import { Text } from './'; import GalioTheme, { withGalio } from './theme'; @@ -8,8 +7,6 @@ function Link({ children, onPress, theme, - style, - styles, ...rest }) { return ( @@ -24,24 +21,13 @@ function Link({ Link.defaultProps = { children: null, - style: true, - styles: {}, theme: GalioTheme, }; Link.propTypes = { children: PropTypes.any, - style: PropTypes.any, - size: PropTypes.number, - color: PropTypes.string, - styles: PropTypes.any, theme: PropTypes.any, + onPress: PropTypes.func.isRequired, }; - const styles = theme => StyleSheet.create({ - linkDefault: { - fontSize: 16, - color: theme.COLORS.PRIMARY - } -}) -export default withGalio(Link, styles); \ No newline at end of file +export default withGalio(Link); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0a6004b..08157bd 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,8 @@ import Slider from './Slider'; import Switch from './Switch'; import Text from './Text'; import Toast from './Toast'; +import Link from './Link'; + import theme, { withGalio, GalioProvider } from './theme'; @@ -35,6 +37,7 @@ export { Radio, Slider, Text, + Link, Toast, Switch, theme, From 624a834b82101441dc6a3d6b1616f405f9d3f04f Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Thu, 16 Jan 2020 17:13:21 +0200 Subject: [PATCH 14/33] almost there --- src/Input.js | 5 +++-- src/theme/sizes.js | 6 ++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/Input.js b/src/Input.js index d39094f..9dfb595 100644 --- a/src/Input.js +++ b/src/Input.js @@ -59,7 +59,7 @@ function Input({ name={icon} family={family} size={iconSize || theme.SIZES.BASE * 1.0625} - style={{ marginRight: left && !right ? theme.SIZES.BASE * 0.2 : 0 }} + style={{ marginRight: left && !right ? 4 : 0 }} color={(error && theme.COLORS.DANGER) || iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER} /> ) : ( @@ -189,7 +189,8 @@ const styles = theme => label: { fontWeight: '500', fontSize: theme.SIZES.INPUT_LABEL_TEXT, - marginBottom: theme.SIZES.INPUT_LABEL_BOTTOM, + marginVertical: theme.SIZES.INPUT_VERTICAL_LABEL, + paddingHorizontal: theme.SIZES.INPUT_HORIZONTAL }, helpText: { color: theme.COLORS.SECONDARY, diff --git a/src/theme/sizes.js b/src/theme/sizes.js index 2b258d3..d1738ca 100644 --- a/src/theme/sizes.js +++ b/src/theme/sizes.js @@ -55,11 +55,9 @@ const SIZES = { INPUT_BORDER_WIDTH: BASE * 0.05, INPUT_HEIGHT: BASE * 2.75, INPUT_HORIZONTAL: BASE, + INPUT_VERTICAL_TEXT: 14, + INPUT_VERTICAL_LABEL: BASE / 2, INPUT_TEXT: BASE * 0.875, - INPUT_LABEL_TEXT: BASE * 0.9, - INPUT_LABEL_BOTTOM: BASE / 4, - INPUT_HELP_TEXT: BASE * 0.8, - INPUT_ROUNDED: BASE * 1.7, // NavBar styles NAVBAR_HEIGHT: BASE * 4.125, From f7a85f264902d57a47e7b31abe32fd70ba9c97e3 Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Thu, 16 Jan 2020 18:04:26 +0200 Subject: [PATCH 15/33] Refactor: colors, size, and icons --- src/Button.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/Button.js b/src/Button.js index 610c748..55c4e16 100644 --- a/src/Button.js +++ b/src/Button.js @@ -22,7 +22,6 @@ function Button({ onlyIcon, opacity, round, - radius, style, size, shadowless, @@ -49,13 +48,28 @@ function Button({ content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`; } + if (icon && !onlyIcon) { + content = ( + <> + + {content} + + ); + } + if (onlyIcon) { content = ( ); } else if (isString) { @@ -77,15 +91,14 @@ function Button({ color && !colorStyle && { backgroundColor: color }, // color set & no styles for that color color === 'transparent' || styles.androidShadow, color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE }, - size === 'large' ? { width: width * 0.9 } : { width: width * 0.5 }, + size === 'large' ? { width: width * 0.9 } : ( size === "small" ? { width: width * 0.3 } : { width: width * 0.42 }), round && { borderRadius: theme.SIZES.BASE * 2 }, onlyIcon && { - width: iconSize * 1.25, + width: iconSize * 2, height: iconSize * 2, borderWidth: 0, borderRadius: iconSize, }, - radius && { borderRadius: radius }, !shadowless && styles.shadow, { shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] }, { zIndex: 2 }, @@ -101,9 +114,8 @@ function Button({ Button.defaultProps = { color: 'primary', - size: 'large', + size: 'default', disabled: false, - radius: 0, uppercase: false, lowercase: false, capitalize: false, @@ -115,7 +127,7 @@ Button.defaultProps = { opacity: 0.8, icon: false, iconFamily: false, - iconSize: 14, + iconSize: 16, iconColor: null, styles: {}, theme: GalioTheme, @@ -125,28 +137,18 @@ Button.propTypes = { ...TouchableOpacity.propTypes, color: PropTypes.oneOfType([ PropTypes.oneOf([ - 'theme', - 'primary', 'dark_primary', 'light_primary', 'bright_primary', - 'info', 'dark_info', 'light_info', 'bright_info', - 'danger', 'dark_danger', 'light_danger', 'bright_danger', - 'warning', 'dark_warning', 'light_warning', 'bright_warning', - 'success', 'dark_success', 'light_success', 'bright_success', - 'black', 'dark_black', 'light_black', 'bright_black', - 'grey', 'dark_grey', 'light_grey', 'bright_grey', - 'secondary', 'dark_secondary', 'light_secondary', 'bright_secondary', - 'transparent', 'white', + 'theme', 'primary', 'info', 'danger', 'warning', 'success', 'black', 'grey', 'secondary', 'transparent', 'white', ]), PropTypes.string, ]), - size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'small']), PropTypes.number]), + size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'default', 'small']), PropTypes.number]), iconColor: PropTypes.string, disabled: PropTypes.bool, - radius: PropTypes.number, uppercase: PropTypes.bool, lowercase: PropTypes.bool, capitalize: PropTypes.bool, loading: PropTypes.bool, - loadingSize: PropTypes.oneOf(['small', 'large']), + loadingSize: PropTypes.oneOf(['small', 'default', 'large']), opacity: PropTypes.number, shadowless: PropTypes.bool, shadowColor: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), @@ -169,7 +171,7 @@ const styles = theme => }, shadow: { shadowColor: theme.COLORS.BLOCK, - shadowOffset: { width: 0, height: 4 }, + shadowOffset: { width: 0, height: 2 }, shadowOpacity: theme.SIZES.OPACITY, shadowRadius: theme.SIZES.BUTTON_SHADOW_RADIUS, }, From 115ba553578e43d605952d46b73a2320a2adcc5f Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Fri, 17 Jan 2020 15:04:15 +0200 Subject: [PATCH 16/33] Refactor: Button component --- src/Button.js | 44 ++++++++++++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/src/Button.js b/src/Button.js index 55c4e16..62766e1 100644 --- a/src/Button.js +++ b/src/Button.js @@ -14,6 +14,7 @@ function Button({ disabled, iconSize, icon, + iconRight, iconFamily, iconColor, loading, @@ -48,20 +49,32 @@ function Button({ content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`; } - if (icon && !onlyIcon) { + if (icon && !onlyIcon && !iconRight) { content = ( <> - - {content} + {' '} + {content} ); - } + } ; + if (iconRight && !onlyIcon) { + content = ( + <> + {content}{' '} + + + ); + }; if (onlyIcon) { content = ( @@ -93,11 +106,12 @@ function Button({ color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE }, size === 'large' ? { width: width * 0.9 } : ( size === "small" ? { width: width * 0.3 } : { width: width * 0.42 }), round && { borderRadius: theme.SIZES.BASE * 2 }, + onlyIcon && { - width: iconSize * 2, - height: iconSize * 2, + width: iconSize * 2.75, + height: iconSize * 2.75, borderWidth: 0, - borderRadius: iconSize, + borderRadius: iconSize * 2, }, !shadowless && styles.shadow, { shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] }, @@ -124,8 +138,9 @@ Button.defaultProps = { onlyIcon: false, loading: false, loadingSize: 'small', - opacity: 0.8, + opacity: 1, icon: false, + iconRight: false, iconFamily: false, iconSize: 16, iconColor: null, @@ -154,6 +169,7 @@ Button.propTypes = { shadowColor: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), onlyIcon: PropTypes.bool, icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + iconRight: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), iconFamily: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), iconSize: PropTypes.number, styles: PropTypes.any, From 61026abae2f85028eaadc6165ae351d66ed698cc Mon Sep 17 00:00:00 2001 From: Stefan Moldovan Date: Fri, 17 Jan 2020 15:59:58 +0200 Subject: [PATCH 17/33] Refactor: changed the shadow for the buttons --- src/Button.js | 3 ++- src/theme/sizes.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Button.js b/src/Button.js index 62766e1..940b1a3 100644 --- a/src/Button.js +++ b/src/Button.js @@ -138,7 +138,7 @@ Button.defaultProps = { onlyIcon: false, loading: false, loadingSize: 'small', - opacity: 1, + opacity: .8, icon: false, iconRight: false, iconFamily: false, @@ -184,6 +184,7 @@ const styles = theme => height: theme.SIZES.BUTTON_HEIGHT, alignItems: 'center', justifyContent: 'center', + margin: 8 }, shadow: { shadowColor: theme.COLORS.BLOCK, diff --git a/src/theme/sizes.js b/src/theme/sizes.js index 2b258d3..d8f4f66 100644 --- a/src/theme/sizes.js +++ b/src/theme/sizes.js @@ -7,8 +7,8 @@ export const BASE = 16; const SIZES = { BASE: BASE, FONT: BASE, - OPACITY: 0.8, - BORDER_RADIUS: 6, + OPACITY: 0.6, + BORDER_RADIUS: 4, BORDER_WIDTH: 0.8, // Typography @@ -29,7 +29,7 @@ const SIZES = { // Button styles BUTTON_WIDTH: BASE * 9, BUTTON_HEIGHT: BASE * 2.75, - BUTTON_SHADOW_RADIUS: 10, + BUTTON_SHADOW_RADIUS: 3, // Block styles BLOCK_SHADOW_OPACITY: 0.15, From a596dddec8d1e3aa330842fda8908ea3f45a4da4 Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Mon, 20 Jan 2020 14:50:15 +0200 Subject: [PATCH 18/33] file restructure --- src/{ => atomic/atoms}/Button.js | 0 src/{ => atomic/atoms}/Input.js | 0 src/{ => atomic/atoms}/Link.js | 0 src/{ => atomic/ions}/Icon.js | 0 src/{ => atomic/ions}/Text.js | 0 src/index.js | 10 +++++----- src/theme/sizes.js | 1 + 7 files changed, 6 insertions(+), 5 deletions(-) rename src/{ => atomic/atoms}/Button.js (100%) rename src/{ => atomic/atoms}/Input.js (100%) rename src/{ => atomic/atoms}/Link.js (100%) rename src/{ => atomic/ions}/Icon.js (100%) rename src/{ => atomic/ions}/Text.js (100%) diff --git a/src/Button.js b/src/atomic/atoms/Button.js similarity index 100% rename from src/Button.js rename to src/atomic/atoms/Button.js diff --git a/src/Input.js b/src/atomic/atoms/Input.js similarity index 100% rename from src/Input.js rename to src/atomic/atoms/Input.js diff --git a/src/Link.js b/src/atomic/atoms/Link.js similarity index 100% rename from src/Link.js rename to src/atomic/atoms/Link.js diff --git a/src/Icon.js b/src/atomic/ions/Icon.js similarity index 100% rename from src/Icon.js rename to src/atomic/ions/Icon.js diff --git a/src/Text.js b/src/atomic/ions/Text.js similarity index 100% rename from src/Text.js rename to src/atomic/ions/Text.js diff --git a/src/index.js b/src/index.js index 08157bd..aae2702 100644 --- a/src/index.js +++ b/src/index.js @@ -3,19 +3,19 @@ import Accordion from './Accordion'; import Block from './Block'; -import Button from './Button'; +import Button from './atomic/atoms/Button'; import Card from './Card'; import Checkbox from './Checkbox'; import DeckSwiper from './DeckSwiper'; -import Icon from './Icon'; -import Input from './Input'; +import Icon from './atomic/ions/Icon'; +import Input from './atomic/atoms/Input'; import NavBar from './NavBar'; import Radio from './Radio'; import Slider from './Slider'; import Switch from './Switch'; -import Text from './Text'; +import Text from './atomic/ions/Text'; import Toast from './Toast'; -import Link from './Link'; +import Link from './atomic/atoms/Link'; import theme, { withGalio, GalioProvider } from './theme'; diff --git a/src/theme/sizes.js b/src/theme/sizes.js index d1f8823..5176eb1 100644 --- a/src/theme/sizes.js +++ b/src/theme/sizes.js @@ -58,6 +58,7 @@ const SIZES = { INPUT_VERTICAL_TEXT: 14, INPUT_VERTICAL_LABEL: BASE / 2, INPUT_TEXT: BASE * 0.875, + INPUT_ROUNDED: BASE * 1.5, // NavBar styles NAVBAR_HEIGHT: BASE * 4.125, From cb87b4e5eb1179503982b6868700289ce12e5ec6 Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Mon, 20 Jan 2020 14:54:09 +0200 Subject: [PATCH 19/33] rewritten paths --- src/atomic/atoms/Button.js | 4 ++-- src/atomic/atoms/Input.js | 4 ++-- src/atomic/atoms/Link.js | 4 ++-- src/atomic/ions/Icon.js | 6 +++--- src/atomic/ions/Text.js | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/atomic/atoms/Button.js b/src/atomic/atoms/Button.js index 940b1a3..4121ff0 100644 --- a/src/atomic/atoms/Button.js +++ b/src/atomic/atoms/Button.js @@ -2,8 +2,8 @@ import React from 'react'; import { ActivityIndicator, Dimensions, StyleSheet, TouchableOpacity, Text } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Icon } from './'; -import GalioTheme, { withGalio } from './theme'; +import Icon from '../ions/Icon'; +import GalioTheme, { withGalio } from '../../theme'; const { width } = Dimensions.get('window'); diff --git a/src/atomic/atoms/Input.js b/src/atomic/atoms/Input.js index 9dfb595..02cdfeb 100644 --- a/src/atomic/atoms/Input.js +++ b/src/atomic/atoms/Input.js @@ -1,8 +1,8 @@ import React from 'react'; import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native'; import PropTypes from 'prop-types'; -import Icon from './Icon'; -import GalioTheme, { withGalio } from './theme'; +import Icon from '../ions/Icon'; +import GalioTheme, { withGalio } from '../../theme'; function Input({ style, diff --git a/src/atomic/atoms/Link.js b/src/atomic/atoms/Link.js index 66a51b5..6102c19 100644 --- a/src/atomic/atoms/Link.js +++ b/src/atomic/atoms/Link.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text } from './'; -import GalioTheme, { withGalio } from './theme'; +import Text from '../ions/Icon'; +import GalioTheme, { withGalio } from '../../theme'; function Link({ children, diff --git a/src/atomic/ions/Icon.js b/src/atomic/ions/Icon.js index f6fddf3..61058b1 100644 --- a/src/atomic/ions/Icon.js +++ b/src/atomic/ions/Icon.js @@ -2,9 +2,9 @@ import React from 'react'; import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; import PropTypes from 'prop-types'; -import GalioTheme, { withGalio } from './theme'; -import getIconType from './helpers/getIconType'; -import galioConfig from './config/galio.json'; +import GalioTheme, { withGalio } from '../../theme'; +import getIconType from '../../helpers/getIconType'; +import galioConfig from '../../config/galio.json'; const Galio = createIconSetFromIcoMoon(galioConfig, 'Galio', './fonts/galio.ttf'); diff --git a/src/atomic/ions/Text.js b/src/atomic/ions/Text.js index 9b5825c..1dff5e4 100644 --- a/src/atomic/ions/Text.js +++ b/src/atomic/ions/Text.js @@ -2,8 +2,8 @@ import React from 'react'; import { Text } from 'react-native'; import PropTypes from 'prop-types'; -import normalize from './helpers/normalize'; -import GalioTheme, { withGalio } from './theme'; +import normalize from '../../helpers/normalize'; +import GalioTheme, { withGalio } from '../../theme'; function Typography({ style, From 1953845b813942408424fe30feca5129c5eac9a2 Mon Sep 17 00:00:00 2001 From: palingheorghe Date: Tue, 21 Jan 2020 11:31:09 +0200 Subject: [PATCH 20/33] path fixed --- src/Accordion.js | 4 ++-- src/atomic/atoms/Link.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Accordion.js b/src/Accordion.js index c496abd..bef1f20 100644 --- a/src/Accordion.js +++ b/src/Accordion.js @@ -9,8 +9,8 @@ import { import PropTypes from "prop-types"; import Block from "./Block"; -import Icon from "./Icon"; -import Text from "./Text"; +import Icon from "./atomic/ions/Icon"; +import Text from "./atomic/ions/Text"; import GalioTheme from "./theme"; const { width } = Dimensions.get("screen"); diff --git a/src/atomic/atoms/Link.js b/src/atomic/atoms/Link.js index 6102c19..bf85d3d 100644 --- a/src/atomic/atoms/Link.js +++ b/src/atomic/atoms/Link.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Text from '../ions/Icon'; +import Text from '../ions/Text'; import GalioTheme, { withGalio } from '../../theme'; function Link({ From bb4af526677a9ff3b00b83fca0f2527d75448337 Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sat, 7 Mar 2020 12:14:51 +0000 Subject: [PATCH 21/33] forward ref to wrapped component in withGalio HOC --- src/theme/index.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/theme/index.js b/src/theme/index.js index 4d5147c..3f94ee8 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -17,21 +17,22 @@ export default GalioTheme; const GalioContext = React.createContext(); /* -* withGalio -* args: Component - React Component, styles to be added to Component -* theme: if no styles or theme add default theme={ SIZES, COLORS } -*/ + * withGalio + * args: Component - React Component, styles to be added to Component + * theme: if no styles or theme add default theme={ SIZES, COLORS } + */ export function withGalio(Component, styles) { // eslint-disable-next-line react/no-multi-comp - return class extends React.Component { + class EnhancedComponent extends React.Component { render() { - const { props } = this; + const { forwardedRef, ...rest } = this.props; return ( {theme => ( @@ -39,20 +40,24 @@ export function withGalio(Component, styles) { ); } - }; + } + + return React.forwardRef((props, ref) => { + return ; + }); } /* -* GalioProvider using React.Component -* GalioContext.Provider value has the default value from { COLORS, SIZES } -*/ + * GalioProvider using React.Component + * GalioContext.Provider value has the default value from { COLORS, SIZES } + */ // eslint-disable-next-line react/no-multi-comp export class GalioProvider extends React.Component { static defaultProps = { children: null, theme: {}, - } + }; render() { const { theme, children } = this.props; @@ -61,14 +66,10 @@ export class GalioProvider extends React.Component { const providerTheme = { COLORS: { ...GalioTheme.COLORS, ...CUSTOM_COLORS }, SIZES: { ...GalioTheme.SIZES, ...CUSTOM_SIZES }, - ...customTheme + ...customTheme, }; - return ( - - {children} - - ); + return {children}; } } From 9bf54cae42b0024380944db65cc3bb2c70938b84 Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sat, 7 Mar 2020 14:03:41 +0000 Subject: [PATCH 22/33] fix onchange call during initial render --- src/Checkbox.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Checkbox.js b/src/Checkbox.js index c1793af..f00ccd2 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -26,9 +26,7 @@ function Checkbox({ theme, }) { const [checked, setChecked] = React.useState(initialValue); - React.useEffect(() => { - onChange(checked); - }, [checked]); + // adding the necessary margins depending on the flexDirection function spaceAround(direction) { switch (direction) { @@ -73,8 +71,9 @@ function Checkbox({ // onPress function that changes the component's state and callbacks the onChange prop function _onPress() { - setChecked(!checked); - return null; + const current = !checked; + onChange(current); + setChecked(current); } const colorStyle = theme.COLORS[color.toUpperCase()]; // this sets the correct color for the theme file From 0080081cff51f146aa8c6f9af4600003c5c8f396 Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sun, 8 Mar 2020 00:44:59 +0000 Subject: [PATCH 23/33] textInputStyle prop added to input component --- src/atomic/atoms/Input.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/atomic/atoms/Input.js b/src/atomic/atoms/Input.js index 02cdfeb..9662711 100644 --- a/src/atomic/atoms/Input.js +++ b/src/atomic/atoms/Input.js @@ -6,6 +6,7 @@ import GalioTheme, { withGalio } from '../../theme'; function Input({ style, + textInputStyle, type, placeholderTextColor, label, @@ -52,6 +53,7 @@ function Input({ borderless && icon && styles.inputIcon, styles.inputText, color && { color }, + textInputStyle || {} ]; const iconInstance = icon ? ( @@ -119,6 +121,7 @@ Input.defaultProps = { topHelp: true, bottomHelp: false, style: null, + textInputStyle: null, borderless: false, bgColor: null, iconColor: null, @@ -134,6 +137,7 @@ Input.defaultProps = { Input.propTypes = { style: PropTypes.any, + textInputStyle: PropTypes.any, type: PropTypes.string, password: PropTypes.bool, placeholderTextColor: PropTypes.string, From 03e98bec98674d458cb96d8ed9b98715b1e3e7b4 Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sun, 8 Mar 2020 14:16:43 +0000 Subject: [PATCH 24/33] Compoent/Avatar --- src/Avatar.js | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 src/Avatar.js diff --git a/src/Avatar.js b/src/Avatar.js new file mode 100644 index 0000000..d331fbd --- /dev/null +++ b/src/Avatar.js @@ -0,0 +1,109 @@ +import React from 'react'; +import { View, Text, StyleSheet, Image, ViewPropTypes } from 'react-native'; +import PropTypes from 'prop-types'; +import { withGalio } from 'theme'; + +const Avatar = ({ + source, + size, + label, + labelColor, + backgroundColor, + labelStyle, + imageProps, + imageStyle, + containerStyle, + styles, + theme, +}) => { + const getContainerStyle = () => { + return { + width: size, + height: size, + alignItems: 'center', + justifyContent: 'center', + borderRadius: size / 2, + }; + }; + + const getLabelContainerStyle = () => { + return { + ...StyleSheet.absoluteFillObject, + alignItems: 'center', + justifyContent: 'center', + borderRadius: size / 2, + }; + }; + + const renderImage = () => { + if (source) { + return ( + + ); + } + return null; + }; + + const labelContainerStyle = [ + getLabelContainerStyle(), + source && styles.labelContainerWithInset, + { backgroundColor: backgroundColor || theme.COLORS.MUTED }, + ]; + + const labelTextStyle = [ + { fontSize: size * 0.32 }, + styles.labelText, + labelColor && { color: labelColor }, + labelStyle || {}, + ]; + + return ( + + + {label && ( + + {label} + + )} + + {renderImage()} + + ); +}; + +Avatar.defaultProps = { + size: 50, +}; + +Avatar.propTypes = { + label: PropTypes.string, + labelColor: PropTypes.string, + size: PropTypes.number, + source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), + backgroundColor: PropTypes.string, + imageProps: PropTypes.object, + imageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.number]), + containerStyle: ViewPropTypes.style, + styles: PropTypes.any, + theme: PropTypes.any, +}; + +const styles = theme => + StyleSheet.create({ + labelContainerWithInset: { + top: 1, + right: 1, + bottom: 1, + left: 1, + }, + labelText: { + color: theme.COLORS.BLACK, + backgroundColor: 'transparent', + }, + }); + +export default withGalio(Avatar, styles); From 795822c24fb9229e7ffecb0908ecb8c022c9327d Mon Sep 17 00:00:00 2001 From: Qin Zhengquan Date: Mon, 9 Mar 2020 17:29:36 +0800 Subject: [PATCH 25/33] feat: include custom label and custom help styles --- src/Input.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/Input.js b/src/Input.js index eba00ae..893a885 100644 --- a/src/Input.js +++ b/src/Input.js @@ -9,8 +9,10 @@ function Input({ type, placeholderTextColor, label, + labelStyles, color, help, + helpStyles, bgColor, borderless, viewPass, @@ -43,7 +45,6 @@ function Input({ style, ]; - const inputStyles = [ styles.inputView, borderless && icon && styles.inputIcon, @@ -60,8 +61,8 @@ function Input({ color={iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER} /> ) : ( - iconContent - ); + iconContent + ); const viewPassElement = password && viewPass && ( setIsPassword(!isPassword)}> @@ -73,8 +74,8 @@ function Input({ /> ); - const lebelContent = label && {label}; - const helpContent = help && {help}; + const labelContent = label && {label}; + const helpContent = help && {help}; return ( - {lebelContent} + {labelContent} {topHelp && !bottomHelp && helpContent} {left && !right && iconInstance} From 334457c9c67056eee53daf8c8a935a26d8064699 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Fri, 29 May 2020 20:57:22 -0400 Subject: [PATCH 26/33] fix wip navbar back prop --- src/NavBar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/NavBar.js b/src/NavBar.js index 4b411f4..07c47f2 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -47,6 +47,7 @@ function NavBar({ if (leftIconName || back) { return ( + {/* have to check how back and leftIcon interfere, also the onLeftPress function */} onLeftPress && onLeftPress()} hitSlop={leftHitSlop}> Date: Fri, 5 Jun 2020 22:01:52 -0400 Subject: [PATCH 27/33] leftIconSize prop added and back fixed --- src/NavBar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/NavBar.js b/src/NavBar.js index 07c47f2..02e562b 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -16,6 +16,7 @@ function NavBar({ leftStyle, leftIconColor, leftHitSlop, + leftIconSize, leftIconName, leftIconFamily, onLeftPress, @@ -44,15 +45,14 @@ function NavBar({ function renderLeft() { if (!hideLeft) { - if (leftIconName || back) { + if (leftIconName || back && !left) { return ( - {/* have to check how back and leftIcon interfere, also the onLeftPress function */} onLeftPress && onLeftPress()} hitSlop={leftHitSlop}> From 2906f221b5efb27e4f72f3dd442f382c362e01a1 Mon Sep 17 00:00:00 2001 From: Petru Alin Gheorghe Date: Fri, 5 Jun 2020 22:24:24 -0400 Subject: [PATCH 28/33] 0.6.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b33593a..cc593e5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "galio-framework", "main": "src/index.js", - "version": "0.6.3", + "version": "0.6.4", "files": [ "src/" ], From e43b6ee8b26f5337353f2c5f67745ca91c36507d Mon Sep 17 00:00:00 2001 From: Danstan Date: Sun, 14 Jun 2020 00:07:06 +0300 Subject: [PATCH 29/33] Fix: Require cycle: on Components <-> Index File --- src/Button.js | 2 +- src/Card.js | 6 ++++-- src/Checkbox.js | 3 ++- src/NavBar.js | 4 +++- src/Radio.js | 2 +- src/Toast.js | 2 +- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/Button.js b/src/Button.js index 7338431..4b93909 100644 --- a/src/Button.js +++ b/src/Button.js @@ -2,7 +2,7 @@ import React from 'react'; import { ActivityIndicator, Dimensions, StyleSheet, TouchableOpacity, Text } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Icon } from './'; +import Icon from './Icon'; import GalioTheme, { withGalio } from './theme'; const { width } = Dimensions.get('window'); diff --git a/src/Card.js b/src/Card.js index 6e0ecee..21ea20e 100644 --- a/src/Card.js +++ b/src/Card.js @@ -2,8 +2,10 @@ import React from 'react'; import { Image, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; - -import { Block, Icon, Text } from './'; +// galio components +import Block from './Block'; +import Text from './Text'; +import Icon from './Icon'; import GalioTheme, { withGalio } from './theme'; function Card({ diff --git a/src/Checkbox.js b/src/Checkbox.js index c1793af..2ba5bd0 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -3,7 +3,8 @@ import React from 'react'; import { View, TouchableOpacity, StyleSheet, Image } from 'react-native'; import PropTypes from 'prop-types'; // galio dependency -import { Icon, Text } from './'; +import Icon from './Icon'; +import Text from './Text'; import GalioTheme, { withGalio } from './theme'; function Checkbox({ diff --git a/src/NavBar.js b/src/NavBar.js index 4b411f4..1f12f39 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -3,7 +3,9 @@ import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Block, Text, Icon } from './'; +import Block from './Block'; +import Text from './Text'; +import Icon from './Icon'; import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); diff --git a/src/Radio.js b/src/Radio.js index 5b877d9..97e1526 100644 --- a/src/Radio.js +++ b/src/Radio.js @@ -2,7 +2,7 @@ import React from 'react'; import { View, TouchableOpacity, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; // G A L I O - D E P E N D E N C Y -import { Text } from './'; +import Text from './Text'; import GalioTheme, { withGalio } from './theme'; function Radio({ diff --git a/src/Toast.js b/src/Toast.js index 343fb97..9358809 100644 --- a/src/Toast.js +++ b/src/Toast.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Dimensions, StyleSheet, Animated, ViewPropTypes } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Text } from '.'; +import Text from './Text'; import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); From 0ecb201a7f169670caf6828b6670c88084b1f3f8 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Sun, 14 Jun 2020 18:32:56 -0400 Subject: [PATCH 30/33] fix switch trackColor --- src/Switch.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Switch.js b/src/Switch.js index 2a21850..18aa8e6 100644 --- a/src/Switch.js +++ b/src/Switch.js @@ -13,9 +13,6 @@ function Switch({ ...rest }) { const [switchValue, setSwitchValue] = React.useState(initialValue); - React.useEffect(() => { - onChange(switchValue); - }, [switchValue]); function onPressSwitch() { setSwitchValue(!switchValue); return null; @@ -27,11 +24,12 @@ function Switch({ { onPressSwitch(); }} + onChange={() => onChange()} {...rest} /> ); From bf9b3e650491e8a2a9f729bcfdbbb1f43486fedb Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sun, 28 Jun 2020 21:44:35 +0000 Subject: [PATCH 31/33] fix onchange call in radio during initial render --- src/Radio.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Radio.js b/src/Radio.js index 5b877d9..748707a 100644 --- a/src/Radio.js +++ b/src/Radio.js @@ -20,7 +20,7 @@ function Radio({ theme, }) { const [checked, setChecked] = React.useState(initialValue); - React.useEffect(() => onChange(checked), [checked]); + // A D D I N G - R E Q U I R E D - S P A C E (S) - B A S E D - O N - F L E X - D I R E C T I O N function spaceAround(direction) { switch (direction) { @@ -53,7 +53,9 @@ function Radio({ // O N - P R E S S - H A N D L E R function radioPressHandler() { - setChecked(!checked); + const current = !checked; + onChange(current); + setChecked(current); } From 091299161efebae79c27b64d79fc7498a166e726 Mon Sep 17 00:00:00 2001 From: Andy Osei Date: Sun, 28 Jun 2020 22:18:53 +0000 Subject: [PATCH 32/33] add useGalioTheme custom hook --- src/index.js | 3 ++- src/theme/index.js | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index aae2702..f98b1da 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ import Toast from './Toast'; import Link from './atomic/atoms/Link'; -import theme, { withGalio, GalioProvider } from './theme'; +import theme, { withGalio, GalioProvider, useGalioTheme } from './theme'; import galioConfig from './config/galio.json'; @@ -43,6 +43,7 @@ export { theme, withGalio, GalioProvider, + useGalioTheme, galioConfig, GalioFont, }; diff --git a/src/theme/index.js b/src/theme/index.js index 4d5147c..517ee70 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -16,6 +16,23 @@ export default GalioTheme; // creating the GalioTheme context const GalioContext = React.createContext(); +/** + * useGalioTheme + * Galio custom hook which returns the theme object + */ + +export function useGalioTheme() { + const theme = React.useContext(GalioContext); + + if (theme === undefined) { + throw new Error( + 'useGalioTheme must be used within a component wrapped with GalioProvider' + ); + } + + return theme; +} + /* * withGalio * args: Component - React Component, styles to be added to Component From c7fd335e52aa8978e7bf1d867a38e502ddb83704 Mon Sep 17 00:00:00 2001 From: Petru Alin Gheorghe Date: Thu, 2 Jul 2020 14:20:32 -0400 Subject: [PATCH 33/33] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc593e5..ed4a579 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "galio-framework", "main": "src/index.js", - "version": "0.6.4", + "version": "0.7.0", "files": [ "src/" ],