@entryscape/rdforms 10.6.0 → 10.7.0

package/src/view/react/duration.js

@@ -2,7 +2,8 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import TextField from '@mui/material/TextField';
 import renderingContext from '../renderingContext';
-import { toDuration, fromDuration } from './util';
+import { toDuration, fromDuration } from '../viewUtils';
+import { useNamedGraphId } from './hooks';
 
 const keys = ['years', 'months', 'days', 'hours', 'minutes'];
 const editors = renderingContext.editorRegistry;
@@ -44,11 +45,12 @@ editors.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding, c
     }, {}));
 
     const descBy = context.view.getLabelIndex(binding);
-
+    const ngId = useNamedGraphId(binding, context);
     return <>{keys.map(key => (<TextField
       key={key}
       className="rdformsDurationInput"
       value={`${duration[key] || ''}`}
+      disabled={!!ngId}
       label={bundle[`duration_${key}`]}
       type="number"
       onChange={onChange[key]}

package/src/view/react/hooks.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import utils from '../../utils';
+import { getNamedGraphId } from '../viewUtils';
 
 /**
  * Wraps a choice in an object where the current label, and description is localized.
@@ -91,3 +92,5 @@ export const useName = () => useMemo(() => {
   nameCounter += 1;
   return `_rdforms_${nameCounter}`;
 }, []);
+
+export const useNamedGraphId = (binding, context) => useMemo(() => getNamedGraphId(binding, context));

package/src/view/react/labels.js

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import renderingContext from '../renderingContext';
 import { Editor } from './Wrappers';
-import { CODES } from '../../model/engine';
+import CODES from '../../model/CODES';
 
 const StyledTooltip = styled(
   forwardRef(({ className, ...props }, ref) => (
@@ -74,12 +74,30 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
   } else {
     label = '';
   }
+
+  const view = context.view;
+  let description;
+  if (item.hasStyle('showDescriptionInPresent') || view.showDescription) {
+    // An item is compact if it is exclicitly set as compact or
+    // the view is set as compact and the item is not explicitly set as not compact AND
+    // we are at the top
+    const compactField = item.hasStyle('compact') ||
+      (view.compact && !item.hasStyle('nonCompact') && (
+        (view.topLevel && item.getType() !== 'group') ||
+        (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+    const desc = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+      item.getDescription();
+    if (!compactField && desc) {
+      description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+    }
+  }
+
   const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
   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>);
+  rowNode.appendChild(<><ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` }
+                                   context={context} item={item}>{label}</ItemTooltip>{description}</>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -113,9 +131,27 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     } else if (item.getType() === 'group' && !context.view.showAsTable(item)) {
       Button = renderingContext.addRemoveButton(rowNode, binding, context);
     }
+
+    const view = context.view;
+    let description;
+    if (item.hasStyle('showDescriptionInEdit') || view.showDescription) {
+      // An item is compact if it is exclicitly set as compact or
+      // the view is set as compact and the item is not explicitly set as not compact AND
+      // we are at the top
+      const compactField = item.hasStyle('compact') ||
+        (view.compact && !item.hasStyle('nonCompact') && (
+          (view.topLevel && item.getType() !== 'group') ||
+          (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+      const desc = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+        item.getDescription();
+      if (!compactField && desc) {
+        description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+      }
+    }
+
     const labelId = context.view.createLabelIndex(binding);
-    rowNode.appendChild(<div key={`${binding.getHash()}_label`} id={labelId} className="rdformsLabelRow">{
-      label}{mark}{Button && <Button></Button>}</div>);
+    rowNode.appendChild(<><div key={`${binding.getHash()}_label`} id={labelId} className="rdformsLabelRow">{
+      label}{mark}{Button && <Button></Button>}</div>{description}</>);
   }
 };
 

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,8 @@ div.MuiTooltip-tooltip {
     font-size: 10px;
     font-weight: bolder;
     font-family: sans-serif;
-}
+}
+
+.rdformsHeading>.rdformsDescription {
+    margin: -20px 0 20px;
+}

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