react-native-molecules 0.5.0-beta.0

package/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,188 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,106 @@
+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));