@entryscape/rdforms 10.8.1 → 10.9.0

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.8.1",
+  "version": "10.9.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@entryscape/rdfjson": "^2.5.7",
+    "@entryscape/rdfjson": "^2.6.0",
     "@fortawesome/fontawesome-free": "^5.8.1",
     "@mui/icons-material": "^5.0.3",
     "@mui/material": "^5.0.3",
@@ -44,7 +44,7 @@
     "react-dom": "^17.0.2",
     "react-hooks-lib": "^0.1.5",
     "regenerator-runtime": "^0.13.2",
-    "select2": "4.0.7",
+    "select2": "4.0.8",
     "selectize-bootstrap4-theme": "^2.0.2",
     "sizzle": "^2.3.3",
     "terser-webpack-plugin": "^1.3.0",

package/src/template/Item.js

@@ -68,6 +68,9 @@ export default class Item {
       'preserveOrderOfChoices',
       'linkWithLabel',
       'deprecated',
+      'inline',
+      'truncate',
+      'noTruncate'
     ];
     this._getLocalizedValue = utils.getLocalizedValue;
   }

package/src/view/Editor.js

@@ -269,4 +269,7 @@ export default class Editor extends Presenter {
     return renderingContext.multiValueSupport &&
     (item.hasStyle('horizontalCheckBoxes') || item.hasStyle('verticalCheckBoxes'));
   }
+  truncateAt(item, bindings) {
+    return -1;
+  }
 }

package/src/view/Presenter.js

@@ -103,4 +103,21 @@ export default class Presenter extends View {
   addComponent(fieldDiv, binding) {
     renderingContext.renderPresenter(fieldDiv, binding, this.context);
   }
+
+  /**
+   * Truncate for presentations when:
+   * - not a group (repeated labels does not look nice being truncated)
+   * - if truncate setting is enabled on the presenter or the individual item ('truncate' and not 'noTruncate' is set)
+   * - if the truncate limit is exceeded
+   *
+   * @param item
+   * @param bindings
+   * @return {number}
+   */
+  truncateAt(item, bindings) {
+    return item.getType() !== 'group' &&
+      bindings && bindings.length > this.truncateLimit &&
+      (this.truncate || item.hasStyle('truncate')) &&
+      !item.hasStyle('noTruncate') ? this.truncateLimit : -1;
+  }
 }

package/src/view/View.js

