chore: datepicker stories

SAP · Dec 10, 2019 · 3160236 · 3160236
1 parent 39ea46d
commit 3160236
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 9 deletions.
diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
@@ -277,19 +277,19 @@ class Calendar extends Component {
         }
         if (typeof isRangeEnabled !== 'undefined' || isRangeEnabled) {
             if (blockedDates[0].isAfter(blockedDates[1])) {
-                return blockedDates[1].isSameOrBefore(date) && blockedDates[0].isSameOrAfter(date);
+                return blockedDates[1].isBefore(date) && blockedDates[0].isAfter(date);
             }
         }
-        return blockedDates[0].isSameOrBefore(date, 'day') && blockedDates[1].isSameOrAfter(date, 'day');
+        return blockedDates[0].isBefore(date, 'day') && blockedDates[1].isAfter(date, 'day');
     }
 
     disableWeekday = (date, weekDays) => {
-        const daysName = moment.weekdays();
-
-        if (typeof weekDays === 'undefined') {
+        if (!weekDays) {
             return false;
         }
 
+        const daysName = moment.weekdays();
+
         return weekDays.indexOf(daysName[date.day()]) > -1;
     }
 

diff --git a/src/Calendar/__stories__/Calendar.stories.js b/src/Calendar/__stories__/Calendar.stories.js
@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
 import {
     boolean,
     date,
+    optionsKnob,
     withKnobs
 } from '@storybook/addon-knobs';
 
@@ -21,6 +22,16 @@ const blockedDateSecondDefault = new Date(new Date().getFullYear(), new Date().g
 const disabledDateFirstDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 15);
 const disabledDateSecondDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 25);
 
+const weekdayOptions = {
+    Sunday: 'Sunday',
+    Monday: 'Monday',
+    Tuesday: 'Tuesday',
+    Wednesday: 'Wednesday',
+    Thursday: 'Thursday',
+    Friday: 'Friday',
+    Saturday: 'Saturday'
+};
+
 storiesOf('Components|Calendar', module)
     .addDecorator(withKnobs)
     .add('Default', () => (
@@ -31,6 +42,7 @@ storiesOf('Components|Calendar', module)
             disableBeforeDate={dateKnobToDate('disable before date', beforeDateDefault)}
             disableFutureDates={boolean('disable future dates', false)}
             disablePastDates={boolean('disable past dates', false)}
+            disableWeekday={optionsKnob('disable weekdays', weekdayOptions, null, { display: 'check' })}
             disableWeekends={boolean('disable weekends', false)}
             disabledDates={[dateKnobToDate('disable between dates (1)', disabledDateFirstDefault),
                 dateKnobToDate('disable between dates (2)', disabledDateSecondDefault)]} />
@@ -44,7 +56,4 @@ storiesOf('Components|Calendar', module)
     ))
     .add('range selection', () => (
         <Calendar enableRangeSelection />
-    ))
-    .add('disabled weekdays', () => (
-        <Calendar disableWeekday={['Monday', 'Wednesday', 'Friday']} />
     ));
diff --git a/src/DatePicker/__stories__/DatePicker.stories.js b/src/DatePicker/__stories__/DatePicker.stories.js
@@ -2,13 +2,50 @@ import DatePicker from '../DatePicker';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import {
+    boolean,
+    date,
+    optionsKnob,
     withKnobs
 } from '@storybook/addon-knobs';
 
+function dateKnobToDate(name, defaultValue) {
+    const stringTimestamp = date(name, defaultValue);
+    return new Date(stringTimestamp);
+}
+
+const afterDateDefault = new Date(new Date().getFullYear() + 1, 0, 1);
+const beforeDateDefault = new Date(new Date().getFullYear() - 1, 0, 1);
+
+const blockedDateFirstDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
+const blockedDateSecondDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 10);
+
+const disabledDateFirstDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 15);
+const disabledDateSecondDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 25);
+
+const weekdayOptions = {
+    Sunday: 'Sunday',
+    Monday: 'Monday',
+    Tuesday: 'Tuesday',
+    Wednesday: 'Wednesday',
+    Thursday: 'Thursday',
+    Friday: 'Friday',
+    Saturday: 'Saturday'
+};
+
 storiesOf('Components|DatePicker', module)
     .addDecorator(withKnobs)
     .add('Default', () => (
-        <DatePicker />
+        <DatePicker
+            blockedDates={[dateKnobToDate('block between dates (1)', blockedDateFirstDefault),
+                dateKnobToDate('block between dates (2)', blockedDateSecondDefault)]}
+            disableAfterDate={dateKnobToDate('disable after date', afterDateDefault)}
+            disableBeforeDate={dateKnobToDate('disable before date', beforeDateDefault)}
+            disableFutureDates={boolean('disable future dates', false)}
+            disablePastDates={boolean('disable past dates', false)}
+            disableWeekday={optionsKnob('disable weekdays', weekdayOptions, null, { display: 'check' })}
+            disableWeekends={boolean('disable weekends', false)}
+            disabledDates={[dateKnobToDate('disable between dates (1)', disabledDateFirstDefault),
+                dateKnobToDate('disable between dates (2)', disabledDateSecondDefault)]} />
     ))
     .add('disable styles', () => (
         <DatePicker
@@ -17,4 +54,7 @@ storiesOf('Components|DatePicker', module)
     .add('custom styles', () => (
         <DatePicker
             customStyles={require('../../utils/WithStyles/customStylesTest.css')} />
+    ))
+    .add('range selection', () => (
+        <DatePicker enableRangeSelection />
     ));