From c6675399bb504f0b444fb265b5b6abf1b1ff8d9a Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:38:30 +0300 Subject: [PATCH 1/7] Update responsiveWidth.ts --- react/hooks/responsiveWidth.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/hooks/responsiveWidth.ts b/react/hooks/responsiveWidth.ts index 3ab1f6c..66d430d 100644 --- a/react/hooks/responsiveWidth.ts +++ b/react/hooks/responsiveWidth.ts @@ -81,6 +81,7 @@ export const useResponsiveWidth = ( const { device } = useDevice() const isPhone = device === 'phone' + const isTablet = device === 'tablet' const { preserveLayoutOnMobile = false, hideEmptyCols = false } = options || {} @@ -102,7 +103,7 @@ export const useResponsiveWidth = ( if (width && typeof width === 'object') { return { element: col, - width: isPhone ? width.mobile || 0 : width.desktop || 0, + width: isPhone ? width.mobile || 0 : isTablet ? width.tablet || 0 : width.desktop || 0, hasDefinedWidth: true, isResponsive: true, } From 0bd8285257310ba600b878c6302a687793a27817 Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:39:41 +0300 Subject: [PATCH 2/7] Update valuesParser.ts --- react/modules/valuesParser.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/react/modules/valuesParser.ts b/react/modules/valuesParser.ts index b4fd13c..e794f6f 100644 --- a/react/modules/valuesParser.ts +++ b/react/modules/valuesParser.ts @@ -5,6 +5,7 @@ type Group = { [key in keyof T]: U } type TachyonsInputGroup = Group interface ResponsiveInput { mobile: T + tablet: T desktop: T } @@ -21,10 +22,11 @@ const isResponsiveInput = (value: any): value is ResponsiveInput => */ export const parseResponsive = (parse: (value: T) => U) => ( value: T | ResponsiveInput -): null | U | { mobile: U; desktop: U } => { +): null | U | { mobile: U; tablet: U; desktop: U } => { if (isResponsiveInput(value)) { return { mobile: parse(value.mobile), + tablet: parse(value.tablet), desktop: parse(value.desktop), } } From 7236dacbf04dae4caee2306f27987becdd1f2351 Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:54:32 +0300 Subject: [PATCH 3/7] Update valuesParser.ts --- react/modules/valuesParser.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/react/modules/valuesParser.ts b/react/modules/valuesParser.ts index e794f6f..6422691 100644 --- a/react/modules/valuesParser.ts +++ b/react/modules/valuesParser.ts @@ -5,6 +5,7 @@ type Group = { [key in keyof T]: U } type TachyonsInputGroup = Group interface ResponsiveInput { mobile: T + phone: T tablet: T desktop: T } @@ -22,10 +23,11 @@ const isResponsiveInput = (value: any): value is ResponsiveInput => */ export const parseResponsive = (parse: (value: T) => U) => ( value: T | ResponsiveInput -): null | U | { mobile: U; tablet: U; desktop: U } => { +): null | U | { mobile: U; phone: U; tablet: U; desktop: U } => { if (isResponsiveInput(value)) { return { mobile: parse(value.mobile), + phone: parse(value.phone), tablet: parse(value.tablet), desktop: parse(value.desktop), } From e11c98c97d7d983c737442ed513efa40bc64cbee Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:54:53 +0300 Subject: [PATCH 4/7] Update responsiveWidth.ts --- react/hooks/responsiveWidth.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/hooks/responsiveWidth.ts b/react/hooks/responsiveWidth.ts index 66d430d..7378699 100644 --- a/react/hooks/responsiveWidth.ts +++ b/react/hooks/responsiveWidth.ts @@ -103,7 +103,7 @@ export const useResponsiveWidth = ( if (width && typeof width === 'object') { return { element: col, - width: isPhone ? width.mobile || 0 : isTablet ? width.tablet || 0 : width.desktop || 0, + width: isPhone ? width.phone || 0 : isTablet ? width.tablet || 0 : width.desktop || 0, hasDefinedWidth: true, isResponsive: true, } From bbf48bc9192f1daabff8ba944aae3853e05f71c2 Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Thu, 18 Aug 2022 14:58:41 +0300 Subject: [PATCH 5/7] Update README.md Add example for `responsive-values`. --- docs/README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/README.md b/docs/README.md index 50f3bca..a23c310 100644 --- a/docs/README.md +++ b/docs/README.md @@ -23,6 +23,29 @@ You can use **any** array of blocks as `flex-layout.row` and `flex-layout.col` c The props below support [`responsive-values`](https://github.com/vtex-apps/responsive-values), meaning that you can define to the same prop different values based on each device's screen size, such as mobile and desktop. +For example: +``` +{ + "flex-layout.row#row": { + "props": { + "marginBottom": { + "mobile": 2, + "desktop": 6 + }, + "width": { + "desktop": "33%", + "tablet": "50%", + "phone": "100%" + } + }, + "children": [ + "flex-layout.col#col1", + "flex-layout.col#col2", + ... + ] + } +``` + ### `flex-layout.row` | Prop name | Type | Description | Default value | From 13229216d33b8fedb97f985b878f52fffc9bba35 Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 19 Aug 2022 15:13:46 +0300 Subject: [PATCH 6/7] Update valuesParser.ts Change isResponsiveInput conditions --- react/modules/valuesParser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/modules/valuesParser.ts b/react/modules/valuesParser.ts index 6422691..3dcac03 100644 --- a/react/modules/valuesParser.ts +++ b/react/modules/valuesParser.ts @@ -14,7 +14,7 @@ const MAX_TACHYONS_SCALE = 11 //eslint-disable-next-line @typescript-eslint/no-explicit-any const isResponsiveInput = (value: any): value is ResponsiveInput => - value && value.mobile != null && value.desktop != null +value && (value.mobile != null || value.phone != null || value.tablet != null) && value.desktop != null /** Takes a parser of units, and returns a parser that accepts either a * value or a responsive input of that same type of value From 47f06415f07647e6e068e1022b5111a1e1b3e818 Mon Sep 17 00:00:00 2001 From: UnderscoreShift <74712515+UnderscoreShift@users.noreply.github.com> Date: Fri, 19 Aug 2022 15:15:04 +0300 Subject: [PATCH 7/7] Update valuesParser.ts Ops, correct indent --- react/modules/valuesParser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/modules/valuesParser.ts b/react/modules/valuesParser.ts index 3dcac03..1f61617 100644 --- a/react/modules/valuesParser.ts +++ b/react/modules/valuesParser.ts @@ -14,7 +14,7 @@ const MAX_TACHYONS_SCALE = 11 //eslint-disable-next-line @typescript-eslint/no-explicit-any const isResponsiveInput = (value: any): value is ResponsiveInput => -value && (value.mobile != null || value.phone != null || value.tablet != null) && value.desktop != null + value && (value.mobile != null || value.phone != null || value.tablet != null) && value.desktop != null /** Takes a parser of units, and returns a parser that accepts either a * value or a responsive input of that same type of value