From 3c8d55459e08babff82188ba0ec691c474763b76 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Tue, 8 Oct 2019 13:37:56 +0200 Subject: [PATCH 1/2] fix(pf3): Allowed usage of strings for disabledDays --- .../demo/demo-schemas/sandbox.js | 3 +- .../date-time-picker/date-time-picker.js | 4 +- .../form-fields/date-time-picker/helpers.js | 23 ++++++++ .../date-time-picker/helpers.test.js | 56 +++++++++++++++++++ 4 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 packages/pf3-component-mapper/src/form-fields/date-time-picker/helpers.js create mode 100644 packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/helpers.test.js diff --git a/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js b/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js index 05a26a0ad..d9641ecb7 100644 --- a/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js +++ b/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)', }, ], }, diff --git a/packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js b/packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js index a29b3d412..97e4860ce 100644 --- a/packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js +++ b/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 (
diff --git a/packages/pf3-component-mapper/src/form-fields/date-time-picker/helpers.js b/packages/pf3-component-mapper/src/form-fields/date-time-picker/helpers.js new file mode 100644 index 000000000..3e696c8bc --- /dev/null +++ b/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); +}); diff --git a/packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/helpers.test.js b/packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/helpers.test.js new file mode 100644 index 000000000..8ea3e40a7 --- /dev/null +++ b/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(' 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); + }); +}); From d7ec5670c8897f16c2f8b069d1a01a827eae27c8 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Tue, 8 Oct 2019 13:38:14 +0200 Subject: [PATCH 2/2] Updated componentApi docs for date-time picker --- .../react-renderer-demo/src/docs-components/component-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-renderer-demo/src/docs-components/component-api.md b/packages/react-renderer-demo/src/docs-components/component-api.md index f9a24a90f..e21bfa5f6 100644 --- a/packages/react-renderer-demo/src/docs-components/component-api.md +++ b/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.|