@aws-amplify/ui-react-native 0.0.0-fileuploader-41bde68-20221115171326

package/src/primitives/Radio/Radio.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useMemo } from 'react';
+import {
+  Pressable,
+  PressableStateCallbackType,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Label } from '../Label';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+
+import { styles } from './styles';
+import { RadioProps } from './types';
+import { getRadioDimensions } from './getRadioDimensions';
+
+export default function Radio<T>({
+  accessibilityRole = 'radio',
+  disabled,
+  label,
+  labelPosition = 'end',
+  labelStyle,
+  onChange,
+  radioContainerStyle,
+  radioDotStyle,
+  selected,
+  size = 'medium',
+  style,
+  value,
+  ...rest
+}: RadioProps<T>): JSX.Element {
+  const handleOnChange = useCallback(() => {
+    if (!disabled) {
+      onChange?.(value);
+    }
+  }, [onChange, value, disabled]);
+
+  const containerStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const containerStyle: ViewStyle = {
+        ...styles.container,
+        flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+        ...(disabled && styles.disabled),
+      };
+
+      const pressedStateStyle =
+        typeof style === 'function' ? style({ pressed }) : style;
+      return [containerStyle, pressedStateStyle];
+    },
+    [disabled, labelPosition, style]
+  );
+
+  const { radioContainerSize, radioDotSize } = useMemo(
+    () => getRadioDimensions(size, styles),
+    [size]
+  );
+
+  return (
+    <Pressable
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      onPress={handleOnChange}
+      style={containerStyle}
+    >
+      <View
+        style={[styles.radioContainer, radioContainerSize, radioContainerStyle]}
+      >
+        {selected ? (
+          <View style={[styles.radioDot, radioDotSize, radioDotStyle]} />
+        ) : null}
+      </View>
+      {label ? <Label style={labelStyle}>{label}</Label> : null}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import Radio from '../Radio';
+import { Size } from '../types';
+
+const sizes: Size[] = ['small', 'medium', 'large'];
+
+const onChange = jest.fn();
+
+describe('Radio', () => {
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  it.each([true, false])('renders as expected when selected is %s', (value) => {
+    const { toJSON } = render(
+      <Radio
+        selected={value}
+        value={value}
+        label={`${value}`}
+        onChange={onChange}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('calls the expected handler when selected', () => {
+    const { getByRole } = render(<Radio value="" onChange={onChange} />);
+    const radio = getByRole('radio');
+    fireEvent.press(radio);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(sizes)('renders as expected when size is %s', (value) => {
+    const { toJSON } = render(
+      <Radio size={value} value={value} label={`${value}`} selected />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected when passing a number to the size prop', () => {
+    const { toJSON } = render(
+      <Radio size={40} value="number" label="number" selected />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with accessibilityRole', () => {
+    const { toJSON } = render(
+      <Radio value="" onChange={onChange} accessibilityRole={'none'} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected when disabled', () => {
+    const { toJSON } = render(
+      <Radio disabled value="disabled" label="disabled" onChange={onChange} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('does nothing when disabled', () => {
+    const { getByRole } = render(
+      <Radio disabled value="disabled" label="disabled" onChange={onChange} />
+    );
+    const radio = getByRole('radio');
+    fireEvent.press(radio);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -0,0 +1,555 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio renders as expected when disabled 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "opacity": 0.6,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 20,
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    disabled
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when passing a number to the size prop 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 40,
+          "width": 40,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#317d95",
+            "borderRadius": 999,
+          },
+          Object {
+            "height": 20,
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    number
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when selected is false 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 20,
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    false
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when selected is true 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 20,
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#317d95",
+            "borderRadius": 999,
+          },
+          Object {
+            "height": 10,
+            "width": 10,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    true
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when size is large 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 24,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#317d95",
+            "borderRadius": 999,
+          },
+          Object {
+            "height": 12,
+            "width": 12,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    large
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when size is medium 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 20,
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#317d95",
+            "borderRadius": 999,
+          },
+          Object {
+            "height": 10,
+            "width": 10,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    medium
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected when size is small 1`] = `
+<View
+  accessibilityRole="radio"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 16,
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#317d95",
+            "borderRadius": 999,
+          },
+          Object {
+            "height": 8,
+            "width": 8,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "marginHorizontal": 4,
+          "marginVertical": 2,
+        },
+        undefined,
+      ]
+    }
+  >
+    small
+  </Text>
+</View>
+`;
+
+exports[`Radio renders as expected with accessibilityRole 1`] = `
+<View
+  accessibilityRole="none"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderColor": "#317d95",
+          "borderRadius": 999,
+          "borderWidth": 2,
+          "justifyContent": "center",
+        },
+        Object {
+          "height": 20,
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;