Skip to content

Commit

Permalink
refactor: move styles to a use-default-styles hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@gunnartorfis
gunnartorfis committed Sep 14, 2024
1 parent 02e3915 commit 2560331
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 80 deletions.
100 changes: 20 additions & 80 deletions src/toast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { CircleCheck, CircleX, Info, TriangleAlert, X } from './icons';
import { isToastAction, type ToastProps, type ToastRef } from './types';
import { useAppStateListener } from './use-app-state';
import { useColors } from './use-colors';
import { useDefaultStyles } from './use-default-styles';

export const Toast = React.forwardRef<ToastRef, ToastProps>(
(
Expand Down Expand Up @@ -48,6 +49,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
unstyled: unstyledProps,
important,
invert: invertProps,
// richColors: richColorsProps,
},
ref
) => {
Expand All @@ -59,6 +61,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
pauseWhenPageIsHidden,
cn,
invert: invertCtx,
// richColors: richColorsCtx,
toastOptions: {
unstyled: unstyledCtx,
toastContainerStyle: toastContainerStyleCtx,
Expand All @@ -77,7 +80,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
},
} = useToastContext();
const invert = invertProps ?? invertCtx;

// const richColors = richColorsProps ?? richColorsCtx;
const unstyled = unstyledProps ?? unstyledCtx;
const duration = durationProps ?? durationCtx;
const closeButton = closeButtonProps ?? closeButtonCtx;
Expand Down Expand Up @@ -251,6 +254,13 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
};
}, [id]);

const defaultStyles = useDefaultStyles({
invert,
// richColors,
unstyled,
description,
});

if (jsx) {
return jsx;
}
Expand Down Expand Up @@ -291,31 +301,15 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
toastStyleCtx,
styles?.toast,
style,
unstyled
? undefined
: {
justifyContent: 'center',
padding: 16,
borderRadius: 16,
marginHorizontal: 16,
backgroundColor: colors['background-primary'],
borderCurve: 'continuous',
},
defaultStyles.toast,
wiggleAnimationStyle,
]}
entering={entering}
exiting={exiting}
>
<View
style={[
unstyled
? undefined
: {
flexDirection: 'row',
gap: 16,
alignItems:
description?.length === 0 ? 'center' : undefined,
},
defaultStyles.toastContent,
toastContentStyleCtx,
styles?.toastContent,
]}
Expand All @@ -339,32 +333,15 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
)}
<View style={{ flex: 1 }}>
<Text
style={[
unstyled
? undefined
: {
fontWeight: '600',
lineHeight: 20,
color: colors['text-primary'],
},
titleStyleCtx,
styles?.title,
]}
style={[defaultStyles.title, titleStyleCtx, styles?.title]}
className={cn(classNamesCtx?.title, classNames?.title)}
>
{title}
</Text>
{description ? (
<Text
style={[
unstyled
? undefined
: {
fontSize: 14,
lineHeight: 20,
marginTop: 2,
color: colors['text-tertiary'],
},
defaultStyles.description,
descriptionStyleCtx,
styles?.description,
]}
Expand All @@ -380,12 +357,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
style={[
unstyled || (!action && !cancel)
? undefined
: {
flexDirection: 'row',
alignItems: 'center',
gap: 16,
marginTop: 16,
},
: defaultStyles.buttons,
buttonsStyleCtx,
styles?.buttons,
]}
Expand All @@ -396,35 +368,15 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
onPress={action.onClick}
className={actionButtonClassName}
style={[
unstyled
? undefined
: {
flexGrow: 0,
alignSelf: 'flex-start',
borderRadius: 999,
borderWidth: 1,
borderColor: colors['border-secondary'],
paddingHorizontal: 14,
paddingVertical: 6,
borderCurve: 'continuous',
backgroundColor: colors['background-secondary'],
},
defaultStyles.actionButton,
actionButtonStyleCtx,
actionButtonStyle,
]}
>
<Text
numberOfLines={1}
style={[
unstyled
? undefined
: {
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
alignSelf: 'flex-start',
color: colors['text-primary'],
},
defaultStyles.actionButtonText,
actionButtonTextStyleCtx,
actionButtonTextStyle,
]}
Expand All @@ -444,27 +396,15 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
}}
className={cancelButtonClassName}
style={[
unstyled
? undefined
: {
flexGrow: 0,
},
defaultStyles.cancelButton,
cancelButtonStyleCtx,
cancelButtonStyle,
]}
>
<Text
numberOfLines={1}
style={[
unstyled
? undefined
: {
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
alignSelf: 'flex-start',
color: colors['text-secondary'],
},
defaultStyles.cancelButtonText,
cancelButtonTextStyleCtx,
cancelButtonTextStyle,
]}
Expand Down
103 changes: 103 additions & 0 deletions src/use-default-styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import type { TextStyle, ViewStyle } from 'react-native';
import { useColors } from './use-colors';

type DefaultStyles = {
toast: ViewStyle;
toastContent: ViewStyle;
title: TextStyle;
description: TextStyle;
buttons: ViewStyle;
actionButton: ViewStyle;
actionButtonText: TextStyle;
cancelButton: ViewStyle;
cancelButtonText: TextStyle;
};

export const useDefaultStyles = ({
invert,
// richColors,
unstyled,
description,
}: {
invert: boolean;
// richColors: boolean;
unstyled: boolean | undefined;
description: string | undefined;
}): DefaultStyles => {
const colors = useColors(invert);

if (unstyled) {
return {
toast: {},
toastContent: {},
title: {},
description: {},
buttons: {},
actionButton: {},
actionButtonText: {},
cancelButton: {},
cancelButtonText: {},
};
}

return {
toast: {
justifyContent: 'center',
padding: 16,
borderRadius: 16,
marginHorizontal: 16,
backgroundColor: colors['background-primary'],
borderCurve: 'continuous',
},
toastContent: {
flexDirection: 'row',
gap: 16,
alignItems: description?.length === 0 ? 'center' : undefined,
},
title: {
fontWeight: '600',
lineHeight: 20,
color: colors['text-primary'],
},
description: {
fontSize: 14,
lineHeight: 20,
marginTop: 2,
color: colors['text-tertiary'],
},
buttons: {
flexDirection: 'row',
alignItems: 'center',
gap: 16,
marginTop: 16,
},
actionButton: {
flexGrow: 0,
alignSelf: 'flex-start',
borderRadius: 999,
borderWidth: 1,
borderColor: colors['border-secondary'],
paddingHorizontal: 14,
paddingVertical: 6,
borderCurve: 'continuous',
backgroundColor: colors['background-secondary'],
},
actionButtonText: {
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
alignSelf: 'flex-start',
color: colors['text-primary'],
},
cancelButton: {
flexGrow: 0,
},
cancelButtonText: {
fontSize: 14,
lineHeight: 20,
fontWeight: '600',
alignSelf: 'flex-start',
color: colors['text-secondary'],
},
};
};

0 comments on commit 2560331

Please sign in to comment.