react-native-molecules 0.5.0-beta.27 → 0.5.0-beta.29

package/components/RadioButton/RadioButtonItem.tsx

@@ -1,232 +0,0 @@
-import { forwardRef, memo, useCallback, useContext, useMemo } from 'react';
-import { type StyleProp, StyleSheet, type TextStyle, View, type ViewStyle } from 'react-native';
-
-import { resolveStateVariant } from '../../utils';
-import { Text } from '../Text';
-import { TouchableRipple } from '../TouchableRipple';
-import RadioButton from './RadioButton';
-import { RadioButtonContext } from './RadioButtonGroup';
-import { handlePress, isChecked, radioButtonItemStyles } from './utils';
-
-export type Props = {
-    /**
-     * Value of the radio button.
-     */
-    value: string;
-    /**
-     * Label to be displayed on the item.
-     */
-    label: string;
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: () => void;
-    /**
-     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
-     */
-    accessibilityLabel?: string;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Additional styles for container View.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * TouchableRipple style
-     */
-    rippleContainerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Style that is passed to Label element.
-     */
-    labelStyle?: StyleProp<TextStyle>;
-    /**
-     * Style that is passed to Container element.
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-    /**
-     * Radio button control position.
-     */
-    position?: 'leading' | 'trailing';
-};
-
-/**
- * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/radio-item.ios.png" />
- *     <figcaption>Pressed</figcaption>
- *   </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { RadioButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('first');
- *
- *   return (
- *     <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
- *       <RadioButton.Item label="First item" value="first" />
- *       <RadioButton.Item label="Second item" value="second" />
- *     </RadioButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const RadioButtonItem = (
-    {
-        value,
-        label,
-        style: styleProp,
-        labelStyle,
-        onPress,
-        disabled,
-        color,
-        uncheckedColor,
-        status,
-        accessibilityLabel = label,
-        testID,
-        position = 'trailing',
-        containerStyle,
-        rippleContainerStyle,
-    }: Props,
-    ref: any,
-) => {
-    const context = useContext(RadioButtonContext);
-
-    const checked = useMemo(
-        () =>
-            isChecked({
-                contextValue: context?.value,
-                status,
-                value,
-            }) === 'checked',
-        [context?.value, status, value],
-    );
-
-    const state = resolveStateVariant({
-        disabled: !!disabled,
-        checked,
-    });
-
-    radioButtonItemStyles.useVariants({
-        state: state as any,
-    });
-
-    // const componentStyles = useComponentStyles('RadioButton_Item', styleProp, {
-    //     state: resolveStateVariant({
-    //         disabled: !!disabled,
-    //         checked,
-    //     }),
-    // });
-
-    const isLeading = position === 'leading';
-
-    const { containerStyles, labelStyles, accessibilityState, radioButtonProps } = useMemo(() => {
-        return {
-            containerStyles: [radioButtonItemStyles.root, styles.container, containerStyle],
-            labelStyles: [
-                styles.label,
-                radioButtonItemStyles.label,
-                {
-                    textAlign: isLeading ? 'right' : 'left',
-                },
-                labelStyle,
-            ] as StyleProp<TextStyle>,
-            accessibilityState: {
-                checked,
-                disabled,
-            },
-            radioButtonProps: {
-                value,
-                disabled,
-                status,
-                color,
-                uncheckedColor,
-                checked,
-                style: styleProp,
-            },
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        checked,
-        color,
-        containerStyle,
-        disabled,
-        isLeading,
-        labelStyle,
-        status,
-        styleProp,
-        uncheckedColor,
-        value,
-        state,
-    ]);
-
-    const onRadioPress = useCallback(
-        () =>
-            handlePress({
-                onPress: onPress,
-                onValueChange: context?.onValueChange,
-                value,
-            }),
-        [onPress, context?.onValueChange, value],
-    );
-
-    return (
-        <TouchableRipple
-            ref={ref}
-            onPress={onRadioPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={accessibilityState}
-            testID={testID}
-            disabled={disabled}
-            style={rippleContainerStyle}>
-            <View style={containerStyles} pointerEvents="none">
-                {isLeading && <RadioButton {...radioButtonProps} />}
-                <Text style={labelStyles}>{label}</Text>
-                {!isLeading && <RadioButton {...radioButtonProps} />}
-            </View>
-        </TouchableRipple>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    label: {
-        flexShrink: 1,
-        flexGrow: 1,
-        fontSize: 16,
-    },
-});
-
-RadioButtonItem.displayName = 'RadioButton_Item';
-
-export default memo(forwardRef(RadioButtonItem));

package/components/RadioButton/index.ts

@@ -1,22 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import RadioButtonComponent from './RadioButton';
-import RadioButtonGroup from './RadioButtonGroup';
-import RadioButtonItem from './RadioButtonItem';
-
-const RadioButtonDefault = Object.assign(
-    // @component ./RadioButton.tsx
-    RadioButtonComponent,
-    {
-        // @component ./RadioButtonGroup.tsx
-        Group: RadioButtonGroup,
-        // @component ./RadioButtonItem.tsx
-        Item: RadioButtonItem,
-    },
-);
-
-export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
-
-export type { Props as RadioButtonProps } from './RadioButton';
-export type { Props as RadioButtonGroupProps } from './RadioButtonGroup';
-export type { Props as RadioButtonItemProps } from './RadioButtonItem';
-export { radioButtonItemStyles, radioButtonStyles } from './utils';

package/components/RadioButton/utils.ts

@@ -1,165 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-// type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
-
-export const DEFAULT_ICON_SIZE = 24;
-export const ANIMATION_DURATION = 100;
-
-const radioButtonStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        // color: theme.colors.onSurfaceVariant,
-        // uncheckedColor: theme.colors.onSurfaceVariant,
-        // variants: {
-        //     state: {
-        //         checked: {
-        //             color: theme.colors.primary,
-        //         },
-        //         disabled: {
-        //             color: theme.colors.onSurfaceDisabled,
-        //             uncheckedColor: theme.colors.onSurfaceDisabled,
-        //         },
-        //     },
-        // },
-    },
-
-    container: {
-        borderRadius: theme.shapes.corner.full as unknown as number,
-    },
-    radioContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    radio: {
-        height: 20,
-        width: 20,
-        borderRadius: 10,
-        margin: 8,
-        borderColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    borderColor: theme.colors.primary,
-                },
-                disabled: {
-                    borderColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    dot: {
-        height: 10,
-        width: 10,
-        borderRadius: 5,
-        backgroundColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    backgroundColor: theme.colors.primary,
-                },
-                disabled: {
-                    backgroundColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    icon: {
-        backgroundColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    backgroundColor: theme.colors.primary,
-                },
-                disabled: {
-                    backgroundColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    stateLayer: {
-        variants: {
-            state: {
-                hovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
-                },
-
-                checkedAndHovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.primary,
-                },
-            },
-        },
-    },
-}));
-
-const radioButtonItemStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        paddingVertical: theme.spacings['2'],
-        paddingHorizontal: theme.spacings['4'],
-
-        variants: {
-            state: {
-                checked: {},
-                disabled: {},
-            },
-        },
-    },
-    label: {
-        color: theme.colors.onSurface,
-
-        variants: {
-            state: {
-                checked: {},
-                disabled: {
-                    color: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-}));
-
-export const radioButtonStyles = getRegisteredComponentStylesWithFallback(
-    'RadioButton',
-    radioButtonStylesDefault,
-);
-export const radioButtonItemStyles = getRegisteredComponentStylesWithFallback(
-    'RadioButton_Item',
-    radioButtonItemStylesDefault,
-);
-
-export const handlePress = ({
-    onPress,
-    value,
-    onValueChange,
-}: {
-    onPress?: () => void;
-    value: string;
-    onValueChange?: (value: string) => void;
-}) => {
-    if (onPress && onValueChange) {
-        console.warn(
-            `onPress in the scope of RadioButtonGroup will not be executed, use onValueChange instead`,
-        );
-    }
-
-    onValueChange ? onValueChange(value) : onPress?.();
-};
-
-export const isChecked = ({
-    value,
-    status,
-    contextValue,
-}: {
-    value: string;
-    status?: 'checked' | 'unchecked';
-    contextValue?: string;
-}) => {
-    if (contextValue !== undefined && contextValue !== null) {
-        return contextValue === value ? 'checked' : 'unchecked';
-    } else {
-        return status;
-    }
-};