refactor: upgrade date-fns to v2 (rsuite#1064)

* refactor: upgrade date-fns to v2 * fix: change useDateFnsPolyfill from declare to constance variable * fix: update Spanish formatPattern * fix: control polyfill by global define '__RSUITE_ENABLE_DATE_FNS_POLYFILL__' * chore: update package-lock.json * fix: change ISO week to locale week rsuite#892 * fix: remove polyfill Co-authored-by: Sleaf <[email protected]>
mehaksaini2811 · Jul 20, 2020 · cb7f227 · cb7f227
1 parent 4466927
commit cb7f227
Show file tree

Hide file tree

Showing 79 changed files with 409 additions and 316 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -9,7 +9,6 @@ module.exports = (api, options) => {
 
   const plugins = [
     'lodash',
-    'date-fns',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator',

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@rsuite/responsive-nav": "0.0.10",
     "color": "^3.1.2",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.19.1",
     "isomorphic-fetch": "^2.2.1",

diff --git a/docs/pages/components/calendar/index.tsx b/docs/pages/components/calendar/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { default as dateFns } from 'date-fns';
+import * as dateFns from 'date-fns';
 import { Calendar, Button, Tag, Popover, Whisper, Badge } from 'rsuite';
 import DefaultPage from '@/components/Page';
 

diff --git a/docs/pages/components/date-picker/en-US/custom.md b/docs/pages/components/date-picker/en-US/custom.md
@@ -19,7 +19,7 @@ const instance = (
           label: 'Prev Day',
           closeOverlay: false,
           value: datePage => {
-            return dateFns.addDays(dateFns.parse(datePage), -1);
+            return dateFns.addDays(dateFns.parseISO(datePage), -1);
           }
         }
       ]}

diff --git a/docs/pages/components/date-picker/en-US/disabled.md b/docs/pages/components/date-picker/en-US/disabled.md
@@ -16,7 +16,7 @@ const DatePickerInstance = props => (
     <p> Disable Month</p>
     <DatePicker
       disabledDate={date => dateFns.isBefore(date, new Date())}
-      format="YYYY-MM"
+      format="yyyy-MM"
     />
 
     <p> Disable Time</p>

diff --git a/docs/pages/components/date-picker/en-US/format-month.md b/docs/pages/components/date-picker/en-US/format-month.md
@@ -3,10 +3,10 @@
 <!--start-code-->
 ```js
 const DatePickerInstance = props => (
-   <DatePicker format="YYYY-MM" ranges={[]} />
+   <DatePicker format="yyyy-MM" ranges={[]} />
 );
 
 ReactDOM.render(<DatePickerInstance />);
 
 ```
-<!--end-code-->
+<!--end-code-->
diff --git a/docs/pages/components/date-picker/en-US/format-time-meridian.md b/docs/pages/components/date-picker/en-US/format-time-meridian.md
@@ -13,9 +13,9 @@ const ranges = [
 ];
 const App = () => (
   <div>
-    <DatePicker format="DD MMM YYYY hh:mm:ss A" showMeridian ranges={ranges} />
+    <DatePicker format="dd MMM yyyy hh:mm:ss a" showMeridian ranges={ranges} />
     <hr />
-    <DatePicker format="hh:mm:ss A" showMeridian ranges={ranges} />
+    <DatePicker format="hh:mm:ss a" showMeridian ranges={ranges} />
   </div>
 );
 

diff --git a/docs/pages/components/date-picker/en-US/format.md b/docs/pages/components/date-picker/en-US/format.md
@@ -5,7 +5,7 @@
 ```js
 const instance = (
   <DatePicker
-    format="YYYY-MM-DD HH:mm:ss"
+    format="yyyy-MM-dd HH:mm:ss"
     ranges={[
       {
         label: 'Now',

diff --git a/docs/pages/components/date-picker/en-US/index.md b/docs/pages/components/date-picker/en-US/index.md
@@ -34,7 +34,7 @@ import { DatePicker } from 'rsuite';
 | disabledHours         | (hour:number, date:Date) => boolean          | Disabled hours                                                                       |
 | disabledMinutes       | (minute:number, date:Date) => boolean        | Disabled minutes                                                                     |
 | disabledSeconds       | (second:number, date:Date) => boolean        | Disabled seconds                                                                     |
-| format                | string `('YYYY-MM-DD')`                      | Format date                                                                          |
+| format                | string `('yyyy-MM-dd')`                      | Format date                                                                          |
 | hideHours             | (hour:number, date:Date) => boolean          | Hidden hours                                                                         |
 | hideMinutes           | (minute:number, date:Date) => boolean        | Hidden minutes                                                                       |
 | hideSeconds           | (second:number, date:Date) => boolean        | Hidden seconds                                                                       |

diff --git a/docs/pages/components/date-picker/en-US/intl.md b/docs/pages/components/date-picker/en-US/intl.md
@@ -8,7 +8,7 @@
 const DatePickerIntl = props => (
   <div className="field only-date">
     <DatePicker
-      format="YYYY-MM-DD HH:mm:ss"
+      format="yyyy-MM-dd HH:mm:ss"
       locale={{
         sunday: 'Su',
         monday: 'Mo',

diff --git a/docs/pages/components/date-picker/en-US/range.md b/docs/pages/components/date-picker/en-US/range.md
@@ -5,9 +5,9 @@
 ```js
 const instance = (
   <InputGroup style={{ width: 460 }}>
-    <DatePicker format="YYYY-MM-DD HH:mm:ss" block appearance="subtle" />
+    <DatePicker format="yyyy-MM-dd HH:mm:ss" block appearance="subtle" />
     <InputGroup.Addon>至</InputGroup.Addon>
-    <DatePicker format="YYYY-MM-DD HH:mm:ss" block appearance="subtle" />
+    <DatePicker format="yyyy-MM-dd HH:mm:ss" block appearance="subtle" />
   </InputGroup>
 );
 

diff --git a/docs/pages/components/date-picker/index.tsx b/docs/pages/components/date-picker/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import dateFns from 'date-fns';
+import * as dateFns from 'date-fns';
 import { DatePicker, Button, InputGroup } from 'rsuite';
 import DefaultPage from '@/components/Page';
 

diff --git a/docs/pages/components/date-picker/zh-CN/custom.md b/docs/pages/components/date-picker/zh-CN/custom.md
@@ -21,7 +21,7 @@ const instance = (
           label: '前一天',
           closeOverlay: false,
           value: datePage => {
-            return dateFns.addDays(dateFns.parse(datePage), -1);
+            return dateFns.addDays(dateFns.parseISO(datePage), -1);
           }
         }
       ]}

