react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/Popover/Popover.native.tsx

@@ -1,185 +0,0 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { AppState, Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native';
-import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
-
-import { Portal } from '../Portal';
-import {
-    DEFAULT_ARROW_SIZE,
-    popoverDefaultStyles,
-    type PopoverProps,
-    useArrowStyles,
-    usePopover,
-} from './common';
-
-const Popover = ({
-    triggerRef,
-    children,
-    isOpen,
-    onClose,
-    position = 'bottom',
-    align = 'center',
-    style,
-    showArrow = false,
-    arrowSize = DEFAULT_ARROW_SIZE,
-    inverted = false,
-    triggerDimensions,
-    offset = 8,
-    ...rest
-}: PopoverProps) => {
-    const {
-        popoverLayoutRef,
-        targetLayoutRef,
-        actualPositionRef,
-        calculatedPosition,
-        calculateAndSetPosition,
-        handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
-
-    const popoverRef = useRef<View>(null);
-
-    const measureTarget = useCallback(() => {
-        if (triggerRef.current) {
-            triggerRef.current.measure(
-                (
-                    _fx: number,
-                    _fy: number,
-                    width: number,
-                    height: number,
-                    px: number,
-                    py: number,
-                ) => {
-                    if (width !== 0 || height !== 0) {
-                        const newLayout = { x: px, y: py, width, height };
-                        const changed =
-                            !targetLayoutRef.current ||
-                            targetLayoutRef.current.x !== newLayout.x ||
-                            targetLayoutRef.current.y !== newLayout.y ||
-                            targetLayoutRef.current.width !== newLayout.width ||
-                            targetLayoutRef.current.height !== newLayout.height;
-
-                        if (changed) {
-                            targetLayoutRef.current = newLayout;
-                            calculateAndSetPosition();
-                        }
-                    } else {
-                        targetLayoutRef.current = null;
-                        calculateAndSetPosition();
-                    }
-                },
-                () => {
-                    console.error('Failed to measure target element for Popover.');
-                    targetLayoutRef.current = null;
-                    calculateAndSetPosition();
-                },
-            );
-        } else {
-            targetLayoutRef.current = null;
-            calculateAndSetPosition();
-        }
-    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
-
-    useLayoutEffect(() => {
-        if (isOpen) {
-            measureTarget();
-        }
-    }, [isOpen, measureTarget, triggerDimensions]);
-
-    useEffect(() => {
-        if (!isOpen) return;
-        const subscription = Dimensions.addEventListener('change', measureTarget);
-        return () => {
-            if (typeof subscription?.remove === 'function') {
-                subscription.remove();
-            }
-        };
-    }, [isOpen, measureTarget]);
-
-    useEffect(() => {
-        if (!isOpen || Platform.OS === 'web') return;
-        const handleAppStateChange = (nextAppState: string) => {
-            if (nextAppState === 'active') {
-                setTimeout(measureTarget, 50);
-            }
-        };
-        const subscription = AppState.addEventListener('change', handleAppStateChange);
-        return () => {
-            if (typeof subscription?.remove === 'function') {
-                subscription.remove();
-            }
-        };
-    }, [isOpen, measureTarget]);
-
-    const arrowStyles = useArrowStyles({
-        showArrow,
-        arrowSize,
-        style,
-        calculatedPosition,
-        targetLayoutRef,
-        popoverLayoutRef,
-        actualPositionRef,
-    });
-
-    const popoverStyle = calculatedPosition ?? popoverDefaultStyles;
-    const Wrapper = inverted ? ScopedTheme : Fragment;
-
-    if (!isOpen && popoverStyle.opacity === 0) {
-        return null;
-    }
-
-    const handleOutsidePress = () => {
-        if (isOpen && onClose) {
-            onClose();
-        }
-    };
-
-    return (
-        <Portal>
-            <Wrapper
-                {...(inverted
-                    ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
-                    : ({} as { name: 'light' }))}>
-                <Pressable onPress={handleOutsidePress} style={styles.overlay} />
-
-                <View
-                    ref={popoverRef}
-                    onLayout={handlePopoverLayout}
-                    style={[styles.popoverContainer, style, popoverStyle]}
-                    {...rest}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
-        </Portal>
-    );
-};
-
-const styles = StyleSheet.create({
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-    },
-    popoverContainer: {
-        ...popoverDefaultStyles,
-        backgroundColor: 'white',
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 1)',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.3,
-        shadowRadius: 3.84,
-        elevation: 5,
-        zIndex: 100,
-    },
-});
-
-export default memo(Popover);

package/components/RadioButton/RadioButton.tsx

@@ -1,138 +0,0 @@
-import { forwardRef, memo, useContext, useMemo } from 'react';
-import { Platform } from 'react-native';
-
-import RadioButtonAndroid from './RadioButtonAndroid';
-import { RadioButtonContext } from './RadioButtonGroup';
-import RadioButtonIOS from './RadioButtonIOS';
-import { handlePress, isChecked } from './utils';
-
-export type Props = {
-    /**
-     * Value of the radio button
-     */
-    value: string;
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: () => void;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-};
-
-/**
- * Radio buttons allow the selection a single option from a set.
- *
- * <div class="screenshots">
- *   <figure>
- *     <img src="screenshots/radio-enabled.android.png" />
- *     <figcaption>Android (enabled)</figcaption>
- *   </figure>
- *   <figure>
- *     <img src="screenshots/radio-disabled.android.png" />
- *     <figcaption>Android (disabled)</figcaption>
- *   </figure>
- *   <figure>
- *     <img src="screenshots/radio-enabled.ios.png" />
- *     <figcaption>iOS (enabled)</figcaption>
- *   </figure>
- *   <figure>
- *     <img src="screenshots/radio-disabled.ios.png" />
- *     <figcaption>iOS (disabled)</figcaption>
- *   </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { RadioButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [checked, setChecked] = React.useState('first');
- *
- *   return (
- *     <View>
- *       <RadioButton
- *         value="first"
- *         status={ checked === 'first' ? 'checked' : 'unchecked' }
- *         onPress={() => setChecked('first')}
- *       />
- *       <RadioButton
- *         value="second"
- *         status={ checked === 'second' ? 'checked' : 'unchecked' }
- *         onPress={() => setChecked('second')}
- *       />
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-
-const Button = Platform.OS === 'ios' ? RadioButtonIOS : RadioButtonAndroid;
-
-const RadioButton = ({ value, status, disabled, onPress, testID, ...rest }: Props, ref: any) => {
-    const context = useContext(RadioButtonContext);
-
-    const checked = useMemo(
-        () =>
-            isChecked({
-                contextValue: context?.value,
-                status,
-                value,
-            }) === 'checked',
-        [context?.value, status, value],
-    );
-    const onRadioPress = useMemo(
-        () =>
-            disabled
-                ? undefined
-                : () => {
-                      handlePress({
-                          onPress,
-                          onValueChange: context?.onValueChange,
-                          value,
-                      });
-                  },
-        [disabled, onPress, context?.onValueChange, value],
-    );
-
-    const accessibilityState = useMemo(() => ({ disabled, checked }), [checked, disabled]);
-
-    return (
-        <Button
-            {...rest}
-            checked={checked}
-            onPress={onRadioPress}
-            status={status}
-            disabled={disabled}
-            borderless
-            accessibilityRole="radio"
-            accessibilityState={accessibilityState}
-            accessibilityLiveRegion="polite"
-            testID={testID}
-            ref={ref}
-        />
-    );
-};
-
-export default memo(forwardRef(RadioButton));

package/components/RadioButton/RadioButtonAndroid.tsx

@@ -1,188 +0,0 @@
-import setColor from 'color';
-import { forwardRef, memo, type PropsWithoutRef, useEffect, useMemo, useRef } from 'react';
-import type { ViewProps } from 'react-native';
-import { Animated, StyleSheet, View } from 'react-native';
-
-import { useActionState } from '../../hooks';
-import { resolveStateVariant } from '../../utils';
-import { tokenStylesParser } from '../../utils/tokenStylesParser';
-import { StateLayer } from '../StateLayer';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { ANIMATION_DURATION, radioButtonStyles } from './utils';
-
-export type Props = Omit<TouchableRippleProps, 'children'> & {
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-    /**
-     * passed from RadioButton component
-     */
-    checked: boolean;
-    onPress: (() => void) | undefined;
-    /**
-     * props for the stateLayer
-     */
-    stateLayerProps?: PropsWithoutRef<ViewProps>;
-};
-
-const BORDER_WIDTH = 2;
-
-const RadioButtonAndroid = (
-    {
-        disabled = false,
-        status,
-        testID,
-        color: colorProp,
-        uncheckedColor: uncheckedColorProp,
-        style,
-        checked,
-        onPress,
-        stateLayerProps = {},
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
-    const { current: borderAnim } = useRef<Animated.Value>(new Animated.Value(BORDER_WIDTH));
-
-    const { current: radioAnim } = useRef<Animated.Value>(new Animated.Value(1));
-
-    const isFirstRendering = useRef<boolean>(true);
-
-    const state = resolveStateVariant({
-        disabled,
-        checkedAndHovered: checked && hovered,
-        checked,
-        hovered,
-    });
-
-    radioButtonStyles.useVariants({
-        state: state as any,
-    });
-
-    const {
-        containerStyles,
-        rippleColor,
-        radioStyles,
-        dotStyles,
-        dotContainerStyles,
-        stateLayerStyle,
-    } = useMemo(() => {
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = setColor(_color).alpha(0.32).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
-        return {
-            containerStyles: [radioButtonStyles.container, radioButtonStyles.root, style],
-            rippleColor: _rippleColor,
-            radioStyles: [
-                radioButtonStyles.radio,
-                {
-                    borderWidth: borderAnim,
-                },
-                tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp, 'borderColor'),
-            ],
-            dotContainerStyles: [StyleSheet.absoluteFill, radioButtonStyles.radioContainer],
-            dotStyles: [
-                radioButtonStyles.dot,
-                {
-                    transform: [{ scale: radioAnim }],
-                },
-                tokenStylesParser.getColor(
-                    checked ? colorProp : uncheckedColorProp,
-                    'backgroundColor',
-                ),
-            ],
-            stateLayerStyle: [radioButtonStyles.stateLayer, stateLayerProps?.style],
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        borderAnim,
-        checked,
-        colorProp,
-        radioAnim,
-        stateLayerProps?.style,
-        uncheckedColorProp,
-        style,
-        state,
-    ]);
-
-    useEffect(() => {
-        // Do not run animation on very first rendering
-        if (isFirstRendering.current) {
-            isFirstRendering.current = false;
-            return;
-        }
-
-        if (status === 'checked') {
-            radioAnim.setValue(1.2);
-
-            Animated.timing(radioAnim, {
-                toValue: 1,
-                duration: ANIMATION_DURATION,
-                useNativeDriver: true,
-            }).start();
-        } else {
-            borderAnim.setValue(10);
-
-            Animated.timing(borderAnim, {
-                toValue: BORDER_WIDTH,
-                duration: ANIMATION_DURATION,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [status, borderAnim, radioAnim]);
-
-    return (
-        <TouchableRipple
-            {...rest}
-            ref={actionsRef}
-            rippleColor={rippleColor}
-            onPress={onPress}
-            style={containerStyles}
-            testID={testID}>
-            <>
-                <Animated.View style={radioStyles}>
-                    {checked ? (
-                        <View style={dotContainerStyles}>
-                            <Animated.View style={dotStyles} />
-                        </View>
-                    ) : null}
-                </Animated.View>
-
-                <StateLayer
-                    testID={testID ? `${testID}-stateLayer` : ''}
-                    {...stateLayerProps}
-                    style={stateLayerStyle}
-                />
-            </>
-        </TouchableRipple>
-    );
-};
-
-RadioButtonAndroid.displayName = 'RadioButton_Android';
-
-export default memo(forwardRef(RadioButtonAndroid));

package/components/RadioButton/RadioButtonGroup.tsx

@@ -1,98 +0,0 @@
-import { createContext, memo, type ReactNode, useMemo } from 'react';
-import { View, type ViewProps } from 'react-native';
-
-import { useControlledValue } from '../../hooks';
-
-export type Props = ViewProps & {
-    /**
-     * Function to execute on selection change.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Value of the currently selected radio button.
-     */
-    value?: string;
-    /**
-     * Default selected radio button
-     */
-    defaultValue?: string;
-    /**
-     * React elements containing radio buttons.
-     */
-    children: ReactNode;
-};
-
-export type RadioButtonContextType = {
-    value: string;
-    onValueChange: (item: string) => void;
-};
-
-export const RadioButtonContext = createContext<RadioButtonContextType>(null as any);
-
-/**
- * Radio button group allows to control a group of radio buttons.
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/radio-button-group-android.gif" />
- *  <figcaption>Android</figcaption>
- *   </figure>
- *   <figure>
- *     <img class="medium" src="screenshots/radio-button-group-ios.gif" />
- *  <figcaption>iOS</figcaption>
- *   </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { RadioButton, Text } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('first');
- *
- *   return (
- *     <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
- *       <View>
- *         <Text>First</Text>
- *         <RadioButton value="first" />
- *       </View>
- *       <View>
- *         <Text>Second</Text>
- *         <RadioButton value="second" />
- *       </View>
- *     </RadioButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const RadioButtonGroup = ({
-    value: valueProp,
-    defaultValue,
-    onValueChange: onValueChangeProp,
-    children,
-    ...rest
-}: Props) => {
-    const [value, onValueChange] = useControlledValue({
-        value: valueProp,
-        defaultValue,
-        onChange: onValueChangeProp,
-    });
-
-    const contextValue = useMemo(() => ({ value, onValueChange }), [onValueChange, value]);
-
-    return (
-        <RadioButtonContext.Provider value={contextValue}>
-            <View accessibilityRole="radiogroup" {...rest}>
-                {children}
-            </View>
-        </RadioButtonContext.Provider>
-    );
-};
-
-RadioButtonGroup.displayName = 'RadioButton_Group';
-
-export default memo(RadioButtonGroup);

package/components/RadioButton/RadioButtonIOS.tsx

@@ -1,106 +0,0 @@
-import setColor from 'color';
-import { forwardRef, memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { resolveStateVariant } from '../../utils';
-import { tokenStylesParser } from '../../utils/tokenStylesParser';
-import { Icon } from '../Icon';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { DEFAULT_ICON_SIZE, radioButtonStyles } from './utils';
-
-export type Props = Omit<TouchableRippleProps, 'children'> & {
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-    /**
-     * passed from RadioButton component
-     */
-    checked: boolean;
-    onPress: (() => void) | undefined;
-};
-
-const RadioButtonIOS = (
-    {
-        disabled,
-        style,
-        color: colorProp,
-        checked,
-        onPress,
-        uncheckedColor: uncheckedColorProp,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const state = resolveStateVariant({
-        disabled: !!disabled,
-        checked,
-    });
-    radioButtonStyles.useVariants({
-        state: state as any,
-    });
-
-    const { containerStyle, iconContainerStyle, iconStyle, rippleColor } = useMemo(() => {
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = setColor(_color).alpha(0.32).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
-        return {
-            containerStyle: [styles.container, radioButtonStyles.root, style],
-            iconContainerStyle: { opacity: checked ? 1 : 0 },
-            iconStyle: [radioButtonStyles.icon, _color],
-            rippleColor: _rippleColor,
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [checked, colorProp, style, state, uncheckedColorProp]);
-
-    return (
-        <TouchableRipple
-            {...rest}
-            ref={ref}
-            rippleColor={rippleColor}
-            onPress={onPress}
-            style={containerStyle}>
-            <View style={iconContainerStyle}>
-                <Icon
-                    allowFontScaling={false}
-                    name="check"
-                    size={DEFAULT_ICON_SIZE}
-                    style={iconStyle}
-                />
-            </View>
-        </TouchableRipple>
-    );
-};
-
-RadioButtonIOS.displayName = 'RadioButton_IOS';
-
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 18,
-        padding: 6,
-    },
-});
-
-export default memo(forwardRef(RadioButtonIOS));