@hero-design/rn 8.63.3 → 8.64.0

package/src/components/TimePicker/__tests__/TimePickerIOS.spec.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import TimePickerIOS from '../TimePickerIOS';
+import { setOrientation } from '../../../testHelpers/utils';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -43,6 +44,36 @@ describe('TimePickerIOS', () => {
     expect(onChange).toBeCalledWith(new Date('December 17, 1995 05:30:00'));
   });
 
+  it('renders correctly in landscape mode', () => {
+    setOrientation('landscape');
+
+    const onChange = jest.fn();
+    const { getByText, queryByTestId } = renderWithTheme(
+      <TimePickerIOS
+        value={new Date('December 17, 1995 03:24:00')}
+        label="Break time"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        supportedOrientations={['landscape']}
+      />
+    );
+
+    // Open time picker
+    fireEvent.press(getByText('Break time'));
+    expect(queryByTestId('timePickerIOS')).toBeTruthy();
+
+    // Change time
+    fireEvent(
+      queryByTestId('timePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995 05:30:00')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995 05:30:00'));
+  });
+
   it('renders correct help text', () => {
     const { getByText } = renderWithTheme(
       <TimePickerIOS

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -556,6 +556,11 @@ exports[`TimePickerIOS renders correctly 1`] = `
           "position": "absolute",
         }
       }
+      supportedOrientations={
+        [
+          "portrait",
+        ]
+      }
       transparent={true}
       visible={true}
     >

package/src/components/TimePicker/types.ts

@@ -56,4 +56,8 @@ export interface TimePickerProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Supported orientations for the TimePicker modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }

package/src/testHelpers/utils.ts

@@ -0,0 +1,21 @@
+import { Dimensions } from 'react-native';
+
+const DEFAULT_DIMENSIONS = {
+  width: 390,
+  height: 844,
+};
+
+export const setOrientation = (orientation: 'portrait' | 'landscape') => {
+  jest.spyOn(Dimensions, 'get').mockImplementation(() => ({
+    width:
+      orientation === 'landscape'
+        ? DEFAULT_DIMENSIONS.height
+        : DEFAULT_DIMENSIONS.width,
+    height:
+      orientation === 'landscape'
+        ? DEFAULT_DIMENSIONS.width
+        : DEFAULT_DIMENSIONS.height,
+    scale: 1,
+    fontScale: 1,
+  }));
+};