Allow utcOffset to be specified as a string (Hacker0x01#1500)

Moment, which ultimately consumes the offsets, accepts either numbers or strings. Updated prop types definitions and added a few tests.
Squar89 · Oct 17, 2018 · 73291de · 73291de
1 parent d12832a
commit 73291de
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 14 deletions.
diff --git a/docs-site/bundle.js b/docs-site/bundle.js
@@ -35901,7 +35901,10 @@
         todayButton: _propTypes2.default.string,
         useWeekdaysShort: _propTypes2.default.bool,
         formatWeekDay: _propTypes2.default.func,
-        utcOffset: _propTypes2.default.number,
+        utcOffset: _propTypes2.default.oneOfType([
+          _propTypes2.default.number,
+          _propTypes2.default.string
+        ]),
         value: _propTypes2.default.string,
         weekLabel: _propTypes2.default.string,
         withPortal: _propTypes2.default.bool,
@@ -36859,7 +36862,10 @@
         useWeekdaysShort: _propTypes2.default.bool,
         formatWeekDay: _propTypes2.default.func,
         withPortal: _propTypes2.default.bool,
-        utcOffset: _propTypes2.default.number,
+        utcOffset: _propTypes2.default.oneOfType([
+          _propTypes2.default.number,
+          _propTypes2.default.string
+        ]),
         weekLabel: _propTypes2.default.string,
         yearDropdownItemNumber: _propTypes2.default.number,
         setOpen: _propTypes2.default.func,
@@ -57849,7 +57855,10 @@
         selectsStart: _propTypes2.default.bool,
         showWeekNumbers: _propTypes2.default.bool,
         startDate: _propTypes2.default.object,
-        utcOffset: _propTypes2.default.number
+        utcOffset: _propTypes2.default.oneOfType([
+          _propTypes2.default.number,
+          _propTypes2.default.string
+        ])
       };
       exports.default = Month;
 
@@ -58071,7 +58080,10 @@
         selectsStart: _propTypes2.default.bool,
         showWeekNumber: _propTypes2.default.bool,
         startDate: _propTypes2.default.object,
-        utcOffset: _propTypes2.default.number
+        utcOffset: _propTypes2.default.oneOfType([
+          _propTypes2.default.number,
+          _propTypes2.default.string
+        ])
       };
       exports.default = Week;
 
@@ -58389,7 +58401,10 @@
         selectsEnd: _propTypes2.default.bool,
         selectsStart: _propTypes2.default.bool,
         startDate: _propTypes2.default.object,
-        utcOffset: _propTypes2.default.number
+        utcOffset: _propTypes2.default.oneOfType([
+          _propTypes2.default.number,
+          _propTypes2.default.string
+        ])
       };
       exports.default = Day;
 

diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -76,7 +76,7 @@ General datepicker component.
 | `title`                      | `string`                       |                 |                                            |
 | `todayButton`                | `string`                       |                 |                                            |
 | `useWeekdaysShort`           | `bool`                         |                 |                                            |
-| `utcOffset`                  | `number`                       |                 |                                            |
+| `utcOffset`                  | `union(number\|string)`        |                 |                                            |
 | `value`                      | `string`                       |                 |                                            |
 | `weekLabel`                  | `string`                       |                 |                                            |
 | `withPortal`                 | `bool`                         | `false`         |                                            |

diff --git a/docs/index.md b/docs/index.md
@@ -88,7 +88,7 @@ General datepicker component.
 | `todayButton`                 | `string`                       |                    |             |
 | `useShortMonthInDropdown`     | `bool`                         |                    |             |
 | `useWeekdaysShort`            | `bool`                         |                    |             |
-| `utcOffset`                   | `number`                       |                    |             |
+| `utcOffset`                   | `union(number\|string)`        |                    |             |
 | `value`                       | `string`                       |                    |             |
 | `weekLabel`                   | `string`                       |                    |             |
 | `withPortal`                  | `bool`                         | `false`            |             |

diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -105,7 +105,7 @@ export default class Calendar extends React.Component {
     useWeekdaysShort: PropTypes.bool,
     formatWeekDay: PropTypes.func,
     withPortal: PropTypes.bool,
-    utcOffset: PropTypes.number,
+    utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     weekLabel: PropTypes.string,
     yearDropdownItemNumber: PropTypes.number,
     setOpen: PropTypes.func,

diff --git a/src/day.jsx b/src/day.jsx
@@ -29,7 +29,7 @@ export default class Day extends React.Component {
     selectsEnd: PropTypes.bool,
     selectsStart: PropTypes.bool,
     startDate: PropTypes.object,
-    utcOffset: PropTypes.number
+    utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   };
 
   handleClick = event => {

diff --git a/src/index.jsx b/src/index.jsx
@@ -140,7 +140,7 @@ export default class DatePicker extends React.Component {
     todayButton: PropTypes.string,
     useWeekdaysShort: PropTypes.bool,
     formatWeekDay: PropTypes.func,
-    utcOffset: PropTypes.number,
+    utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     value: PropTypes.string,
     weekLabel: PropTypes.string,
     withPortal: PropTypes.bool,

diff --git a/src/month.jsx b/src/month.jsx
@@ -33,7 +33,7 @@ export default class Month extends React.Component {
     selectsStart: PropTypes.bool,
     showWeekNumbers: PropTypes.bool,
     startDate: PropTypes.object,
-    utcOffset: PropTypes.number
+    utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   };
 
   handleDayClick = (day, event) => {

diff --git a/src/week.jsx b/src/week.jsx
@@ -29,7 +29,7 @@ export default class Week extends React.Component {
     selectsStart: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
     startDate: PropTypes.object,
-    utcOffset: PropTypes.number
+    utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   };
 
   handleDayClick = (day, event) => {

diff --git a/test/calendar_test.js b/test/calendar_test.js
@@ -38,8 +38,15 @@ describe("Calendar", function() {
   });
 
   it("should start with the today date with specified time zone", function() {
-    const utcOffset = 12;
-    const calendar = getCalendar({ utcOffset });
+    let utcOffset = 12;
+    let calendar = getCalendar({ utcOffset });
+    assert(
+      utils.isSameDay(calendar.state().date, utils.newDateWithOffset(utcOffset))
+    );
+
+    // using string offsets
+    utcOffset = "+12:00";
+    calendar = getCalendar({ utcOffset });
     assert(
       utils.isSameDay(calendar.state().date, utils.newDateWithOffset(utcOffset))
     );

diff --git a/test/date_utils_test.js b/test/date_utils_test.js
@@ -109,6 +109,12 @@ describe("date_utils", function() {
           setUTCOffset(newDate("2016-02-10"), -210)
         )
       ).to.be.false;
+      expect(
+        isSameUtcOffset(
+          setUTCOffset(newDate("2016-02-10"), "-05:45"),
+          setUTCOffset(newDate("2016-02-10"), "+01:00")
+        )
+      ).to.be.false;
     });
 
     it("should return true for equal utc offsets, regardless of dates", function() {
@@ -126,6 +132,18 @@ describe("date_utils", function() {
           setUTCOffset(newDate("2016-02-15"), 6)
         )
       ).to.be.true;
+      expect(
+        isSameUtcOffset(
+          setUTCOffset(newDate("2016-12-10"), "+04:00"),
+          setUTCOffset(newDate("2016-02-15"), "+04:00")
+        )
+      ).to.be.true;
+      expect(
+        isSameUtcOffset(
+          setUTCOffset(newDate("2016-12-10"), "-02:00"),
+          setUTCOffset(newDate("2016-02-15"), "-0200")
+        )
+      ).to.be.true;
     });
   });
 

diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -799,6 +799,22 @@ describe("DatePicker", () => {
     expect(tmzDatePicker.find("input").prop("value")).to.equal(
       "2016-11-22 06:00"
     );
+
+    // using string offsets
+    tmzDatePicker.setState({ startDate: date, utcOffset: "-06:00" });
+
+    expect(tmzDatePicker.find("input").prop("value")).to.equal(
+      "2016-11-21 18:00"
+    );
+
+    tmzDatePicker.setState({
+      utcOffset: "+06:00",
+      startDate: utils.setUTCOffset(utils.cloneDate(date), 6)
+    });
+
+    expect(tmzDatePicker.find("input").prop("value")).to.equal(
+      "2016-11-22 06:00"
+    );
   });
   it("should correctly update the input when the value prop changes", () => {
     const datePicker = mount(<DatePicker />);