@hero-design/rn 8.20.0 → 8.22.0-alpha.0

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -44,43 +44,53 @@ const carouselData = [
 ];
 
 describe('Carousel', () => {
-  it('renders basic carousel', async () => {
-    const onPress = jest.fn();
-    const { getByTestId, queryByText, toJSON } = renderWithTheme(
-      <Carousel
-        testID="carousel"
-        items={carouselData}
-        renderActions={(_) => {
-          return <Button text="Skip" onPress={onPress} />;
-        }}
-      />
-    );
+  it.each`
+    pageControlPosition
+    ${'bottom'}
+    ${'top'}
+  `(
+    'renders correctly with pageControlPosition $pageControlPosition',
+    async ({ pageControlPosition }) => {
+      const onPress = jest.fn();
+      const { getByTestId, queryByText, toJSON } = renderWithTheme(
+        <Carousel
+          pageControlPosition={pageControlPosition}
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onPress} />;
+          }}
+        />
+      );
 
-    expect(getByTestId('carousel')).toBeTruthy();
+      expect(getByTestId('carousel')).toBeTruthy();
 
-    expect(queryByText('Skip')).toBeTruthy();
+      expect(queryByText('Skip')).toBeTruthy();
 
-    // Slide 1
-    expect(queryByText('Welcome to the new Employment Hero app')).toBeTruthy();
+      // Slide 1
+      expect(
+        queryByText('Welcome to the new Employment Hero app')
+      ).toBeTruthy();
 
-    // Slide 2
-    expect(queryByText('Same app with a new look!')).toBeTruthy();
-    expect(
-      queryByText(
-        'Our app now has a new bright clean modern look and feel with the same great features.'
-      )
-    ).toBeTruthy();
+      // Slide 2
+      expect(queryByText('Same app with a new look!')).toBeTruthy();
+      expect(
+        queryByText(
+          'Our app now has a new bright clean modern look and feel with the same great features.'
+        )
+      ).toBeTruthy();
 
-    // Slide 3
-    expect(queryByText('Easier to get around')).toBeTruthy();
-    expect(
-      queryByText(
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
-      )
-    ).toBeTruthy();
+      // Slide 3
+      expect(queryByText('Easier to get around')).toBeTruthy();
+      expect(
+        queryByText(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
+        )
+      ).toBeTruthy();
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();

package/src/components/Carousel/index.tsx

@@ -22,9 +22,11 @@ import {
   StyledCarouselFooterWrapper,
   StyledCarouselView,
   StyledPageControl,
+  StyledPageControlWrapper,
 } from './StyledCarousel';
 import CarouselItem from './CarouselItem';
 import { CardCarousel } from './CardCarousel';
+import { useDeprecation } from '../../utils/hooks';
 
 interface CarouselProps extends ViewProps {
   /**
@@ -48,6 +50,8 @@ interface CarouselProps extends ViewProps {
    */
   renderActions?: (pageIndex: number) => JSX.Element;
   /**
+   * @deprecated will be removed in 9.0.0
+   *
    * Should show paginations
    */
   shouldShowPagination?: (pageIndex: number) => boolean;
@@ -55,6 +59,10 @@ interface CarouselProps extends ViewProps {
    * Current selected item index.
    */
   selectedItemIndex?: number;
+  /**
+   * position of the page control
+   */
+  pageControlPosition?: 'top' | 'bottom';
 }
 
 export function useStateFromProp<T>(
@@ -67,15 +75,27 @@ export function useStateFromProp<T>(
   return [value, setValue];
 }
 
+const noop = (_: number): boolean => {
+  return true;
+};
 const Carousel = ({
   items,
   onItemIndexChange,
   renderActions,
   selectedItemIndex = 0,
   style,
-  shouldShowPagination = () => true,
+  shouldShowPagination = noop,
+  pageControlPosition = 'bottom',
   ...nativeProps
 }: CarouselProps) => {
+  useDeprecation(
+    `shouldShowPagination prop has been deprecated`,
+    shouldShowPagination !== noop
+  );
+  useDeprecation(
+    `The use of 'pageControlPosition == bottom' has been deprecated`,
+    pageControlPosition === 'bottom'
+  );
   const carouselRef = useRef<FlatList>(null);
 
   const [currentSlideIndex, setCurrentSlideIndex] =
@@ -120,6 +140,17 @@ const Carousel = ({
       <StyledBackDrop
         themeSlideBackground={items[currentSlideIndex].background}
       />
+
+      <StyledPageControlWrapper>
+        {pageControlPosition === 'top' &&
+          shouldShowPagination(currentSlideIndex) && (
+            <StyledPageControl
+              numberOfPages={items.length}
+              currentPage={currentSlideIndex}
+            />
+          )}
+      </StyledPageControlWrapper>
+
       <StyledCarouselView>
         <FlatList
           horizontal
@@ -153,12 +184,13 @@ const Carousel = ({
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
-          {shouldShowPagination(currentSlideIndex) && (
-            <StyledPageControl
-              numberOfPages={items.length}
-              currentPage={currentSlideIndex}
-            />
-          )}
+          {pageControlPosition === 'bottom' &&
+            shouldShowPagination(currentSlideIndex) && (
+              <StyledPageControl
+                numberOfPages={items.length}
+                currentPage={currentSlideIndex}
+              />
+            )}
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
     </View>

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -20,7 +20,7 @@ const DatePickerAndroid = ({
   helpText,
   style,
   testID,
-}: DatePickerProps) => {
+}: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import formatDate from 'date-fns/fp/format';
+
+import BottomSheet from '../BottomSheet';
+import TextInput from '../TextInput';
+import Button from '../Button';
+import type { DatePickerProps } from './types';
+import Calendar, { CalendarProps } from '../Calendar';
+
+const InternalCalendar = ({
+  minDate,
+  maxDate,
+  value,
+  onChange,
+}: Pick<CalendarProps, 'minDate' | 'maxDate' | 'value' | 'onChange'>) => {
+  const [visibleDate, setVisibleDate] = useState(value || new Date());
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
+  return (
+    <Calendar
+      testID="calendar"
+      value={selectingDate}
+      visibleDate={visibleDate}
+      onChange={(date) => {
+        setSelectingDate(date);
+        if (onChange) {
+          onChange(date);
+        }
+      }}
+      onPreviousPress={() =>
+        setVisibleDate(
+          new Date(visibleDate.getFullYear(), visibleDate.getMonth() - 1, 1)
+        )
+      }
+      onNextPress={() =>
+        setVisibleDate(
+          new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1)
+        )
+      }
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+};
+
+const DatePickerCalendar = ({
+  value,
+  minDate = new Date('1900-01-01T00:00:00.000Z'),
+  maxDate = new Date('2100-01-01T00:00:00.000Z'),
+  label,
+  placeholder,
+  onChange,
+  confirmLabel,
+  displayFormat = 'dd/MM/yyyy',
+  disabled = false,
+  required,
+  error,
+  helpText,
+  style,
+  testID,
+}: Omit<DatePickerProps, 'variant'>) => {
+  const [open, setOpen] = useState(false);
+
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
+  const displayValue = value ? formatDate(displayFormat, value) : '';
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+      <View pointerEvents="none" testID="datePickerCalendar">
+        <TextInput
+          label={label}
+          value={displayValue}
+          suffix="calendar-dates-outlined"
+          placeholder={placeholder || displayFormat}
+          disabled={disabled}
+          error={error}
+          required={required}
+          helpText={helpText}
+          testID={testID}
+          style={style}
+        />
+      </View>
+      <BottomSheet
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        header={label}
+        footer={
+          <Button
+            variant="text"
+            text={confirmLabel}
+            onPress={() => {
+              if (selectingDate) {
+                onChange(selectingDate);
+              }
+              setOpen(false);
+            }}
+          />
+        }
+      >
+        <InternalCalendar
+          minDate={minDate}
+          maxDate={maxDate}
+          value={value}
+          onChange={setSelectingDate}
+        />
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+};
+
+export default DatePickerCalendar;

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -25,7 +25,7 @@ const DatePickerIOS = ({
   helpText,
   style,
   testID,
-}: DatePickerProps) => {
+}: Omit<DatePickerProps, 'variant'>) => {
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 

package/src/components/DatePicker/__tests__/DatePicker.spec.tsx

@@ -6,33 +6,52 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 describe('DatePicker', () => {
   it('renders DatePickerIOS when OS is iOS', () => {
     Platform.OS = 'ios';
-    const { getByTestId } = renderWithTheme(
+    const { getByTestId, toJSON } = renderWithTheme(
       <DatePicker
         label="Start date"
-        value={new Date('December 17, 1995')}
-        minDate={new Date('December 17, 1994')}
-        maxDate={new Date('December 17, 1996')}
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
         confirmLabel="Confirm"
         onChange={jest.fn()}
       />
     );
 
+    expect(toJSON()).toMatchSnapshot();
     expect(getByTestId('datePickerInputIOS')).toBeDefined();
   });
 
   it('renders DatePickerAndroid when OS is android', () => {
     Platform.OS = 'android';
-    const { getByTestId } = renderWithTheme(
+    const { getByTestId, toJSON } = renderWithTheme(
       <DatePicker
         label="Start date"
-        value={new Date('December 17, 1995')}
-        minDate={new Date('December 17, 1994')}
-        maxDate={new Date('December 17, 1996')}
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
         confirmLabel="Confirm"
         onChange={jest.fn()}
       />
     );
 
+    expect(toJSON()).toMatchSnapshot();
     expect(getByTestId('datePickerInputAndroid')).toBeDefined();
   });
+
+  it('renders variant Calendar', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        variant="calendar"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('datePickerCalendar')).toBeDefined();
+  });
 });

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -0,0 +1,61 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import type { ModalProps } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import DatePickerCalendar from '../DatePickerCalendar';
+
+jest.mock('react-native/Libraries/Modal/Modal', () => {
+  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
+  return (props: ModalProps) => <Modal {...props} />;
+});
+
+describe('DatePickerCalendar', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <DatePickerCalendar
+        value={new Date('1995-12-21T00:00:00.000Z')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Start date')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('21/12/1995');
+    expect(queryByTestId('calendar')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('calendar')).toBeTruthy();
+
+    expect(getByText('December 1995')).toBeDefined();
+    expect(getByText('Mo')).toBeDefined();
+    expect(getByText('Tu')).toBeDefined();
+    expect(getByText('We')).toBeDefined();
+    expect(getByText('Th')).toBeDefined();
+    expect(getByText('Fr')).toBeDefined();
+    expect(getByText('Sa')).toBeDefined();
+    expect(getByText('Su')).toBeDefined();
+    // Change date
+    fireEvent.press(getByText('14'));
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('1995-12-14T00:00:00.000Z'));
+  });
+
+  it('renders correct help text', () => {
+    const { getByText } = renderWithTheme(
+      <DatePickerCalendar
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        helpText="This is help text"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByText('This is help text')).toBeTruthy();
+  });
+});