@solucx/react-native-solucx-widget 0.1.3 → 0.1.5

package/README.intern.md

@@ -85,7 +85,6 @@ export default function MyComponent() {
         param_REGIAO: "SUDESTE"
       }}
       options={{ 
-        width: 380, 
         height: 400 
       }}
     />
@@ -145,8 +144,7 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  width?: number;              // Largura do widget (padrão: 380)
-  height?: number;             // Altura do widget (padrão: 400)
+  height?: number;             // Altura
   retry?: {                    // Configuração de retry
     attempts?: number;         // Número de tentativas
     interval?: number;         // Intervalo entre tentativas
@@ -277,7 +275,6 @@ Configurações centralizadas em [`webViewConstants.ts`](src/constants/webViewCo
 ```typescript
 export const BASE_URL = 'https://survey-link.solucx.com.br/link';
 export const STORAGE_KEY = '@solucxWidgetLog';
-export const DEFAULT_WIDTH = 380;
 export const MIN_HEIGHT = 200;
 export const FIXED_Z_INDEX = 9999;
 export const MODAL_Z_INDEX = 10000;

package/README.md

@@ -54,8 +54,7 @@ export default function MyScreen() {
         store_id: "loja_01",
         amount: 150.00
       }}
-      options={{ 
-        width: 380, 
+      options={{
         height: 400 
       }}
     />
@@ -138,8 +137,7 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  width?: number;          // Largura (padrão: 380)
-  height?: number;         // Altura (padrão: 400)
+  height?: number;         // Altura
   retry?: {
     attempts?: number;     // Tentativas (padrão: 3)
     interval?: number;     // Intervalo em ms (padrão: 1000)
@@ -239,10 +237,9 @@ const handleMessage = (message: string) => {
 
 ```typescript
 // Ajustar dimensões para o dispositivo:
-const { width, height } = Dimensions.get('window');
+const { height } = Dimensions.get('window');
 
 const options = {
-  width: width * 0.9,
   height: Math.min(height * 0.6, 400)
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -12,10 +12,11 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "react-native-webview": "^13.16.0"
+    "react-native-webview": "^13.16.0",
+    "react-native-reanimated": "~3.17.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.72.0"
   }
-}
+}

package/src/SoluCXWidget.tsx

@@ -36,13 +36,12 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
         open,
         close,
         userId,
-    } = useWidgetState(data, type);
+    } = useWidgetState(data, options, type);
 
     const eventService = new WidgetEventService(setIsWidgetVisible, resize, open, userId, options);
 
     const uri = buildWidgetURL(soluCXKey, data);
     const isForm = Boolean(data.form_id);
-    const height = options.height ? Number(options.height) : undefined;
 
     useEffect(() => {
         loadSavedData();
@@ -77,7 +76,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
 
     if (type === 'modal') {
         return (
-            <ModalWidget visible={isWidgetVisible} onClose={handleClose}>
+            <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}
@@ -91,7 +90,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
 
     if (type === 'inline') {
         return (
-            <InlineWidget visible={isWidgetVisible} onClose={handleClose}>
+            <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}

package/src/components/InlineWidget.tsx

@@ -1,25 +1,32 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View } from 'react-native';
-import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
+import Animated from 'react-native-reanimated';
 
 interface InlineWidgetProps {
     visible: boolean;
+    height: number;
     children?: React.ReactNode;
     onClose?: () => void;
 }
 
-export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, children, onClose }) => {
+export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, children, onClose }) => {
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
 
     return (
-        <View style={[styles.wrapper, getWidgetVisibility(visible)]}>
-            <View style={[styles.inline, getWidgetVisibility(visible)]}>
+        <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
+            <Animated.View style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
                 {children}
                 <CloseButton
                     visible={visible}
                     onPress={onClose || (() => { })}
                 />
-            </View>
+            </Animated.View>
         </View>
     );
 };

package/src/components/ModalWidget.tsx

@@ -1,22 +1,30 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal, SafeAreaView, View } from 'react-native';
-import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
+import Animated from 'react-native-reanimated';
 
 interface ModalWidgetProps {
     visible: boolean;
+    height: number;
     children?: React.ReactNode;
     onClose?: () => void;
 }
 
-export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, children, onClose }) => {
+export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, children, onClose }) => {
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
     return (
         <SafeAreaView>
-            <Modal transparent visible={isWidgetVisible} animationType="fade" hardwareAccelerated>
+            <Modal transparent visible={isWidgetVisible} animationType="slide" hardwareAccelerated>
                 <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
-                    <View style={[styles.modalContent, getWidgetVisibility(visible)]}>
+                    <Animated.View style={[styles.modalContent, getWidgetVisibility(visible), animatedHeightStyle]}>
                         {children}
                         <CloseButton
                             visible={visible}
@@ -27,7 +35,7 @@ export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, children, onC
                                 }
                             }}
                         />
