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

package/components/Radio/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+// @component ./Radio.tsx
+import RadioControl, {
+    RadioGroup as RadioGroupComponent,
+    RadioLabel,
+    RadioRow as RadioRowComponent,
+} from './Radio';
+
+const RadioDefault = Object.assign(RadioControl, {
+    Label: RadioLabel,
+    Group: RadioGroupComponent,
+    Row: RadioRowComponent,
+});
+
+export const Radio = getRegisteredComponentWithFallback('Radio', RadioDefault);
+export const RadioGroup = RadioGroupComponent;
+export const RadioRow = RadioRowComponent;
+
+export type { RadioGroupProps, RadioLabelProps, RadioProps, RadioRowProps } from './types';
+export { radioRowStyles, radioStyles } from './utils';

package/components/Radio/types.ts

@@ -0,0 +1,101 @@
+import type { PropsWithoutRef, ReactNode } from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type Size = 'sm' | 'md' | 'lg';
+export type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
+
+export type RadioGroupProps = ViewProps & {
+    /**
+     * Value of the currently selected radio.
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Disables every radio in the group.
+     */
+    disabled?: boolean;
+    /**
+     * Size applied to every radio in the group.
+     */
+    size?: Size;
+    /**
+     * Radio rows / radios.
+     */
+    children: ReactNode;
+};
+
+export type RadioRowProps = ViewProps & {
+    /**
+     * Value this row represents within the enclosing RadioGroup.
+     */
+    value: string;
+    /**
+     * Disables this row (control + label).
+     */
+    disabled?: boolean;
+    /**
+     * Radio control and Radio.Label, in any order.
+     */
+    children: ReactNode;
+};
+
+/**
+ * The radio control (the circle). Use inside a RadioRow, or standalone under a RadioGroup with `value`.
+ */
+export type RadioProps = Omit<TouchableRippleProps, 'children'> & {
+    /**
+     * Required only when used standalone under a RadioGroup (not inside a RadioRow).
+     */
+    value?: string;
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the radio. Falls back to the row/group size.
+     */
+    size?: Size;
+    /**
+     * Custom color for the checked radio.
+     */
+    color?: string;
+    /**
+     * Custom color for the unchecked radio.
+     */
+    uncheckedColor?: string;
+    /**
+     * Props for the state layer.
+     */
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+};
+
+export type RadioLabelProps = TextProps & {
+    children: ReactNode;
+};
+
+/**
+ * Internal props for the platform control (RadioBase).
+ */
+export type RadioBaseProps = Omit<TouchableRippleProps, 'children'> & {
+    checked: boolean;
+    disabled?: boolean;
+    size?: Size;
+    color?: string;
+    uncheckedColor?: string;
+    onPress?: () => void;
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+    testID?: string;
+};

package/components/Radio/utils.ts

@@ -0,0 +1,115 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+export const ANIMATION_DURATION = 100;
+
+export const iconSizeMap = {
+    sm: 20,
+    md: 24,
+    lg: 28,
+};
+
+const radioStylesDefault = StyleSheet.create(theme => ({
+    root: {},
+
+    container: {
+        borderRadius: theme.shapes.corner.full as unknown as number,
+        alignItems: 'center',
+        justifyContent: 'center',
+
+        variants: {
+            size: {
+                sm: { padding: 4 },
+                md: { padding: 6 },
+                lg: { padding: 8 },
+            },
+        },
+    },
+    radioContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    radio: {
+        borderColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { borderColor: theme.colors.primary },
+                checkedAndHovered: { borderColor: theme.colors.primary },
+                hovered: {},
+                disabled: { borderColor: theme.colors.onSurfaceDisabled },
+            },
+            size: {
+                sm: { height: 16, width: 16, borderRadius: 8 },
+                md: { height: 20, width: 20, borderRadius: 10 },
+                lg: { height: 24, width: 24, borderRadius: 12 },
+            },
+        },
+    },
+    dot: {
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { backgroundColor: theme.colors.primary },
+                checkedAndHovered: { backgroundColor: theme.colors.primary },
+                hovered: {},
+                disabled: { backgroundColor: theme.colors.onSurfaceDisabled },
+            },
+            size: {
+                sm: { height: 8, width: 8, borderRadius: 4 },
+                md: { height: 10, width: 10, borderRadius: 5 },
+                lg: { height: 12, width: 12, borderRadius: 6 },
+            },
+        },
+    },
+    icon: {
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { backgroundColor: theme.colors.primary },
+                checkedAndHovered: { backgroundColor: theme.colors.primary },
+                hovered: {},
+                disabled: { backgroundColor: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: { backgroundColor: theme.colors.stateLayer.hover.onSurface },
+                checkedAndHovered: { backgroundColor: theme.colors.stateLayer.hover.primary },
+            },
+        },
+    },
+}));
+
+const radioRowStylesDefault = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+
+        variants: {
+            state: {
+                checked: {},
+                checkedAndHovered: {},
+                hovered: {},
+                disabled: { color: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
+}));
+
+export const radioStyles = getRegisteredComponentStylesWithFallback('Radio', radioStylesDefault);
+export const radioRowStyles = getRegisteredComponentStylesWithFallback(
+    'Radio_Row',
+    radioRowStylesDefault,
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-molecules",
-  "version": "0.5.0-beta.27",
+  "version": "0.5.0-beta.29",
   "author": "Thet Aung <thetaung.dev@gmail.com>",
   "license": "MIT",
   "main": "index.ts",

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/RadioButtonGroup.tsx

@@ -1,97 +0,0 @@
-import { useControlledValue } from '@react-native-molecules/utils/hooks';
-import { createContext, memo, type ReactNode, useMemo } from 'react';
-import { View, type ViewProps } from 'react-native';
-
-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,92 +0,0 @@
-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 } = useMemo(() => {
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-
-        return {
-            containerStyle: [styles.container, radioButtonStyles.root, style],
-            iconContainerStyle: { opacity: checked ? 1 : 0 },
-            iconStyle: [radioButtonStyles.icon, _color],
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [checked, colorProp, style, state, uncheckedColorProp]);
-
-    return (
-        <TouchableRipple {...rest} ref={ref} 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));