diff --git a/docs/pages/components/date-picker/zh-CN/disabled.md b/docs/pages/components/date-picker/zh-CN/disabled.md
@@ -16,7 +16,7 @@ const DatePickerInstance = props => (
     <p> 禁用月份</p>
     <DatePicker
       disabledDate={date => dateFns.isBefore(date, new Date())}
-      format="YYYY-MM"
+      format="yyyy-MM"
     />
 
     <p> 禁用时间</p>

diff --git a/docs/pages/components/date-picker/zh-CN/format-month.md b/docs/pages/components/date-picker/zh-CN/format-month.md
@@ -3,10 +3,10 @@
 <!--start-code-->
 ```js
 const DatePickerInstance = props => (
-   <DatePicker format="YYYY-MM" ranges={[]} />
+   <DatePicker format="yyyy-MM" ranges={[]} />
 );
 
 ReactDOM.render(<DatePickerInstance />);
 
 ```
-<!--end-code-->
+<!--end-code-->
diff --git a/docs/pages/components/date-picker/zh-CN/format-time-meridian.md b/docs/pages/components/date-picker/zh-CN/format-time-meridian.md
@@ -11,9 +11,9 @@ const ranges = [
 ];
 const App = () => (
   <div>
-    <DatePicker format="YYYY-MM-DD hh:mm:ss A" showMeridian ranges={ranges} />
+    <DatePicker format="yyyy-MM-dd hh:mm:ss a" showMeridian ranges={ranges} />
     <hr />
-    <DatePicker format="hh:mm:ss A" showMeridian ranges={ranges} />
+    <DatePicker format="hh:mm:ss a" showMeridian ranges={ranges} />
   </div>
 );
 

diff --git a/docs/pages/components/date-picker/zh-CN/format.md b/docs/pages/components/date-picker/zh-CN/format.md
@@ -5,7 +5,7 @@
 ```js
 const instance = (
   <DatePicker
-    format="YYYY-MM-DD HH:mm:ss"
+    format="yyyy-MM-dd HH:mm:ss"
     ranges={[
       {
         label: 'Now',

diff --git a/docs/pages/components/date-picker/zh-CN/index.md b/docs/pages/components/date-picker/zh-CN/index.md
@@ -34,7 +34,7 @@ import { DatePicker } from 'rsuite';
 | disabledHours         | (hour:number, date:Date) => boolean          | 禁用小时                                                  |
 | disabledMinutes       | (minute:number, date:Date) => boolean        | 禁用分钟                                                  |
 | disabledSeconds       | (second:number, date:Date) => boolean        | 禁用秒                                                    |
-| format                | string `('YYYY-MM-DD')`                      | 日期显示格式化                                            |
+| format                | string `('yyyy-MM-dd')`                      | 日期显示格式化                                            |
 | hideHours             | (hour:number, date:Date) => boolean          | 隐藏小时                                                  |
 | hideMinutes           | (minute:number, date:Date) => boolean        | 隐藏分钟                                                  |
 | hideSeconds           | (second:number, date:Date) => boolean        | 隐藏秒                                                    |

diff --git a/docs/pages/components/date-picker/zh-CN/intl.md b/docs/pages/components/date-picker/zh-CN/intl.md
@@ -8,7 +8,7 @@
 const DatePickerIntl = props => (
   <div className="field only-date">
     <DatePicker
-      format="YYYY-MM-DD HH:mm:ss"
+      format="yyyy-MM-dd HH:mm:ss"
       locale={{
         sunday: '日',
         monday: '一',

diff --git a/docs/pages/components/date-picker/zh-CN/range.md b/docs/pages/components/date-picker/zh-CN/range.md
@@ -5,9 +5,9 @@
 ```js
 const instance = (
   <InputGroup style={{ width: 460 }}>
-    <DatePicker format="YYYY-MM-DD HH:mm:ss" block appearance="subtle" />
+    <DatePicker format="yyyy-MM-dd HH:mm:ss" block appearance="subtle" />
     <InputGroup.Addon>至</InputGroup.Addon>
-    <DatePicker format="YYYY-MM-DD HH:mm:ss" block appearance="subtle" />
+    <DatePicker format="yyyy-MM-dd HH:mm:ss" block appearance="subtle" />
   </InputGroup>
 );
 

diff --git a/docs/pages/components/date-range-picker/en-US/intl.md b/docs/pages/components/date-range-picker/en-US/intl.md
@@ -6,7 +6,7 @@
 const DateRangePickerIntl = props => (
   <div className="field only-date">
     <DateRangePicker
-      format="YYYY-MM-DD"
+      format="yyyy-MM-dd"
       locale={{
         sunday: 'Su',
         monday: 'Mo',

diff --git a/docs/pages/components/date-range-picker/index.tsx b/docs/pages/components/date-range-picker/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import dateFns from 'date-fns';
+import * as dateFns from 'date-fns';
 import { DateRangePicker, Button, Divider } from 'rsuite';
 import DefaultPage from '@/components/Page';
 

diff --git a/docs/pages/components/date-range-picker/zh-CN/intl.md b/docs/pages/components/date-range-picker/zh-CN/intl.md
@@ -6,7 +6,7 @@
 const DateRangePickerIntl = props => (
   <div className="field only-date">
     <DateRangePicker
-      format="YYYY-MM-DD"
+      format="yyyy-MM-dd"
       locale={{
         sunday: '日',
         monday: '一',

diff --git a/docs/pages/components/date-range-picker/zh-CN/value.md b/docs/pages/components/date-range-picker/zh-CN/value.md
@@ -7,7 +7,7 @@ class DateRangePickerValue extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: [dateFns.parse('2017-02-01'), dateFns.parse('2017-05-20')]
+      value: [dateFns.parseISO('2017-02-01'), dateFns.parseISO('2017-05-20')]
     };
   }
   render() {

diff --git a/docs/pages/components/form/index.tsx b/docs/pages/components/form/index.tsx
@@ -36,7 +36,7 @@ import {
   MultiCascader
 } from 'rsuite';
 import Loadable from 'react-loadable';
-import dateFns from 'date-fns';
+import * as dateFns from 'date-fns';
 
 import DefaultPage from '@/components/Page';
 import { useState } from 'react';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "classnames": ">=2.0.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "dom-lib": "^1.2.1",
     "element-resize-event": "^3.0.3",
     "lodash": "^4.17.11",
@@ -100,7 +100,6 @@
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "babel-plugin-date-fns": "^0.2.1",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-dev": "^2.0.1",

diff --git a/src/Calendar/Calendar.tsx b/src/Calendar/Calendar.tsx
@@ -8,9 +8,8 @@ import TimeDropdown from './TimeDropdown';
 import View from './View';
 import Header from './Header';
 import { getUnhandledProps, defaultProps, prefix, refType } from '../utils';
-import { disabledTime, calendarOnlyProps } from '../utils/timeUtils';
 import { shouldTime, shouldDate, shouldMonth } from '../utils/formatUtils';
-import { addMonths } from 'date-fns';
+import { disabledTime, calendarOnlyProps, addMonths } from '../utils/dateUtils';
 
 import { tuple } from '../@types/utils';
 
@@ -34,7 +33,7 @@ export interface CalendarProps {
   hideHours?: (hour: number, date: Date) => boolean;
   hideMinutes?: (minute: number, date: Date) => boolean;
   hideSeconds?: (second: number, date: Date) => boolean;
-  onMoveForword?: (nextPageDate: Date) => void;
+  onMoveForward?: (nextPageDate: Date) => void;
   onMoveBackward?: (nextPageDate: Date) => void;
   onSelect?: (date: Date, event: React.MouseEvent<HTMLDivElement>) => void;
   onToggleMonthDropdown?: (event: React.MouseEvent) => void;
@@ -66,7 +65,7 @@ class Calendar extends React.Component<CalendarProps> {
     hideHours: PropTypes.func,
     hideMinutes: PropTypes.func,
     hideSeconds: PropTypes.func,
-    onMoveForword: PropTypes.func,
+    onMoveForward: PropTypes.func,
     onMoveBackward: PropTypes.func,
     onSelect: PropTypes.func,
     onToggleMonthDropdown: PropTypes.func,
@@ -87,9 +86,9 @@ class Calendar extends React.Component<CalendarProps> {
 
   disabledTime = (date: Date) => disabledTime(this.props, date);
 
-  handleMoveForword = () => {
-    const { onMoveForword, pageDate } = this.props;
-    onMoveForword?.(addMonths(pageDate, 1));
+  handleMoveForward = () => {
+    const { onMoveForward, pageDate } = this.props;
+    onMoveForward?.(addMonths(pageDate, 1));
   };
 
   handleMoveBackward = () => {
@@ -149,7 +148,7 @@ class Calendar extends React.Component<CalendarProps> {
           showMeridian={showMeridian}
           disabledDate={this.disabledDate}
           disabledTime={this.disabledTime}
-          onMoveForword={this.handleMoveForword}
+          onMoveForward={this.handleMoveForward}
           onMoveBackward={this.handleMoveBackward}
           onToggleMonthDropdown={onToggleMonthDropdown}
           onToggleTimeDropdown={onToggleTimeDropdown}

diff --git a/src/Calendar/CalendarPanel.tsx b/src/Calendar/CalendarPanel.tsx
@@ -119,15 +119,15 @@ class CalendarPanel extends React.PureComponent<CalendarPanelProps, State> {
           className={classes}
           isoWeek={isoWeek}
           onSelect={this.handleSelect}
-          format="YYYY-MM-DD"
+          format="yyyy-MM-dd"
           calendarState={showMonth ? 'DROP_MONTH' : null}
           pageDate={value}
           renderTitle={date => (
-            <FormattedDate date={date} formatStr={locale.formattedMonthPattern || 'MMMM  YYYY'} />
+            <FormattedDate date={date} formatStr={locale.formattedMonthPattern || 'MMMM  yyyy'} />
           )}
           renderToolbar={this.renderToolbar}
           renderCell={renderCell}
-          onMoveForword={this.handleNextMonth}
+          onMoveForward={this.handleNextMonth}
           onMoveBackward={this.handlePrevMonth}
           onToggleMonthDropdown={this.handleToggleMonthDropdown}
           onChangePageDate={this.handleChangePageDate}