diff --git a/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js b/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js index 49750ee5..b3b5330b 100644 --- a/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js +++ b/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js @@ -1,6 +1,6 @@ import React from 'react'; import { FormModelConfig } from '@context'; -import { FromModelUI } from '@constants'; +import { FormModelUI } from '@constants'; type Props = { formObject: any, @@ -11,7 +11,7 @@ type Props = { }; const CheckBox = ({ id, modifyFormObject, formObject, onSave, autoSave, ...rest }: Props) => { - const { UI_VALUE, UI_DEFAULT, UI_LABEL, UI_NAME } = FromModelUI; + const { UI_VALUE, UI_DEFAULT, UI_LABEL, UI_NAME } = FormModelUI; const valueFromPod = rest[UI_VALUE] ? JSON.parse(rest[UI_VALUE]) : Number(rest[UI_DEFAULT]); const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : valueFromPod; const label = rest[UI_LABEL] || ''; diff --git a/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js b/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js index 03ed1f9b..d1be65c6 100644 --- a/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js +++ b/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js @@ -1,8 +1,10 @@ import React, { useState, useEffect, useCallback } from 'react'; import DatePicker from 'react-datepicker'; + import moment from 'moment'; + import { FormModelConfig } from '@context'; -import { UITypes, FromModelUI } from '@constants'; +import { UITypes, FormModelUI } from '@constants'; import 'react-datepicker/dist/react-datepicker.css'; @@ -29,15 +31,31 @@ const DateTimePicker = React.memo( ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBlur, ...rest }) => { const [selectedDate, setDate] = useState(null); const [invalidate, setInvalid] = useState(null); - const { DateTimePicker, TimeField } = UITypes; - const { UI_LABEL, RDF_TYPE, MIN_VALUE, MAX_VALUE } = FromModelUI; - const minValue = +rest[MIN_VALUE]; - const maxValue = +rest[MAX_VALUE]; + + const { + UI_LABEL, + RDF_TYPE, + MIN_VALUE, + MAX_VALUE, + MIN_DATE_OFFSET, + MAX_DATE_OFFSET, + MIN_DATETIME_OFFSET, + MAX_DATETIME_OFFSET + } = FormModelUI; + + const minValue = rest[MIN_VALUE]; + const maxValue = rest[MAX_VALUE]; + const mindateOffset = parseInt(rest[MIN_DATE_OFFSET], 10); + const maxdateOffset = parseInt(rest[MAX_DATE_OFFSET], 10); + const mindatetimeOffset = parseInt(rest[MIN_DATETIME_OFFSET], 10); + const maxdatetimeOffset = parseInt(rest[MAX_DATETIME_OFFSET], 10); const label = rest[UI_LABEL] || ''; const type = rest[RDF_TYPE]; - const showTimeSelect = type === DateTimePicker || type === TimeField || false; - const showTimeSelectOnly = type === TimeField || false; + + const showTimeSelect = type === UITypes.DateTimeField || type === UITypes.TimeField || false; + const showTimeSelectOnly = type === UITypes.TimeField || false; const dateFormat = getDateFormat(type); + const updateDate = useCallback(() => { const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value; @@ -67,6 +85,67 @@ const DateTimePicker = React.memo( updateDate(); }, [value, formObject]); + /* set the date ranges based on the UI Element to display */ + let minDate; + let maxDate; + let minTime; + let maxTime; + let dateOptions; + + /* Transform the incoming values depending on the type of element to display */ + if (type === UITypes.TimeField) { + /* min, max Values are times */ + const [minHours, minMinutes] = minValue.split(':'); + const [maxHours, maxMinutes] = maxValue.split(':'); + + minTime = moment() + .hours(minHours) + .minutes(minMinutes) + .toDate(); + maxTime = moment() + .hours(maxHours) + .minutes(maxMinutes) + .toDate(); + + dateOptions = { minTime, maxTime }; + } + if (type === UITypes.DateTimeField) { + /* min, max Values are datetimes and offset is in seconds */ + + if (!Number.isNaN(mindatetimeOffset)) + minDate = moment(new Date()) + .add(mindatetimeOffset, 'seconds') + .toDate(); + if (!Number.isNaN(maxdatetimeOffset)) + maxDate = moment(new Date()) + .add(maxdatetimeOffset, 'seconds') + .toDate(); + + /* min,maxValue take priority over the offsets if both values are provided */ + if (minValue) minDate = moment(minValue).toDate(); + if (maxValue) maxDate = moment(maxValue).toDate(); + + dateOptions = { minDate, maxDate }; + } + if (type === UITypes.DateField) { + /* min,maxValue are dates and offset is in days */ + + if (!Number.isNaN(mindateOffset)) + minDate = moment(new Date()) + .add(mindateOffset, 'days') + .toDate(); + if (!Number.isNaN(maxdateOffset)) + maxDate = moment(new Date()) + .add(maxdateOffset, 'days') + .toDate(); + + /* min,maxValue take priority over the offsets if both values are provided */ + if (minValue) minDate = moment(minValue).toDate(); + if (maxValue) maxDate = moment(maxValue).toDate(); + + dateOptions = { minDate, maxDate }; + } + return ( {({ theme }) => ( @@ -77,8 +156,7 @@ const DateTimePicker = React.memo( id, selected: selectedDate, onChange, - minDate: minValue, - maxDate: maxValue, + ...dateOptions, onChangeRaw: e => handleChangeRaw(e), className: theme && theme.inputText, onBlur, diff --git a/src/lib/constants/index.js b/src/lib/constants/index.js index 626f3db7..c13731c7 100644 --- a/src/lib/constants/index.js +++ b/src/lib/constants/index.js @@ -44,14 +44,18 @@ export const InputTextTypes = { 'http://www.w3.org/ns/ui#IntegerField': 'number' }; -export const FromModelUI = { +export const FormModelUI = { UI_VALUE: 'ui:value', UI_LABEL: 'ui:label', UI_NAME: 'ui:name', UI_DEFAULT: 'ui:default', RDF_TYPE: 'rdf:type', MIN_VALUE: 'ui:minValue', - MAX_VALUE: 'ui:maxValue' + MAX_VALUE: 'ui:maxValue', + MAX_DATE_OFFSET: 'ui:maxdateOffset', + MIN_DATE_OFFSET: 'ui:mindateOffset', + MAX_DATETIME_OFFSET: 'ui:maxdatetimeOffset', + MIN_DATETIME_OFFSET: 'ui:mindatetimeOffset' }; export const NotificationTypes = {