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

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import PhoneNumberField from '../PhoneNumberField';
+import { getThemedStyles as getTextFieldStyles } from '../../TextField/styles';
+import { getThemedStyles } from '../styles';
+
+const testID = 'phoneNumberInput';
+const defaultProps = {
+  testID,
+};
+
+// TODO: add more tests
+
+describe('PhoneNumberField', () => {
+  it('renders as expected', () => {
+    const { toJSON, getByTestId } = render(
+      <PhoneNumberField {...defaultProps} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    const textInput = getByTestId(testID);
+    expect(textInput.props.keyboardType).toBe('phone-pad');
+    expect(textInput.props.editable).toBe(true);
+  });
+
+  it('renders as expected when disabled', () => {
+    const { toJSON, getByTestId } = render(
+      <PhoneNumberField {...defaultProps} disabled />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    const textInput = getByTestId(testID);
+    expect(textInput.props.editable).toBe(false);
+  });
+
+  it('applies theming', () => {
+    const { toJSON, getByTestId } = render(
+      <PhoneNumberField {...defaultProps} />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+    const textFieldStyles = getTextFieldStyles(result.current);
+
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      textFieldStyles.field,
+      [themedStyle.field, undefined],
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,185 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PhoneNumberField applies theming 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      keyboardType="phone-pad"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          Array [
+            Object {},
+            undefined,
+          ],
+        ]
+      }
+      testID="phoneNumberInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`PhoneNumberField renders as expected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      keyboardType="phone-pad"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          Array [
+            Object {},
+            undefined,
+          ],
+        ]
+      }
+      testID="phoneNumberInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`PhoneNumberField renders as expected when disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 0.6,
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={false}
+      keyboardType="phone-pad"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          Array [
+            Object {},
+            undefined,
+          ],
+        ]
+      }
+      testID="phoneNumberInput"
+    />
+  </View>
+</View>
+`;

package/src/primitives/PhoneNumberField/index.ts

@@ -0,0 +1,2 @@
+export { default as PhoneNumberField } from './PhoneNumberField';
+export { PhoneNumberFieldProps, PhoneNumberFieldStyles } from './types';

package/src/primitives/PhoneNumberField/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { PhoneNumberFieldStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): PhoneNumberFieldStyles => {
+  const { components } = theme;
+
+  return StyleSheet.create({
+    container: {
+      ...components?.phoneNumberField?.container,
+    },
+    fieldContainer: {
+      ...components?.phoneNumberField?.fieldContainer,
+    },
+    field: {
+      ...components?.phoneNumberField?.field,
+    },
+    label: {
+      ...components?.phoneNumberField?.label,
+    },
+  });
+};

package/src/primitives/PhoneNumberField/types.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps, TextFieldStyles } from '../TextField';
+
+export interface PhoneNumberFieldProps
+  extends Omit<TextFieldProps, 'secureTextEntry'> {}
+
+export interface PhoneNumberFieldStyles extends Partial<TextFieldStyles> {}

package/src/primitives/Radio/Radio.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import {
+  GestureResponderEvent,
   Pressable,
   PressableStateCallbackType,
   StyleProp,
@@ -7,13 +8,17 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { useTheme } from '../../theme';
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
 
-import { styles } from './styles';
+import { getThemedStyles } from './styles';
 import { RadioProps } from './types';
 import { getRadioDimensions } from './getRadioDimensions';
 
+export const CONTAINER_TEST_ID = 'amplify__radio-button__container';
+export const DOT_TEST_ID = 'amplify__radio-button__dot';
+
 export default function Radio<T>({
   accessibilityRole = 'radio',
   disabled,
@@ -21,6 +26,7 @@ export default function Radio<T>({
   labelPosition = 'end',
   labelStyle,
   onChange,
+  onPress,
   radioContainerStyle,
   radioDotStyle,
   selected,
@@ -29,30 +35,37 @@ export default function Radio<T>({
   value,
   ...rest
 }: RadioProps<T>): JSX.Element {
-  const handleOnChange = useCallback(() => {
-    if (!disabled) {
-      onChange?.(value);
-    }
-  }, [onChange, value, disabled]);
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const handleOnChange = useCallback(
+    (event: GestureResponderEvent) => {
+      if (!disabled) {
+        onChange?.(value);
+        onPress?.(event);
+      }
+    },
+    [disabled, onChange, onPress, value]
+  );
 
   const containerStyle = useCallback(
     ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
       const containerStyle: ViewStyle = {
-        ...styles.container,
+        ...themedStyle.container,
         flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-        ...(disabled && styles.disabled),
+        ...(disabled && themedStyle.disabled),
       };
 
       const pressedStateStyle =
         typeof style === 'function' ? style({ pressed }) : style;
       return [containerStyle, pressedStateStyle];
     },
-    [disabled, labelPosition, style]
+    [disabled, labelPosition, style, themedStyle]
   );
 
-  const { radioContainerSize, radioDotSize } = useMemo(
-    () => getRadioDimensions(size, styles),
-    [size]
+  const { radioContainerDimensions, radioDotDimensions } = useMemo(
+    () => getRadioDimensions(size, themedStyle),
+    [size, themedStyle]
   );
 
   return (
@@ -63,10 +76,18 @@ export default function Radio<T>({
       style={containerStyle}
     >
       <View
-        style={[styles.radioContainer, radioContainerSize, radioContainerStyle]}
+        style={[
+          themedStyle.radioContainer,
+          radioContainerDimensions,
+          radioContainerStyle,
+        ]}
+        testID={CONTAINER_TEST_ID}
       >
         {selected ? (
-          <View style={[styles.radioDot, radioDotSize, radioDotStyle]} />
+          <View
+            style={[themedStyle.radioDot, radioDotDimensions, radioDotStyle]}
+            testID={DOT_TEST_ID}
+          />
         ) : null}
       </View>
       {label ? <Label style={labelStyle}>{label}</Label> : null}

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
-import Radio from '../Radio';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+import { useTheme } from '../../../theme';
+import { capitalize } from '../../../utils';
+import { RADIO_DOT_PROPORTION } from '../getRadioDimensions';
+import Radio, { CONTAINER_TEST_ID, DOT_TEST_ID } from '../Radio';
+import { getThemedStyles } from '../styles';
 import { Size } from '../types';
 
 const sizes: Size[] = ['small', 'medium', 'large'];
 
 const onChange = jest.fn();
+const onPress = jest.fn();
 
 describe('Radio', () => {
   beforeEach(() => {
@@ -24,47 +29,136 @@ describe('Radio', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('calls the expected handler when selected', () => {
-    const { getByRole } = render(<Radio value="" onChange={onChange} />);
+  it('calls the expected handler when pressed', () => {
+    const { getByRole } = render(
+      <Radio value="value" onPress={onPress} onChange={onChange} />
+    );
     const radio = getByRole('radio');
     fireEvent.press(radio);
     expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('value');
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('value');
   });
 
   it.each(sizes)('renders as expected when size is %s', (value) => {
-    const { toJSON } = render(
+    const { toJSON, getByTestId } = render(
       <Radio size={value} value={value} label={`${value}`} selected />
     );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const size = typeof value === 'string' ? capitalize(value) : 'Medium';
+
+    expect(getByTestId(CONTAINER_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioContainer,
+      themedStyle[`radioContainer${size}`],
+      undefined,
+    ]);
+
+    expect(getByTestId(DOT_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioDot,
+      themedStyle[`radioDot${size}`],
+      undefined,
+    ]);
+
     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 />
+    const customSize = 40;
+
+    const { toJSON, getByTestId } = render(
+      <Radio size={customSize} value="number" label="number" selected />
     );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByTestId(CONTAINER_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioContainer,
+      {
+        height: customSize,
+        width: customSize,
+      },
+      undefined,
+    ]);
+
+    expect(getByTestId(DOT_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioDot,
+      {
+        height: customSize * RADIO_DOT_PROPORTION,
+        width: customSize * RADIO_DOT_PROPORTION,
+      },
+      undefined,
+    ]);
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders as expected with accessibilityRole', () => {
-    const { toJSON } = render(
+    const { toJSON, queryByRole, getByRole } = render(
       <Radio value="" onChange={onChange} accessibilityRole={'none'} />
     );
+
+    expect(queryByRole('radio')).toBe(null);
+    expect(getByRole('none')).toBeDefined();
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders as expected when disabled', () => {
-    const { toJSON } = render(
+    const { toJSON, getByRole } = 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();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('applies theme and custom styles', () => {
+    const customStyle = { margin: 10 };
+    const customContainerStyle = {
+      borderColor: 'blue',
+      borderWidth: 2,
+    };
+    const customDotStyle = {
+      backgroundColor: 'green',
+    };
+
+    const { toJSON, getByTestId, getByRole } = render(
+      <Radio
+        style={customStyle}
+        radioContainerStyle={customContainerStyle}
+        radioDotStyle={customDotStyle}
+        value="value"
+        selected
+      />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByRole('radio').props.style).toStrictEqual([
+      { ...themedStyle.container, flexDirection: 'row' },
+      customStyle,
+    ]);
+
+    expect(getByTestId(CONTAINER_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioContainer,
+      themedStyle.radioContainerMedium,
+      customContainerStyle,
+    ]);
+
+    expect(getByTestId(DOT_TEST_ID).props.style).toStrictEqual([
+      themedStyle.radioDot,
+      themedStyle.radioDotMedium,
+      customDotStyle,
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 });