From 1738f8c3c492bd448b95e30e7b1d53c588783179 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 2 Feb 2024 12:25:59 -0500 Subject: [PATCH 1/3] Refactor card sizing logic --- login-workflow/example/ios/Podfile.lock | 4 +- .../src/screens/WorkFlowCardExample.tsx | 39 ++---- .../components/WorkflowCard/WorkflowCard.tsx | 119 +++++++++++------- .../WorkflowCard/WorkflowCardBody.tsx | 4 +- .../WorkflowCard/WorkflowCardHeader.tsx | 3 + .../WorkflowCard/WorkflowCardInstructions.tsx | 4 +- .../src/hooks/useScreenDimensions.ts | 32 +++++ login-workflow/src/hooks/useScreenWidth.ts | 19 --- 8 files changed, 124 insertions(+), 100 deletions(-) create mode 100644 login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx create mode 100644 login-workflow/src/hooks/useScreenDimensions.ts delete mode 100644 login-workflow/src/hooks/useScreenWidth.ts diff --git a/login-workflow/example/ios/Podfile.lock b/login-workflow/example/ios/Podfile.lock index 11b7ad65b..a1781830c 100644 --- a/login-workflow/example/ios/Podfile.lock +++ b/login-workflow/example/ios/Podfile.lock @@ -1426,8 +1426,8 @@ SPEC CHECKSUMS: RNSVG: d7d7bc8229af3842c9cfc3a723c815a52cdd1105 RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8 SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 - Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 + Yoga: 13c8ef87792450193e117976337b8527b49e8c03 PODFILE CHECKSUM: 0102c6fabdf4b18c8262ef30a5501363fc491918 -COCOAPODS: 1.12.1 \ No newline at end of file +COCOAPODS: 1.14.3 diff --git a/login-workflow/example/src/screens/WorkFlowCardExample.tsx b/login-workflow/example/src/screens/WorkFlowCardExample.tsx index c069ef917..d858eb147 100644 --- a/login-workflow/example/src/screens/WorkFlowCardExample.tsx +++ b/login-workflow/example/src/screens/WorkFlowCardExample.tsx @@ -1,56 +1,33 @@ import React from 'react'; -import { View } from 'react-native'; -import { Header } from '@brightlayer-ui/react-native-components'; +// import { View } from 'react-native'; +// import { Header } from '@brightlayer-ui/react-native-components'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '../navigation'; -import { HelperText, Text, TextInput } from 'react-native-paper'; +import { HelperText, TextInput } from 'react-native-paper'; import { WorkflowCard, WorkflowCardBody, WorkflowCardInstructions, WorkflowCardActions, } from '@brightlayer-ui/react-native-auth-workflow'; -import { useThemeContext } from '../context/ThemeContext'; +// import { useThemeContext } from '../context/ThemeContext'; import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; -import { UserMenuExample } from '../components/UserMenuExample'; -import { toggleRTL } from './home'; +// import { UserMenuExample } from '../components/UserMenuExample'; +// import { toggleRTL } from './home'; type AppProps = { navigation: StackNavigationProp; }; -const WorkFlowCardExample: React.FC = ({ navigation }): JSX.Element => { +const WorkFlowCardExample: React.FC = (): JSX.Element => { const theme = useExtendedTheme(); - const { theme: themeType, setTheme } = useThemeContext(); + // const { theme: themeType, setTheme } = useThemeContext(); const [errorFilledText, setErrorFilledText] = React.useState('Hello'); const [hasError, setHasError] = React.useState(true); return ( <> -
{ - navigation.openDrawer(); - }} - actionItems={[ - { - icon: { name: 'more' }, - onPress: (): void => {}, - component: ( - setTheme(themeType === 'light' ? 'dark' : 'light')} - /> - ), - }, - ]} - /> - {/* @todo replace WorkflowCardHeader component once created */} - - Workflow Card Header - => + StyleSheet.create({ + mobile: { + paddingBottom: insets.bottom, + height: '100%', + width: '100%', + borderRadius: 0, + }, + tablet: { + height: 730, + width: 450, + }, + }); + export type WorkflowCardHeaderProps = CardTitleProps; export type WorkflowCardActionsProps = CardActionsProps; @@ -42,7 +63,7 @@ export type WorkflowCardProps = { function hasWorkflowCardHeaderRecursive(children: any): boolean { return React.Children.toArray(children).some((child) => { // @todo replace with WorkflowCardHeader once it's created - if (child.type === WorkflowCardBody) { + if (child.type === WorkflowCardHeader) { return true; // Found it! } else if (React.isValidElement(child)) { // Recursively check children of this element @@ -53,51 +74,61 @@ function hasWorkflowCardHeaderRecursive(children: any): boolean { } export const WorkflowCard: React.FC = (props) => { - const { loading, backgroundImage, children, ...otherViewProps } = props; + const { loading, backgroundImage, children, style, ...otherImageProps } = props; const theme = useExtendedTheme(); - const isTablet = useScreenWidth(); + const { isTablet } = useScreenDimensions(); const hasWorkflowCardHeader = hasWorkflowCardHeaderRecursive(children); - const insets = useSafeAreaInsets(); - const statusBarHeight = isTablet ? 0 : hasWorkflowCardHeader ? 0 : insets.top; + const styles = makeStyles(insets); return ( - - + 730 ? 730 : '100%',//isTablet ? 730 : '100%', + // width: width > 450 ? 450 : '100%',//isTablet ? 450 : '100%', + // maxHeight: '100%',//isTablet ? 730 : 'none', + // maxWidth: '100%',//isTablet ? 450 : 'none', + // display: 'flex', + // borderRadius: isTablet ? theme.roundness : 0, + // paddingBottom: isTablet ? 0 : insets.bottom, + // backgroundColor: 'pink' + }, + ]} > - - {loading ? : children} - - - + {loading ? : children} + + ); }; diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardBody.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardBody.tsx index 6a1dcfec9..b500eb12b 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardBody.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardBody.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ScrollView, StyleSheet, ViewStyle } from 'react-native'; import { Card, CardContentProps } from 'react-native-paper'; -import { useScreenWidth } from '../../hooks/useScreenWidth'; +import { useScreenDimensions } from '../../hooks/useScreenDimensions'; const makeStyles = ( isTablet: boolean @@ -26,7 +26,7 @@ const makeStyles = ( */ export const WorkflowCardBody: React.FC = (props) => { const { children, style, ...otherCardContentProps } = props; - const isTablet = useScreenWidth(); + const { isTablet } = useScreenDimensions(); const defaultStyles = makeStyles(isTablet); return ( diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx new file mode 100644 index 000000000..23e83e7c0 --- /dev/null +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx @@ -0,0 +1,3 @@ +import React from 'react'; +import { View } from 'react-native'; +export const WorkflowCardHeader: React.FC = () => ; diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx index e7ae8de68..0c2775736 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, ViewStyle, View } from 'react-native'; import { Divider, Text, TextProps } from 'react-native-paper'; -import { useScreenWidth } from '../../hooks/useScreenWidth'; +import { useScreenDimensions } from '../../hooks/useScreenDimensions'; export type WorkflowCardInstructionProps = Omit, 'children' | 'theme' | 'variant'> & { /** @@ -44,7 +44,7 @@ const makeStyles = ( export const WorkflowCardInstructions: React.FC = (props) => { const { instructions, divider = true, style, ...otherProps } = props; - const isTablet = useScreenWidth(); + const { isTablet } = useScreenDimensions(); const styles = makeStyles(isTablet); return ( <> diff --git a/login-workflow/src/hooks/useScreenDimensions.ts b/login-workflow/src/hooks/useScreenDimensions.ts new file mode 100644 index 000000000..3ef4d29e8 --- /dev/null +++ b/login-workflow/src/hooks/useScreenDimensions.ts @@ -0,0 +1,32 @@ +/** + * @packageDocumentation + * @module Hooks + * @internal + */ + +import { useState, useEffect } from 'react'; +import { Dimensions } from 'react-native'; + +type ScreenWidthProps = { + width: number; + height: number; + isTablet: boolean; +}; +export const useScreenDimensions = (): ScreenWidthProps => { + const { height: initialHeight, width: initialWidth } = Dimensions.get('window'); + const [windowWidth, setWindowWidth] = useState(initialWidth); + const [windowHeight, setWindowHeight] = useState(initialHeight); + useEffect(() => { + const subscription = Dimensions.addEventListener('change', () => { + const { height, width } = Dimensions.get('window'); + setWindowWidth(height); + setWindowHeight(width); + }); + return () => subscription?.remove(); + }, []); + return { + isTablet: windowWidth >= 768, + width: windowWidth, + height: windowHeight, + }; +}; diff --git a/login-workflow/src/hooks/useScreenWidth.ts b/login-workflow/src/hooks/useScreenWidth.ts deleted file mode 100644 index d2e482033..000000000 --- a/login-workflow/src/hooks/useScreenWidth.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @packageDocumentation - * @module Hooks - * @internal - */ - -import { useState, useEffect } from 'react'; -import { Dimensions } from 'react-native'; - -export const useScreenWidth = (): boolean => { - const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width); - useEffect(() => { - const subscription = Dimensions.addEventListener('change', () => { - setWindowWidth(Dimensions.get('window').width); - }); - return () => subscription?.remove(); - }, []); - return windowWidth >= 600 ? true : false; -}; From 061561b2d37cfe64f1ca60e5bce77a9c0b7317f1 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 2 Feb 2024 13:30:00 -0500 Subject: [PATCH 2/3] Update the docs --- login-workflow/docs/components/workflow-card.md | 4 ++-- .../example/src/screens/WorkFlowCardExample.tsx | 12 ++---------- .../components/WorkflowCard/WorkflowCardHeader.tsx | 3 +++ 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/login-workflow/docs/components/workflow-card.md b/login-workflow/docs/components/workflow-card.md index 3634898c9..ced3a0f2a 100644 --- a/login-workflow/docs/components/workflow-card.md +++ b/login-workflow/docs/components/workflow-card.md @@ -35,9 +35,9 @@ import { | Prop Name | Type | Description | Default | | --------------- | --------- | ------------------------------------------------------------------------- | ------- | | loading | `boolean` | A boolean that indicates whether the loading spinner should be displayed. | `false` | -| backgroundImage | `string` | The background image to display behind the card. | | +| backgroundImage | [`ImageSourcePropType`](https://reactnative.dev/docs/image#imagesource) | The background image to display behind the card. | | -The properties of the underlying React Native [View](https://reactnative.dev/docs/view#props) component are also available. +The properties of the underlying React Native [ImageBackground](https://reactnative.dev/docs/imagebackground#props) component are also available. ## WorkflowCardBody diff --git a/login-workflow/example/src/screens/WorkFlowCardExample.tsx b/login-workflow/example/src/screens/WorkFlowCardExample.tsx index 20b426e87..3cbf0b4e2 100644 --- a/login-workflow/example/src/screens/WorkFlowCardExample.tsx +++ b/login-workflow/example/src/screens/WorkFlowCardExample.tsx @@ -1,9 +1,7 @@ import React from 'react'; -// import { View } from 'react-native'; -// import { Header } from '@brightlayer-ui/react-native-components'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '../navigation'; -import { HelperText, TextInput, Text } from 'react-native-paper'; +import { HelperText, TextInput } from 'react-native-paper'; import { WorkflowCard, WorkflowCardHeader, @@ -11,11 +9,7 @@ import { WorkflowCardInstructions, WorkflowCardActions, } from '@brightlayer-ui/react-native-auth-workflow'; -// import { useThemeContext } from '../context/ThemeContext'; import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; -import { useWindowDimensions } from 'react-native'; -// import { UserMenuExample } from '../components/UserMenuExample'; -// import { toggleRTL } from './home'; type AppProps = { navigation: StackNavigationProp; @@ -23,10 +17,9 @@ type AppProps = { const WorkFlowCardExample: React.FC = ({ navigation }): JSX.Element => { const theme = useExtendedTheme(); - // const { theme: themeType, setTheme } = useThemeContext(); const [errorFilledText, setErrorFilledText] = React.useState('Hello'); const [hasError, setHasError] = React.useState(true); - const { height, width } = useWindowDimensions(); + return ( <> @@ -49,7 +42,6 @@ const WorkFlowCardExample: React.FC = ({ navigation }): JSX.Element => Error Message - {`height: ${height}, width: ${width}`} { const insets = useSafeAreaInsets(); const { isTablet } = useScreenDimensions(); From 13e6b03daecbc38f2d9a22075167c9901f0e17e8 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 2 Feb 2024 13:51:37 -0500 Subject: [PATCH 3/3] chore: fix roundness --- .../src/components/WorkflowCard/WorkflowCard.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx index 4d79ff421..ba35b3036 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx @@ -3,7 +3,7 @@ import { ImageBackground, ImageBackgroundProps, ImageSourcePropType, StyleSheet import { Card, CardActionsProps, CardProps, CardTitleProps } from 'react-native-paper'; import { WorkflowCardInstructionProps } from './WorkflowCardInstructions'; import { useScreenDimensions } from '../../hooks/useScreenDimensions'; -import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; +import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes'; import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context'; import { Spinner } from '../Spinner'; import defaultImage from '../../assets/images/background.png'; @@ -30,9 +30,13 @@ export type WorkflowCardBaseProps = ImageBackgroundProps & { backgroundImage?: ImageSourcePropType; }; -const makeStyles = ( - insets: EdgeInsets -): StyleSheet.NamedStyles<{ +const makeStyles = ({ + insets, + theme, +}: { + insets: EdgeInsets; + theme: ExtendedTheme; +}): StyleSheet.NamedStyles<{ mobile: CardProps['style']; tablet: CardProps['style']; }> => @@ -46,6 +50,8 @@ const makeStyles = ( tablet: { height: MAX_CARD_HEIGHT, width: MAX_CARD_WIDTH, + borderRadius: theme.roundness * 2, + overflow: 'hidden', }, }); @@ -71,7 +77,7 @@ export const WorkflowCard: React.FC = (props) => { const hasWorkflowCardHeader = hasWorkflowCardHeaderRecursive(children); const insets = useSafeAreaInsets(); - const styles = makeStyles(insets); + const styles = makeStyles({ insets, theme }); return (