@entryscape/rdforms 10.3.0 → 10.5.0

package/src/view/react/date.js

@@ -1,112 +1,96 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useMemo } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
+import { DatePicker, TimePicker, LocalizationProvider } from '@mui/lab';
+import DateAdapter from '@mui/lab/AdapterMoment';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+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':
-        return value.toISOString().substr(0, 10);
-      case 'Year':
-        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 = () => {
@@ -130,41 +114,96 @@ const dateEditor = (fieldDiv, binding, context) => {
       binding.setValue(getDateValue(selectedDate, event.target.value));
       setDatatype(event.target.value);
     };
-    const inputProps = { 'aria-labelledby': context.view.getLabelIndex(binding) };
-    const dateFormat = selectedDatatype === 'Year' ? 'YYYY' : 'YYYY-MM-DD';
+    const inputProps = {
+      'aria-labelledby': context.view.getLabelIndex(binding),
+      variant: renderingContext.materialVariant,
+    };
+    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 (
-      <MuiPickersUtilsProvider utils={MomentUtils}>
+      <LocalizationProvider dateAdapter={DateAdapter}>
         <span className="rdformsDatePicker">
-          <KeyboardDatePicker
-            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={new Date('0000-01-01')} format={dateFormat}
-            views={selectedDatatype === 'Year' ? ['year'] : ['date']}
-            inputProps={inputProps}
-            onChange={onDateChange} autoOk={true} inputVariant={renderingContext.materialVariant}/>
-          {alternatives.Datetime && (<KeyboardTimePicker
-            label={bundle.date_time}
-            { ...(selectedDatatype === 'Datetime' ? {} : { disabled: true })}
-            KeyboardButtonProps={{ 'aria-label': bundle.date_openTimePicker }}
-            value={selectedDatatype === 'Datetime' ? selectedDate : null}
-            onChange={onDateChange} ampm={false} autoOk={true}
-            inputProps={inputProps}
-            inputVariant={renderingContext.materialVariant}/>)}
-          {!onlyOneAlternative && (<FormControl variant={renderingContext.materialVariant}>
-            <Select
-              value={selectedDatatype}
-              inputProps={inputProps}
-              onChange={onDatatypeChange}>
-              {alternatives.Year && (<MenuItem value="Year">{bundle.date_year}</MenuItem>)}
-              {alternatives.Date && (<MenuItem value="Date">{bundle.date_date}</MenuItem>)}
-              {alternatives.Datetime && (<MenuItem value="Datetime">{bundle.date_date_and_time}</MenuItem>)}
-            </Select>
-          </FormControl>)}
+          {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} />}
+              label={bundle.date_time}
+              {...(selectedDatatype === 'DateTime' || selectedDatatype === 'Time' ? {} : { disabled: true })}
+              KeyboardButtonProps={{
+                'aria-label': bundle.date_openTimePicker,
+              }}
+              value={selectedDatatype === 'DateTime' || selectedDatatype === 'Time' ? selectedDate : null}
+              onChange={onDateChange}
+              ampm={false}
+              autoOk={true}
+              PopperProps={{
+                modifiers: [
+                  {
+                    name: 'flip',
+                    enabled: false,
+                  },
+                ],
+              }}
+            />
+          )}
+          {!onlyOneAlternative && (
+            <FormControl variant={renderingContext.materialVariant}>
+              <Select
+                value={selectedDatatype}
+                inputProps={inputProps}
+                onChange={onDatatypeChange}
+              >
+                {alternatives.Year && (
+                  <MenuItem value="Year">{bundle.date_year}</MenuItem>
+                )}
+                {alternatives.Date && (
+                  <MenuItem value="Date">{bundle.date_date}</MenuItem>
+                )}
+                {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>
+          )}
         </span>
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
   };
   fieldDiv.appendChild(<DateComp key={binding.getHash()}></DateComp>);
@@ -174,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/duration.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useMemo } from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import renderingContext from '../renderingContext';
 import { toDuration, fromDuration } from './util';
 

package/src/view/react/labels.js

@@ -1,25 +1,28 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+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 = withStyles(theme => ({
-  tooltip: {
+const StyledTooltip = styled(
+  forwardRef(({ className, ...props }, ref) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.background.default,
     fontSize: 12,
     color: 'black',
     boxShadow: theme.shadows[10],
+    pointerEvents: 'auto',
   },
-  tooltipPlacementBottom: {
+  [`& .${tooltipClasses.tooltipPlacementBottom}`]: {
     margin: '2px 0 24px 0',
+    marginTop: '0px !important',
   },
-  popper: {
-    pointerEvents: 'auto',
-  },
-}))(Tooltip);
+}));
 
 const ItemTooltip = (props) => {
   const [open, setOpen] = useState(false);
@@ -36,14 +39,28 @@ const ItemTooltip = (props) => {
   }
   const description = props.item.getDescription() || (property ? '' : props.context.view.messages.info_missing || '');
 
-  return <ClickAwayListener onClickAway={handleTooltipClose}>
-    <StyledTooltip title={(<><p className="rdformsLinebreaks rdformsDescription">{description}</p>{propinfo}</>)}
-                   placement="bottom-start" disableHoverListener disableTouchListener
-                   onClose={handleTooltipClose}
-                   onOpen={handleTooltipOpen}
-                   open={open}
-    ><span onClick={handleTooltipOpen}>{
-      props.children}</span></StyledTooltip></ClickAwayListener>;
+  return (
+    <ClickAwayListener onClickAway={handleTooltipClose}>
+      <StyledTooltip
+        title={
+          <>
+            <p className="rdformsLinebreaks rdformsDescription">
+              {description}
+            </p>
+            {propinfo}
+          </>
+        }
+        placement="bottom-start"
+        disableHoverListener
+        disableTouchListener
+        onClose={handleTooltipClose}
+        onOpen={handleTooltipOpen}
+        open={open}
+      >
+        <span onClick={handleTooltipOpen}>{props.children}</span>
+      </StyledTooltip>
+    </ClickAwayListener>
+  );
 };
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
@@ -133,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

@@ -1,12 +1,12 @@
 /* eslint-disable no-unused-vars */
 // eslint-disable-next-line no-unused-vars
 import React, { useState, useEffect, useMemo } from 'react';
-import TextField from '@material-ui/core/TextField';
-import OpenInNewIcon from '@material-ui/icons/OpenInNew';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
+import TextField from '@mui/material/TextField';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
 import moment from 'moment';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
@@ -41,12 +41,11 @@ const LanguageControl = (props) => {
   return <FormControl className="rdformsLangControl" variant={renderingContext.materialVariant}>
     <Select
       inputProps={{ 'aria-labelledby': props.labelledby }}
-
       value={lang}
       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",