From a34bae26762758971848a5ff718feb16346941aa Mon Sep 17 00:00:00 2001 From: Angel Araya Date: Mon, 11 Nov 2019 15:35:50 -0600 Subject: [PATCH 1/3] Update time conversions depending on source type --- package.json | 3 +- .../date-time-picker.component.js | 67 ++++++++++++++++--- src/lib/constants/index.js | 6 +- 3 files changed, 66 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index b03ea994..94132eba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inrupt/solid-react-components", - "version": "0.4.4-rc.28", + "version": "0.4.4-datepicker.12", "description": "Solid React Components", "scripts": { "start": "node scripts/start.js", @@ -54,6 +54,7 @@ "@shexjs/parser": "^1.0.0-alpha.4", "@solid/query-ldflex": "^2.6.0", "@solid/react": "^1.8.0", + "date-fns": "^2.7.0", "file-type": "^10.7.1", "html-webpack-include-assets-plugin": "^1.0.6", "jsonld": "^1.6.2", 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..41a6d383 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,6 +1,9 @@ import React, { useState, useEffect, useCallback } from 'react'; import DatePicker from 'react-datepicker'; + import moment from 'moment'; +import { setHours, setMinutes, addDays, addSeconds, parse } from 'date-fns'; + import { FormModelConfig } from '@context'; import { UITypes, FromModelUI } from '@constants'; @@ -29,15 +32,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 + } = FromModelUI; + + 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.DateTimePicker || 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 +86,36 @@ 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; + + /* 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 = setHours(setMinutes(new Date(), minMinutes), minHours); + maxTime = setHours(setMinutes(new Date(), maxMinutes), maxHours); + } else if (type === UITypes.DateTimePicker) { + /* min, max Values are datetimes and offset is in seconds */ + minDate = parse(minValue) || addSeconds(new Date(), mindatetimeOffset); + maxDate = parse(maxValue) || addSeconds(new Date(), maxdatetimeOffset); + } else if (type === UITypes.DatePicker) { + /* min, max values are dates and offset is in days */ + minDate = parse(minValue) || addDays(new Date(), mindateOffset); + maxDate = parse(maxValue) || addDays(new Date(), maxdateOffset); + } + + console.log(`type: ${type}`); + console.log(`minDate: ${minDate}`); + console.log(`maxDate: ${maxDate}`); + console.log(`minTime: ${minTime}`); + console.log(`maxTime: ${maxTime}`); + return ( {({ theme }) => ( @@ -77,8 +126,10 @@ const DateTimePicker = React.memo( id, selected: selectedDate, onChange, - minDate: minValue, - maxDate: maxValue, + minDate, + maxDate, + minTime, + maxTime, 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..44fc5a36 100644 --- a/src/lib/constants/index.js +++ b/src/lib/constants/index.js @@ -51,7 +51,11 @@ export const FromModelUI = { 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 = { From b351c7aa0988a62a82c7497f2c76d5fc05809544 Mon Sep 17 00:00:00 2001 From: Angel Araya Date: Tue, 12 Nov 2019 13:08:51 -0600 Subject: [PATCH 2/3] Restrict the datepicker options based on the form model data --- package.json | 3 +- .../date-time-picker.component.js | 69 +++++++++++++------ 2 files changed, 49 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 94132eba..b03ea994 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inrupt/solid-react-components", - "version": "0.4.4-datepicker.12", + "version": "0.4.4-rc.28", "description": "Solid React Components", "scripts": { "start": "node scripts/start.js", @@ -54,7 +54,6 @@ "@shexjs/parser": "^1.0.0-alpha.4", "@solid/query-ldflex": "^2.6.0", "@solid/react": "^1.8.0", - "date-fns": "^2.7.0", "file-type": "^10.7.1", "html-webpack-include-assets-plugin": "^1.0.6", "jsonld": "^1.6.2", 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 41a6d383..6af4ff96 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 @@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react'; import DatePicker from 'react-datepicker'; import moment from 'moment'; -import { setHours, setMinutes, addDays, addSeconds, parse } from 'date-fns'; import { FormModelConfig } from '@context'; import { UITypes, FromModelUI } from '@constants'; @@ -53,7 +52,7 @@ const DateTimePicker = React.memo( const label = rest[UI_LABEL] || ''; const type = rest[RDF_TYPE]; - const showTimeSelect = type === UITypes.DateTimePicker || type === UITypes.TimeField || false; + const showTimeSelect = type === UITypes.DateTimeField || type === UITypes.TimeField || false; const showTimeSelectOnly = type === UITypes.TimeField || false; const dateFormat = getDateFormat(type); @@ -91,6 +90,7 @@ const DateTimePicker = React.memo( let maxDate; let minTime; let maxTime; + let dateOptions; /* Transform the incoming values depending on the type of element to display */ if (type === UITypes.TimeField) { @@ -98,23 +98,53 @@ const DateTimePicker = React.memo( const [minHours, minMinutes] = minValue.split(':'); const [maxHours, maxMinutes] = maxValue.split(':'); - minTime = setHours(setMinutes(new Date(), minMinutes), minHours); - maxTime = setHours(setMinutes(new Date(), maxMinutes), maxHours); - } else if (type === UITypes.DateTimePicker) { - /* min, max Values are datetimes and offset is in seconds */ - minDate = parse(minValue) || addSeconds(new Date(), mindatetimeOffset); - maxDate = parse(maxValue) || addSeconds(new Date(), maxdatetimeOffset); - } else if (type === UITypes.DatePicker) { - /* min, max values are dates and offset is in days */ - minDate = parse(minValue) || addDays(new Date(), mindateOffset); - maxDate = parse(maxValue) || addDays(new Date(), maxdateOffset); + 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(); - console.log(`type: ${type}`); - console.log(`minDate: ${minDate}`); - console.log(`maxDate: ${maxDate}`); - console.log(`minTime: ${minTime}`); - console.log(`maxTime: ${maxTime}`); + /* 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 ( @@ -126,10 +156,7 @@ const DateTimePicker = React.memo( id, selected: selectedDate, onChange, - minDate, - maxDate, - minTime, - maxTime, + ...dateOptions, onChangeRaw: e => handleChangeRaw(e), className: theme && theme.inputText, onBlur, From 4ccd84cfeba07422cb148fb93ed1fd7ef0c7f022 Mon Sep 17 00:00:00 2001 From: Angel Araya Date: Tue, 12 Nov 2019 15:20:08 -0600 Subject: [PATCH 3/3] Fix typo: FromModelUI -> FormModelUI Fix typo: FromModelUI -> FormModelUI --- .../children/Form/UI/CheckBox/check-box.component.js | 4 ++-- .../Form/UI/DateTimePicker/date-time-picker.component.js | 4 ++-- src/lib/constants/index.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) 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 6af4ff96..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 @@ -4,7 +4,7 @@ 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'; @@ -41,7 +41,7 @@ const DateTimePicker = React.memo( MAX_DATE_OFFSET, MIN_DATETIME_OFFSET, MAX_DATETIME_OFFSET - } = FromModelUI; + } = FormModelUI; const minValue = rest[MIN_VALUE]; const maxValue = rest[MAX_VALUE]; diff --git a/src/lib/constants/index.js b/src/lib/constants/index.js index 44fc5a36..c13731c7 100644 --- a/src/lib/constants/index.js +++ b/src/lib/constants/index.js @@ -44,7 +44,7 @@ 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',