@@ -20,6 +20,8 @@ export default class View {
     this.compact = params.compact !== false;
     this.showDescription = params.showDescription === true;
     this.styleCls = params.styleCls || '';
+    this.truncateLimit = params.truncateLimit !== undefined ? params.truncateLimit : 10;
+    this.truncate = params.truncate !== undefined ? params.truncate : false;
     if (Array.isArray(params.filterPredicates)) {
       this.filterPredicates =
         params.filterPredicates.reduce((prev, current) => { prev[current] = true; return prev; }, {});
@@ -223,11 +225,16 @@ export default class View {
           this.context = { view: this };
           lastRow = this.addRow(lastRow, bindings[0], true);
         } else {
+          const truncateLimit = this.truncateAt(item, bindings);
           for (let i = 0; i < bindings.length; i++) {
             // Add row with label if first row of same item or the binding is a group.
             this.context = { view: this };
             lastRow = this.addRow(lastRow, bindings[i], i === 0 ||
-              bindings[i] instanceof GroupBinding);
+              bindings[i] instanceof GroupBinding, i, truncateLimit);
+          }
+          if (truncateLimit !== -1) {
+            const rdformsFields = renderingContext.domQuery('.rdformsFields', lastRow);
+            if (rdformsFields) renderingContext.addTruncateControl(rdformsFields, this.context);
           }
         }
       } else {
@@ -250,7 +257,7 @@ export default class View {
    * @param {Boolean} includeLabel, tells if a label should be added, if undefined a label is
    * added only when the binding is a GroupBinding.
    */
-  addRow(lastRow, binding, includeLabel) {
+  addRow(lastRow, binding, includeLabel, index, truncateLimit) {
     let _includeLabel = includeLabel;
     let fieldDiv;
     let newRow;
@@ -269,6 +276,12 @@ export default class View {
       newRow = this.createRowNode(lastRow, binding, item);
       const n = renderingContext.domCreate('div', newRow);
       renderingContext.domClassToggle(n, 'rdformsFields', true);
+      if (truncateLimit !== -1) {
+        renderingContext.domClassToggle(n, 'rdformsTruncated', true);
+      }
+      if (item.hasStyle('inline')) {
+        renderingContext.domClassToggle(n, 'rdformsInline', true);
+      }
       fieldDiv = renderingContext.domCreate('div', n);
       this.createEndOfRowNode(newRow, binding, item);
     } else {
@@ -277,9 +290,15 @@ export default class View {
       if (rdformsFields != null) {
         fieldDiv = renderingContext.domCreate('div', rdformsFields);
         renderingContext.domClassToggle(fieldDiv, 'rdformsRepeatedValue', true);
+        if (truncateLimit !== -1 && index >= truncateLimit) {
+          renderingContext.domClassToggle(fieldDiv, 'rdformsMaybeTruncated', true);
+        }
       } else { // Unless we have an non-expanded row.
         const n = renderingContext.domCreate('div', lastRow);
         renderingContext.domClassToggle(n, 'rdformsFields', true);
+        if (item.hasStyle('inline')) {
+          renderingContext.domClassToggle(n, 'rdformsInline', true);
+        }
         fieldDiv = renderingContext.domCreate('div', n);
         this.createEndOfRowNode(newRow, binding, item);
       }
@@ -333,6 +352,10 @@ export default class View {
     if (binding && this.filterBinding(binding)) {
       renderingContext.domClassToggle(rowNode, 'hiddenProperty', true);
     }
+
+    if (item.hasStyle('card')) {
+      renderingContext.domClassToggle(rowNode, 'rdformsCard', true);
+    }
     return rowNode;
   }
 
@@ -425,4 +448,8 @@ export default class View {
   isMultiValued(item) {
     return false;
   }
+
+  truncateAt(item, bindings) {
+    return -1;
+  }
 }

package/src/view/bmd/style.css

@@ -111,7 +111,8 @@
 }
 
 .rdformsEditor .cardgroupEditor>.rdformsFields>.rdformsGroup,
-.cardgroup>.rdformsFields>.rdformsGroup {
+.cardgroup>.rdformsFields>.rdformsGroup,
+.rdformsCard>.rdformsFields>.rdformsGroup {
   border-radius: 2px;
   color: rgba(0,0,0, 0.87);
   background: #fff;

package/src/view/bootstrap/labels.js

@@ -21,15 +21,18 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   const $label = jquery('<span class="rdformsLabel" tabindex="0">').text(label).appendTo($labelDiv);
   const card = item.getCardinality();
   const b = context.view.messages;
-  if (card.min > 0) {
-    jquery('<span class="rdformsMark rdformsMandatoryMark">').text(b.mandatoryMark)
-      .appendTo($labelDiv);
-  } else if (card.pref > 0) {
-    jquery('<span class="rdformsMark rdformsRecommendedMark">').text(b.recommendedMark)
-      .appendTo($labelDiv);
-  } else {
-    jquery('<span class="rdformsMark rdformsOptionalMark">').text(b.optionalMark)
-      .appendTo($labelDiv);
+  // Only show mark if there is a property that allows the item to have an expression on its own
+  if (item.getProperty()) {
+    if (card.min > 0) {
+      jquery('<span class="rdformsMark rdformsMandatoryMark">').text(b.mandatoryMark)
+        .appendTo($labelDiv);
+    } else if (card.pref > 0) {
+      jquery('<span class="rdformsMark rdformsRecommendedMark">').text(b.recommendedMark)
+        .appendTo($labelDiv);
+    } else {
+      jquery('<span class="rdformsMark rdformsOptionalMark">').text(b.optionalMark)
+        .appendTo($labelDiv);
+    }
   }
 
   // Buttons of various sorts
@@ -39,7 +42,9 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     (card.max === null || card.max !== card.min)) {
     // If not table or min and max are not the same, then add buttons.
     if (item.getType() === 'group') {
-      renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
+      if (item.getProperty()) {
+        renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
+      }
     } else {
       renderingContext.addCreateChildButton(rowNode, $labelDiv[0], binding, context);
     }

package/src/view/jquery/components.js

@@ -42,3 +42,21 @@ renderingContext.domClassToggle = (node, classStr, addOrRemove) => {
 };
 
 renderingContext.prePresenterViewRenderer = renderingContext.preEditorViewRenderer;
+
+renderingContext.addTruncateControl = (fieldsDiv, context) => {
+  const bundle = context.view.messages;
+  const showMore = renderingContext.domCreate('button', fieldsDiv);
+  renderingContext.domClassToggle(showMore, 'rdformsShowMore', true);
+  showMore.innerText = bundle.showMore;
+  showMore.onclick = () => {
+    renderingContext.domClassToggle(fieldsDiv, 'rdformsTruncated', false);
+  };
+
+  const showLess = renderingContext.domCreate('button', fieldsDiv);
+  renderingContext.domClassToggle(showLess, 'rdformsShowLess', true);
+
+  showLess.innerText = bundle.showLess;
+  showLess.onclick = () => {
+    renderingContext.domClassToggle(fieldsDiv, 'rdformsTruncated', true);
+  };
+}

package/src/view/jquery/style.css

@@ -20,8 +20,9 @@
     margin-bottom: 0.5em;
 }
 
-.rdformsEditor .cardgroupEditor>.rdformsFields>.rdformsGroup
-.cardgroup>.rdformsFields>.rdformsGroup {
+.rdformsEditor .cardgroupEditor>.rdformsFields>.rdformsGroup,
+.cardgroup>.rdformsFields>.rdformsGroup,
+.rdformsCard>.rdformsFields>.rdformsGroup {
     padding: 2px 5px 5px 10px;
     margin-right: -5px;
     margin-bottom: 14px;

package/src/view/react/choiceEditors/ChoiceLookupAndInlineSearch.js

@@ -95,7 +95,7 @@ export default (props) => {
     value.original.upgrade(props.binding, (upgradedChoice) => {
       setValue(editLocalizedChoice(upgradedChoice));
       setError(upgradedChoice.mismatch === true);
-    });
+    }, props.field);
   };
 
   const ngId = useNamedGraphId(binding, props.context);

package/src/view/react/components.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import WarningIcon from '@mui/icons-material/Warning';
 import ErrorIcon from '@mui/icons-material/Error';
 import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
+import Button from '@mui/material/Button';
 import renderingContext from '../renderingContext';
 import './labels';
 import './text';
@@ -223,6 +224,7 @@ renderingContext.preEditorRenderer = (fieldDiv, binding, context) => {
   if (binding.getItem().getType() !== 'group' && context.noCardinalityButtons !== true) {
     context.controlDiv = newStruct('div', fieldDiv);
     renderingContext.domClassToggle(context.controlDiv, 'rdformsFieldControl');
+
     // eslint-disable-next-line no-unused-vars
     const RemoveButton = renderingContext.addRemoveButton(fieldDiv, binding, context);
     context.controlDiv.appendChild(<RemoveButton key={`${binding.getHash()}_removeButton`}></RemoveButton>);
@@ -250,3 +252,27 @@ renderingContext.renderValidationMessage = (fieldDiv, type, message) => {
 };
 
 renderingContext.multiValueSupport = true;
+
+
+renderingContext.addTruncateControl = (fieldsDiv, context) => {
+  const Component = () => {
+    const [truncated, setTruncated] = useState(true);
+    const bundle = context.view.messages;
+    const showLess = () => {
+      renderingContext.domClassToggle(fieldsDiv, 'rdformsTruncated', true);
+      setTruncated(true);
+    };
+
+    const showMore = () => {
+      renderingContext.domClassToggle(fieldsDiv, 'rdformsTruncated', false);
+      setTruncated(false);
+    };
+
+    return <>
+      {truncated ?
+        (<Button className="rdformsShowMore" size="small" onClick={showMore}>{bundle.showMore}</Button>) :
+        (<Button className="rdformsShowLess" size="small" onClick={showLess}>{bundle.showLess}</Button>)}
+    </>;
+  };
+  fieldsDiv.appendChild(<Component></Component>);
+};

package/src/view/react/labels.js

@@ -118,18 +118,23 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     const b = context.view.messages;
     let mark;
 
-    if (card.min > 0) {
-      mark = <span className="rdformsMark rdformsMandatoryMark">{b.mandatoryMark}</span>;
-    } else if (card.pref > 0) {
-      mark = <span className="rdformsMark rdformsRecommendedMark">{b.recommendedMark}</span>;
-    } else {
-      mark = <span className="rdformsMark rdformsOptionalMark">{b.optionalMark}</span>;
+    // Only show mark if there is a property that allows the item to have an expression on its own
+    if (item.getProperty()) {
+      if (card.min > 0) {
+        mark = <span className="rdformsMark rdformsMandatoryMark">{b.mandatoryMark}</span>;
+      } else if (card.pref > 0) {
+        mark = <span className="rdformsMark rdformsRecommendedMark">{b.recommendedMark}</span>;
+      } else {
+        mark = <span className="rdformsMark rdformsOptionalMark">{b.optionalMark}</span>;
+      }
     }
     let Button;
     if (binding == null) {
       Button = renderingContext.addExpandButton(rowNode, null, item, context);
     } else if (item.getType() === 'group' && !context.view.showAsTable(item)) {
-      Button = renderingContext.addRemoveButton(rowNode, binding, context);
+      if (item.getProperty()) {
+        Button = renderingContext.addRemoveButton(rowNode, binding, context);
+      }
     }
 
     const view = context.view;
@@ -160,11 +165,13 @@ const ERR = (props) => {
   const [code, setCode] = useState(binding.getCardinalityTracker().getCode());
   useEffect(() => {
     const cardTr = binding.getCardinalityTracker();
-    const listener = cardTr.addListener(() => {
+    const checkAndSetCode = () => {
       const newCode = cardTr.getCode();
       renderingContext.domClassToggle(rowNode, 'rdformsError', newCode !== CODES.UNKNOWN);
       setCode(newCode);
-    });
+    };
+    checkAndSetCode();  // We call it here to be sure, not depending on a potential callback from cardTr
+    const listener = cardTr.addListener(checkAndSetCode);
     return () => cardTr.removeListener(listener);
   }, []);
   if (code === CODES.UNKNOWN) {

package/src/view/react/style.css

@@ -39,7 +39,8 @@
 }
 
 .rdformsEditor .cardgroupEditor>.rdformsFields>.rdformsGroup,
-.cardgroup>.rdformsFields>.rdformsGroup {
+.cardgroup>.rdformsFields>.rdformsGroup,
+.rdformsCard>.rdformsFields>.rdformsGroup {
     padding: 6px 6px 6px 12px;
     margin-right: -5px;
     margin-bottom: 14px;
@@ -171,7 +172,8 @@ div.MuiTooltip-tooltip {
     padding-bottom: 0;
 }
 .rdformsEditor .cardgroupEditor>.rdformsFields>.rdformsGroup,
-.cardgroup>.rdformsFields>.rdformsGroup {
+.cardgroup>.rdformsFields>.rdformsGroup,
+.rdformsCard>.rdformsFields>.rdformsGroup {
     margin-bottom: 5px;
 }
 
@@ -201,7 +203,8 @@ div.MuiTooltip-tooltip {
 }
 
 .rdformsEditor .rdformsError.cardgroupEditor>.rdformsFields>.rdformsGroup,
-.rdformsError.cardgroup>.rdformsFields>.rdformsGroup {
+.rdformsError.cardgroup>.rdformsFields>.rdformsGroup,
+.rdformsError.rdformsCard>.rdformsFields>.rdformsGroup {
     margin-right: 11px;
 }
 
@@ -231,4 +234,13 @@ div.MuiTooltip-tooltip {
 
 .Mui-disabled.rdformsDatatypeOption {
     color: red;
+}
+
+.rdformsPresenter .rdformsShowLess,
+.rdformsPresenter .rdformsShowMore {
+    margin-left: 0;
+}
+
+.rdformsPresenter .rdformsInline {
+    padding-left: 0em;
 }

package/src/view/react/text.js

@@ -81,16 +81,36 @@ presenters.itemtype('text').nodetype('URI').style('image').register((fieldDiv, b
 });
 
 // Presenter for text.
-presenters.itemtype('text').register((fieldDiv, binding, context) => {
-  if (binding.getItem().hasStyle('multiline')) {
-    renderingContext.domClassToggle(fieldDiv, 'rdformsMultiline', true);
+/*presenters.itemtype('text').style('inline').register((fieldDiv, binding, context) => {
+  const language = binding.getLanguage();
+
+  // HERE
+  const val2binding = {};
+  // eslint-disable-next-line no-return-assign
+  parentBinding.getChildBindingsFor(item).forEach(b => (val2binding[b.getValue()] = b));
+
+
+  const lbl = binding.getItem().hasStyle('showValue') ? binding.getValue() : binding.getGist();
+  if (language) {
+    fieldDiv.appendChild(<span lang={language} key={binding.getHash()}>{lbl}</span>);
   } else {
-    renderingContext.domClassToggle(fieldDiv, 'rdformsSingleline', true);
+    fieldDiv.appendChild(<span key={binding.getHash()}>{lbl}</span>);
   }
+});*/
 
+presenters.itemtype('text').register((fieldDiv, binding, context) => {
+  const item = binding.getItem();
   const language = binding.getLanguage();
-  if (context.view.showLanguage && language) {
-    fieldDiv.appendChild(<span className="rdformsLanguage" key={`lang_${binding.getHash()}`}>{language}</span>);
+  if (!item.hasStyle('inline')) {
+    if (item.hasStyle('multiline')) {
+      renderingContext.domClassToggle(fieldDiv, 'rdformsMultiline', true);
+    } else {
+      renderingContext.domClassToggle(fieldDiv, 'rdformsSingleline', true);
+    }
+
+    if (context.view.showLanguage && language) {
+      fieldDiv.appendChild(<span className="rdformsLanguage" key={`lang_${binding.getHash()}`}>{language}</span>);
+    }
   }
 
   // The text is shown as a link to the parents bindings URI if:
@@ -99,9 +119,9 @@ presenters.itemtype('text').register((fieldDiv, binding, context) => {
   // 3) The current item is first in the parents list of children.
   // 4) The parent binding corresponds to a URI
   const parentBinding = binding.getParent();
-  if (binding.getItem().hasStyle('label')
+  if (item.hasStyle('label')
     && context.view.topLevel !== true
-    && parentBinding != null && parentBinding.getItem().getChildren()[0] === binding.getItem()
+    && parentBinding != null && parentBinding.getItem().getChildren()[0] === item
     && parentBinding.getStatement() != null && parentBinding.getStatement().getType() === 'uri') {
     const attrs = system.attachLinkBehaviour(fieldDiv, binding, parentBinding);
     const component = attrs.component || null;
@@ -115,7 +135,7 @@ presenters.itemtype('text').register((fieldDiv, binding, context) => {
       parentBinding.getStatement().getValue()}><span>{vmap ?
       utils.getLocalizedValue(vmap).value || val : val}</span>{component}</a>);
   } else {
-    const lbl = binding.getItem().hasStyle('showValue') ? binding.getValue() : binding.getGist();
+    const lbl = item.hasStyle('showValue') ? binding.getValue() : binding.getGist();
     if (language) {
       fieldDiv.appendChild(<span lang={language} key={binding.getHash()}>{lbl}</span>);
     } else {

package/src/view/renderingContext.js

@@ -317,6 +317,8 @@ const renderingContext = {
   },
   fillEditorTable(/* table, bindings, context */) {
   },
+  addTruncateControl(/* fieldsDiv */) {
+  }
 };
 
 system.getChoice = renderingContext.getChoice;
@@ -334,6 +336,8 @@ const groupPresenter = (fieldDiv, binding, context) => {
     showDescription: context.view.showDescription,
     defaultLanguage: context.view.defaultLanguage,
     filterTranslations: context.view.filterTranslations,
+    truncate: context.view.truncate,
+    truncateLimit: context.view.truncateLimit,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
   }, fieldDiv);
 };
@@ -351,6 +355,8 @@ const groupEditor = (fieldDiv, binding, context) => {
     topLevel: false,
     compact: context.view.compact,
     showDescription: context.view.showDescription,
+    truncate: context.view.truncate,
+    truncateLimit: context.view.truncateLimit,
     includeLevel: context.view.includeLevel,
   }, fieldDiv);
   context.view._subEditors.push(subView);

package/src/view/resources/nls.json

@@ -55,5 +55,7 @@
   "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"
+  "openLinkExternally": "Open link externally",
+  "showMore": "Show more",
+  "showLess": "Show less"
 }

package/src/view/resources/rdforms.css

@@ -739,4 +739,49 @@ a.rdformsUrl:hover {
 .rdformsDescription {
     font-style: italic;
     margin-bottom: 10px;
+}
+
+.rdformsPresenter .rdformsInline>.rdformsRepeatedValue,
+.rdformsPresenter .rdformsInline>.rdformsOrigin {
+    border: 1px solid #E6E6E6;
+    padding: 4px 8px;
+    margin-top: initial;
+    margin-right: 5px;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    display: inline-block;
+}
+
+.rdformsPresenter .rdformsShowLess,
+.rdformsPresenter .rdformsShowMore {
+    margin-left: 1em;
+    margin-top: 5px;
+}
+
+.rdformsPresenter .rdformsInline>.rdformsShowLess,
+.rdformsPresenter .rdformsInline>.rdformsShowMore {
+    margin-left: 0;
+    margin-top: initial;
+}
+
+.rdformsPresenter .rdformsTruncated>.rdformsMaybeTruncated {
+    display: none;
+}
+
+.rdformsPresenter .rdformsTruncated>.rdformsShowLess {
+    display: none;
+}
+.rdformsPresenter .rdformsShowMore {
+    display: none;
+}
+.rdformsPresenter .rdformsTruncated>.rdformsShowMore {
+    display: initial;
+}
+
+.rdformsPresenter .rdformsInline>.rdformsField {
+    margin-left: 0;
+}
+
+.rdformsPresenter .rdformsInline {
+    padding-left: 1em;
 }