@utilitywarehouse/hearth-react-native 0.28.6 → 0.29.0

package/src/components/NavModal/NavModal.tsx

@@ -0,0 +1,375 @@
+import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { hexWithOpacity } from '../../utils';
+import { BodyText } from '../BodyText';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import NavModalProps from './NavModal.props';
+
+const NavModal = ({
+  ref,
+  children,
+  heading,
+  description,
+  showCloseButton = true,
+  primaryButtonText,
+  secondaryButtonText,
+  onPressPrimaryButton,
+  onPressCloseButton,
+  onPressSecondaryButton,
+  loading,
+  loadingHeading = 'Loading...',
+  image,
+  primaryButtonProps,
+  secondaryButtonProps,
+  closeButtonProps,
+  stickyFooter = true,
+  background = 'default',
+  scrollable = true,
+  presentation = 'modal',
+  scrollViewProps,
+  safeAreaViewProps,
+  ...props
+}: NavModalProps) => {
+  const theme = useTheme();
+  const backgroundOpacity = useSharedValue(0);
+  const pretendContentTranslateY = useSharedValue(20);
+  const isBrandBackground = background === 'brand';
+  const isFullScreenPresentation = presentation === 'fullScreenModal';
+  const usesSheetPresentation = !isFullScreenPresentation;
+
+  const triggerCloseAnimation = useCallback(() => {
+    if (Platform.OS === 'android') {
+      pretendContentTranslateY.value = withTiming(20, {
+        duration: 50,
+        easing: Easing.in(Easing.quad),
+      });
+      backgroundOpacity.value = withTiming(0, {
+        duration: 100,
+        easing: Easing.in(Easing.quad),
+      });
+    }
+  }, [backgroundOpacity, pretendContentTranslateY]);
+
+  useImperativeHandle(ref, () => ({
+    triggerCloseAnimation,
+  }));
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      backgroundOpacity.value = withDelay(
+        300,
+        withTiming(1, {
+          duration: 200,
+          easing: Easing.out(Easing.quad),
+        })
+      );
+      pretendContentTranslateY.value = withDelay(
+        500,
+        withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.quad),
+        })
+      );
+    }
+  }, [backgroundOpacity, pretendContentTranslateY]);
+
+  const animatedBackgroundStyle = useAnimatedStyle(() => ({
+    backgroundColor: hexWithOpacity(
+      theme.components.overlay.backgroundColor,
+      backgroundOpacity.value * (theme.components.overlay.opacity / 100)
+    ),
+  }));
+
+  const animatedPretendContentStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: pretendContentTranslateY.value }],
+  }));
+
+  const handleCloseButtonPress = useCallback(() => {
+    onPressCloseButton?.();
+  }, [onPressCloseButton]);
+
+  const handlePrimaryButtonPress = useCallback(() => {
+    onPressPrimaryButton?.();
+  }, [onPressPrimaryButton]);
+
+  const handleSecondaryButtonPress = useCallback(() => {
+    onPressSecondaryButton?.();
+  }, [onPressSecondaryButton]);
+
+  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+
+  styles.useVariants({
+    loading,
+    background: isBrandBackground ? 'brand' : 'primary',
+    presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
+  });
+
+  const footer = useMemo(
+    () => (
+      <View style={styles.footer}>
+        {onPressPrimaryButton && primaryButtonText ? (
+          <Button
+            onPress={handlePrimaryButtonPress}
+            text={primaryButtonText}
+            inverted={isBrandBackground}
+            {...primaryButtonProps}
+            variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+            colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+          />
+        ) : null}
+        {onPressSecondaryButton && secondaryButtonText ? (
+          <Button
+            onPress={handleSecondaryButtonPress}
+            text={secondaryButtonText}
+            inverted={isBrandBackground}
+            {...secondaryButtonProps}
+            variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+            colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+          />
+        ) : null}
+      </View>
+    ),
+    [
+      handlePrimaryButtonPress,
+      handleSecondaryButtonPress,
+      isBrandBackground,
+      onPressPrimaryButton,
+      onPressSecondaryButton,
+      primaryButtonProps,
+      primaryButtonText,
+      secondaryButtonProps,
+      secondaryButtonText,
+    ]
+  );
+
+  const content = (
+    <>
+      {loading ? (
+        <View
+          style={styles.loadingContainer}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Loading' : undefined}
+          screenReaderFocusable
+        >
+          <Spinner size="lg" color={isBrandBackground ? theme.color.icon.inverted : undefined} />
+          <Heading size="lg" textAlign="center" inverted={isBrandBackground}>
+            {loadingHeading}
+          </Heading>
+        </View>
+      ) : (
+        <View
+          style={styles.container}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Modal content' : undefined}
+          screenReaderFocusable
+        >
+          <View style={styles.header}>
+            <View style={styles.headerTextContent}>
+              {heading && !image ? (
+                <Heading size="lg" accessible inverted={isBrandBackground}>
+                  {heading}
+                </Heading>
+              ) : null}
+              {description && !image ? (
+                <BodyText accessible inverted={isBrandBackground}>
+                  {description}
+                </BodyText>
+              ) : null}
+            </View>
+            {showCloseButton ? (
+              <UnstyledIconButton
+                icon={CloseMediumIcon}
+                onPress={handleCloseButtonPress}
+                accessibilityLabel="Close modal"
+                inverted={isBrandBackground}
+                {...closeButtonProps}
+              />
+            ) : null}
+          </View>
+          {image ? (
+            <View style={styles.imageContainer}>
+              {image}
+              <View style={styles.textContent}>
+                {heading ? (
+                  <Heading size="lg" textAlign="center" accessible inverted={isBrandBackground}>
+                    {heading}
+                  </Heading>
+                ) : null}
+                {description ? (
+                  <BodyText textAlign="center" accessible inverted={isBrandBackground}>
+                    {description}
+                  </BodyText>
+                ) : null}
+              </View>
+            </View>
+          ) : null}
+          {scrollable ? (
+            <ScrollView
+              style={{
+                flex: stickyFooter ? 1 : 0,
+                marginHorizontal: -4,
+              }}
+              contentContainerStyle={{ paddingHorizontal: 4 }}
+              {...scrollViewProps}
+            >
+              {children}
+              {!stickyFooter && !noButtons ? (
+                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              ) : null}
+            </ScrollView>
+          ) : (
+            <View
+              style={{
+                flex: stickyFooter ? 1 : 0,
+              }}
+            >
+              {children}
+              {!stickyFooter && !noButtons ? (
+                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              ) : null}
+            </View>
+          )}
+          {stickyFooter && !noButtons ? footer : null}
+        </View>
+      )}
+    </>
+  );
+
+  const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
+
+  return (
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
+        },
+        safeAreaViewStyle,
+      ]}
+      {...restSafeAreaViewProps}
+    >
+      {Platform.OS === 'android' && usesSheetPresentation ? (
+        <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
+          <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
+        </Animated.View>
+      ) : null}
+      <Animated.View
+        style={[
+          styles.inNavModalContainer,
+          Platform.OS === 'android' && usesSheetPresentation && animatedBackgroundStyle,
+        ]}
+        {...props}
+      >
+        <View style={styles.inNavModalContent}>{content}</View>
+      </Animated.View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create((theme, rt) => ({
+  container: {
+    flex: 1,
+    gap: theme.components.modal.gap,
+    variants: {
+      loading: {
+        true: {
+          paddingTop: 0,
+        },
+      },
+    },
+  },
+  header: {
+    flexDirection: 'row',
+    gap: theme.components.modal.gap,
+  },
+  headerTextContent: {
+    flex: 1,
+    gap: theme.components.modal.content.gap,
+  },
+  imageContainer: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  textContent: {
+    gap: theme.components.modal.content.gap,
+  },
+  loadingContainer: {
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 140,
+    gap: theme.components.modal.content.gap,
+  },
+  footer: {
+    gap: theme.components.modal.action.gap,
+  },
+  inNavModalContainer: {
+    flex: 1,
+    variants: {
+      presentation: {
+        modal: {
+          ...(Platform.OS === 'ios'
+            ? { backgroundColor: theme.components.overlay.backgroundColor }
+            : {}),
+        },
+        fullScreen: {},
+      },
+    },
+  },
+  inNavModalContent: {
+    flex: 1,
+    variants: {
+      background: {
+        primary: {},
+        brand: {
+          backgroundColor: theme.color.background.brand,
+        },
+      },
+      presentation: {
+        modal: {
+          borderTopLeftRadius: theme.components.modal.borderRadius,
+          borderTopRightRadius: theme.components.modal.borderRadius,
+          backgroundColor: theme.color.surface.neutral.strong,
+          padding: theme.components.bottomSheet.padding,
+        },
+        fullScreen: {
+          backgroundColor: theme.color.surface.neutral.strong,
+          padding: theme.components.bottomSheet.padding,
+        },
+      },
+    },
+  },
+  inNavModalFooterContainer: {
+    paddingTop: theme.components.modal.padding,
+  },
+  androidContainer: {
+    height: rt.insets.top + 18,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
+    justifyContent: 'flex-end',
+  },
+  pretendContent: {
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
+    height: 12,
+    backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
+  },
+}));
+
+export default NavModal;

