From c88bd30941f15904f274a09aacae3701ad0fa81a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 11 Apr 2022 20:33:38 +0200 Subject: [PATCH] fix: correct elevation when switching modes --- src/components/Button.tsx | 9 +-- .../__snapshots__/Banner.test.js.snap | 28 +++++++ .../__snapshots__/Button.test.js.snap | 77 +++++++++++++++++++ .../__snapshots__/DataTable.test.js.snap | 7 ++ .../__tests__/__snapshots__/Menu.test.js.snap | 21 +++++ .../__snapshots__/Snackbar.test.js.snap | 7 ++ 6 files changed, 144 insertions(+), 5 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 69d60a32fe..5f839ef7a8 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -148,11 +148,11 @@ const Button = ({ ...rest }: Props) => { const { current: elevation } = React.useRef( - new Animated.Value(mode === 'contained' ? 2 : 0) + new Animated.Value(disabled || mode !== 'contained' ? 0 : 2) ); React.useEffect(() => { - elevation.setValue(mode === 'contained' ? 2 : 0); - }, [mode, elevation]); + elevation.setValue(disabled || mode !== 'contained' ? 0 : 2); + }, [mode, elevation, disabled]); const handlePressIn = () => { if (mode === 'contained') { @@ -252,7 +252,6 @@ const Button = ({ StyleSheet.flatten(labelStyle) || {}; const textStyle = { color: textColor, ...font }; - const elevationRes = disabled || mode !== 'contained' ? 0 : elevation; const iconStyle = StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? styles.iconReverse @@ -264,7 +263,7 @@ const Button = ({ style={[ styles.button, compact && styles.compact, - { elevation: elevationRes } as ViewStyle, + { elevation }, buttonStyle, style, ]} diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap index 1bfe49d1d1..3212915b32 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.js.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap @@ -99,6 +99,13 @@ exports[`render visible banner, with custom theme 1`] = ` "elevation": 0, "margin": 4, "minWidth": "auto", + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -397,6 +404,13 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "elevation": 0, "margin": 4, "minWidth": "auto", + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -589,6 +603,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "elevation": 0, "margin": 4, "minWidth": "auto", + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -687,6 +708,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "elevation": 0, "margin": 4, "minWidth": "auto", + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap index a0d04b8b4d..4b68a169fd 100644 --- a/src/components/__tests__/__snapshots__/Button.test.js.snap +++ b/src/components/__tests__/__snapshots__/Button.test.js.snap @@ -11,6 +11,13 @@ exports[`renders button with an accessibility hint 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -110,6 +117,13 @@ exports[`renders button with an accessibility label 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -209,6 +223,13 @@ exports[`renders button with color 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -307,6 +328,13 @@ exports[`renders button with custom testID 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -406,6 +434,13 @@ exports[`renders button with icon 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -532,6 +567,13 @@ exports[`renders button with icon in reverse order 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -765,6 +807,13 @@ exports[`renders disabled button 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -863,6 +912,13 @@ exports[`renders loading button 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -1151,6 +1207,13 @@ exports[`renders outlined button with mode 1`] = ` "borderWidth": 0.5, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -1249,6 +1312,13 @@ exports[`renders text button by default 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -1347,6 +1417,13 @@ exports[`renders text button with mode 1`] = ` "borderWidth": 0, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap index 4e77fe0c73..9e7626d101 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap @@ -968,6 +968,13 @@ exports[`renders data table pagination with options select 1`] = ` "elevation": 0, "marginRight": 16, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, "textAlign": "center", } } diff --git a/src/components/__tests__/__snapshots__/Menu.test.js.snap b/src/components/__tests__/__snapshots__/Menu.test.js.snap index f687bdc481..3182852ea7 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.js.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.js.snap @@ -14,6 +14,13 @@ exports[`renders menu with content styles 1`] = ` "borderWidth": 0.5, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -116,6 +123,13 @@ exports[`renders not visible menu 1`] = ` "borderWidth": 0.5, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > @@ -218,6 +232,13 @@ exports[`renders visible menu 1`] = ` "borderWidth": 0.5, "elevation": 0, "minWidth": 64, + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } > diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap index 5833dca7ec..1e1a28b87b 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap @@ -162,6 +162,13 @@ exports[`renders snackbar with action button 1`] = ` "marginHorizontal": 8, "marginVertical": 6, "minWidth": "auto", + "shadowColor": "#000000", + "shadowOffset": Object { + "height": 0, + "width": 0, + }, + "shadowOpacity": 0, + "shadowRadius": 0, } } >