Feat/modal sheet

__mocks__/index.ts

@@ -1 +1,2 @@
 export { RenderHookWrapper, testQuery } from './apollo';
+export * from './utils';

__mocks__/utils.ts

@@ -0,0 +1,49 @@
+export const flatListScrollEventData = {
+  nativeEvent: {
+    contentOffset: {
+      x: 0,
+      y: 425,
+    },
+    contentSize: {
+      // Dimensions of the scrollable content
+      height: 885,
+      width: 328,
+    },
+    layoutMeasurement: {
+      // Dimensions of the device
+      height: 469,
+      width: 328,
+    },
+  },
+};
+
+const getRandomZeroBasedIndex = <T>(array: T[]) =>
+  (Math.random() * (array.length - 1 - 0 + 1)) << 0;
+
+export const randomPositiveNumber = (max: number, min: number = 0) =>
+  Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const randomArrayElement = <T>(array: T[], avoid?: number[]) => {
+  if (!avoid || !avoid.length) {
+    const randomZeroBasedIndex = getRandomZeroBasedIndex(array);
+    return array[randomZeroBasedIndex];
+  }
+  while (true) {
+    const randomZeroBasedIndex = getRandomZeroBasedIndex(array);
+    if (!avoid.includes(randomZeroBasedIndex)) {
+      return array[randomZeroBasedIndex];
+    }
+  }
+};
+
+export const randomArrayIndex = <T>(array: T[], avoid?: number[]) => {
+  if (!avoid || !avoid.length) {
+    return getRandomZeroBasedIndex(array);
+  }
+  while (true) {
+    const randomZeroBasedIndex = getRandomZeroBasedIndex(array);
+    if (!avoid.includes(randomZeroBasedIndex)) {
+      return randomZeroBasedIndex;
+    }
+  }
+};

jest.config.js

@@ -8,5 +8,8 @@ module.exports = {
   },
   transformIgnorePatterns: [],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  setupFiles: ['./jest.setup.js'],
+  setupFiles: [
+    './jest.setup.js',
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
 };

