@entryscape/rdforms 10.7.0 → 10.8.0

package/main.js

@@ -1,15 +1,9 @@
 import 'whatwg-fetch';
-import './loadViewOptions';
 
 export { default as renderingContext } from './src/view/renderingContext';
 export { default as ItemStore } from './src/template/ItemStore';
 export { default as bundleLoader } from './src/template/bundleLoader';
-export { default as Presenter } from './src/view/Presenter';
-export { default as Editor } from './src/view/Editor';
-export { default as LevelEditor } from './src/view/bootstrap/LevelEditor';
-export { default as ValidationPresenter } from './src/view/ValidationPresenter';
 export { default as utils } from './src/utils';
 export { default as system } from './src/model/system';
 export { default as engine } from './src/model/engine';
 export { default as validate } from './src/model/validate';
-export { Editor as EditorWrapper, Presenter as PresenterWrapper} from './src/view/react/Wrappers';

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.7.0",
+  "version": "10.8.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@entryscape/rdfjson": "^2.5.4",
+    "@entryscape/rdfjson": "^2.5.7",
     "@fortawesome/fontawesome-free": "^5.8.1",
     "@mui/icons-material": "^5.0.3",
-    "@mui/lab": "^5.0.0-alpha.51",
     "@mui/material": "^5.0.3",
     "@mui/styles": "^5.0.1",
+    "@mui/x-date-pickers": "^5.0.0-beta.7",
     "@selectize/selectize": "^0.13.5",
     "arrive": "^2.4.1",
     "bootstrap": "^4.3.1",
@@ -31,7 +31,7 @@
     "bootstrap-material-datetimepicker": "https://bitbucket.org/metasolutions/bootstrap-material-datetimepicker.git#webpack",
     "bootstrap-material-design": "^4.1.1",
     "circular-dependency-plugin": "^5.2.2",
-    "core-js": "^3.1.4",
+    "core-js": "^3.4.0",
     "ifdef-loader": "^2.1.1",
     "jquery": "^3.3.1",
     "jquery-mousewheel": "^3.1.13",
@@ -67,7 +67,7 @@
     "clean-webpack-plugin": "^0.1.18",
     "copy-webpack-plugin": "^5.0.5",
     "css-loader": "^3.5.3",
-    "eslint": "^3.17.1",
+    "eslint": "^8.23.0",
     "eslint-config-airbnb-base": "^11.1.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-requirejs": "^3.1.1",
@@ -96,8 +96,7 @@
     "dist",
     "src",
     "main*",
