feat: add locale prop for locale string of DatePicker

hyochan · Sep 14, 2020 · 9abba22 · 9abba22
1 parent 25739dc
commit 9abba22
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/main/DatePicker/Calendar/Calendar.tsx b/main/DatePicker/Calendar/Calendar.tsx
@@ -48,6 +48,7 @@ interface Props {
   pastRange?: number; // Number of past months displayed on the calendar
   futureRange?: number; // Number of future months displayed on the calendar
   calendarWidth: number; // calendar width
+  locale?: string;
   titleContent?: (monthFirst: Date) => React.ReactElement;
   weekdayFormat?: 'narrow' | 'short';
 }
@@ -134,6 +135,7 @@ function Calendar(props: Props): React.ReactElement {
           width: props.calendarWidth,
           height: 22,
         }}
+        locale={props.locale}
         weekdayFormat={props.weekdayFormat}
       />
       <FlatList

diff --git a/main/DatePicker/Calendar/CalendarWeekDays.tsx b/main/DatePicker/Calendar/CalendarWeekDays.tsx
@@ -28,6 +28,7 @@ const DayTitle = styled.Text`
 interface Props {
   style?: ViewStyle;
   calendarWidth: number;
+  locale?: string;
   weekdayFormat?: 'narrow' | 'short';
 }
 
@@ -39,7 +40,7 @@ function CalendarWeekDays(props: Props): React.ReactElement {
 
   for (let idx = 0; idx <= 6; idx++) {
     const matchMonth = new Date(2020, 8, 6 + idx);
-    const weekDay = matchMonth.toLocaleString('default', {
+    const weekDay = matchMonth.toLocaleString(props.locale, {
       weekday: props.weekdayFormat || 'narrow', // 'narrow',
     });
 

diff --git a/main/DatePicker/PickerCalendar.tsx b/main/DatePicker/PickerCalendar.tsx
@@ -28,6 +28,7 @@ interface Props {
   selectedDate?: Date;
   onSelectDate: (date: Date) => void;
   containerStyle?: ViewStyle;
+  locale?: string;
   onBackdropPress?: () => void;
   calendarWidth?: number;
   weekdayFormat?: 'narrow' | 'short';
@@ -36,7 +37,7 @@ interface Props {
 }
 
 const PickerCalendar: FC<Props> = (props) => {
-  const { calendarWidth = 300 } = props;
+  const { calendarWidth = 300, locale = 'default' } = props;
 
   return (
     <Modal visible={props.visible} transparent={true} animationType={'fade'}>
@@ -70,6 +71,7 @@ const PickerCalendar: FC<Props> = (props) => {
                 containerStyle={{
                   overflow: 'hidden',
                 }}
+                locale={locale}
                 renderDay={({
                   date,
                   isCurrentMonth,

diff --git a/main/DatePicker/README.md b/main/DatePicker/README.md
@@ -16,6 +16,7 @@
 | style                |           | ViewStyle                                     |                                        |
 | label                |           | string                                        | `default arrow image`                  |
 | labelTextStyle       |           | TextStyle                                     | ``                                     |
+| locale               |           | string                                        | `default`                              |
 | errorText            |           | string                                        | `Invalid Date`                         |
 | errorTextStyle       |           | TextStyle                                     | `{ color: '#F00', textAlign: 'left' }` |
 | dateTextStyle        |           | TextStyle                                     |

diff --git a/main/DatePicker/index.tsx b/main/DatePicker/index.tsx
@@ -17,6 +17,7 @@ interface Props {
   style?: ViewStyle;
   label?: string;
   labelTextStyle?: TextStyle;
+  locale?: string;
   errorText?: string;
   errorTextStyle?: TextStyle;
   dateTextStyle?: TextStyle;
@@ -59,6 +60,7 @@ const DatePicker = (props: Props): React.ReactElement => {
           setCalendarVisible(false);
         }}
         containerStyle={{ width: 300, height: 350 }}
+        locale={props.locale}
         weekdayFormat={props.weekdayFormat}
         titleContent={props.titleContent}
       />

diff --git a/main/__tests__/DatePicker.test.tsx b/main/__tests__/DatePicker.test.tsx
@@ -14,7 +14,7 @@ const standardDate = new Date('2020-09-13');
 
 describe('[DatePicker] render', () => {
   it('should render without crashing', () => {
-    const rendered = render(<DatePicker selectedDate={standardDate} />).asJSON();
+    const rendered = render(<DatePicker selectedDate={standardDate} locale={'en'} />).asJSON();
 
     expect(rendered).toMatchSnapshot();
     expect(rendered).toBeTruthy();
@@ -62,6 +62,7 @@ describe('[PickerCalendar] render', () => {
         visible={false}
         onSelectDate={(): void => {}}
         selectedDate={standardDate}
+        locale={'en'}
         weekdayFormat={'narrow'} />,
     ).asJSON();
 
@@ -77,6 +78,7 @@ describe('[Calendar]', () => {
         initDate={standardDate}
         renderDay={() => <CalendarDate date={standardDate} isToday={false} />}
         calendarWidth={300}
+        locale={'en'}
       />,
     ).asJSON();
 
@@ -139,7 +141,7 @@ describe('[CalendarMonth] render', () => {
 describe('[CalendarWeekDays] render', () => {
   it('should render without crashing', () => {
     const rendered = render(
-      <CalendarWeekDays calendarWidth={300} weekdayFormat={'narrow'} />,
+      <CalendarWeekDays calendarWidth={300} weekdayFormat={'narrow'} locale={'en'} />,
     ).asJSON();
 
     expect(rendered).toMatchSnapshot();