src/App.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import {
   ThemeContextProvider,
@@ -11,18 +9,10 @@ import { Navigation } from '@navigation';
 
 export const App = () => (
   <ThemeContextProvider>
-    <GestureHandlerRootView style={sheet.gestureHandler}>
-      <GraphQLClient>
-        <AlertMessageProvider>
-          <Navigation />
-        </AlertMessageProvider>
-      </GraphQLClient>
-    </GestureHandlerRootView>
+    <GraphQLClient>
+      <AlertMessageProvider>
+        <Navigation />
+      </AlertMessageProvider>
+    </GraphQLClient>
   </ThemeContextProvider>
 );
-
-const sheet = StyleSheet.create({
-  gestureHandler: {
-    flex: 1,
-  },
-});

src/components/common/index.ts

@@ -8,3 +8,5 @@ export {
   type SVGIconProps,
 } from './svg-icon';
 export { Typography };
+export { ModalSelectButton } from './modal-select-button/ModalSelectButton';
+export { ModalSheet } from './modal-sheet/ModalSheet';

src/components/common/modal-select-button/ModalSelectButton.styles.ts

@@ -0,0 +1,41 @@
+import { TouchableOpacityProps } from 'react-native';
+import styled, { IStyledComponent } from 'styled-components/native';
+import { Substitute } from 'styled-components/native/dist/types';
+
+import { isEqualsOrLargerThanIphoneX } from '@utils';
+import { Typography } from '@common-components';
+
+interface SelectButtonStyleProps {
+  borderBottomRightRadius?: number;
+  borderBottomLeftRadius?: number;
+}
+
+export const SelectButton: IStyledComponent<
+  'native',
+  Substitute<TouchableOpacityProps, SelectButtonStyleProps>
+> = styled.TouchableOpacity<SelectButtonStyleProps>`
+  width: 100%;
+  height: ${({ theme }) =>
+    isEqualsOrLargerThanIphoneX()
+      ? theme.metrics.getWidthFromDP('20')
+      : theme.metrics.getWidthFromDP('16')}px;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-bottom-right-radius: ${({ borderBottomRightRadius }) =>
+    borderBottomRightRadius ?? 0}px;
+  border-bottom-left-radius: ${({ borderBottomLeftRadius }) =>
+    borderBottomLeftRadius ?? 0}px;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+`;
+
+export const SelectButtonText = styled(Typography.MediumText).attrs(
+  ({ theme }) => ({
+    color: theme.colors.buttonText,
+    bold: true,
+  }),
+)`
+  font-size: ${({ theme }) => theme.metrics.xl}px;
+  color: ${({ theme }) => theme.colors.buttonText};
+  text-transform: uppercase;
+`;

src/components/common/modal-select-button/ModalSelectButton.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components/native';
+import { fireEvent, render, RenderAPI } from '@testing-library/react-native';
+
+import { dark as theme } from '@styles/themes/dark';
+
+import { ModalSelectButtonProps, ModalSelectButton } from './ModalSelectButton';
+import { randomPositiveNumber } from '../../../../__mocks__';
+
+jest.mock('@utils', () => ({
+  isEqualsOrLargerThanIphoneX: jest.fn(),
+}));
+
+const TITLE = 'TITLE';
+
+const renderModalSelectButton = (props: ModalSelectButtonProps) => (
+  <ThemeProvider theme={theme}>
+    <ModalSelectButton {...props} />
+  </ThemeProvider>
+);
+
+describe('Components/Common/ModalSelectButton', () => {
+  const elements = {
+    selectButton: (api: RenderAPI) => api.getByTestId('select-button'),
+    selectButtonText: (api: RenderAPI) => api.getByTestId('select-button-text'),
+  };
+
+  describe('Render correctly', () => {
+    it('should render correctly when "borderBottomRightRadius" is set', () => {
+      const borderBottomRightRadius = randomPositiveNumber(10, 1);
+      const component = render(
+        renderModalSelectButton({
+          borderBottomRightRadius,
+          onPress: jest.fn(),
+          isDisabled: false,
+          title: TITLE,
+        }),
+      );
+      expect(
+        elements.selectButton(component).props.style.borderBottomRightRadius,
+      ).toEqual(borderBottomRightRadius);
+      expect(
+        elements.selectButton(component).props.style.borderBottomLeftRadius,
+      ).toEqual(0);
+      expect(elements.selectButtonText(component).children[0]).toEqual(TITLE);
+    });
+
+    it('should render correctly when "borderBottomLeftRadius" is set', () => {
+      const borderBottomLeftRadius = randomPositiveNumber(10, 1);
+      const component = render(
+        renderModalSelectButton({
+          borderBottomLeftRadius,
+          onPress: jest.fn(),
+          isDisabled: false,
+          title: TITLE,
+        }),
+      );
+      expect(
+        elements.selectButton(component).props.style.borderBottomLeftRadius,
+      ).toEqual(borderBottomLeftRadius);
+      expect(
+        elements.selectButton(component).props.style.borderBottomRightRadius,
+      ).toEqual(0);
+      expect(elements.selectButtonText(component).children[0]).toEqual(TITLE);
+    });
+
+    it('should render correctly when "borderBottomLeftRadius" and "borderBottomLeftRadius" are set', () => {
+      const borderBottomLeftRadius = randomPositiveNumber(10, 1);
+      const borderBottomRightRadius = randomPositiveNumber(10, 1);
+      const component = render(
+        renderModalSelectButton({
+          borderBottomLeftRadius,
+          borderBottomRightRadius,
+          onPress: jest.fn(),
+          isDisabled: false,
+          title: TITLE,
+        }),
+      );
+      expect(
+        elements.selectButton(component).props.style.borderBottomLeftRadius,
+      ).toEqual(borderBottomLeftRadius);
+      expect(
+        elements.selectButton(component).props.style.borderBottomRightRadius,
+      ).toEqual(borderBottomRightRadius);
+      expect(elements.selectButtonText(component).children[0]).toEqual(TITLE);
+    });
+  });
+
+  describe('Press button', () => {
+    it('should not call the "onPress" when user press and "isDisabled" is "false"', () => {
+      const onPress = jest.fn();
+      const component = render(
+        renderModalSelectButton({ onPress, isDisabled: false, title: TITLE }),
+      );
+      expect(onPress).toHaveBeenCalledTimes(0);
+      fireEvent.press(elements.selectButton(component));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call the "onPress" when user press and "isDisabled" is "true"', () => {
+      const onPress = jest.fn();
+      const component = render(
+        renderModalSelectButton({ onPress, isDisabled: true, title: 'TITLE' }),
+      );
+      expect(onPress).toHaveBeenCalledTimes(0);
+      fireEvent.press(elements.selectButton(component));
+      expect(onPress).toHaveBeenCalledTimes(0);
+    });
+  });
+});

src/components/common/modal-select-button/ModalSelectButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as Styles from './ModalSelectButton.styles';
+
+export type ModalSelectButtonProps = {
+  borderBottomRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  isDisabled?: boolean;
+  onPress: () => void;
+  title: string;
+};
+
+export const ModalSelectButton = (props: ModalSelectButtonProps) => (
+  <Styles.SelectButton
+    borderBottomRightRadius={props.borderBottomRightRadius}
+    borderBottomLeftRadius={props.borderBottomLeftRadius}
+    disabled={props.isDisabled}
+    onPress={props.onPress}
+    testID="select-button">
+    <Styles.SelectButtonText testID="select-button-text">
+      {props.title}
+    </Styles.SelectButtonText>
+  </Styles.SelectButton>
+);

src/components/common/modal-sheet/ModalSheet.styles.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+import styled from 'styled-components/native';
+
+import { Typography } from '@common-components';
+import { dark, light } from '@styles/themes';
+import { borderRadius } from '@styles/border-radius';
+import metrics from '@styles/metrics';
+
+export const DEFAULT_MODAL_SHEET_HEIGHT = metrics.getHeightFromDP('60%');
+
+export const GripWrapper = styled.View`
+  width: 100%;
+  align-items: center;
+  padding-vertical: ${({ theme }) => theme.metrics.md}px;
+`;
+
+export const Grip = styled.View`
+  width: ${({ theme }) => theme.metrics.getWidthFromDP('16%')}px;
+  height: ${({ theme }) => theme.metrics.getWidthFromDP('1.5%')}px;
+  border-radius: ${({ theme }) => theme.metrics.xl}px;
+  background-color: ${({ theme }) => theme.colors.inactiveWhite};
+`;
+
+export const Title = styled(Typography.SmallText).attrs(({ theme }) => ({
+  color: theme.colors.buttonText,
+  alignment: 'center',
+  bold: true,
+}))`
+  margin-horizontal: ${({ theme }) => theme.metrics.lg}px;
+  margin-bottom: ${({ theme }) => theme.metrics.lg}px;
+`;
+
+export const LineDivider = styled.View`
+  width: 100%;
+  height: ${({ theme }) => theme.metrics.getWidthFromDP('0.5%')}px;
+  background-color: ${light.colors.androidToolbar};
+`;
+
+export const ListHeaderWrapper = styled.View`
+  margin-top: ${({ theme }) => theme.metrics.sm}px;
+`;
+
+export const sheet = StyleSheet.create({
+  backgroundDarkLayer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: dark.colors.darkLayer,
+  },
+  bottomGap: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  card: {
+    borderTopLeftRadius: borderRadius.md,
+    borderTopRightRadius: borderRadius.md,
+    backgroundColor: dark.colors.white,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  gestureHandlerRootView: {
+    width: '100%',
+    height: '100%',
+  },
+});