-    "index*",
-    "loadViewOptions.js"
+    "renderers"
   ],
   "scripts": {
     "build:all": "webpack --display-modules --mode=production --config webpack.all.js",

package/renderers/bmd.js

@@ -0,0 +1,9 @@
+import 'whatwg-fetch';
+import '../src/view/bmd/all';
+import '../src/view/bmd/style.css';
+
+export { default as Editor } from '../src/view/Editor';
+export { default as Presenter } from '../src/view/Presenter';
+export { default as ValidationPresenter } from '../src/view/ValidationPresenter';
+export { default as LevelEditor } from '../src/view/bootstrap/LevelEditor';
+export * from '../main';

package/renderers/bootstrap.js

@@ -0,0 +1,8 @@
+import '../src/view/bootstrap/all';
+
+export { default as Editor } from '../src/view/Editor';
+export { default as Presenter } from '../src/view/Presenter';
+export { default as ValidationPresenter } from '../src/view/ValidationPresenter';
+export { default as LevelEditor } from '../src/view/bootstrap/LevelEditor';
+
+export * from '../main';

package/renderers/jquery.js

@@ -0,0 +1,4 @@
+import '../src/view/jquery/all';
+
+export { default as Presenter } from '../src/view/Presenter';
+export * from '../main';

package/renderers/react.js

@@ -0,0 +1,5 @@
+import 'regenerator-runtime/runtime';
+import '../src/view/react/all';
+
+export * from '../src/view/react/Wrappers';
+export * from '../main';

package/src/view/Editor.js

@@ -230,15 +230,14 @@ export default class Editor extends Presenter {
         if (!match) {
           if (binding.isValid()) {
             renderingContext.domClassToggle(newNode, 'missingDepsWithValue', true);
-            binding.getCardinalityTracker().setDepsOk(false);
           } else {
             renderingContext.domClassToggle(newNode, 'missingDeps', true);
           }
         } else {
           renderingContext.domClassToggle(newNode, 'missingDepsWithValue', false);
-          binding.getCardinalityTracker().setDepsOk(true);
           renderingContext.domClassToggle(newNode, 'missingDeps', false);
         }
+        binding.getCardinalityTracker().setDepsOk(match);
       };
       const fromBinding = engine.findBindingRelativeToParentBinding(binding.getParent(), path);
       if (!engine.matchPathBelowBinding(fromBinding, path)) {

package/src/view/bootstrap/text.js

@@ -46,8 +46,10 @@ const addChangeListener = (inp, binding, regex, extLink, help) => {
         extLink.prop('href', binding.getValue());
         disableExtLink = false;
       }
-      help.toggleClass('rdformsHelpActive', false);
-    } else {
+      if (help) {
+        help.toggleClass('rdformsHelpActive', false);
+      }
+    } else if (help) {
       help.toggleClass('rdformsHelpActive', true);
     }
     if (extLink) {

package/src/view/jquery/labels.js

@@ -10,7 +10,9 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
     label = '';
   }
 
-  const $labelDiv = jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
+  const $labelDiv = item.hasStyle('heading') ?
+    jquery('<h2 class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode) :
+    jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
   if (binding) {
     $labelDiv.attr('id', context.view.createLabelIndex(binding));
   }

package/src/view/react/components.js

@@ -153,7 +153,7 @@ const newStruct = (Tag, parent, nodeId) => {
       };
       // -- END
       return (
-        <Tag id={nodeId} className={clsSet.join(' ')}>
+        <Tag id={nodeId} className={Array.from(clsSet).join(' ')}>
           {childArr.map((child, index) => getReactComponent(child, index))}
           {text}
         </Tag>

package/src/view/react/date.js

@@ -1,12 +1,15 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useMemo } from 'react';
-import { DatePicker, TimePicker, LocalizationProvider } from '@mui/lab';
-import DateAdapter from '@mui/lab/AdapterMoment';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { AdapterMoment } from '@mui/x-date-pickers/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 CODES from '../../model/CODES';
 import renderingContext from '../renderingContext';
 import {
   getDate,
@@ -19,7 +22,13 @@ import {
 } from '../viewUtils';
 import { useNamedGraphId } from './hooks';
 
-const getDatatypeFromBinding = binding => getDatatype(binding.getDatatype()) || getDatatypeFromItem(binding.getItem());
+const getDatatypeFromBinding = (binding, alternatives) => {
+  const currentDatatype = getDatatype(binding.getDatatype());
+  if (!alternatives[currentDatatype]) {
+    alternatives[currentDatatype] = 'error';
+  }
+  return currentDatatype || getDatatypeFromItem(binding.getItem());
+};
 
 const datePresenter = (fieldDiv, binding, context) => {
   try {
@@ -89,13 +98,20 @@ const dateEditor = (fieldDiv, binding, context) => {
   const DateComp = () => {
     const value = binding.getGist();
     const alternatives = useMemo(() => getAllowedDateAlternatives(binding.getItem()), []);
-    const onlyOneAlternative = Object.keys(alternatives).length === 1;
     const [selectedDate, setSelectedDate] = useState(value === '' ? null : getDate(value));
-    const [selectedDatatype, setDatatype] = useState(getDatatypeFromBinding(binding));
+    const [selectedDatatype, setDatatype] = useState(getDatatypeFromBinding(binding, alternatives));
+    const onlyOneAlternative = Object.keys(alternatives).length === 1;
+    const [error, setError] = useState(binding.getMatchingCode() === CODES.WRONG_DATATYPE);
+
+    useEffect(() => {
+      fieldDiv.toggleClass('mismatchReport', error);
+    }, [error]);
+
     useEffect(() => {
       context.clear = () => {
         setSelectedDate(null);
-        setDatatype(getDatatypeFromBinding(binding));
+        setDatatype(getDatatypeFromItem(binding.getItem()));
+        setError(false);
       };
     }, []);
 
@@ -113,6 +129,7 @@ const dateEditor = (fieldDiv, binding, context) => {
       binding.setDatatype(getDatatypeURI(event.target.value));
       binding.setValue(getDateValue(selectedDate, event.target.value));
       setDatatype(event.target.value);
+      setError(alternatives[event.target.value] === 'error');
     };
     const inputProps = {
       'aria-labelledby': context.view.getLabelIndex(binding),
@@ -124,7 +141,8 @@ const dateEditor = (fieldDiv, binding, context) => {
     const enabledDatePicker = !ngId && (selectedDatatype === 'DateTime' || selectedDatatype === 'Date'
       || selectedDatatype === 'Year' || selectedDatatype === 'YearMonth' || selectedDatatype === 'MonthDay');
     return (
-      <LocalizationProvider dateAdapter={DateAdapter}>
+      <>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
         <span className="rdformsDatePicker">
           {visibleDatePicker && (
             <DatePicker
@@ -162,34 +180,47 @@ const dateEditor = (fieldDiv, binding, context) => {
               <Select
                 value={selectedDatatype}
                 inputProps={inputProps}
+                error={alternatives[selectedDatatype] === 'error'}
                 onChange={onDatatypeChange}
                 disabled={!!ngId}
               >
                 {alternatives.Year && (
-                  <MenuItem value="Year">{bundle.date_year}</MenuItem>
+                  <MenuItem disabled={alternatives.Year === 'error'} className="rdformsDatatypeOption"
+                            value="Year">{bundle.date_year}</MenuItem>
                 )}
                 {alternatives.Date && (
-                  <MenuItem value="Date">{bundle.date_date}</MenuItem>
+                  <MenuItem disabled={alternatives.Date === 'error'} className="rdformsDatatypeOption"
+                            value="Date">{bundle.date_date}</MenuItem>
                 )}
                 {alternatives.DateTime && (
-                  <MenuItem value="DateTime">
+                  <MenuItem disabled={alternatives.DateTime === 'error'} className="rdformsDatatypeOption"
+                            value="DateTime">
                     {bundle.date_date_and_time}
                   </MenuItem>
                 )}
                 {alternatives.YearMonth && (
-                  <MenuItem value="YearMonth">{bundle.date_year_and_month}</MenuItem>
+                  <MenuItem disabled={alternatives.YearMonth === 'error'} className="rdformsDatatypeOption"
+                            value="YearMonth">{bundle.date_year_and_month}</MenuItem>
                 )}
                 {alternatives.MonthDay && (
-                  <MenuItem value="MonthDay">{bundle.date_month_and_day}</MenuItem>
+                  <MenuItem disabled={alternatives.MonthDay === 'error'} className="rdformsDatatypeOption"
+                            value="MonthDay">{bundle.date_month_and_day}</MenuItem>
                 )}
                 {alternatives.Time && (
-                  <MenuItem value="Time">{bundle.date_time}</MenuItem>
+                  <MenuItem disabled={alternatives.Time === 'error'} className="rdformsDatatypeOption"
+                            value="Time">{bundle.date_time}</MenuItem>
                 )}
               </Select>
             </FormControl>
           )}
         </span>
       </LocalizationProvider>
+        {error && (
+          <div key="warning" className="rdformsWarning">
+            {context.view.messages.wrongDatatypeField}
+          </div>
+        )}
+        </>
     );
   };
   fieldDiv.appendChild(<DateComp key={binding.getHash()}></DateComp>);

package/src/view/react/labels.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { Fragment, useState, useEffect, forwardRef } from 'react';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
@@ -96,8 +96,8 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
   label = item.hasStyle('heading') ?
     <h2 tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></h2> :
     <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></span>;
-  rowNode.appendChild(<><ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` }
-                                   context={context} item={item}>{label}</ItemTooltip>{description}</>);
+  rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
+                                   context={context} item={item}>{label}</ItemTooltip>{description}</Fragment>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -150,8 +150,8 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     }
 
     const labelId = context.view.createLabelIndex(binding);
-    rowNode.appendChild(<><div key={`${binding.getHash()}_label`} id={labelId} className="rdformsLabelRow">{
-      label}{mark}{Button && <Button></Button>}</div>{description}</>);
+    rowNode.appendChild(<Fragment key={`${binding.getHash()}_label`}><div id={labelId} className="rdformsLabelRow">{
+      label}{mark}{Button && <Button></Button>}</div>{description}</Fragment>);
   }
 };
 

package/src/view/react/style.css

@@ -228,3 +228,7 @@ div.MuiTooltip-tooltip {
 .rdformsHeading>.rdformsDescription {
     margin: -20px 0 20px;
 }
+
+.Mui-disabled.rdformsDatatypeOption {
+    color: red;
+}

package/src/view/resources/nls.json

@@ -54,5 +54,6 @@
   "missingValueField": "This field is required, please provide a value.",
   "dependencyField": "This field depends on another field, please review the field it depends on or remove this value.",
   "wrongValueField": "This is an invalid value, please change or remove it.",
+  "wrongDatatypeField": "The value has an invalid datatype, please change or remove it.",
   "openLinkExternally": "Open link externally"
 }

package/index.bmd.js

@@ -1,16 +0,0 @@
-import 'whatwg-fetch';
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import bundleLoader from './src/template/bundleLoader';
-import ItemStore from './src/template/ItemStore';
-
-import './src/view/bmd/all';
-import './src/view/bmd/style.css';
-
-import Editor from './src/view/Editor';
-import Presenter from './src/view/Presenter';
-import renderingContext from './src/view/renderingContext';
-import ValidationPresenter from './src/view/ValidationPresenter';
-import LevelEditor from './src/view/bootstrap/LevelEditor';
-
-export { bundleLoader, ItemStore, Editor, Presenter, ValidationPresenter, LevelEditor, renderingContext };

package/index.bootstrap.js

@@ -1,12 +0,0 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import bundleLoader from './src/template/bundleLoader';
-import ItemStore from './src/template/ItemStore';
-import './src/view/bootstrap/all';
-import Editor from './src/view/Editor';
-import Presenter from './src/view/Presenter';
-import renderingContext from './src/view/renderingContext';
-import ValidationPresenter from './src/view/ValidationPresenter';
-import LevelEditor from './src/view/bootstrap/LevelEditor';
-
-export { bundleLoader, ItemStore, Editor, Presenter, ValidationPresenter, LevelEditor, renderingContext };

package/index.jquery.js

@@ -1,9 +0,0 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import bundleLoader from './src/template/bundleLoader';
-import ItemStore from './src/template/ItemStore';
-import './src/view/jquery/all';
-import Presenter from './src/view/Presenter';
-import renderingContext from './src/view/renderingContext';
-
-export { bundleLoader, ItemStore, Presenter, renderingContext };

package/index.react.js

@@ -1,9 +0,0 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import bundleLoader from './src/template/bundleLoader';
-import ItemStore from './src/template/ItemStore';
-import './src/view/react/all';
-import { Editor, Presenter, ValidationPresenter } from './src/view/react/Wrappers';
-import renderingContext from './src/view/renderingContext';
-
-export { bundleLoader, ItemStore, Presenter, Editor, ValidationPresenter, renderingContext };

package/loadViewOptions.js

@@ -1,10 +0,0 @@
-/// #if BLOCKS
-import 'bootstrap';
-import './src/view/bootstrap/Select2';
-import './src/view/bootstrap/DateTimeBootstrapDatepicker';
-import 'select2/dist/css/select2.css';
-import './src/view/bootstrap/style.css';
-/// #else
-import './src/view/react/all'; // hard coded react
-/// #endif
-