@entryscape/rdforms 10.6.2 → 10.7.2

package/src/view/react/style.css

@@ -133,7 +133,7 @@
 }
 
 .rdformsEditor .rdformsLangControl {
-    width: calc(33.33% - 8px);
+    width: calc(33.33% - 4px);
 }
 
 /* Duration */
@@ -205,10 +205,6 @@ div.MuiTooltip-tooltip {
     margin-right: 11px;
 }
 
-.rdformsEditor .rdformsLangControl {
-    width: calc(33.33% - 8px);
-}
-
 .rdformsDependency {
     display: none;
 }
@@ -227,4 +223,12 @@ div.MuiTooltip-tooltip {
     font-size: 10px;
     font-weight: bolder;
     font-family: sans-serif;
+}
+
+.rdformsHeading>.rdformsDescription {
+    margin: -20px 0 20px;
+}
+
+.Mui-disabled.rdformsDatatypeOption {
+    color: red;
 }

package/src/view/react/text.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import moment from 'moment';
 import system from '../../model/system';
 import renderingContext from '../renderingContext';
-import { fromDuration } from './util';
+import { fromDuration } from '../viewUtils';
 import utils from '../../utils';
 
 
@@ -13,7 +13,7 @@ presenters.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding
   const data = fromDuration(binding.getValue());
   const keys = ['years', 'months', 'days', 'hours', 'minutes'];
   fieldDiv.appendChild(<div key={binding.getHash()}>{keys.map(key => (
-    data[key] && <React.Fragment key={key}><span className="durationlabel">{
+    data[key] && <React.Fragment key={key}><span className="durationLabel">{
       context.view.messages[`duration_${key}`]}:</span><span className="durationValue">{data[key]}</span></React.Fragment>
   ))}</div>);
 });

package/src/view/react/textEditors.js

@@ -10,6 +10,7 @@ import Select from '@mui/material/Select';
 import moment from 'moment';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
+import { useNamedGraphId } from './hooks';
 
 const LanguageControl = (props) => {
   const [lang, setLang] = useState(props.binding.getLanguage() || '');
@@ -38,10 +39,12 @@ const LanguageControl = (props) => {
     };
   }, []);
 
+  const ngId = useNamedGraphId(props.binding, props.context);
   return <FormControl className="rdformsLangControl" variant={renderingContext.materialVariant}>
     <Select
       inputProps={{ 'aria-labelledby': props.labelledby }}
       value={lang}
