@entryscape/rdforms 10.4.0 → 10.5.0

package/src/view/react/date.js

@@ -8,107 +8,89 @@ import { TextField } from '@mui/material';
 import Select from '@mui/material/Select';
 import moment from 'moment';
 import renderingContext from '../renderingContext';
+import {
+  getDate,
+  getDatatype,
+  getDatatypeURI,
+  getDatatypeFromItem,
+  getDateValue,
+  getAllowedDateAlternatives,
+  getDatePresentation,
+} from '../jquery/util';
 
-const getDatatype = (datatype) => {
-  switch (datatype) {
-    case 'http://www.w3.org/2001/XMLSchema#dateTime':
-    case 'http://purl.org/dc/terms/W3CDTF':
-      return 'Datetime';
-    case 'http://www.w3.org/2001/XMLSchema#date':
-      return 'Date';
-    case 'http://www.w3.org/2001/XMLSchema#gYear':
-      return 'Year';
-    default:
-      return undefined;
-  }
-};
-
-const getDatatypeFromItem = (item) => {
-  const dt = item.getDatatype();
-  if (Array.isArray(dt)) {
-    return getDatatype(dt[0]);
-  }
-  return getDatatype(dt);
-};
-
-const getAllowedDateAlternatives = (item) => {
-  const dateAllowedDataAlternatives = {};
-  const dt = item.getDatatype();
-  const alts = Array.isArray(dt) ? dt : [dt];
-  alts.forEach((datatype) => {
-    const alt = getDatatype(datatype);
-    if (alt) {
-      dateAllowedDataAlternatives[alt] = true;
-    }
-  });
-  return dateAllowedDataAlternatives;
-};
 
 const getDatatypeFromBinding = binding => getDatatype(binding.getDatatype()) || getDatatypeFromItem(binding.getItem());
 
-const getDatatypeURI = (datatype) => {
-  switch (datatype) {
-    case 'Datetime':
-      return 'http://www.w3.org/2001/XMLSchema#dateTime';
-    case 'Date':
-      return 'http://www.w3.org/2001/XMLSchema#date';
-    case 'Year':
-      return 'http://www.w3.org/2001/XMLSchema#gYear';
-    default:
-      return '';
-  }
-};
-
-const getDateValue = (value, datatype) => {
-  if (value) {
-    switch (datatype) {
-      case 'Datetime':
-        return value.toISOString();
-      case 'Date':
-        // Since we cut of the timezone section at the end we need to compensate for it
-        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
-        return value.toISOString().substr(0, 10);
-      case 'Year':
-        // Since we cut of the timezone section at the end we need to compensate for it
-        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
-        return value.toISOString().substr(0, 4);
-      default:
-        return '';
-    }
-  }
-  return '';
-};
-
 const datePresenter = (fieldDiv, binding, context) => {
-  const data = binding.getValue();
-  if (data != null && data !== '') {
-    try {
-      let str;
-      if (data.indexOf('T') > 0) {
-        str = moment(data).format('lll');
-      } else if (data.length > 4) {
-        str = moment(data).format('LL');
-      } else {
-        str = moment(data).format('YYYY');
-      }
-      fieldDiv.appendChild(<div key={binding.getHash()} >{str}</div>);
-    } catch (e) {
-      console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 (potentially with time given after a 'T' character as well) but found '${data}' instead.`);
-    }
+  try {
+    const pres = getDatePresentation(binding);
+    fieldDiv.appendChild(<div key={binding.getHash()} >{pres}</div>);
+  } catch (e) {
+    console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 
+      (potentially with time given after a 'T' character as well) but found '${binding.getValue()}' instead.`);
   }
 };
 
 const presenters = renderingContext.presenterRegistry;
+presenters.itemtype('text').datatype('xsd:dateTime').register(datePresenter);
 presenters.itemtype('text').datatype('xsd:date').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:time').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gYear').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gYearMonth').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gMonthDay').register(datePresenter);
 presenters.itemtype('text').datatype('dcterms:W3CDTF').register(datePresenter);
 
