feat(datepicker): Turning the datepicker into a controlled component (#4)

* fix(datepicker): Adding default prop to firstDayOfWeek and improving value check in handleRangeInput

* feat(datepicker): Turning the datepicker into a controlled component

Closes #3

* style(calendar): Adding z-index: 2000 to the calendar

Author: arthurdenner

package.json

@@ -33,7 +33,8 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "date-fns": "^1.29.0",
-    "dayzed": "^2.2.0"
+    "dayzed": "^2.2.0",
+    "react-fast-compare": "^2.0.1"
   },
   "devDependencies": {
     "@storybook/react": "^3.4.0",

src/components/calendar/calendar.css

@@ -2,6 +2,7 @@
   text-align: center;
   position: absolute !important;
   margin-top: 0.25rem !important;
+  z-index: 2000;
 }
 
 .clndr-calendars-wrapper {

src/components/datepicker.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
 import { formatSelectedDate, moveElementsByN, omit, pick } from '../utils';
 import localeEn from '../locales/en-US';
 import BasicDatePicker from '../pickers/basic';
@@ -26,6 +27,7 @@ class SemanticDatepicker extends React.Component {
   static propTypes = {
     clearable: PropTypes.bool,
     date: PropTypes.instanceOf(Date),
+    firstDayOfWeek: PropTypes.number,
     format: PropTypes.string,
     keepOpenOnClear: PropTypes.bool,
     keepOpenOnSelect: PropTypes.bool,
@@ -44,13 +46,22 @@ class SemanticDatepicker extends React.Component {
     keepOpenOnClear: false,
     keepOpenOnSelect: false,
     date: undefined,
+    firstDayOfWeek: 0,
     format: 'YYYY-MM-DD',
     locale: localeEn,
     placeholder: null,
     selected: null,
     type: 'basic',
   };
 
+  componentDidUpdate(prevProps) {
+    const { selected } = this.props;
+
+    if (!isEqual(selected, prevProps.selected)) {
+      this.onDateSelected(selected);
+    }
+  }
+
   get isRangeInput() {
     return this.props.type === 'range';
   }
@@ -151,7 +162,7 @@ class SemanticDatepicker extends React.Component {
   handleRangeInput = newDates => {
     const { format, keepOpenOnSelect, onDateChange } = this.props;
 
-    if (!newDates.length) {
+    if (!newDates || !newDates.length) {
       this.resetState();
 
       return;