package/src/components/NavModal/index.ts

@@ -0,0 +1,2 @@
+export { default as NavModal } from './NavModal';
+export type { default as NavModalProps, NavModalRef } from './NavModal.props';

package/src/components/Select/Select.tsx

@@ -1,6 +1,7 @@
 import { ExpandSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import React, { useCallback, useRef, useState } from 'react';
 import { Pressable, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import {
@@ -16,7 +17,6 @@ import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectProps, { SelectOptionItemProps } from './Select.props';
 import SelectOption from './SelectOption';
-import { SafeAreaView } from '../SafeAreaView';
 
 const Select = ({
   options = [],

package/src/components/index.ts

@@ -41,13 +41,13 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './NavModal';
 export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
-export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
@@ -69,4 +69,6 @@ export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View }
 
 export { Pressable } from 'react-native';
 
+export { SafeAreaView } from 'react-native-safe-area-context';
+
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/SafeAreaView/SafeAreaView.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import SafeAreaViewProps from './SafeAreaView.props';
-declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
-export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.js

@@ -1,117 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet as RNStyleSheet, useWindowDimensions, View, } from 'react-native';
-import { UnistylesRuntime } from '../../core';
-const DEFAULT_EDGES = ['top', 'right', 'bottom', 'left'];
-const EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
-const EDGE_EPSILON = 1;
-const getNumericStyleValue = (value) => {
-    return typeof value === 'number' ? value : 0;
-};
-const getStyleInsetValue = (style, mode, edge) => {
-    const prefix = mode === 'margin' ? 'margin' : 'padding';
-    if (!style) {
-        // No style specified at all; treat as zero inset for safe-area calculations.
-        return 0;
-    }
-    if (edge === 'top') {
-        const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    if (edge === 'bottom') {
-        const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    if (edge === 'left') {
-        const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
-    if (raw == null) {
-        return 0;
-    }
-    return getNumericStyleValue(raw);
-};
-const SafeAreaView = forwardRef(({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
-    const viewRef = useRef(null);
-    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-    const [edgeInsets, setEdgeInsets] = useState(EMPTY_INSETS);
-    const flattenedStyle = useMemo(() => RNStyleSheet.flatten(style), [style]);
-    const updateEdgeInsets = useCallback(() => {
-        const currentView = viewRef.current;
-        if (!currentView) {
-            return;
-        }
-        currentView.measureInWindow((x, y, width, height) => {
-            const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
-            const nextEdgeInsets = {
-                top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
-                right: edges.includes('right')
-                    ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
-                    : 0,
-                bottom: edges.includes('bottom')
-                    ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
-                    : 0,
-                left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
-            };
-            setEdgeInsets(previousInsets => {
-                const hasChanged = Object.keys(nextEdgeInsets).some(edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON);
-                return hasChanged ? nextEdgeInsets : previousInsets;
-            });
-        });
-    }, [edges, windowHeight, windowWidth]);
-    useEffect(() => {
-        const frame = requestAnimationFrame(updateEdgeInsets);
-        return () => cancelAnimationFrame(frame);
-    }, [updateEdgeInsets]);
-    const handleRef = useCallback((node) => {
-        viewRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    const handleLayout = useCallback((event) => {
-        onLayout?.(event);
-        requestAnimationFrame(updateEdgeInsets);
-    }, [onLayout, updateEdgeInsets]);
-    const safeAreaStyle = useMemo(() => {
-        const nextStyle = {};
-        if (mode === 'padding') {
-            nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
-            nextStyle.paddingRight =
-                getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
-            nextStyle.paddingBottom =
-                getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
-            nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
-            return nextStyle;
-        }
-        nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
-        nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
-        nextStyle.marginBottom =
-            getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
-        nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
-        return nextStyle;
-    }, [
-        edgeInsets.bottom,
-        edgeInsets.left,
-        edgeInsets.right,
-        edgeInsets.top,
-        flattenedStyle,
-        mode,
-    ]);
-    return (_jsx(View, { ref: handleRef, onLayout: handleLayout, style: [style, safeAreaStyle], ...props, children: children }));
-});
-SafeAreaView.displayName = 'SafeAreaView';
-export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.props.d.ts

@@ -1,17 +0,0 @@
-import { ViewProps } from 'react-native';
-export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
-interface SafeAreaViewProps extends ViewProps {
-    /**
-     * Which edges should receive safe area compensation.
-     *
-     * @default ['top', 'right', 'bottom', 'left']
-     */
-    edges?: SafeAreaEdge[];
-    /**
-     * Whether safe area compensation should be applied as padding or margin.
-     *
-     * @default 'padding'
-     */
-    mode?: 'padding' | 'margin';
-}
-export default SafeAreaViewProps;

package/build/components/SafeAreaView/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SafeAreaView } from './SafeAreaView';
-export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/build/components/SafeAreaView/index.js

@@ -1 +0,0 @@
-export { default as SafeAreaView } from './SafeAreaView';

package/src/components/SafeAreaView/SafeAreaView.props.ts

@@ -1,20 +0,0 @@
-import { ViewProps } from 'react-native';
-
-export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
-
-interface SafeAreaViewProps extends ViewProps {
-  /**
-   * Which edges should receive safe area compensation.
-   *
-   * @default ['top', 'right', 'bottom', 'left']
-   */
-  edges?: SafeAreaEdge[];
-  /**
-   * Whether safe area compensation should be applied as padding or margin.
-   *
-   * @default 'padding'
-   */
-  mode?: 'padding' | 'margin';
-}
-
-export default SafeAreaViewProps;