-                    </View>
+                    </Animated.View>
                 </View>
             </Modal>
         </SafeAreaView>

package/src/components/OverlayWidget.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { View, ViewStyle, Modal, SafeAreaView } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, ViewStyle } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
+import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
 import { FIXED_Z_INDEX } from '../constants/webViewConstants';
 import { CloseButton } from './CloseButton';
+import Animated from 'react-native-reanimated';
 
 interface OverlayWidgetProps {
     visible: boolean;
@@ -14,10 +15,23 @@ interface OverlayWidgetProps {
     onClose?: () => void;
 }
 
-export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, height, position, children, onClose }) => {
+export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
+    visible,
+    width,
+    height,
+    position,
+    children,
+    onClose,
+}) => {
     const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
     const containerStyle: ViewStyle = {
         position: 'absolute',
         top: 0,
@@ -27,14 +41,14 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
         width: '100%',
         height: '100%',
         zIndex: FIXED_Z_INDEX,
-        backgroundColor: 'transparent',
+        pointerEvents: 'box-none'
     }
 
     const contentStyle = [
         getWidgetStyles(position).content,
         {
             width,
-            height,
+            pointerEvents: 'auto' as const,
             ...(position === 'top' && {
                 top: insets.top,
             }),
@@ -45,15 +59,10 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
     ];
 
     return (
-        <SafeAreaView>
-            <Modal
-                transparent
-                visible={isWidgetVisible}
-                animationType="fade"
-                hardwareAccelerated
-            >
+        <>
+            {isWidgetVisible && (
                 <View style={[containerStyle, getWidgetVisibility(visible)]}>
-                    <View style={[contentStyle, getWidgetVisibility(visible)]}>
+                    <Animated.View style={[contentStyle, animatedHeightStyle, getWidgetVisibility(visible)]}>
                         {children}
                         <CloseButton
                             visible={visible}
@@ -64,9 +73,9 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
                                 }
                             }}
                         />
-                    </View>
+                    </Animated.View>
                 </View>
-            </Modal>
-        </SafeAreaView>
+            )}
+        </>
     );
 };

package/src/hooks/useWidgetState.ts

@@ -2,12 +2,13 @@ import { useState, useCallback } from 'react';
 import { Dimensions } from 'react-native';
 import { WidgetSamplerLog, WidgetData, WidgetType } from '../interfaces';
 import { StorageService } from '../services/storage';
+import { WidgetOptions } from '@solucx/react-native-solucx-widget';
 
 function getUserId(widgetData: WidgetData): string {
     return widgetData.customer_id ?? widgetData.document ?? widgetData.email ?? "";
 }
 
-export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
+export const useWidgetState = (data: WidgetData, options?: WidgetOptions, type?: WidgetType) => {
     const [savedData, setSavedData] = useState<WidgetSamplerLog | null>(null);
     const [widgetHeight, setWidgetHeight] = useState<number>(0);
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(false);
@@ -15,6 +16,7 @@ export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
     const userId = getUserId(data);
     const storageService = new StorageService(userId);
     const screenHeight = Dimensions.get('screen').height;
+    const height = options?.height ? Number(options.height) : undefined;
 
     const loadSavedData = useCallback(async () => {
         try {
@@ -53,6 +55,10 @@ export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
 
     const resize = useCallback((value: string) => {
         const receivedHeight = Number(value);
+        if (height && receivedHeight > height) {
+            setWidgetHeight(height);
+            return;
+        }
         setWidgetHeight(receivedHeight);
     }, [screenHeight]);
 

package/src/interfaces/WidgetOptions.ts

@@ -1,5 +1,4 @@
 export interface WidgetOptions {
-    width?: number;
     height?: number;
     retry?: {
         attempts?: number;

package/src/styles/widgetStyles.ts

@@ -1,5 +1,30 @@
 import { StyleSheet } from 'react-native';
 import { WidgetType } from '../interfaces';
+import {
+    useSharedValue,
+    withTiming,
+    useAnimatedStyle,
+    Easing,
+} from 'react-native-reanimated';
+
+export const useHeightAnimation = (height: number) => {
+    const animatedHeight = useSharedValue(height);
+
+    const animatedHeightStyle = useAnimatedStyle(() => {
+        return {
+            height: animatedHeight.value,
+        };
+    });
+
+    const updateHeight = (newHeight: number) => {
+        animatedHeight.value = withTiming(newHeight, {
+            duration: 300,
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        });
+    };
+
+    return { animatedHeightStyle, updateHeight };
+};
 
 export const styles = StyleSheet.create({
     wrapper: {