react-native-molecules 0.5.0-beta.0

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,89 @@
+import {
+    type ComponentPropsWithRef,
+    createContext,
+    forwardRef,
+    memo,
+    type ReactElement,
+    useCallback,
+    useMemo,
+} from 'react';
+import { View } from 'react-native';
+
+import { useControlledValue, useSubcomponents } from '../../hooks';
+import { accordionStyles } from './utils';
+
+export type Props = Omit<ComponentPropsWithRef<typeof View>, 'children'> & {
+    children: ReactElement | ReactElement[];
+    expandedItemIds?: string | string[];
+    defaultExpandedItemIds?: string | string[];
+    onChange?: (expandedItems: string | string[]) => void;
+    multiple?: boolean;
+};
+
+const Accordion = (
+    {
+        children,
+        style,
+        expandedItemIds: expandedItemIdsProp,
+        defaultExpandedItemIds,
+        onChange: onChangeProp,
+        multiple = false,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const [expandedItemIds, onChange] = useControlledValue({
+        value: expandedItemIdsProp,
+        defaultValue: defaultExpandedItemIds,
+        onChange: onChangeProp,
+    });
+
+    const { AccordionItem } = useSubcomponents({ children, allowedChildren: ['AccordionItem'] });
+
+    const onPressItem = useCallback(
+        (id: string) => {
+            const isSelected = Array.isArray(expandedItemIds)
+                ? expandedItemIds.find(_id => _id === id)
+                : expandedItemIds === id;
+
+            const multipleValue = Array.isArray(expandedItemIds)
+                ? isSelected
+                    ? expandedItemIds.filter(_id => _id !== id)
+                    : [...expandedItemIds, id]
+                : [id];
+
+            const singleValue = !isSelected ? id : '';
+
+            onChange(multiple ? multipleValue : singleValue);
+        },
+        [multiple, onChange, expandedItemIds],
+    );
+
+    const contextValue = useMemo(() => {
+        return {
+            expandedItemIds,
+            onChange,
+            onPressItem,
+            multiple,
+        };
+    }, [expandedItemIds, multiple, onChange, onPressItem]);
+
+    return (
+        <View style={[accordionStyles.root, style]} {...rest} ref={ref}>
+            <AccordionContext.Provider value={contextValue}>
+                {AccordionItem}
+            </AccordionContext.Provider>
+        </View>
+    );
+};
+
+export type AccordionContextType = {
+    expandedItemIds: string | string[] | undefined;
+    onChange: ((expandedItems: string | string[]) => void) | undefined;
+    onPressItem: ((id: string) => void) | undefined;
+    multiple: boolean;
+} | null;
+
+export const AccordionContext = createContext<AccordionContextType>(null);
+
+export default memo(forwardRef(Accordion));

package/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,94 @@
+import {
+    createContext,
+    forwardRef,
+    memo,
+    ReactElement,
+    ReactNode,
+    useContext,
+    useEffect,
+    useMemo,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControlledValue, useSubcomponents } from '../../hooks';
+import type { WithElements } from '../../types';
+import { AccordionContext } from './Accordion';
+import { accordionItemStyles } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> &
+    WithElements<ReactNode> & {
+        id?: string;
+        expanded?: boolean;
+        setExpanded?: (expanded: boolean) => void;
+        children: ReactElement | ReactElement[];
+    };
+
+const AccordionItem = memo(
+    forwardRef(
+        (
+            {
+                id,
+                expanded: expandedProp,
+                setExpanded: setExpandedProp,
+                children,
+                style,
+                ...rest
+            }: Props,
+            ref: any,
+        ) => {
+            const [expanded, onExpandedChange] = useControlledValue({
+                value: expandedProp,
+                onChange: setExpandedProp,
+            });
+
+            const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
+
+            const groupContext = useContext(AccordionContext);
+
+            const { AccordionItem_Header, AccordionItem_Content } = useSubcomponents({
+                children,
+                allowedChildren: ['AccordionItem_Header', 'AccordionItem_Content'],
+            });
+
+            useEffect(() => {
+                if (groupContext !== null && !id) {
+                    throw new Error(
+                        'AccordionItem is used inside Accordion without specifying an id prop.',
+                    );
+                }
+            }, [groupContext, id]);
+
+            const contextValue = useMemo(() => {
+                const isExpanded = groupContext
+                    ? Array.isArray(groupContext.expandedItemIds)
+                        ? !!groupContext.expandedItemIds.find(_id => _id === id)
+                        : groupContext.expandedItemIds === id
+                    : expandedInternal;
+
+                const handleExpandChange =
+                    groupContext && id !== undefined
+                        ? () => groupContext.onPressItem?.(id)
+                        : onExpandedChange;
+
+                return { expanded: isExpanded, onExpandedChange: handleExpandChange };
+            }, [groupContext, id, expandedInternal, onExpandedChange]);
+
+            return (
+                <View style={[accordionItemStyles.root, style]} {...rest} ref={ref}>
+                    <AccordionItemContext.Provider value={contextValue}>
+                        {AccordionItem_Header[0]}
+                        {contextValue.expanded ? AccordionItem_Content[0] : null}
+                    </AccordionItemContext.Provider>
+                </View>
+            );
+        },
+    ),
+);
+
+export const AccordionItemContext = createContext({
+    expanded: false,
+    onExpandedChange: (_expanded: boolean) => {},
+});
+
+AccordionItem.displayName = 'AccordionItem';
+
+export default AccordionItem;

package/components/Accordion/AccordionItemContent.tsx

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

package/components/Accordion/AccordionItemHeader.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, memo, ReactNode, useCallback, useContext, useMemo } from 'react';
+import type { WithElements } from '../../types';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { AccordionItemContext } from './AccordionItem';
+import { View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import { Text } from '../Text';
+import { accordionItemHeaderStyles } from './utils';
+import { resolveStateVariant } from '../../utils';
+import { useActionState } from '../../hooks';
+
+export type AccordionHeaderElementProps = {
+    color: string;
+    expanded: boolean;
+};
+
+type Element = ReactNode | ((props: AccordionHeaderElementProps) => ReactNode);
+
+export type Props = Omit<TouchableRippleProps, 'children'> &
+    WithElements<Element> & {
+        children: ReactNode;
+        leftElementStyle?: ViewStyle;
+        rightElementStyle?: ViewStyle;
+        contentStyle?: TextStyle;
+    };
+
+const emptyArr = {};
+
+const AccordionItemHeader = memo(
+    forwardRef(
+        (
+            {
+                left,
+                right,
+                style,
+                children,
+                leftElementStyle: leftElementStyleProp = emptyArr,
+                rightElementStyle: rightElementStyleProp = emptyArr,
+                contentStyle: contentStyleProp = emptyArr,
+                onPress: onPressProp,
+                ...rest
+            }: Props,
+            ref: any,
+        ) => {
+            const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+
+            const { expanded, onExpandedChange } = useContext(AccordionItemContext);
+
+            const state = resolveStateVariant({
+                expandedAndHovered: expanded && hovered,
+                expanded,
+                hovered,
+            });
+
+            // @ts-ignore // TODO - fix this issue
+            accordionItemHeaderStyles.useVariants({
+                state,
+            });
+
+            const onPress = useCallback(
+                (e: GestureResponderEvent) => {
+                    onPressProp?.(e);
+
+                    onExpandedChange(!expanded);
+                },
+                [expanded, onPressProp, onExpandedChange],
+            );
+
+            const { containerStyle } = useMemo(() => {
+                return {
+                    containerStyle: [accordionItemHeaderStyles.root, style],
+                };
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, [style, state]);
+
+            const elementProps = useMemo(
+                () => ({
+                    color: accordionItemHeaderStyles.root.elementColor,
+                    expanded,
+                }),
+                [expanded],
+            );
+
+            return (
+                <TouchableRipple
+                    style={containerStyle}
+                    {...rest}
+                    onPress={onPress}
+                    ref={actionsRef}>
+                    <>
+                        {left && (
+                            <View
+                                style={[
+                                    accordionItemHeaderStyles.leftElement,
+                                    leftElementStyleProp,
+                                ]}>
+                                {typeof left === 'function' ? left(elementProps) : left}
+                            </View>
+                        )}
+                        <Text
+                            style={[accordionItemHeaderStyles.content, contentStyleProp]}
+                            selectable={false}>
+                            {children}
+                        </Text>
+                        {right && (
+                            <View
+                                style={[
+                                    accordionItemHeaderStyles.rightElement,
+                                    rightElementStyleProp,
+                                ]}>
+                                {typeof right === 'function' ? right(elementProps) : right}
+                            </View>
+                        )}
+                    </>
+                </TouchableRipple>
+            );
+        },
+    ),
+);
+
+AccordionItemHeader.displayName = 'AccordionItem_Header';
+
+export default AccordionItemHeader;

package/components/Accordion/index.tsx

@@ -0,0 +1,36 @@
+import AccordionItemComponent from './AccordionItem';
+import AccordionItemHeader from './AccordionItemHeader';
+import AccordionItemContent from './AccordionItemContent';
+import AccordionDefault from './Accordion';
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+
+const AccordionItemDefault = Object.assign(AccordionItemComponent, {
+    Header: AccordionItemHeader,
+    Content: AccordionItemContent,
+});
+
+registerMoleculesComponents({
+    Accordion: AccordionDefault,
+    AccordionItem: AccordionItemDefault,
+});
+
+export const Accordion = getRegisteredComponentWithFallback('Accordion', AccordionDefault);
+export const AccordionItem = getRegisteredComponentWithFallback(
+    'AccordionItem',
+    AccordionItemDefault,
+);
+
+export type { Props as AccordionProps } from './Accordion';
+export type { Props as AccordionItemProps } from './AccordionItem';
+export type {
+    Props as AccordionItemHeaderProps,
+    AccordionHeaderElementProps,
+} from './AccordionItemHeader';
+export type { Props as AccordionItemContentProps } from './AccordionItemContent';
+
+export {
+    accordionStyles,
+    accordionItemStyles,
+    accordionItemHeaderStyles,
+    accordionItemContentStyles,
+} from './utils';

package/components/Accordion/utils.ts

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const accordionStylesDefault = StyleSheet.create({
+    root: {},
+});
+const accordionItemStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+const accordionItemHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        minHeight: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.full,
+        paddingLeft: theme.spacings['4'],
+        paddingRight: theme.spacings['6'],
+        elementColor: theme.colors.onSurfaceVariant,
+        state: {
+            expandedAndHovered: {
+                backgroundColor: theme.colors.stateLayer.hover.onSurface,
+            },
+            expanded: {},
+            hovered: {
+                backgroundColor: theme.colors.stateLayer.hover.onSurface,
+            },
+        },
+    },
+
+    leftElement: {
+        marginRight: theme.spacings['3'],
+    },
+    rightElement: {
+        marginLeft: theme.spacings['3'],
+    },
+    content: {
+        color: theme.colors.onSurfaceVariant,
+        ...theme.typescale.titleMedium,
+    },
+}));
+
+const accordionItemContentStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingLeft: theme.spacings['6'],
+    },
+}));
+
+registerComponentsStyles({
+    Accordion: accordionStylesDefault,
+    AccordionItem: accordionItemStylesDefault,
+    AccordionItem_Header: accordionItemHeaderStylesDefault,
+    AccordionItem_Content: accordionItemContentStylesDefault,
+});
+
+export const accordionStyles = getRegisteredMoleculesComponentStyles('Accordion');
+export const accordionItemStyles = getRegisteredMoleculesComponentStyles('AccordionItem');
+export const accordionItemHeaderStyles =
+    getRegisteredMoleculesComponentStyles('AccordionItem_Header');
+export const accordionItemContentStyles =
+    getRegisteredMoleculesComponentStyles('AccordionItem_Content');

