@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/surfaces/ModalSurface.tsx

@@ -11,20 +11,20 @@ import { Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 're
 import { RichContentRenderer } from '../content/RichContentRenderer';
 import type { LookupAttribute } from '../content/types';
 
-import { CloseButton } from './CloseButton';
-import { resolveCloseButtonColor } from './resolveCloseButtonColor';
+import { CardFade } from './CardFade';
+import { CLOSE_BUTTON_INSET, CLOSE_BUTTON_SIZE, CloseButton } from './CloseButton';
 import { MadeWithUserflow } from './MadeWithUserflow';
 import { ProgressBar } from './ProgressBar';
 import { ABSOLUTE_FILL } from './absoluteFill';
 import { parseBackdropOpacity } from './parseBackdropOpacity';
 import { resolveStepProgress } from './progress';
-import { useUserflowSafeAreaInsets } from './safeArea';
+import { resolveCloseButtonColor } from './resolveCloseButtonColor';
 import {
   resolveModalButtonsAlign,
   resolveModalCardMaxHeight,
   resolveModalCardMaxWidth,
-  resolveModalCenterPadding,
 } from './resolveModalLayout';
+import { useSurfaceLayoutInsets } from './surfaceLayoutInsets';
 import { resolveBubbleChrome } from './themeChrome';
 
 export interface ModalSurfaceProps {
@@ -37,7 +37,7 @@ export interface ModalSurfaceProps {
 
 /**
  * Modal chrome: full-screen backdrop + centered themed card with TreeDoc body.
- * Also used as a temporary fallback for BUBBLE/HIDDEN until dedicated surfaces.
+ * Also used as a temporary fallback for BUBBLE until a dedicated surface.
  *
  * Touch model: backdrop is a full-screen Pressable; the centering wrapper is
  * `box-none` so taps outside the card hit the backdrop, while the card itself
@@ -63,9 +63,14 @@ export function ModalSurface({
     void engine.endFlow('USER_CLOSED' as EndFlowReasonInput);
   }, [engine]);
 
-  const insets = useUserflowSafeAreaInsets();
+  const onBackdropPress = React.useCallback(() => {
+    if (canDismissBackdrop) {
+      endAsUserClosed();
+    }
+  }, [canDismissBackdrop, endAsUserClosed]);
+
   const windowDims = useWindowDimensions();
-  const centerPadding = resolveModalCenterPadding(insets);
+  const centerPadding = useSurfaceLayoutInsets();
   const cardMaxWidth = resolveModalCardMaxWidth(theme, currentStep.width, windowDims.width);
   const cardMaxHeight = resolveModalCardMaxHeight(windowDims.height, centerPadding);
   const buttonsAlign = resolveModalButtonsAlign(theme, windowDims.width);
@@ -73,6 +78,9 @@ export function ModalSurface({
   const progressBottom = theme.progressBarEnabled && theme.progressBarPosition === 'BOTTOM';
   const showBranding = session.flow.company.flowBranding;
   const contentPadding = chrome.contentPadding;
+  const closeClearance = CLOSE_BUTTON_INSET + CLOSE_BUTTON_SIZE;
+  const scrollPaddingTop = showClose ? Math.max(contentPadding, closeClearance) : contentPadding;
+  const scrollPaddingRight = showClose ? Math.max(contentPadding, closeClearance) : contentPadding;
 
   return (
     <View style={styles.root} testID="userflow-modal-surface" pointerEvents="box-none">
@@ -82,8 +90,7 @@ export function ModalSurface({
         accessibilityLabel={canDismissBackdrop ? 'Dismiss' : undefined}
         accessibilityElementsHidden={!canDismissBackdrop}
         importantForAccessibility={canDismissBackdrop ? 'yes' : 'no-hide-descendants'}
-        disabled={!canDismissBackdrop}
-        onPress={canDismissBackdrop ? endAsUserClosed : undefined}
+        onPress={onBackdropPress}
         style={[
           ABSOLUTE_FILL,
           {
@@ -94,7 +101,7 @@ export function ModalSurface({
       />
 
       <View style={[styles.center, centerPadding]} pointerEvents="box-none">
-        <View
+        <CardFade
           testID="userflow-modal-card"
           accessibilityViewIsModal
           pointerEvents="auto"
@@ -103,7 +110,6 @@ export function ModalSurface({
             styles.cardShadow,
             {
               maxWidth: cardMaxWidth,
-              maxHeight: cardMaxHeight,
               width: '100%',
               borderRadius: chrome.borderRadius,
             },
@@ -116,13 +122,10 @@ export function ModalSurface({
               styles.cardFill,
               {
                 borderRadius: chrome.borderRadius,
+                maxHeight: cardMaxHeight,
               },
             ]}
           >
-            {showClose ? (
-              <CloseButton onPress={endAsUserClosed} color={resolveCloseButtonColor(theme)} />
-            ) : null}
-
             {progressTop ? (
               <ProgressBar
                 enabled
@@ -140,8 +143,9 @@ export function ModalSurface({
               contentContainerStyle={[
                 styles.scrollContent,
                 {
-                  paddingHorizontal: contentPadding,
-                  paddingTop: contentPadding,
+                  paddingLeft: contentPadding,
+                  paddingRight: scrollPaddingRight,
+                  paddingTop: scrollPaddingTop,
                   paddingBottom: showBranding ? 0 : contentPadding,
                 },
               ]}
@@ -150,24 +154,30 @@ export function ModalSurface({
               bounces={false}
               showsVerticalScrollIndicator
             >
-              <RichContentRenderer
-                content={currentStep.content}
-                buttons={currentStep.buttons}
-                theme={theme}
-                sessionData={session.data}
-                lookupAttribute={lookupAttribute}
-                defaultButtonsAlign={buttonsAlign}
-                onActions={(actions) => {
-                  void engine.handleActions(actions);
-                }}
-              />
-              <MadeWithUserflow
-                company={session.flow.company}
-                color={theme.fontColor}
-                contentPadding={contentPadding}
-                embedded
-              />
+              <View testID="userflow-modal-content" style={styles.content}>
+                <RichContentRenderer
+                  content={currentStep.content}
+                  buttons={currentStep.buttons}
+                  theme={theme}
+                  sessionData={session.data}
+                  lookupAttribute={lookupAttribute}
+                  defaultButtonsAlign={buttonsAlign}
+                  heading1FontWeight="normal"
+                  onActions={(actions) => {
+                    void engine.handleActions(actions);
+                  }}
+                />
+                <MadeWithUserflow
+                  company={session.flow.company}
+                  color={theme.fontColor}
+                  contentPadding={contentPadding}
+                  embedded
+                />
+              </View>
             </ScrollView>
+            {showClose ? (
+              <CloseButton onPress={endAsUserClosed} color={resolveCloseButtonColor(theme)} />
+            ) : null}
 
             {progressBottom ? (
               <ProgressBar
@@ -180,7 +190,7 @@ export function ModalSurface({
               />
             ) : null}
           </View>
-        </View>
+        </CardFade>
       </View>
     </View>
   );
@@ -205,11 +215,14 @@ const styles = StyleSheet.create({
     flexShrink: 1,
   },
   scroll: {
-    flexGrow: 0,
+    flexGrow: 1,
     flexShrink: 1,
     minHeight: 0,
   },
   scrollContent: {
     flexGrow: 1,
   },
+  content: {
+    position: 'relative',
+  },
 });