Renamed NewDatePicker to DatePicker

src/components/NewDatePicker/index.js → src/components/DatePicker/index.js

@@ -44,7 +44,7 @@ const datePickerDefaultProps = {
     value: undefined,
 };
 
-function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) {
+function DatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) {
     const styles = useThemeStyles();
     const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
 
@@ -99,8 +99,8 @@ function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inpu
     );
 }
 
-NewDatePicker.propTypes = propTypes;
-NewDatePicker.defaultProps = datePickerDefaultProps;
-NewDatePicker.displayName = 'NewDatePicker';
+DatePicker.propTypes = propTypes;
+DatePicker.defaultProps = datePickerDefaultProps;
+DatePicker.displayName = 'DatePicker';
 
-export default withLocalize(NewDatePicker);
+export default withLocalize(DatePicker);

src/pages/EditRequestCreatedPage.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -34,7 +34,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >
-                <NewDatePicker
+                <DatePicker
                     inputID="created"
                     label={translate('common.date')}
                     defaultValue={defaultCreated}

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -5,10 +5,10 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -230,7 +230,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         placeholder={translate('common.phoneNumberPlaceholder')}
                         shouldSaveDraft
                     />
-                    <NewDatePicker
+                    <DatePicker
                         inputID="dob"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.dob)}

src/pages/ReimbursementAccount/CompanyStep.js

@@ -7,10 +7,10 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import Picker from '@components/Picker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import StatePicker from '@components/StatePicker';
@@ -241,7 +241,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     />
                 </View>
                 <View style={styles.mt4}>
-                    <NewDatePicker
+                    <DatePicker
                         inputID="incorporationDate"
                         label={translate('companyStep.incorporationDate')}
                         placeholder={translate('companyStep.incorporationDatePlaceholder')}

src/pages/ReimbursementAccount/IdentityForm.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import InputWrapper from '@components/Form/InputWrapper';
-import NewDatePicker from '@components/NewDatePicker';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -171,7 +171,7 @@ function IdentityForm(props) {
                     />
                 </View>
             </View>
-            <NewDatePicker
+            <DatePicker
                 inputID={props.inputKeys.dob}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.dob')}`}

src/pages/iou/MoneyRequestDatePage.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
@@ -99,7 +99,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) {
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >
-                <NewDatePicker
+                <DatePicker
                     inputID="moneyRequestCreated"
                     label={translate('common.date')}
                     defaultValue={iou.created}

src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js

@@ -3,10 +3,10 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
@@ -81,7 +81,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
-                    <NewDatePicker
+                    <DatePicker
                         inputID="dob"
                         label={translate('common.date')}
                         defaultValue={privatePersonalDetails.dob || ''}

src/stories/Form.stories.js

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import Picker from '@components/Picker';
@@ -29,6 +30,7 @@ const story = {
         CheckboxWithLabel,
         Picker,
         StatePicker,
+        DatePicker,
     },
 };
 
@@ -67,6 +69,11 @@ function Template(args) {
                 containerStyles={[styles.mt4]}
                 hint="No PO box"
             />
+            <DatePicker
+                inputID="dob"
+                label="Date of Birth"
+                containerStyles={[styles.mt4]}
+            />
             <View>
                 <InputWrapper
                     InputComponent={Picker}

tests/unit/CalendarPickerTest.js

@@ -1,6 +1,6 @@
 import {fireEvent, render, within} from '@testing-library/react-native';
 import {addMonths, addYears, subYears} from 'date-fns';
-import CalendarPicker from '../../src/components/NewDatePicker/CalendarPicker';
+import CalendarPicker from '../../src/components/DatePicker/CalendarPicker';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
 

tests/unit/generateMonthMatrixTest.js

@@ -1,4 +1,4 @@
-import generateMonthMatrix from '../../src/components/NewDatePicker/CalendarPicker/generateMonthMatrix';
+import generateMonthMatrix from '../../src/components/DatePicker/CalendarPicker/generateMonthMatrix';
 
 describe('generateMonthMatrix', () => {
     it('returns the correct matrix for January 2022', () => {