@hero-design/rn 8.81.3-alpha.0 → 8.82.0-alpha.0

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @hero-design/rn
 
-## 8.81.3-alpha.0
+## 8.82.0-alpha.0
+
+### Minor Changes
+
+- [#3538](https://github.com/Thinkei/hero-design/pull/3538) [`5ed5328f70f9fc624f55d7528fb406a0b4536987`](https://github.com/Thinkei/hero-design/commit/5ed5328f70f9fc624f55d7528fb406a0b4536987) Thanks [@ttkien](https://github.com/ttkien)! - [DatePicker] add variant month-year
 
 ### Patch Changes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.81.3-alpha.0",
+  "version": "8.82.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/sonar-project.properties

@@ -4,6 +4,6 @@ sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*
-sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js
+sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js,**/testUtils/**
 sonar.java.binaries=**/src/main/java
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -3,10 +3,17 @@ import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
+import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
 import useCalculateDate from './useCalculateDate';
 
+type DatePickerAndroidProps = Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+> & {
+  variant?: 'default' | 'month-year';
+};
 const DatePickerAndroid = ({
   value,
   minDate,
@@ -21,10 +28,8 @@ const DatePickerAndroid = ({
   helpText,
   style,
   testID,
-}: Omit<
-  DatePickerProps,
-  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
->) => {
+  variant = 'default',
+}: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
   const displayValue = value ? formatDate(displayFormat, value) : '';
   const pickerInitValue = value || new Date();
@@ -47,7 +52,20 @@ const DatePickerAndroid = ({
           testID={testID}
         />
       </View>
-      {open ? (
+      {open && variant === 'month-year' ? (
+        <MonthYearPickerDialogueAndroid
+          value={value}
+          minimumDate={minDate}
+          maximumDate={maxDate}
+          onChange={(action, date) => {
+            setOpen(false);
+            if (action === 'dateSetAction' && !!date) {
+              onChange(date);
+            }
+          }}
+        />
+      ) : null}
+      {open && variant === 'default' ? (
         <DateTimePicker
           testID="datePickerAndroid"
           mode="date"

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -3,6 +3,7 @@ import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
+import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
 import { useTheme } from '../../theme';
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -11,6 +12,12 @@ import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 import useCalculateDate, { getDateValue } from './useCalculateDate';
 
+type DatePickerIOSProps = Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+> & {
+  variant?: 'default' | 'month-year';
+};
 const DatePickerIOS = ({
   value,
   minDate,
@@ -27,10 +34,8 @@ const DatePickerIOS = ({
   style,
   testID,
   supportedOrientations = ['portrait'],
-}: Omit<
-  DatePickerProps,
-  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
->) => {
+  variant = 'default',
+}: DatePickerIOSProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
     getDateValue(value || new Date(), minDate, maxDate)
   );
@@ -75,21 +80,36 @@ const DatePickerIOS = ({
         supportedOrientations={supportedOrientations}
       >
         <StyledPickerWrapper>
-          <DateTimePicker
-            testID="datePickerIOS"
-            value={selectingDate}
-            minimumDate={minDate}
-            maximumDate={maxDate}
-            mode="date"
-            onChange={(_: any, date: Date | undefined) => {
-              if (date) {
-                setSelectingDate(date);
-              }
-            }}
-            display="spinner"
-            style={{ flex: 1 }}
-            textColor={theme.colors.onDefaultGlobalSurface}
-          />
+          {variant === 'month-year' ? (
+            <MonthYearPickerViewIOS
+              value={value}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              onChange={(date: Date | undefined) => {
+                if (date) {
+                  setSelectingDate(date);
+                }
+              }}
+              style={{ flex: 1 }}
+            />
+          ) : null}
+          {variant === 'default' ? (
+            <DateTimePicker
+              testID="datePickerIOS"
+              value={selectingDate}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              mode="date"
+              onChange={(_: any, date: Date | undefined) => {
+                if (date) {
+                  setSelectingDate(date);
+                }
+              }}
+              display="spinner"
+              style={{ flex: 1 }}
+              textColor={theme.colors.onDefaultGlobalSurface}
+            />
+          ) : null}
         </StyledPickerWrapper>
       </BottomSheet>
     </TouchableOpacity>

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

@@ -54,4 +54,29 @@ describe('DatePickerAndroid', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { getByTestId, queryByText, getByText } = renderWithTheme(
+      <DatePickerAndroid
+        value={new Date('December 21, 1995')}
+        variant="month-year"
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChangeSpy}
+        displayFormat="MMMM yyyy"
+      />
+    );
+
+    expect(queryByText('Start date')).toBeDefined();
+    const textInput = getByTestId('text-input');
+    expect(textInput).toHaveProp('value', 'December 1995');
+    fireEvent.press(queryByText('Start date'));
+    expect(queryByText('Android month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('Android month year picker'));
+    expect(queryByText('Android month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
 });

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

@@ -115,4 +115,33 @@ describe('DatePickerIOS', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { queryByText, getByText, getByTestId, queryByTestId } =
+      renderWithTheme(
+        <DatePickerIOS
+          value={new Date('December 21, 1995')}
+          variant="month-year"
+          label="Start date"
+          confirmLabel="Confirm"
+          onChange={onChangeSpy}
+          displayFormat="MMMM yyyy"
+        />
+      );
+
+    expect(getByText('Start date')).toBeDefined();
+    const textInput = getByTestId('text-input');
+    expect(textInput).toHaveProp('value', 'December 1995');
+    fireEvent.press(getByText('Start date'));
+    expect(getByText('Confirm')).toBeDefined();
+    expect(queryByTestId('datePickerIOS')).toBeFalsy();
+    expect(getByText('IOS month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('IOS month year picker'));
+    fireEvent.press(getByText('Confirm'));
+    expect(queryByText('iOS month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
 });

package/src/components/DatePicker/index.tsx

@@ -10,10 +10,10 @@ const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
     return <DatePickerCalendar {...props} />;
   }
   if (Platform.OS === 'ios') {
-    return <DatePickerIOS {...props} />;
+    return <DatePickerIOS {...props} variant={variant} />;
   }
 
-  return <DatePickerAndroid {...props} />;
+  return <DatePickerAndroid {...props} variant={variant} />;
 };
 
 export default DatePicker;

package/src/components/DatePicker/types.ts

@@ -13,8 +13,9 @@ export interface DatePickerProps {
    * Datepicker variants.
    *  - default: is default UI of Android or iOS
    *  - calendar: calendar UI
+   *  - month-year: month and year UI
    */
-  variant?: 'default' | 'calendar';
+  variant?: 'default' | 'calendar' | 'month-year';
   /**
    * Mininum date. Restrict the range of possible date values.
    */

package/testUtils/setup.tsx

@@ -107,28 +107,39 @@ jest.mock('react-native-gesture-handler', () => {
   };
 });
 
-jest.mock("@hero-design/react-native-month-year-picker", () => {
-  const React = jest.requireActual("react");
-  const { View, Text } = jest.requireActual("react-native");
+jest.mock('@hero-design/react-native-month-year-picker', () => {
+  const React = jest.requireActual('react');
+  const { View, Text } = jest.requireActual('react-native');
 
   return {
-    MonthYearPickerDialogueAndroid: () => (
-      <View>
-        <Text>Android picker</Text>
+    MonthYearPickerDialogueAndroid: ({ onChange }) => (
+      <View
+        onPress={() => {
+          if (onChange) {
+            onChange('dateSetAction', new Date('2019-09-01'));
+          }
+        }}
+      >
+        <Text>Android month year picker</Text>
       </View>
     ),
-    MonthYearPickerViewIOS: () => (
-      <View>
-        <Text>IOS picker</Text>
+    MonthYearPickerViewIOS: ({ onChange }) => (
+      <View
+        onPress={() => {
+          if (onChange) {
+            onChange(new Date('2019-09-01'));
+          }
+        }}
+      >
+        <Text>IOS month year picker</Text>
       </View>
     ),
   };
 });
 
-
 jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
   return jest.requireActual(
-    'react-native/Libraries/Utilities/__mocks__/BackHandler.js',
+    'react-native/Libraries/Utilities/__mocks__/BackHandler.js'
   );
 });