Merge pull request #152 from data-driven-forms/allow-strings-for-disabled-days-time-picker

Allow strings for disabled days time picker

Author: rvsia

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -405,9 +405,10 @@ const output = {
                   component: components.DATE_PICKER,
                   isClearable: true,
                   disabledDays: [
+                    'today',
                     new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 5),
                     {
-                      before: new Date(),
+                      before: 'Tue Oct 08 2019 10:23:03 GMT+0200 (Central European Summer Time)',
                     },
                   ],
                 },

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js

@@ -3,6 +3,7 @@ import { Overlay } from 'patternfly-react';
 import PropTypes from 'prop-types';
 import PickerInput from './picker-input';
 import PopoverRoot from './popover-root';
+import { createDisabledDays } from './helpers';
 
 const selectValidDate = (newDate, disabledDays) => {
   const { after, before } = disabledDays.find(item => typeof item === 'object' && !(item instanceof Date)) || {};
@@ -107,6 +108,7 @@ export class DateTimePicker extends React.Component {
       disabledDays,
       isClearable,
     } = this.props;
+    const cleanDisabledDays = createDisabledDays(disabledDays);
     return (
       <div style={{ position: 'relative' }} ref={ this.wrapperRef } >
         <PickerInput
@@ -142,7 +144,7 @@ export class DateTimePicker extends React.Component {
             locale={ locale }
             todayButtonLabel={ todayButtonLabel }
             showTodayButton={ showTodayButton }
-            disabledDays={ disabledDays }
+            disabledDays={ cleanDisabledDays }
           />
         </Overlay>
       </div>

packages/pf3-component-mapper/src/form-fields/date-time-picker/helpers.js

@@ -0,0 +1,23 @@
+const createDateObject = value => {
+  if (value === 'today') {
+    return new Date();
+  }
+
+  if (typeof value === 'string') {
+    return new Date(value);
+  }
+
+  return value;
+};
+
+export const createDisabledDays = disabledDays => disabledDays.map(item => {
+  if (typeof item === 'object' && !(item instanceof Date) && !Array.isArray(item)) {
+
+    return Object.keys(item).reduce((acc, curr) => ({
+      ...acc,
+      [curr]: createDateObject(item[curr]),
+    }), {});
+  }
+
+  return createDateObject(item);
+});

packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/helpers.test.js

@@ -0,0 +1,56 @@
+import { createDisabledDays } from '../../../form-fields/date-time-picker/helpers';
+
+describe('<DateTimePicker /> helpers', () => {
+  it('should convert string into Date object', () => {
+    const inputValue = [
+      'Tue Oct 08 2019 13:27:20 GMT+0200 (Central European Summer Time)',
+      '1995-12-18T03:24:00',
+      new Date(),
+    ];
+    const expectedValue = [
+      expect.any(Date),
+      expect.any(Date),
+      expect.any(Date),
+    ];
+
+    const output = createDisabledDays(inputValue);
+    expect(output).toEqual(expectedValue);
+    expect(output[0].getFullYear()).toEqual(2019);
+    expect(output[1].getFullYear()).toEqual(1995);
+    expect(output[1].getDay()).toEqual(1);
+    expect(output[1].getMonth()).toEqual(11);
+  });
+
+  it('should return Date object if used alias today', () => {
+    const inputValue = [
+      'today',
+    ];
+    const expectedValue = [
+      expect.any(Date),
+    ];
+
+    const output = createDisabledDays(inputValue);
+    expect(output).toEqual(expectedValue);
+  });
+
+  it('should return range object with correct keys', () => {
+    const inputValue = [
+      {
+        before: 'Tue Oct 08 2019 13:27:20 GMT+0200 (Central European Summer Time)',
+        after: '1995-12-18T03:24:00',
+
+      },
+      new Date(),
+    ];
+    const expectedValue = [
+      {
+        before: expect.any(Date),
+        after: expect.any(Date),
+      },
+      expect.any(Date),
+    ];
+
+    const output = createDisabledDays(inputValue);
+    expect(output).toEqual(expectedValue);
+  });
+});

packages/react-renderer-demo/src/docs-components/component-api.md

@@ -118,7 +118,7 @@ This component is using [react-day-picker](https://react-day-picker.js.org/docs/
 |todayButtonLabel|string|Label for today button|
 |showTodayButton|bool|show/hide today button|
 |isDisabled|bool|disable component|
-|disabledDays|array|Mark specific days or a range of days as disabled. [More info](https://react-day-picker.js.org/examples/disabled)|
+|disabledDays|array|Mark specific days or a range of days as disabled. [More info](https://react-day-picker.js.org/examples/disabled). In order to store this prop to JSON we allow using string. Any string accepted by Date constructor is valid value. There is an alias for current date: `today`|
 |closeOnDaySelect|bool|Close the calendar popover after selecting date.|
 
 <ExampleLink to='date-picker' />