@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/primitives/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,108 @@
+import React, {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import { useHasValueUpdated } from '@aws-amplify/ui-react-core';
+
+import { useTheme } from '../../theme';
+import { Label } from '../Label';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { RadioProps } from '../Radio';
+
+import { getThemedStyles } from './styles';
+import { RadioGroupProps } from './types';
+
+export default function RadioGroup<T>({
+  accessibilityRole = 'radiogroup',
+  children,
+  direction = 'vertical',
+  disabled,
+  initialValue,
+  label,
+  labelPosition = 'top',
+  labelStyle,
+  onChange,
+  onValueChange,
+  size,
+  style,
+  ...rest
+}: RadioGroupProps<T>): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const [value, setValue] = useState<T | undefined>(initialValue);
+
+  // track `hasValueUpdated` and `hasOnValueChangeUpdated`,
+  // only call `onValueChange` on `value` update
+  const hasValueUpdated = useHasValueUpdated(value);
+  const hasOnValueChangeUpdated = useHasValueUpdated(onValueChange);
+
+  useEffect(() => {
+    if (hasValueUpdated) {
+      onValueChange?.(value);
+    }
+  }, [hasOnValueChangeUpdated, hasValueUpdated, onValueChange, value]);
+
+  const containerStyle: ViewStyle = useMemo(
+    () => ({
+      flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+    }),
+    [labelPosition]
+  );
+
+  const childContainerStyle: ViewStyle = useMemo(
+    () => ({ flexDirection: direction === 'horizontal' ? 'row' : 'column' }),
+    [direction]
+  );
+
+  const handleChange = useCallback(
+    (nextValue: T | undefined) => {
+      setValue(nextValue);
+
+      onChange?.(nextValue!);
+    },
+    [onChange]
+  );
+
+  return (
+    <View {...rest} style={[themedStyle.container, containerStyle, style]}>
+      <View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+        {Children.map(children, (child) => {
+          if (isValidElement<RadioProps<T>>(child)) {
+            const {
+              disabled: childDisabled,
+              onChange: childOnChange,
+              value: childValue,
+              size: childSize,
+            } = child.props;
+
+            const isChildDisabled =
+              typeof childDisabled === 'boolean' ? childDisabled : disabled;
+            const isChildSelected = childValue === value;
+
+            return cloneElement<RadioProps<T>>(child, {
+              ...child.props,
+              disabled: isChildDisabled,
+              onChange: (nextValue) => {
+                childOnChange?.(nextValue);
+                handleChange(nextValue);
+              },
+              selected: isChildSelected,
+              size: childSize ?? size,
+            });
+          }
+        })}
+      </View>
+      {label ? (
+        <Label style={[themedStyle.label, labelStyle]}>{label}</Label>
+      ) : null}
+    </View>
+  );
+}

package/src/primitives/RadioGroup/__tests__/RadioGroup.spec.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { getThemedStyles as getThemedLabelStyles } from '../../Label/styles';
+import { Radio } from '../../Radio';
+import { Size } from '../../Radio/types';
+
+import RadioGroup from '../RadioGroup';
+import { Direction } from '../types';
+
+const directions: Direction[] = ['vertical', 'horizontal'];
+const sizes: Size[] = ['small', 'medium', 'large'];
+
+const onChangeMock = jest.fn();
+
+const ControlledRadioGroup = ({
+  onChange,
+  ...rest
+}: {
+  onChange?: jest.Mock<any, any>;
+  direction?: Direction;
+  size?: Size;
+  disabled?: boolean;
+}) => {
+  const [value, setValue] = useState('option-1');
+  const handleOnChange = (nextValue: string) => {
+    setValue(nextValue);
+    onChange?.(nextValue);
+  };
+
+  return (
+    <RadioGroup
+      {...rest}
+      initialValue={value}
+      onChange={(nextValue) => {
+        if (typeof nextValue === 'string') {
+          handleOnChange(nextValue);
+        }
+      }}
+    >
+      <Radio value="option-1" label="Option 1" />
+      <Radio value="option-2" label="Option 2" />
+      <Radio value="option-3" label="Option 3" />
+      <Radio value="option-4" label="Option 4" disabled />
+    </RadioGroup>
+  );
+};
+
+describe('RadioGroup', () => {
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it('renders default RadioGroup as expected', () => {
+    const { queryAllByRole, toJSON } = render(<ControlledRadioGroup />);
+
+    const radios = queryAllByRole('radio');
+    expect(radios.length).toBe(4);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('allows users to select radios', () => {
+    const { getByText } = render(
+      <ControlledRadioGroup onChange={onChangeMock} />
+    );
+
+    const option2 = getByText('Option 2');
+    const option3 = getByText('Option 3');
+
+    fireEvent.press(option2);
+    expect(onChangeMock).toBeCalledWith('option-2');
+
+    fireEvent.press(option3);
+    expect(onChangeMock).toBeCalledWith('option-3');
+  });
+
+  it('does not execute the callback when disabled', () => {
+    const { getByText } = render(
+      <ControlledRadioGroup disabled onChange={onChangeMock} />
+    );
+
+    const option2 = getByText('Option 2');
+
+    fireEvent.press(option2);
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  it.each(directions)('renders as expected when direction is %s', (value) => {
+    const { toJSON } = render(<ControlledRadioGroup direction={value} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each(sizes)('renders as expected when size is %s', (value) => {
+    const { toJSON } = render(<ControlledRadioGroup size={value} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('updates the selected option in uncontrolled mode', () => {
+    const { getByTestId, queryByTestId } = render(
+      <RadioGroup>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    const selectedOption = queryByTestId('amplify__radio-button__dot');
+
+    expect(selectedOption).toBeNull();
+
+    const optionOne = getByTestId('option-1');
+
+    fireEvent.press(optionOne);
+
+    expect(queryByTestId('amplify__radio-button__dot')).toBeDefined();
+  });
+
+  it('only calls onValueChange when value changes', () => {
+    const onValueChange = jest.fn();
+
+    const { getByTestId, rerender } = render(
+      <RadioGroup onValueChange={onValueChange}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    const optionOne = getByTestId('option-1');
+
+    fireEvent.press(optionOne);
+
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(onValueChange).toHaveBeenCalledWith('option-1');
+
+    const updatedOnValueChange = jest.fn();
+
+    rerender(
+      <RadioGroup onValueChange={updatedOnValueChange}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    expect(updatedOnValueChange).not.toHaveBeenCalled();
+  });
+
+  it('renders the label prop', () => {
+    const label = 'label';
+    const { getByText } = render(
+      <RadioGroup label={label}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 1" testID="option-2" />
+      </RadioGroup>
+    );
+
+    expect(getByText(label)).toBeDefined();
+  });
+
+  it('applies theme and custom styles', () => {
+    const labelText = 'Test label';
+    const customLabelStyle = { color: 'red' };
+    const themedRadioGroupLabelStyle = {};
+
+    const { getByText } = render(
+      <RadioGroup label={labelText} labelStyle={customLabelStyle}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 1" testID="option-2" />
+      </RadioGroup>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedLabelStyles(result.current);
+
+    const label = getByText(labelText);
+
+    expect(label.props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle['primary'],
+      [themedRadioGroupLabelStyle, customLabelStyle],
+    ]);
+  });
+});