react-native-molecules 0.5.0-beta.0

package/components/Modal/Modal.tsx

@@ -0,0 +1,261 @@
+import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+    Animated,
+    Platform,
+    Pressable,
+    // Easing,
+    type StyleProp,
+    useWindowDimensions,
+    View,
+    type ViewProps,
+    type ViewStyle,
+} from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { useBackHandler } from '../../hooks';
+import type { MD3Elevation } from '../../types/theme';
+import { Surface } from '../Surface';
+import { modalStyles } from './utils';
+
+export type Props = ViewProps & {
+    /**
+     * Determines whether clicking outside the modal dismiss it.
+     */
+    dismissible?: boolean;
+    /**
+     * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
+     */
+    overlayAccessibilityLabel?: string;
+    /**
+     * content elevation
+     */
+    elevation?: MD3Elevation;
+    /**
+     * to determine whether the modal is visible or not
+     */
+    isOpen: boolean | undefined;
+    /**
+     * onClose function will be trigger when the modal is dismissed
+     */
+    onClose?: () => void;
+    /**
+     * Content of the `Modal`.
+     */
+    children: ReactNode;
+    /**
+     * Style for the content of the modal
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Size of the modal
+     * md - width and height - auto
+     * lg - maxWidth:600, maxHeight:800
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Style for the wrapper of the modal.
+     * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
+     */
+    style?: StyleProp<ViewStyle>;
+    backdropStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    // /**
+    //  * Duration of the animations in the modal
+    //  * @default 220
+    //  * */
+    // animationDuration?: number;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+};
+
+// const DEFAULT_DURATION = 220;
+
+function Modal(
+    {
+        dismissible = true,
+        isOpen = false,
+        overlayAccessibilityLabel = 'Close modal',
+        onClose,
+        children,
+        contentContainerStyle: contentContainerStyleProp,
+        elevation,
+        size = 'md',
+        style,
+        containerStyle,
+        // animationDuration = DEFAULT_DURATION,
+        testID = 'modal',
+        backdropStyle: backdropStyleProp,
+        ...rest
+    }: Props,
+    ref: any,
+) {
+    modalStyles.useVariants({
+        size: size as any,
+    });
+
+    const visibleRef = useRef<boolean>(isOpen);
+    const originalBodyOverflowRef = useRef<string | null>(null);
+    // const prevVisible = useRef<boolean | null>(null);
+    // const opacityRef = useRef(new Animated.Value(isOpen ? 1 : 0));
+    const hideModalRef = useRef<() => void>(() => {});
+
+    const dimensions = useWindowDimensions();
+
+    const { backdropStyle, contentContainerStyle, contentStyle } = useMemo(() => {
+        return {
+            animationScale: 1,
+            backdropStyle: [
+                modalStyles.backdrop,
+                {
+                    // @ts-ignore to resolve maximum callstack exceeded issue
+                    // TODO - find out why this is happening(it isn't happening on contentStyle)
+                    opacity: 1,
+                },
+                backdropStyleProp,
+            ],
+            contentContainerStyle: [
+                styles.baseFill,
+                modalStyles.contentContainer,
+                contentContainerStyleProp,
+            ],
+            contentStyle: [
+                modalStyles.modalContent,
+                { width: dimensions.width, opacity: 1 },
+                style,
+            ],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [backdropStyleProp, contentContainerStyleProp, dimensions.width, style, size]);
+
+    const handleBack = useCallback(() => {
+        if (dismissible) {
+            hideModalRef.current();
+        }
+        return true;
+    }, [dismissible]);
+
+    useBackHandler({
+        enabled: isOpen,
+        callback: handleBack,
+    });
+
+    // const showModal = useCallback(() => {
+    //     Animated.timing(opacityRef.current, {
+    //         toValue: 1,
+    //         duration: animationScale * animationDuration,
+    //         easing: Easing.out(Easing.cubic),
+    //         useNativeDriver: true,
+    //     }).start();
+    // }, [animationDuration, animationScale, opacityRef]);
+
+    const hideModal = useCallback(() => {
+        // Animated.timing(opacityRef.current, {
+        //     toValue: 0,
+        //     duration: animationScale * animationDuration,
+        //     easing: Easing.out(Easing.cubic),
+        //     useNativeDriver: true,
+        // }).start(({ finished }) => {
+        //     if (!finished) {
+        //         return;
+        //     }
+
+        //     if (isOpen && onClose) {
+        //         onClose();
+        //     }
+        // });
+
+        if (isOpen && onClose) {
+            onClose();
+        }
+    }, [isOpen, onClose]);
+
+    useEffect(() => {
+        hideModalRef.current = hideModal;
+    }, [hideModal]);
+
+    useEffect(() => {
+        visibleRef.current = isOpen;
+    });
+
+    useEffect(() => {
+        if (Platform.OS !== 'web' || globalThis.document === undefined) return;
+
+        const body = document.body;
+
+        if (isOpen) {
+            if (originalBodyOverflowRef.current === null) {
+                originalBodyOverflowRef.current = body.style.overflow;
+            }
+            body.style.overflow = 'hidden';
+        } else if (originalBodyOverflowRef.current !== null) {
+            body.style.overflow = originalBodyOverflowRef.current;
+            originalBodyOverflowRef.current = null;
+        }
+
+        return () => {
+            if (originalBodyOverflowRef.current !== null) {
+                body.style.overflow = originalBodyOverflowRef.current;
+                originalBodyOverflowRef.current = null;
+            }
+        };
+    }, [isOpen]);
+
+    // useEffect(() => {
+    //     if (prevVisible.current !== isOpen) {
+    //         if (isOpen) {
+    //             showModal();
+    //         } else {
+    //             hideModal();
+    //         }
+    //     }
+    //     prevVisible.current = isOpen;
+    // }, [hideModal, showModal, isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <View
+            pointerEvents={isOpen ? 'auto' : 'none'}
+            accessibilityViewIsModal
+            accessibilityLiveRegion="polite"
+            style={[styles.baseFill, modalStyles.container, containerStyle]}
+            onAccessibilityEscape={hideModal}
+            testID={testID}
+            ref={ref}
+            {...rest}>
+            <Pressable
+                style={styles.baseFill}
+                accessibilityLabel={overlayAccessibilityLabel}
+                accessibilityRole="button"
+                disabled={!dismissible}
+                onPress={dismissible ? hideModal : undefined}
+                importantForAccessibility="no">
+                <Animated.View testID={`${testID}-backdrop`} style={backdropStyle} />
+            </Pressable>
+            <View
+                style={contentContainerStyle}
+                pointerEvents="box-none"
+                testID={`${testID}-contentContainer`}>
+                <Surface style={contentStyle} elevation={elevation} testID={`${testID}-content`}>
+                    {children}
+                </Surface>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    baseFill: {
+        _web: {
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+    },
+});
+
+export default memo(forwardRef(Modal));

package/components/Modal/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import ModalDefault from './Modal';
+
+registerMoleculesComponents({
+    Modal: ModalDefault,
+});
+
+export const Modal = getRegisteredComponentWithFallback('Modal', ModalDefault);
+
+export type { Props as ModalProps } from './Modal';
+export { modalStyles } from './utils';

package/components/Modal/utils.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const modalStylesDefault = StyleSheet.create(theme => ({
+    root: {},
+    container: {
+        zIndex: 100,
+    },
+
+    backdrop: {
+        flex: 1,
+        backgroundColor: theme.colors.backdrop,
+    },
+
+    contentContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+    modalContent: {
+        minWidth: 280,
+        backgroundColor: theme.colors.surface,
+        overflow: 'hidden',
+
+        variants: {
+            size: {
+                md: {
+                    maxWidth: 448,
+                    borderRadius: 10,
+                },
+                lg: {
+                    maxWidth: 700,
+                    borderRadius: 10,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Modal: modalStylesDefault,
+});
+
+export const modalStyles = getRegisteredMoleculesComponentStyles('Modal');

package/components/NavigationRail/NavigationRail.tsx

@@ -0,0 +1,32 @@
+import { memo, type ReactElement } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { useSubcomponents } from '../../hooks';
+import { navigationRailStyles } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    children: ReactElement | ReactElement[];
+};
+const allowedChildren = [
+    'NavigationRail_Header',
+    'NavigationRail_Content',
+    'NavigationRail_Footer',
+];
+
+const NavigationRail = ({ children, style, ...rest }: Props) => {
+    const { NavigationRail_Header, NavigationRail_Content, NavigationRail_Footer } =
+        useSubcomponents({
+            children,
+            allowedChildren,
+        });
+
+    return (
+        <View style={[navigationRailStyles.root, style]} {...rest}>
+            {NavigationRail_Header[0]}
+            {NavigationRail_Content[0]}
+            {NavigationRail_Footer[0]}
+        </View>
+    );
+};
+
+export default memo(NavigationRail);

package/components/NavigationRail/NavigationRailContent.tsx

@@ -0,0 +1,25 @@
+import type { ComponentType } from 'react';
+import { type ScrollViewProps, View } from 'react-native';
+
+import { navigationRailContentStyles } from './utils';
+
+export type Props = ScrollViewProps & {
+    /**
+     * ContainerComponent prop allows to replace the default container used in DrawerContent - ScrollView
+     * */
+    ContainerComponent?: ComponentType<any>;
+};
+
+const NavigationRailContent = ({ style, children, ContainerComponent, ...rest }: Props) => {
+    const Container = ContainerComponent || View;
+
+    return (
+        <Container style={[navigationRailContentStyles.root, style]} {...rest}>
+            {children}
+        </Container>
+    );
+};
+
+NavigationRailContent.displayName = 'NavigationRail_Content';
+
+export default NavigationRailContent;

package/components/NavigationRail/NavigationRailFooter.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { navigationRailFooterStyles } from './utils';
+
+export type Props = ViewProps & {};
+
+const NavigationRailFooter = memo(({ style, children, ...rest }: Props) => {
+    return (
+        <View style={[navigationRailFooterStyles.root, style]} {...rest}>
+            {children}
+        </View>
+    );
+});
+
+NavigationRailFooter.displayName = 'NavigationRail_Footer';
+
+export default NavigationRailFooter;

package/components/NavigationRail/NavigationRailHeader.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { navigationRailHeaderStyles } from './utils';
+
+export type Props = ViewProps & {};
+
+const NavigationRailHeader = memo(({ style, children, ...rest }: Props) => {
+    return (
+        <View style={[navigationRailHeaderStyles.root, style]} {...rest}>
+            {children}
+        </View>
+    );
+});
+
+NavigationRailHeader.displayName = 'NavigationRail_Header';
+
+export default NavigationRailHeader;

package/components/NavigationRail/NavigationRailItem.tsx

@@ -0,0 +1,226 @@
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import type {
+    GestureResponderEvent,
+    PressableProps,
+    StyleProp,
+    TextProps,
+    ViewProps,
+    ViewStyle,
+} from 'react-native';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { useActionState } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { Badge, type BadgeProps } from '../Badge';
+import { Icon, type IconProps, type IconType } from '../Icon';
+import { StateLayer } from '../StateLayer';
+import { Text } from '../Text';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { navigationRailItemStyles } from './utils';
+
+export type Props = Omit<PressableProps, 'children' | 'disabled' | 'onPress'> & {
+    /**
+     * Whether the NavigationRailItem is active or not
+     * */
+    active?: boolean;
+    /**
+     * label of the NavigationRailItem, if not specified only the icon will be shown and active indicator with be circular
+     * */
+    label?: string;
+    /**
+     * name of the icon
+     * */
+    iconName: string;
+    /**
+     * type of the icon
+     * */
+    iconType?: IconType;
+    /**
+     * name of the active icon. If not specified, iconName will be used
+     * */
+    activeIconName?: string;
+    /**
+     * type of the active icon. If not specified, default iconType will be used
+     * */
+    activeIconType?: IconType;
+    /**
+     * Icon Props
+     * */
+    iconProps?: Omit<IconProps, 'name' | 'type'>;
+    /**
+     * size of the NavigationRailItem
+     * */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * onPress event for the icon, the same event will be triggered if it's click on the icon, the label or the overall item
+     * */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Icon Container Props
+     * */
+    iconContainerProps?: Partial<Omit<TouchableRippleProps, 'ref'>>;
+    /**
+     * Label Props
+     * */
+    labelProps?: Partial<TextProps>;
+    /**
+     * Whether to display the badge or not
+     * */
+    showBadge?: boolean;
+    /**
+     * Badge Label, if it's not specified and showBadge is true, sm badge will display
+     * */
+    badgeLabel?: BadgeProps['label'];
+    /**
+     * Badge Props
+     * */
+    badgeProps?: Omit<BadgeProps, 'label'>;
+    /**
+     * Props for the state layer
+     * */
+    stateLayerProps?: ViewProps;
+};
+
+const defaultIconSize = 24;
+const emptyObj = {};
+
+const NavigationRailItem = memo(
+    forwardRef(
+        (
+            {
+                active = false,
+                iconName,
+                iconType,
+                activeIconName,
+                activeIconType,
+                iconProps = emptyObj,
+                style,
+                label,
+                size = 'md',
+                onPress,
+                iconContainerProps = emptyObj,
+                labelProps = emptyObj,
+                showBadge = false,
+                badgeLabel,
+                badgeProps = emptyObj,
+                stateLayerProps = emptyObj,
+                testID,
+                ...rest
+            }: Props,
+            ref: any,
+        ) => {
+            const { hovered, actionsRef } = useActionState({ actionsToListen: ['hover'] });
+
+            const state = resolveStateVariant({
+                activeAndHovered: active && hovered,
+                active,
+                hovered,
+            });
+
+            navigationRailItemStyles.useVariants({
+                state: state as any,
+                size,
+            });
+
+            const { iconContainerStyle, iconStyle, badgeStyle, stateLayerStyle } = useMemo(() => {
+                return {
+                    iconContainerStyle: [
+                        navigationRailItemStyles.iconContainer,
+                        !label && {
+                            height: navigationRailItemStyles.iconContainer.width,
+                        },
+                        iconContainerProps.style,
+                    ],
+                    iconStyle: [navigationRailItemStyles.icon, iconProps.style],
+                    badgeStyle: [
+                        navigationRailItemStyles.badge,
+                        badgeLabel && badgeProps.size !== 'sm' && styles.badgeWithLabel,
+                        badgeProps.style,
+                    ] as StyleProp<ViewStyle>,
+                    stateLayerStyle: [navigationRailItemStyles.stateLayer, stateLayerProps.style],
+                };
+                // eslint-disable-next-line
+            }, [
+                active,
+                hovered,
+                badgeLabel,
+                badgeProps.size,
+                badgeProps.style,
+                iconContainerProps.style,
+                iconProps.style,
+                label,
+                state,
+                size,
+                stateLayerProps.style,
+            ]);
+
+            const onPressIconContainer = useCallback(
+                (e: GestureResponderEvent) => {
+                    iconContainerProps.onPress?.(e);
+                    onPress?.(e);
+                },
+                [iconContainerProps, onPress],
+            );
+
+            return (
+                <Pressable
+                    style={[navigationRailItemStyles.root, style] as StyleProp<ViewStyle>}
+                    onPress={onPress}
+                    accessibilityRole="none"
+                    testID={testID}
+                    {...rest}
+                    ref={ref}>
+                    <TouchableRipple
+                        borderless
+                        testID={testID ? `${testID}-iconContainer` : ''}
+                        {...iconContainerProps}
+                        ref={actionsRef}
+                        style={iconContainerStyle}
+                        onPress={onPressIconContainer}>
+                        <>
+                            <Icon
+                                size={defaultIconSize}
+                                testID={testID ? `${testID}-icon` : ''}
+                                {...iconProps}
+                                style={iconStyle}
+                                name={active ? activeIconName || iconName : iconName}
+                                type={active ? activeIconType || iconType : iconType}>
+                                {showBadge && (
+                                    <Badge label={badgeLabel} {...badgeProps} style={badgeStyle} />
+                                )}
+                            </Icon>
+                            <StateLayer
+                                testID={testID ? `${testID}-stateLayer` : ''}
+                                {...stateLayerProps}
+                                style={stateLayerStyle}
+                            />
+                        </>
+                    </TouchableRipple>
+                    <>
+                        {label && (
+                            <Text
+                                selectable={false}
+                                testID={testID ? `${testID}-label` : ''}
+                                {...labelProps}
+                                style={navigationRailItemStyles.label}>
+                                {label}
+                            </Text>
+                        )}
+                    </>
+                </Pressable>
+            );
+        },
+    ),
+);
+
+NavigationRailItem.displayName = 'NavigationRail_Item';
+
+const styles = StyleSheet.create({
+    badgeWithLabel: {
+        bottom: '55%',
+        left: '45%',
+    },
+});
+
+export default NavigationRailItem;

package/components/NavigationRail/index.tsx

@@ -0,0 +1,35 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import NavigationRailComponent from './NavigationRail';
+import NavigationRailContent from './NavigationRailContent';
+import NavigationRailFooter from './NavigationRailFooter';
+import NavigationRailHeader from './NavigationRailHeader';
+import NavigationRailItem from './NavigationRailItem';
+
+export const NavigationRailDefault = Object.assign(NavigationRailComponent, {
+    Item: NavigationRailItem,
+    Header: NavigationRailHeader,
+    Content: NavigationRailContent,
+    Footer: NavigationRailFooter,
+});
+
+registerMoleculesComponents({
+    NavigationRail: NavigationRailDefault,
+});
+
+export const NavigationRail = getRegisteredComponentWithFallback(
+    'NavigationRail',
+    NavigationRailDefault,
+);
+
+export type { Props as NavigationRailProps } from './NavigationRail';
+export type { Props as NavigationRailContentProps } from './NavigationRailContent';
+export type { Props as NavigationRailFooterProps } from './NavigationRailFooter';
+export type { Props as NavigationRailHeaderProps } from './NavigationRailHeader';
+export type { Props as NavigationRailItemProps } from './NavigationRailItem';
+export {
+    navigationRailContentStyles,
+    navigationRailFooterStyles,
+    navigationRailHeaderStyles,
+    navigationRailItemStyles,
+    navigationRailStyles,
+} from './utils';