Refactored DatePicker to new react-date style

Tiny react-dates styling fix

Fix test regression CSS

Author: valentijnnieman

dash_core_components/dash_core_components.dev.js

@@ -27,6 +27,7 @@
   "author": "Chris Parmer <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "cross-env": "^5.2.0",
     "eslint": "^5.8.0",
     "eslint-config-prettier": "^3.0.1",
@@ -43,7 +44,8 @@
     "react-select": "^2.1.0",
     "react-select-fast-filter-options": "^0.2.3",
     "react-syntax-highlighter": "^10.0.0",
-    "react-virtualized-select": "^3.1.3"
+    "react-virtualized-select": "^3.1.3",
+    "react-with-direction": "^1.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -52,7 +54,7 @@
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "component-playground": "^2.0.0",
+    "component-playground": "^3.0.0",
     "copyfiles": "^2.0.0",
     "css-loader": "^1.0.1",
     "enzyme": "^3.7.0",

dash_core_components/dash_core_components.min.js

@@ -27,6 +27,7 @@
   "author": "Chris Parmer <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "cross-env": "^5.2.0",
     "eslint": "^5.8.0",
     "eslint-config-prettier": "^3.0.1",
@@ -43,7 +44,8 @@
     "react-select": "^2.1.0",
     "react-select-fast-filter-options": "^0.2.3",
     "react-syntax-highlighter": "^10.0.0",
-    "react-virtualized-select": "^3.1.3"
+    "react-virtualized-select": "^3.1.3",
+    "react-with-direction": "^1.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -52,7 +54,7 @@
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "component-playground": "^2.0.0",
+    "component-playground": "^3.0.0",
     "copyfiles": "^2.0.0",
     "css-loader": "^1.0.1",
     "enzyme": "^3.7.0",

dash_core_components/package.json

@@ -4,7 +4,8 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import R from 'ramda';
 import React, {Component} from 'react';
-import './css/[email protected]';
+import 'react-dates/lib/css/_datepicker.css';
+import './css/react-dates-overrides.css';
 
 /**
  * DatePickerRange is a tailor made component designed for selecting

package.json

@@ -3,6 +3,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import R from 'ramda';
 import React, {Component} from 'react';
+import 'react-dates/lib/css/_datepicker.css';
 
 /**
  * DatePickerSingle is a tailor made component designed for selecting

src/components/DatePickerRange.react.js

@@ -0,0 +1,32 @@
+/*
+* From the react-dates docs:
+* "Note: This component assumes box-sizing: border-box is set globally in your page's CSS."
+* If box-sizing: border box isn't set globally, the picker appears a bit broken.
+*/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+.DateInput_input {
+  font: 400 16px system-ui;
+}
+
+.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
+  background: #70d1ff;
+  border: #70d1ff;
+}
+.CalendarDay__selected_span {
+  background: #abe2fb;
+  border: #abe2fb;
+}
+
+.DateInput_input__focused {
+  border-bottom: 2px solid #70d1ff;
+}
+
+.DayPickerKeyboardShortcuts_show__bottomRight{
+  border-right: 33px solid #70d1ff;
+}