@entryscape/rdforms 10.7.1 → 10.8.1

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.1",
+  "version": "10.8.1",
   "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

@@ -28,6 +28,9 @@ const showNow = (editor, item, bindings, includeLevel) => {
       if (groupedItemsArr.length === 0) {
         return true; // Corresponds to an extention or pure heading, since no children.
       }
+      if (item.hasStyle('atLeastOneChild') || item.hasStyle('exactlyOneChild')) {
+        return true;
+      }
       if (bindings[0].getItemGroupedChildBindings().find((childBindings, idx) =>
         showNow(editor, groupedItemsArr[idx], childBindings, includeLevel))) {
         return true;
@@ -230,15 +233,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/View.js

@@ -20,9 +20,18 @@ export default class View {
     this.compact = params.compact !== false;
     this.showDescription = params.showDescription === true;
     this.styleCls = params.styleCls || '';
-    this.filterPredicates = Array.isArray(params.filterPredicates) ?
-      params.filterPredicates.reduce((prev, current) => { prev[current] = true; return prev; }, {}) :
-      params.filterPredicates || null;
+    if (Array.isArray(params.filterPredicates)) {
+      this.filterPredicates =
+        params.filterPredicates.reduce((prev, current) => { prev[current] = true; return prev; }, {});
+    } else if (typeof params.filterPredicates === 'object') {
+      this.filterPredicates = params.filterPredicates;
+    } else if (typeof params.filterPredicates === 'string') {
+      this.filterPredicates = params.filterPredicates.split(',')
+        .reduce((prev, current) => { prev[current] = true; return prev; }, {});
+    } else {
+      this.filterPredicates = null;
+    }
+
     this.restrictToItem = params.restrictToItem;
     this.fuzzy = params.fuzzy === true;
     this.markOrigin = params.markOrigin !== false;
@@ -350,7 +359,23 @@ export default class View {
       const prop = item.getProperty();
       // Exclude if property matches.
       if (prop) {
-        return fp[prop] === true || fp[namespaces.shortenKnown(prop)] === true;
+        // Check if we are in a root-like position,
+        // i.e. either directly at the root or further down below groups without property set.
+        let rootLike = true;
+        let view = this;
+        while (view.parentView) {
+          if (view.getBinding().getItem().getProperty()) {
+            rootLike = false;
+          }
+          view = view.parentView;
+        }
+        const shortedProp = namespaces.shortenKnown(prop);
+        if (rootLike) {
+          return fp[prop] === true || fp[shortedProp] === true ||
+            fp[`*${prop}`] === true || fp[`${shortedProp}`] === true;
+        } else {
+          return fp[`*${prop}`] === true || fp[`*${shortedProp}`] === true;
+        }
       } else if (item.getType() === 'group') {
         // Exclude group headers if all children hidden
         const childBindings = item.getChildren() || [];

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/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/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
-