Merge pull request #17 from platformbuilders/feat/custom

feat/custom
platformbuilders · May 3, 2024 · a872e3e · a872e3e
2 parents dbace0f + 7674462
commit a872e3e
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 34 deletions.
diff --git a/react-native-toast.d.ts b/react-native-toast.d.ts
@@ -1,4 +1,4 @@
-declare module "@platformbuilders/react-native-toast" {
+declare module '@platformbuilders/react-native-toast' {
   export interface ToastProviderProps {
     children: React.ReactNode;
     config?: ToastConfigProps;
@@ -24,14 +24,26 @@ declare module "@platformbuilders/react-native-toast" {
     translateY: number;
   };
 
+  export type OptionsToast = {
+    success?: string;
+    warning?: string;
+    error?: string;
+    custom?: string;
+  };
+
   export type ToastConfigProps = {
+    containerStyle?: Record<string, unknown>;
     fontFamily?: string;
-    textColor?: string;
-    backgroundColor?: {
-      success?: string;
-      warning?: string;
-      error?: string;
-      custom?: string;
+    textColor?: OptionsToast | string;
+    titleSize?: number;
+    messageSize?: number;
+    backgroundColor?: OptionsToast;
+    closeButtonText?: string;
+    customIcon?: {
+      success?: React.ReactElement;
+      warning?: React.ReactElement;
+      error?: React.ReactElement;
+      custom?: React.ReactElement;
     };
     icon?: {
       success?: {
@@ -72,10 +84,29 @@ declare module "@platformbuilders/react-native-toast" {
 
   export function useToast(): ContextType;
 
-  export function ToastProvider({ children, config }: ToastProviderProps): React.JSX.Element
+  export function ToastProvider({
+    children,
+    config,
+  }: ToastProviderProps): React.JSX.Element;
 
-  export function showError(message: string, title?: string, duration?: number): void;
-  export function showSuccess(message: string, title?: string, duration?: number): void;
-  export function showWarning(message: string, title?: string, duration?: number): void;
-  export function showCustom(message: string, title?: string, duration?: number): void;
+  export function showError(
+    message: string,
+    title?: string,
+    duration?: number,
+  ): void;
+  export function showSuccess(
+    message: string,
+    title?: string,
+    duration?: number,
+  ): void;
+  export function showWarning(
+    message: string,
+    title?: string,
+    duration?: number,
+  ): void;
+  export function showCustom(
+    message: string,
+    title?: string,
+    duration?: number,
+  ): void;
 }
diff --git a/src/Toast.tsx b/src/Toast.tsx
@@ -1,6 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import React, { FC, useEffect, useState } from 'react';
-import { ImageSourcePropType, LayoutChangeEvent } from 'react-native';
+import {
+  ImageSourcePropType,
+  LayoutChangeEvent,
+  ViewStyle,
+} from 'react-native';
 import {
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
@@ -31,6 +35,13 @@ export type PanGestureContextType = {
 
 export type ToastType = 'success' | 'warning' | 'error' | 'custom';
 
+export type OptionsToast = {
+  success?: string;
+  warning?: string;
+  error?: string;
+  custom?: string;
+};
+
 export type ToastProps = {
   title?: string | undefined;
   message: string;
@@ -39,13 +50,18 @@ export type ToastProps = {
 };
 
 export type ToastConfig = {
+  containerStyle?: ViewStyle;
   fontFamily?: string;
-  textColor?: string;
-  backgroundColor?: {
-    success?: string;
-    warning?: string;
-    error?: string;
-    custom?: string;
+  textColor?: OptionsToast | string;
+  titleSize?: number;
+  messageSize?: number;
+  closeButtonText: string;
+  backgroundColor?: OptionsToast;
+  customIcon: {
+    success?: React.ReactElement;
+    warning?: React.ReactElement;
+    error?: React.ReactElement;
+    custom?: React.ReactElement;
   };
   icon: {
     success: {
@@ -85,13 +101,18 @@ export type ToastConfig = {
 };
 
 export type ToastConfigProps = {
+  containerStyle?: ViewStyle;
   fontFamily?: string;
-  textColor?: string;
-  backgroundColor?: {
-    success?: string;
-    warning?: string;
-    error?: string;
-    custom?: string;
+  textColor?: OptionsToast | string;
+  titleSize?: number;
+  messageSize?: number;
+  closeButtonText?: string;
+  backgroundColor?: OptionsToast;
+  customIcon?: {
+    success?: React.ReactElement;
+    warning?: React.ReactElement;
+    error?: React.ReactElement;
+    custom?: React.ReactElement;
   };
   icon?: {
     success?: {
@@ -305,38 +326,58 @@ export const Toast: FC<Props> = ({ data, config }) => {
         backgroundColor={handleBackgroundColor()}
         paddingTop={insets.top}
         hasTitle={hasTitle}
-        style={toastAnimatedStyle}
+        style={[config.containerStyle, toastAnimatedStyle]}
       >
-        {showIcon && (
+        {showIcon && icon[toast.type]().icon && (
           <Icon
             source={icon[toast.type]().icon!}
             width={icon[toast.type]().width}
             height={icon[toast.type]().height}
           />
         )}
+
+        {config?.showIcon &&
+          !!config?.customIcon[toast.type] &&
+          config?.customIcon[toast.type]}
+
         <TextContainer>
           {!!data.title && (
             <Title
               fontFamily={config?.fontFamily}
-              textColor={config?.textColor}
+              textColor={
+                typeof config?.textColor === 'string'
+                  ? config?.textColor
+                  : config?.textColor?.[data.type]
+              }
+              size={config?.titleSize}
             >
               {data.title}
             </Title>
           )}
           <Message
             fontFamily={config?.fontFamily}
-            textColor={config?.textColor}
+            textColor={
+              typeof config?.textColor === 'string'
+                ? config?.textColor
+                : config?.textColor?.[data.type]
+            }
+            size={config?.messageSize}
           >
             {data?.message}
           </Message>
         </TextContainer>
+
         {showCloseButton && (
           <CloseButton onPress={dismissToast}>
             <CloseText
               fontFamily={config?.fontFamily}
-              textColor={config?.textColor}
+              textColor={
+                typeof config?.textColor === 'string'
+                  ? config?.textColor
+                  : config?.textColor?.[data.type]
+              }
             >
-              Fechar
+              {config.closeButtonText}
             </CloseText>
           </CloseButton>
         )}

diff --git a/src/ToastProvider.tsx b/src/ToastProvider.tsx
@@ -101,6 +101,11 @@ export const ToastProvider = ({ children, config }: ToastProviderProps) => {
             duration: toast.duration,
           }}
           config={{
+            closeButtonText: config?.closeButtonText || 'Fechar',
+            containerStyle: config?.containerStyle,
+            messageSize: config?.messageSize,
+            titleSize: config?.titleSize,
+            customIcon: config?.customIcon || {},
             fontFamily: config?.fontFamily,
             textColor: config?.textColor,
             backgroundColor: {

diff --git a/src/styles.ts b/src/styles.ts
@@ -15,6 +15,7 @@ interface ContainerProps {
 interface TextProps {
   fontFamily?: string;
   textColor?: string;
+  size?: number;
 }
 
 interface IconProps {
@@ -39,18 +40,19 @@ export const Container = styled(Animated.View)<ContainerProps>`
 export const TextContainer = styled.View`
   flex: 1;
   padding-right: 14px;
+  padding-left: 14px;
 `;
 
 export const Title = styled.Text<TextProps>`
-  font-size: 16px;
+  font-size: ${({ size }) => size ?? 16}px;
   font-weight: ${fontWeight};
   margin-bottom: 12px;
   font-family: ${({ fontFamily }) => fontFamily ?? fontDefault};
   color: ${({ textColor }) => textColor ?? '#fff'};
 `;
 
 export const Message = styled.Text<TextProps>`
-  font-size: 15px;
+  font-size: ${({ size }) => size ?? 15}px;
   font-family: ${({ fontFamily }) => fontFamily ?? fontDefault};
   color: ${({ textColor }) => textColor ?? '#fff'};
   margin-bottom: 10px;
@@ -75,7 +77,7 @@ export const CloseButton = styled.Pressable.attrs({
 `;
 
 export const CloseText = styled.Text<TextProps>`
-  font-size: 13px;
+  font-size: 18px;
   font-family: ${({ fontFamily }) => fontFamily ?? fontDefault};
   color: ${({ textColor }) => textColor ?? '#fff'};
 `;