+      disabled={!!ngId}
       onChange={onLangChange}>
       {langs.map(langOption => (langOption === null ?
         (<MenuItem key="_none" value="_none" disabled>─────</MenuItem>) :
@@ -90,11 +93,13 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
       },
     };
     const bundle = context.view.messages;
+    const ngId = useNamedGraphId(binding, context);
     return <><TextField
       className={extLink || langlit ? 'rdformsTwoThirds' : ''}
       multiline={multiline}
       placeholder={item.getPlaceholder()}
       error={!valid}
+      disabled={!!ngId}
       helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />{extLink && (value != null || value === '') &&

package/src/view/renderingContext.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import Registry from './Registry';
 import system from '../model/system';
 import nls from './resources/nls';
@@ -328,7 +329,9 @@ const groupPresenter = (fieldDiv, binding, context) => {
     messages: context.view.messages,
     binding,
     topLevel: false,
+    compact: context.view.compact,
     showLanguage: context.view.showLanguage,
+    showDescription: context.view.showDescription,
     defaultLanguage: context.view.defaultLanguage,
     filterTranslations: context.view.filterTranslations,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
@@ -346,6 +349,8 @@ const groupEditor = (fieldDiv, binding, context) => {
     languages: context.view.languages,
     binding,
     topLevel: false,
+    compact: context.view.compact,
+    showDescription: context.view.showDescription,
     includeLevel: context.view.includeLevel,
   }, fieldDiv);
   context.view._subEditors.push(subView);

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/src/view/resources/rdforms.css

@@ -136,11 +136,11 @@ a.rdformsUrl:hover {
 
 /* compact anyway for first level*/
 .compact .rdformsTopLevel.rdformsRow.notCompact {
-	display: table;
+	display: inherit;
 	width: 98%;
 }
 .compact .rdformsTopLevel.rdformsRow.notCompact>div {
-	display: table-cell;
+	display: block;
 }
 
 .compact .rdformsTopLevel.rdformsRow.rdformsHeading.notCompact>div {
@@ -151,6 +151,27 @@ a.rdformsUrl:hover {
 	margin-left: 0px;
 }
 
+.compact .rdformsRow.notCompact {
+    display: block;
+    width: auto;
+}
+
+.compact .rdformsRow.notCompact>div {
+    display: inherit;
+}
+
+.rdformsPresenter .rdformsRow.rdformsCompactItem {
+    display: table;
+    width: 98%;
+}
+
+.rdformsPresenter .rdformsRow.rdformsCompactItem>.rdformsLabel {
+    width: 10em;
+}
+.rdformsPresenter .rdformsRow.rdformsCompactItem>div {
+    display: table-cell;
+}
+
 /* compact anyway for first level*/
 .compact .rdformsTopLevel.rdformsRow.rdformsHeading>.rdformsFields>.rdformsGroup>.rdformsRow {
     display: table;
@@ -161,6 +182,16 @@ a.rdformsUrl:hover {
     display: table-cell;
 }
 
+.compact .rdformsTopLevel.rdformsRow.rdformsHeading>.rdformsFields>.rdformsGroup>.rdformsRow.notCompact {
+    display: inherit;
+    width: auto;
+}
+
+.compact .rdformsTopLevel.rdformsRow.rdformsHeading>.rdformsFields>.rdformsGroup>.rdformsRow.notCompact>div {
+    display: inherit;
+}
+
+
 
 
 .rdformsImage {
@@ -420,10 +451,6 @@ a.rdformsUrl:hover {
     padding-left: 0px;
 }
 
-.rdformsValidator .rdformsValidationMessageWrapper {
-    margin-left: -30px;
-}
-
 .rdformsValidator .rdformsField.error {
     color: red;
 }
@@ -484,18 +511,8 @@ a.rdformsUrl:hover {
     padding-left: 0px;
 }
 
-.compact .rdformsRow.notCompact {
-	display: block;
-	width: auto;
-}
-
-.compact .rdformsRow.notCompact>div {
-	display: inherit;
-}
-
 .compact .rdformsRow>.rdformsLabelRow {
-	width: 1px;
-	white-space: nowrap;
+    white-space: nowrap;
 }
 
 .compact .rdformsTopLevel.rdformsRow>.rdformsLabelRow .action {
@@ -717,4 +734,9 @@ a.rdformsUrl:hover {
 .rdformsDeprecated {
     border: 2px solid red;
     padding: 12px;
+}
+
+.rdformsDescription {
+    font-style: italic;
+    margin-bottom: 10px;
 }

package/src/view/{jquery/util.js → viewUtils.js}

@@ -32,6 +32,7 @@ export const toDuration = (data) => {
   return null;
 };
 
+
 export const getDate = (value) => {
   try {
     // xsd:time
@@ -199,3 +200,13 @@ export const getDatePresentation = (binding) => {
   }
   return undefined;
 };
+
+export const getNamedGraphId = (binding, context) => {
+  const ng = (binding.getStatement() || binding.getParent().getStatement())?.getNamedGraph();
+  if (ng) {
+    let view = context.view;
+    while (view.getParentView()) view = view.getParentView();
+    return view.getNamedGraphId(ng);
+  }
+  return undefined;
+};

package/src/view/react/util.js

@@ -1,31 +0,0 @@
-export const fromDuration = (value) => {
-  const f = val => (val && val.length > 1 ? parseInt(val[0], 10) : 0);
-  const years = f(value.match(/([0-9])*Y/));
-  const days = f(value.match(/([0-9])*D/));
-  const hours = f(value.match(/([0-9])*H/));
-  let months;
-  let minutes;
-  if (value.indexOf('T') === -1) {
-    months = f(value.match(/([0-9])*M/));
-  } else {
-    const arr = value.split('T');
-    months = f(arr[0].match(/([0-9])*M/));
-    minutes = f(arr[1].match(/([0-9])*M/));
-  }
-  return { years, months, days, hours, minutes };
-};
-
-export const toDuration = (data) => {
-  if (data.years || data.months || data.days || data.hours || data.minutes) {
-    let str = `P${data.years ? `${data.years}Y` : ''
-    }${data.months ? `${data.months}M` : ''
-    }${data.days ? `${data.days}D` : ''}`;
-    if (data.hours || data.minutes) {
-      str = `${str}T${
-        data.hours ? `${data.hours}H` : ''
-      }${data.minutes ? `${data.minutes}M` : ''}`;
-    }
-    return str;
-  }
-  return null;
-};