Add Datepicker first & last selected styles

4 files changed, 45 insertions, 12 deletions

diff --git a/config/rollup.js b/config/rollup.js
index 9ae2ce0..9782a56 100644
--- a/config/rollup.js
+++ b/config/rollup.js
@@ -9,5 +9,11 @@ export default {
     cssPlugins,
     ...jsPlugins
   ],
-  external: ['react', 'classnames', 'prop-types', 'react-icon-base', 'react-day-picker'],
+  external: [
+    'react',
+    'classnames',
+    'prop-types',
+    'react-icon-base',
+    'react-day-picker'
+  ],
 };
diff --git a/src/components/Datepicker/Datepicker.js b/src/components/Datepicker/Datepicker.js
index 66ab46e..e3b6d91 100644
--- a/src/components/Datepicker/Datepicker.js
+++ b/src/components/Datepicker/Datepicker.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import DayPicker from 'react-day-picker';
+import DayPicker, { DateUtils } from 'react-day-picker';
 
 import { Icon } from '../Icon';
 import styles from './Datepicker.module.scss';
@@ -34,11 +34,31 @@ class Navbar extends Component {
 
 class Datepicker extends Component {
   render() {
+    const modifiers = {
+      firstSelected: (day) => DateUtils.isSameDay(day, this.props.selectedDays.from),
+      lastSelected: (day) => DateUtils.isSameDay(day, this.props.selectedDays.to),
+    };
+    const modifiersStyles = {
+      firstSelected: {
+        color: 'white',
+        backgroundColor: '#2693c3',
+        borderTopLeftRadius: '4px',
+        borderBottomLeftRadius: '4px'
+      },
+      lastSelected: {
+        color: 'white',
+        backgroundColor: '#2693c3',
+        borderTopRightRadius: '4px',
+        borderBottomRightRadius: '4px'
+      },
+    };
     return (
       <DayPicker
-        {...this.props}
+        modifiers={modifiers}
         classNames={styles}
-        navbarElement={Navbar} />
+        modifiersStyles={modifiersStyles}
+        navbarElement={Navbar}
+        {...this.props} />
     )
   }
 };
diff --git a/src/components/Datepicker/Datepicker.module.scss b/src/components/Datepicker/Datepicker.module.scss
index 2edb53f..dc29d41 100644
--- a/src/components/Datepicker/Datepicker.module.scss
+++ b/src/components/Datepicker/Datepicker.module.scss
@@ -34,7 +34,9 @@
   text-align: center;
 }
 
-.weekdays {}
+.weekdays {
+  position: relative;
+}
 
 .weekdaysRow {
   display: flex;
@@ -56,7 +58,9 @@
   }
 }
 
-.body {}
+.body {
+  position: relative;
+}
 
 .week {
   display: flex;
@@ -87,6 +91,10 @@
   &:hover:not(.disabled):not(.selected) {
     background: color(gray, 9);
   }
+
+  &:active:not(.disabled) {
+    box-shadow: 0 0 0 2px color(gray, 8);
+  }
 }
 
 .footer {}
diff --git a/stories/Datepicker.js b/stories/Datepicker.js
index b4f41f1..d194e85 100644
--- a/stories/Datepicker.js
+++ b/stories/Datepicker.js
@@ -18,13 +18,12 @@ storiesOf('Datepicker', module)
         enableOutsideDays
         fixedWeeks
         initialMonth={new Date(2017, 5)}
-        selectedDays={[
-          new Date(2017, 5, 23),
+        selectedDays={
           {
-            after: new Date(2017, 5, 5),
-            before: new Date(2017, 5, 10),
-          },
-        ]}
+            from: new Date(2017, 5, 5),
+            to: new Date(2017, 5, 10),
+          }
+        }
         disabledDays={{ after: new Date() }}
         onDayClick={action('Day Clicked')}
       />