package/components/ActivityIndicator/ActivityIndicator.ios.tsx

@@ -0,0 +1 @@
+export { ActivityIndicator as default } from 'react-native';

package/components/ActivityIndicator/ActivityIndicator.tsx

@@ -0,0 +1,200 @@
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+    type ActivityIndicatorProps,
+    Animated,
+    Easing,
+    Platform,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import AnimatedSpinner from './AnimatedSpinner';
+
+export type Props = ActivityIndicatorProps & {
+    /**
+     * Whether to show the indicator or hide it.
+     */
+    animating?: boolean;
+    /**
+     * The color of the spinner.
+     */
+    color?: string;
+    /**
+     * Size of the indicator.
+     */
+    size?: 'small' | 'large' | number;
+    /**
+     * Whether the indicator should hide when not animating.
+     */
+    hidesWhenStopped?: boolean;
+    style?: ViewStyle;
+};
+
+const DURATION = 2400;
+
+const mapIndicatorSize = (indicatorSize: 'small' | 'large' | number | undefined) => {
+    if (typeof indicatorSize === 'string') {
+        return indicatorSize === 'small' ? 24 : 48;
+    }
+    return indicatorSize ? indicatorSize : 24;
+};
+
+/**
+ * Activity indicator is used to present progress of some activity in the app.
+ * It can be used as a drop-in for the ActivityIndicator shipped with React Native.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/activity-indicator.gif" style="width: 100px;" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ActivityIndicator = ({
+    animating = true,
+    color: indicatorColorProp,
+    hidesWhenStopped = true,
+    size: indicatorSize = 'small',
+    style: styleProp,
+    ...rest
+}: Props) => {
+    // const componentStyles = useComponentStyles('ActivityIndicator', [
+    //     styleProp,
+    //     { normalizedIndicatorColorProp: indicatorColorProp },
+    // ]);
+    const componentStyles = activityIndicatorStyles;
+    const { current: timer } = useRef<Animated.Value>(new Animated.Value(0));
+    const { current: fade } = useRef<Animated.Value>(
+        new Animated.Value(!animating && hidesWhenStopped ? 0 : 1),
+    );
+
+    const rotation = useRef<Animated.CompositeAnimation | undefined>(undefined);
+
+    const size = mapIndicatorSize(indicatorSize);
+
+    const { color, viewStyle, animatedViewStyle } = useMemo(() => {
+        return {
+            color: indicatorColorProp,
+            viewStyle: [componentStyles.container, styleProp],
+            animatedViewStyle: [{ width: size, height: size, opacity: fade }],
+        };
+    }, [componentStyles.container, fade, indicatorColorProp, size, styleProp]);
+
+    const startRotation = useCallback(() => {
+        // Show indicator
+        Animated.timing(fade, {
+            duration: 200,
+            toValue: 1,
+            isInteraction: false,
+            useNativeDriver: true,
+        }).start();
+
+        // Circular animation in loop
+        if (rotation.current) {
+            timer.setValue(0);
+            // $FlowFixMe
+            Animated.loop(rotation.current).start();
+        }
+    }, [fade, timer]);
+
+    const stopRotation = () => {
+        if (rotation.current) {
+            rotation.current.stop();
+        }
+    };
+
+    useEffect(() => {
+        if (rotation.current === undefined) {
+            // Circular animation in loop
+            rotation.current = Animated.timing(timer, {
+                duration: DURATION,
+                easing: Easing.linear,
+                // Animated.loop does not work if useNativeDriver is true on web
+                useNativeDriver: Platform.OS !== 'web',
+                toValue: 1,
+                isInteraction: false,
+            });
+        }
+
+        if (animating) {
+            startRotation();
+        } else if (hidesWhenStopped) {
+            // Hide indicator first and then stop rotation
+            Animated.timing(fade, {
+                duration: 200,
+                toValue: 0,
+                useNativeDriver: true,
+                isInteraction: false,
+            }).start(stopRotation);
+        } else {
+            stopRotation();
+        }
+
+        return () => {
+            if (animating) stopRotation();
+        };
+    }, [animating, fade, hidesWhenStopped, startRotation, timer]);
+
+    // console.log({ layer: defaultStyles.layer });
+
+    return (
+        <View
+            style={viewStyle}
+            {...rest}
+            accessible
+            accessibilityRole="progressbar"
+            accessibilityState={{ busy: animating }}>
+            <Animated.View style={animatedViewStyle} collapsable={false}>
+                {[0, 1].map(index => {
+                    // Thanks to https://github.com/n4kz/react-native-indicators for the great work
+                    return (
+                        <AnimatedSpinner
+                            key={index}
+                            style={componentStyles.root}
+                            index={index}
+                            size={size}
+                            color={color}
+                            timer={timer}
+                            // style={defaultStyles.layer}
+                            duration={DURATION}
+                        />
+                    );
+                })}
+            </Animated.View>
+        </View>
+    );
+};
+
+export const activityIndicatorStylesDefault = StyleSheet.create(theme => ({
+    spinner: {
+        borderColor: theme.colors.primary,
+    },
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    layer: {
+        ...StyleSheet.absoluteFillObject,
+
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+}));
+
+registerComponentStyles('ActivityIndicator', activityIndicatorStylesDefault);
+
+export const activityIndicatorStyles = getRegisteredMoleculesComponentStyles('ActivityIndicator');
+
+export default memo(ActivityIndicator);