+const datePickerConfig = {
+  format: {
+    Year: 'YYYY',
+    DateTime: 'YYYY-MM-DD',
+    Date: 'YYYY-MM-DD',
+    YearMonth: 'YYYY-MM',
+    MonthDay: 'MM-DD',
+    Time: 'YYYY-MM-DD', // Since datepicker is sometimes visible but disabled
+  },
+  mask: {
+    Year: '____',
+    DateTime: '____-__-__',
+    Date: '____-__-__',
+    YearMonth: '____-__',
+    MonthDay: '__-__',
+    Time: '____-__-__', // Since datepicker is sometimes visible but disabled
+  },
+  views: {
+    Year: ['year'],
+    DateTime: ['day'],
+    Date: ['day'],
+    YearMonth: ['year', 'month'],
+    MonthDay: ['month', 'day'],
+    Time: ['day'], // Since datepicker is sometimes visible but disabled
+  },
+  labelKey: {
+    Year: 'date_year',
+    DateTime: 'date_date',
+    Date: 'date_date',
+    YearMonth: 'date_year_and_month', // TODO
+    MonthDay: 'date_month_and_day', // TODO
+    Time: 'date_date', // Since datepicker is sometimes visible but disabled
+  },
+  ariaLabelKey: {
+    Year: 'date_openYearPicker',
+    DateTime: 'date_openDatePicker',
+    Date: 'date_openDatePicker',
+    YearMonth: 'date_openDatePicker', // TODO
+    MonthDay: 'date_openDatePicker', // TODO
+    Time: 'date_openDatePicker', // Since datepicker is sometimes visible but disabled
+  },
+};
+
+
 const dateEditor = (fieldDiv, binding, context) => {
   const bundle = context.view.messages;
   const DateComp = () => {
     const value = binding.getGist();
-    const alternatives = useMemo(() => getAllowedDateAlternatives(binding.getItem()));
+    const alternatives = useMemo(() => getAllowedDateAlternatives(binding.getItem()), []);
     const onlyOneAlternative = Object.keys(alternatives).length === 1;
-    const [selectedDate, setSelectedDate] = useState(value === '' ? null : new Date(value));
+    const [selectedDate, setSelectedDate] = useState(value === '' ? null : getDate(value));
     const [selectedDatatype, setDatatype] = useState(getDatatypeFromBinding(binding));
     useEffect(() => {
       context.clear = () => {
@@ -136,48 +118,47 @@ const dateEditor = (fieldDiv, binding, context) => {
       'aria-labelledby': context.view.getLabelIndex(binding),
       variant: renderingContext.materialVariant,
     };
-    const dateFormat = selectedDatatype === 'Year' ? 'YYYY' : 'YYYY-MM-DD';
+    const visibleDatePicker = alternatives.Date || alternatives.DateTime || alternatives.Year
+      || alternatives.YearMonth || alternatives.MonthDay;
+    const enabledDatePicker = selectedDatatype === 'DateTime' || selectedDatatype === 'Date'
+      || selectedDatatype === 'Year' || selectedDatatype === 'YearMonth' || selectedDatatype === 'MonthDay';
     return (
       <LocalizationProvider dateAdapter={DateAdapter}>
         <span className="rdformsDatePicker">
-          <DatePicker
-            renderInput={(props) => <TextField {...props} {...inputProps} />}
-            leftArrowButtonProps={{ 'aria-label': bundle.date_previousMonth }}
-            rightArrowButtonProps={{ 'aria-label': bundle.date_nextMonth }}
-            KeyboardButtonProps={{
-              'aria-label':
-                selectedDatatype === 'Year'
-                  ? bundle.date_openYearPicker
-                  : bundle.date_openDatePicker,
-            }}
-            label={
-              selectedDatatype === 'Year' ? bundle.date_year : bundle.date_date
-            }
-            value={selectedDate}
-            minDate={moment(new Date('0000-01-01'))}
-            inputFormat={dateFormat}
-            views={selectedDatatype === 'Year' ? ['year'] : ['day']}
-            onChange={onDateChange}
-            autoOk={true}
-            mask={selectedDatatype === 'Year' ? '____' : '____-__-__'}
-            PopperProps={{
-              modifiers: [
-                {
-                  name: 'flip',
-                  enabled: false,
-                },
-              ],
-            }}
-          />
-          {alternatives.Datetime && (
+          {visibleDatePicker && (
+            <DatePicker
+              renderInput={props => <TextField {...props} {...inputProps} />}
+              leftArrowButtonProps={{ 'aria-label': bundle.date_previousMonth }}
+              rightArrowButtonProps={{ 'aria-label': bundle.date_nextMonth }}
+              KeyboardButtonProps={{ 'aria-label': bundle[datePickerConfig.ariaLabelKey[selectedDatatype]] }}
+              label={bundle[datePickerConfig.labelKey[selectedDatatype]]}
+              {...(enabledDatePicker ? {} : { disabled: true })}
+              value={enabledDatePicker ? selectedDate : null}
+              minDate={moment(new Date('0000-01-01'))}
+              inputFormat={datePickerConfig.format[selectedDatatype]}
+              views={datePickerConfig.views[selectedDatatype]}
+              onChange={onDateChange}
+              autoOk={true}
+              mask={datePickerConfig.mask[selectedDatatype]}
+              PopperProps={{
+                modifiers: [
+                  {
+                    name: 'flip',
+                    enabled: false,
+                  },
+                ],
+              }}
+            />
+          )}
+          {(alternatives.DateTime || alternatives.Time) && (
             <TimePicker
-              renderInput={(props) => <TextField {...props} {...inputProps} />}
+              renderInput={props => <TextField {...props} {...inputProps} />}
               label={bundle.date_time}
-              {...(selectedDatatype === 'Datetime' ? {} : { disabled: true })}
+              {...(selectedDatatype === 'DateTime' || selectedDatatype === 'Time' ? {} : { disabled: true })}
               KeyboardButtonProps={{
                 'aria-label': bundle.date_openTimePicker,
               }}
-              value={selectedDatatype === 'Datetime' ? selectedDate : null}
+              value={selectedDatatype === 'DateTime' || selectedDatatype === 'Time' ? selectedDate : null}
               onChange={onDateChange}
               ampm={false}
               autoOk={true}
@@ -204,11 +185,20 @@ const dateEditor = (fieldDiv, binding, context) => {
                 {alternatives.Date && (
                   <MenuItem value="Date">{bundle.date_date}</MenuItem>
                 )}
-                {alternatives.Datetime && (
-                  <MenuItem value="Datetime">
+                {alternatives.DateTime && (
+                  <MenuItem value="DateTime">
                     {bundle.date_date_and_time}
                   </MenuItem>
                 )}
+                {alternatives.YearMonth && (
+                  <MenuItem value="YearMonth">{bundle.date_year_and_month}</MenuItem>
+                )}
+                {alternatives.MonthDay && (
+                  <MenuItem value="MonthDay">{bundle.date_month_and_day}</MenuItem>
+                )}
+                {alternatives.Time && (
+                  <MenuItem value="Time">{bundle.date_time}</MenuItem>
+                )}
               </Select>
             </FormControl>
           )}
@@ -223,4 +213,7 @@ const editors = renderingContext.editorRegistry;
 editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#date').register(dateEditor);
 editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#dateTime').register(dateEditor);
 editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#gYear').register(dateEditor);
+editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#gMonthDay').register(dateEditor);
+editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#gYearMonth').register(dateEditor);
+editors.itemtype('text').datatype('http://www.w3.org/2001/XMLSchema#time').register(dateEditor);
 editors.itemtype('text').datatype('http://purl.org/dc/terms/W3CDTF').register(dateEditor);

package/src/view/react/labels.js

@@ -1,14 +1,16 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import renderingContext from '../renderingContext';
 import { CODES } from '../../model/engine';
 
-const StyledTooltip = styled(({ className, ...props }) => (
-  <Tooltip {...props} classes={{ popper: className }} />
-))(({ theme }) => ({
+const StyledTooltip = styled(
+  forwardRef(({ className, ...props }, ref) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))
+)(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.background.default,
     fontSize: 12,
@@ -148,16 +150,18 @@ const ERR = (props) => {
 
 renderingContext.renderEditorLabelScopeEnd = (rowNode, binding, item, context) => {
   if (!item.hasStyle('nonEditable') && !item.hasStyle('heading')) {
-    let Button;
-    const card = item.getCardinality();
-    if (binding == null) {
-      Button = renderingContext.addExpandButton(rowNode, null, item, context);
-    } else if (binding.getPredicate() && !context.view.showAsTable(item) && card.max !== 1 &&
-      (card.max == null || card.max !== card.min)) {
-      Button = renderingContext.addCreateChildButton(rowNode, null, binding, context);
-    }
-    if (Button) {
-      rowNode.appendChild(<Button key={`${binding.getHash()}_labelEnd`}></Button>);
+    if (!context.view.isMultiValued(item)) {
+      let Button;
+      const card = item.getCardinality();
+      if (binding == null) {
+        Button = renderingContext.addExpandButton(rowNode, null, item, context);
+      } else if (binding.getPredicate() && !context.view.showAsTable(item) && card.max !== 1 &&
+        (card.max == null || card.max !== card.min)) {
+        Button = renderingContext.addCreateChildButton(rowNode, null, binding, context);
+      }
+      if (Button) {
+        rowNode.appendChild(<Button key={`${binding.getHash()}_labelEnd`}></Button>);
+      }
     }
     // If the item is deprecated and there are at least one matching value (binding),
     // provide a message and make sure the entire row (including the label) is deleted when

package/src/view/react/textEditors.js

@@ -45,7 +45,7 @@ const LanguageControl = (props) => {
       onChange={onLangChange}>
       {langs.map(langOption => (langOption === null ?
         (<MenuItem key="_none" value="_none" disabled>─────</MenuItem>) :
-        (<MenuItem key={langOption.value} value={langOption.value}>{langOption.label}</MenuItem>)
+        (<MenuItem key={langOption.value} value={langOption.value}>{langOption.label || '\u00A0'}</MenuItem>)
       ))}
     </Select>
   </FormControl>;

package/src/view/resources/nls.json

@@ -31,6 +31,8 @@
   "date_time": "Time",
   "date_year": "Year",
   "date_date_and_time": "Date and time",
+  "date_year_and_month": "Year and month",
+  "date_month_and_day": "Month and day",
   "date_openDatePicker": "Open date picker dialog",
   "date_openTimePicker": "Open time picker dialog",
   "date_openYearPicker": "Open year picker dialog",