@hero-design/rn 7.7.0 → 7.8.0

package/src/components/Select/SingleSelect/Option.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Typography from '../../Typography';
+import { OptionWrapper } from '../StyledSelect';
+
+const Option = ({
+  text,
+  selected,
+  onPress,
+}: {
+  text: string;
+  selected: boolean;
+  onPress: () => void;
+}) => (
+  <OptionWrapper themeSelected={selected} onPress={onPress}>
+    <View style={{ flex: 1 }}>
+      <Typography.Text fontSize="large">{text}</Typography.Text>
+    </View>
+  </OptionWrapper>
+);
+
+export default Option;

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SingleSelectProps } from '.';
+import { getKey } from '../helpers';
+import { OptionListWrapper, Spacer } from '../StyledSelect';
+import Option from './Option';
+
+interface OptionListProps<T> extends SingleSelectProps<T> {
+  /**
+   * event handler for select
+   */
+  onPress: (value: T | null) => void;
+}
+
+const OptionList = <T,>({
+  value,
+  options,
+  onPress,
+  keyExtractor,
+}: Pick<
+  OptionListProps<T>,
+  'value' | 'options' | 'onPress' | 'keyExtractor'
+>) => (
+  <OptionListWrapper>
+    {options.map((opt, index) => (
+      <React.Fragment key={getKey(opt, index, keyExtractor)}>
+        {index !== 0 && <Spacer />}
+        <Option
+          text={opt.text}
+          selected={value === opt.value}
+          onPress={() => {
+            if (value === opt.value) {
+              onPress(null);
+            } else {
+              onPress(opt.value);
+            }
+          }}
+        />
+      </React.Fragment>
+    ))}
+  </OptionListWrapper>
+);
+
+export default OptionList;

package/src/components/Select/SingleSelect/__tests__/Option.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import Option from '../Option';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('Option', () => {
+  it('renders correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <Option text="testOption" selected onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('testOption'));
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Select/SingleSelect/__tests__/OptionList.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import OptionList from '../OptionList';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+const mockOptions = [
+  { text: 'A', value: 'a' },
+  { text: 'B', value: 'b' },
+  { text: 'C', value: 'c' },
+];
+
+describe('OptionList', () => {
+  it('renders correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <OptionList value="a" options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onPress correctly on select new value', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList value="a" options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('B'));
+    expect(pressFn).toBeCalledTimes(1);
+    expect(pressFn).toHaveBeenCalledWith('b');
+  });
+
+  it('trigger onPress correctly on unselect current value', () => {
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList value="a" options={mockOptions} onPress={pressFn} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('A'));
+    expect(pressFn).toBeCalledTimes(1);
+    expect(pressFn).toHaveBeenCalledWith(null);
+  });
+});

package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Option renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      testOption
+    </Text>
+  </View>
+</View>
+`;