@entryscape/rdforms 10.11.2 → 10.12.1

package/package.json

@@ -8,17 +8,20 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.11.2",
+  "version": "10.12.1",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
   "repository": "https://bitbucket.org/metasolutions/rdforms.git",
   "license": "LGPL-3.0-only",
   "homepage": "https://rdforms.org",
+  "peerDependencies": {
+    "@entryscape/rdfjson": "2.7.6"
+  },
   "dependencies": {
+    "@entryscape/rdfjson": "2.7.6",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@entryscape/rdfjson": "2.7.6",
     "@fortawesome/fontawesome-free": "^5.8.1",
     "@mui/icons-material": "^5.0.3",
     "@mui/material": "^5.0.3",
@@ -83,7 +86,7 @@
     "ttf-loader": "^1.0.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^4.15.2",
     "webpack-merge": "^5.8.0"
   },
   "files": [

package/src/model/engine.js

@@ -661,7 +661,7 @@ const matchPathBelowBinding = (bindingTree, path) => {
           return res;
         }
       }
-      if (pred === '*' || pred === b.getPredicate()) {
+      if (pred === '*' || pred === b.getPredicate() || pred === item.getId()) {
         if (item.getType() === 'group') {
           res = matchPathBelowBinding(b, _path.slice(1));
           if (res) {

package/src/template/Item.js

@@ -203,6 +203,37 @@ export default class Item {
     this.refreshExtends();
   }
 
+  getEnhanced(attribute) {
+    const s = this.getSource(true);
+    if (typeof s.enhanced === 'boolean') {
+      return s.enhanced;
+    }
+    return (s.enhanced && s.enhanced[attribute]) || false;
+  }
+
+  setEnhanced(attribute, enhanced) {
+    const s = this.getSource(true);
+    if (typeof attribute === 'boolean') {
+      if (attribute === true) {
+        s.enhanced = true;
+      } else {
+        delete s.enhanced;
+      }
+    } else {
+      s.enhanced = typeof s.enhanced === 'boolean' ? {} : s.enhanced || {};
+      if (enhanced) {
+        s.enhanced[attribute] = true;
+      } else {
+        delete s.enhanced[attribute];
+        if (Object.keys(s).length === 0) {
+          delete s.enhanced;
+        }
+      }
+    }
+    // Simple way to refresh this._source which is a cache including potential enhancements
+    this.setExtends(this.getExtends());
+  }
+
   /**
    * @return {String|null} as a URI, may be null for Groups, never null for Text or choice
    * item types.
@@ -487,7 +518,7 @@ export default class Item {
     return source.styles.some(s => s.toLowerCase() === sty.toLowerCase());
   }
 
-  getSource(original) {
+  getSource(original, attribute) {
     if (original === true) {  // Get the original source
       return this._source._extendedSource || this._source;
     } else if (original === false) {  // Get the extended source

package/src/template/ItemStore.js

@@ -7,6 +7,26 @@ import OntologyStore from './OntologyStore';
 import Bundle from './Bundle';
 import { constructTemplate } from '../model/engine';
 
+const deepMerge = (source1, source2) => {
+  if (!source1 || !source2) {
+    return source2 === undefined ? source1 : source2;
+  }
+
+  if (Array.isArray(source1) && Array.isArray(source2)) {
+    return [].concat(origSource[key], extSource[key]);
+  }
+
+  if (typeof source1 === 'object' && typeof source2 === 'object') {
+    const obj = {};
+    Object.keys(source1).concat(Object.keys(source2)).forEach(key => {
+      obj[key] = deepMerge(source1[key], source2[key]);
+    });
+    return obj;
+  }
+
+  return source2;
+}
+
 export default class ItemStore {
   /**
    * Keeps a registry of templates and reusable items.
@@ -49,7 +69,11 @@ export default class ItemStore {
     }
     const ext = this.getItem(origSource.extends);
     if (ext) {
-      return ext.getChildren().concat(group.getChildren(true));
+      const children = group.getChildren(true);
+      if (group.getEnhanced('items') || children.length === 0) {
+        return ext.getChildren().concat(children);
+      }
+      return children;
     }
     return group.getChildren(true);
   }
@@ -166,7 +190,18 @@ export default class ItemStore {
 
   // eslint-disable-next-line class-methods-use-this
   createExtendedSource(origSource, extSource) {
-    const newSource = Object.assign(Object.assign({}, origSource), extSource);
+    const newSource = Object.assign({}, origSource, extSource);
+    if (extSource.enhanced) {
+      let keys;
+      if (extSource.enhanced === true) {
+        keys = Object.keys(origSource).concat(Object.keys(extSource));
+      } else {
+        keys = Object.keys(extSource.enhanced);
+      }
+      keys.forEach(key => {
+        newSource[key] = deepMerge(origSource[key], extSource[key]);
+      });
+    }
     newSource._extendedSource = extSource;
     newSource.extends = null; // Avoid infinite recursion when creating the fleshed out item.
     delete newSource.children;

package/src/utils.js

@@ -2,21 +2,21 @@ import moment from 'moment';
 import { cloneDeep } from 'lodash-es';
 import system from './model/system';
 
-const getLocalizedValue = (hash) => {
-  const locale = moment.locale();
+const getLocalizedValue = (hash, locale) => {
+  const _locale = locale || moment.locale();
   if (hash == null) {
     return { precision: 'none' };
   } else if (typeof hash === 'string') {
     return { value: hash, precision: 'nolang', lang: '' };
-  } else if (hash.hasOwnProperty(locale)) {
-    return { value: hash[locale], precision: 'exact', lang: locale };
+  } else if (hash.hasOwnProperty(_locale)) {
+    return { value: hash[_locale], precision: 'exact', lang: _locale };
   }
-  const pos = locale.indexOf('_');
-  if (pos > -1 && hash.hasOwnProperty(locale.substr(0, 2))) {
+  const pos = _locale.indexOf('_');
+  if (pos > -1 && hash.hasOwnProperty(_locale.substr(0, 2))) {
     return {
-      value: hash[locale.substr(0, 2)],
+      value: hash[_locale.substr(0, 2)],
       precision: 'coarsen',
-      lang: locale.substr(0, 2),
+      lang: _locale.substr(0, 2),
     };
   } else if (hash.hasOwnProperty('en')) {
     return { value: hash.en, precision: 'default', lang: 'en' };

package/src/view/Presenter.js

@@ -1,5 +1,4 @@
 /* eslint-disable class-methods-use-this */
-import moment from 'moment';
 import renderingContext from './renderingContext';
 import View from './View';
 
@@ -77,7 +76,7 @@ export default class Presenter extends View {
       return bindings;
     }
 
-    return renderingContext.filterTranslations(bindings, moment.locale(), this.defaultLanguage);
+    return renderingContext.filterTranslations(bindings, this.getLocale(), this.defaultLanguage);
   }
 
   addLabel(rowDiv, binding, item) {

package/src/view/View.js

@@ -4,12 +4,16 @@ import renderingContext from './renderingContext';
 import GroupBinding from '../model/GroupBinding';
 import * as engine from '../model/engine';
 import { bindingReport } from '../model/validate';
+import moment from 'moment';
 
 let viewCounter = 0;
 export default class View {
   constructor(params, srcNodeRef) {
     this._viewId = viewCounter;
     viewCounter += 1;
+    this.locale = params.locale;
+    this.defaultTextLanguage = params.defaultTextLanguage;
+    this.messages = params.messages;
     this.parentView = params.parentView;
     this.srcNodeRef = srcNodeRef;
     this.binding = params.binding || null;
@@ -166,8 +170,9 @@ export default class View {
       return;
     }
 
-    const messages = renderingContext.getMessages();
-    this.messages = messages;
+    if (!this.messages) {
+      this.messages = renderingContext.getMessages();
+    }
     if (this.binding == null) {
       // Just in case loading messages takes time
       // and someone does a reset of the view meanwhile.
@@ -456,4 +461,12 @@ export default class View {
   truncateAt(item, bindings) {
     return -1;
   }
+
+  getLocale() {
+    return this.locale || (this.parentView ? this.parentView.getLocale() : moment.locale());
+  }
+
+  getDefaultTextLanguage() {
+    return this.defaultTextLanguage || (this.parentView ? this.parentView.getDefaultTextLanguage() : this.getLocale());
+  }
 }

package/src/view/bmd/DateTimeMD.js

@@ -54,7 +54,7 @@ export default class DateTimeMD extends DateTimeBase {
       date: true,
       triggerEvent: 'none',
       switchOnClick: true,
-      lang: moment.locale(),
+      lang: this.context.view.getLocale(),
     });
 
     // time
@@ -64,17 +64,17 @@ export default class DateTimeMD extends DateTimeBase {
       date: false,
       triggerEvent: 'none',
       switchOnClick: true,
-      lang: moment.locale(),
+      lang: this.context.view.getLocale(),
     });
 
     jquery(this.dateButton).click(() => {
       this.$datepicker.bootstrapMaterialDatePicker('_fireCalendar');
     });
     this.$datepicker.on('change', (evt, mInstance) => {
-      const m = mInstance || moment(evt.target.value);
+      const m = mInstance || moment(evt.target.value, undefined, this.context.view.getLocale());
 
       if (this.tpdate) {
-        const tpd = moment(this.tpdate);
+        const tpd = moment(this.tpdate, undefined, this.context.view.getLocale());
         m.minute(tpd.minute());
         m.hour(tpd.hour());
       }
@@ -91,10 +91,10 @@ export default class DateTimeMD extends DateTimeBase {
     });
 
     this.$timepicker.on('change', (evt, mInstance) => {
-      const m = mInstance || moment(evt.target.value);
+      const m = mInstance || moment(evt.target.value, undefined, this.context.view.getLocale());
 
       if (this.dpdate != null) {
-        const dpd = moment(this.dpdate);
+        const dpd = moment(this.dpdate, undefined, this.context.view.getLocale());
         dpd.minute(m.minute());
         dpd.hour(m.hour());
         this.tpdate = dpd.toDate();

package/src/view/bmd/Selectize.js

@@ -41,7 +41,7 @@ renderingContext.renderSelect = function (fieldDiv, binding, context) {
       context.chooser.search(binding, query).then((choices) => {
         callback(choices.map(c => ({
           id: c.value,
-          text: utils.getLocalizedValue(c.label).value || '',
+          text: utils.getLocalizedValue(c.editlabel || c.label, context.view.getLocale()).value || '',
           choice: c,
         })));
       });
@@ -58,7 +58,7 @@ renderingContext.renderSelect = function (fieldDiv, binding, context) {
   };
   context.setValue = (choice) => {
     $select.toggleClass('mismatch', choice.mismatch === true);
-    const label = utils.getLocalizedValue(choice.label).value || '';
+    const label = utils.getLocalizedValue(choice.editlabel || choice.label, context.view.getLocale()).value || '';
     const op = sel.options[choice.value];
     if (!op) {
       sel.addOption({ id: choice.value, text: label, choice });

package/src/view/bootstrap/RadioButtonsEditor.js

@@ -8,9 +8,9 @@ export default class RadioButtonsEditor {
     this.item = this.binding.getItem();
     this.choices = this.item.getChoices().map(c => ({
       label: c.editlabel || c.label,
-      description: c.description,
+      description: c.editDescription || c.description,
       value: c.value,
-      text: this.item._getLocalizedValue(c.editlabel || c.label).value,
+      text: this.item._getLocalizedValue(c.editlabel || c.label, args.context.view.getLocale()).value,
       choice: c,
     }));
 
@@ -46,8 +46,9 @@ export default class RadioButtonsEditor {
         $label = jquery('<label class="form-check-label">')
           .appendTo($divWrap);
       }
-      if (c.description) {
-        $label.attr('title', this.item._getLocalizedValue(c.editdescription || c.description).value
+      if (c.description || c.editdescription) {
+        $label.attr('title', this.item._getLocalizedValue(c.editdescription || c.description,
+            this.context.view.getLocale()).value
           || c.seeAlso || c.value);
       }
 
@@ -57,7 +58,7 @@ export default class RadioButtonsEditor {
         .attr('checked', c.value === currentValue)
         .attr('name', `rdformsRadio_${uniqueRadioButtonGroupNr}`)
         .appendTo($label);
-      $label.append(this.item._getLocalizedValue(c.editlabel || c.label).value);
+      $label.append(this.item._getLocalizedValue(c.editlabel || c.label, this.context.view.getLocale()).value);
 
       if (c.mismatch) {
         $label.addClass('mismatch disabled');

package/src/view/bootstrap/Select2.js

@@ -4,7 +4,6 @@ import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import Select2QueryAdapter from './Select2QueryAdapter';
 import { getNamedGraphId } from '../viewUtils';
-// import 'select2/src/js/jquery.select2';
 
 
 renderingContext.renderSelect = (fieldDiv, binding, context) => {
@@ -32,7 +31,7 @@ renderingContext.renderSelect = (fieldDiv, binding, context) => {
   };
   context.setValue = (choice) => {
     $select.toggleClass('mismatch', choice.mismatch === true);
-    const label = utils.getLocalizedValue(choice.label).value || '';
+    const label = utils.getLocalizedValue(choice.editlabel || choice.label, context.view.getLocale()).value || '';
     if ($select.find(`option[value='${choice.value}']`).length === 0) {
       $select.append(new Option(label, choice.value, true, true)).trigger('change');
       $select.trigger({
@@ -52,7 +51,8 @@ renderingContext.renderSelect = (fieldDiv, binding, context) => {
     $select.toggleClass('mismatch', choice.mismatch);
     const $node = $select.next().find('.select2-selection__rendered');
     if (choice.description) {
-      $node.attr('title', utils.getLocalizedValue(choice.description).value);
+      $node.attr('title',
+        utils.getLocalizedValue(choice.editdescription || choice.description, context.view.getLocale()).value);
     }
   });
 };

package/src/view/bootstrap/choice.js

@@ -22,7 +22,7 @@ editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
   const item = binding.getItem();
   const choices = item.getChoices().map(c => ({
     id: c.value,
-    text: item._getLocalizedValue(c.editlabel || c.label).value,
+    text: item._getLocalizedValue(c.editlabel || c.label, context.view.getLocale()).value,
     choice: c,
   }));
   if (!item.hasStyle('preserveOrderOfChoices')) {

package/src/view/bootstrap/labels.js

@@ -1,13 +1,16 @@
 import jquery from 'jquery';
 import renderingContext from '../renderingContext';
 import Editor from '../Editor';
+import utils from '../../utils';
+
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   if (item.hasStyle('nonEditable') || item.hasStyle('heading')) {
     return renderingContext.renderPresenterLabel(rowNode, binding, item, context, true);
   }
 
-  let label = item.getEditLabel() || item.getLabel();
+  const labelMap = item.getEditLabelMap() || item.getLabelMap();
+  let label = utils.getLocalizedValue(labelMap, context.view.getLocale()).value
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
@@ -59,8 +62,10 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
       (view.compact && !item.hasStyle('nonCompact') && (
         (view.topLevel && item.getType() !== 'group') ||
         (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
-    const desc = context.view instanceof Editor ? item.getEditDescription() || item.getDescription() :
-      item.getDescription();
+    const descMap = context.view instanceof Editor ? item.getEditDescriptionMap() || item.getDescriptionMap() :
+      item.getDescriptionMap();
+    let desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value
+
     if (!compactField && desc) {
       jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
     }
@@ -71,21 +76,25 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
 };
 
 renderingContext.attachItemInfo = function (item, aroundNode, context) {
-  if (item == null || (item.getProperty() == null && item.getDescription() == null
-    && item.getEditDescription() == null)) {
+  if (item == null || (item.getProperty() == null && item.getDescriptionMap() == null
+    && item.getEditDescriptionMap() == null)) {
     jquery(aroundNode).addClass('noPointer');
     return;
   }
 
-  const description = (context.view instanceof Editor ?
-    item.getEditDescription() || item.getDescription() : item.getDescription()) || '';
+  const descriptionMap = (context.view instanceof Editor ?
+    item.getEditDescriptionMap() || item.getDescriptionMap() : item.getDescriptionMap()) || {};
+  const description = utils.getLocalizedValue(descriptionMap, context.view.getLocale()).value || '';
+
   let propinfo = '';
   if (item.getProperty()) {
     propinfo = `<div class="property"><a target="_blank" href="${item.getProperty()}">${
       item.getProperty()}</a></div>`;
   }
 
-  let label = context.view instanceof Editor ? item.getEditLabel() || item.getLabel() : item.getLabel();
+  const labelMap = context.view instanceof Editor ? item.getEditLabelMap() || item.getLabelMap() : item.getLabelMap();
+  let label = utils.getLocalizedValue(labelMap, context.view.getLocale()).value
+
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {

package/src/view/bootstrap/table.js

@@ -106,12 +106,13 @@ renderingContext.addEditorTable = (newRow, firstBinding, context) => {
   const $tHead = jquery('<thead>').appendTo($table);
   const $tBody = jquery('<tbody>').appendTo($table);
   const $tHeadRow = jquery('<tr>').appendTo($tHead);
-  for (colInd = 0; colInd < childItems.length; colInd++) {
+  for (let colInd = 0; colInd < childItems.length; colInd++) {
     const $th = jquery('<th>').appendTo($tHeadRow);
     jquery($th).addClass(`rdformsColumnHeader${colInd}`);
     const childItem = childItems[colInd];
-    const label = context.view instanceof Editor ?
-      childItem.getEditLabel() || childItem.getLabel() : childItem.getLabel();
+    const labelMap = context.view instanceof Editor ?
+      childItem.getEditLabelMap() || childItem.getLabelMap() : childItem.getLabelMap();
+    const label = utils.getLocalizedValue(labelMap, context.view.getLocale()).value
     renderingContext.attachItemInfo(item,
       jquery('<span>').text(label).appendTo($th)[0], context);
   }

package/src/view/bootstrap/text.js

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import durationEditor from './durationEditor';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
@@ -184,7 +183,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
     if (binding.isValid()) {
       $lselect.val(binding.getLanguage());
     } else {
-      const defLang = moment.locale();
+      const defLang = context.view.getDefaultTextLanguage();
       if (typeof defLang === 'string' && defLang !== '') {
         $lselect.val(defLang);
         binding.setLanguage(defLang);

package/src/view/jquery/choice.js

@@ -5,16 +5,16 @@ import utils from '../../utils';
 // -------------- Presenters ----------------
 const presenters = renderingContext.presenterRegistry;
 
-const choicify = func => (fieldDiv, binding) => {
+const choicify = func => (fieldDiv, binding, context) => {
   const choice = binding.getChoice();
   let desc;
   if (!choice) {
     return;
   }
   if (choice.description) {
-    desc = utils.getLocalizedValue(choice.description).value;
+    desc = utils.getLocalizedValue(choice.description, context.view.getLocale()).value;
   }
-  func(fieldDiv, binding, choice, desc);
+  func(fieldDiv, binding, choice, desc, context.view.getLocale());
 };
 
 // Presenter for image.
@@ -36,15 +36,15 @@ presenters.itemtype('choice').style('stars').register(choicify(
 
 // Presenter for choices.
 presenters.itemtype('choice').register(choicify(
-  (fieldDiv, binding, choice, desc) => {
+  (fieldDiv, binding, choice, desc, locale) => {
     const item = binding.getItem();
-    const locValue = utils.getLocalizedValue(choice.label);
+    const locValue = utils.getLocalizedValue(choice.label, locale);
     let $el;
 
     if (item.hasStaticChoices() && !item.hasStyle('externalLink') || item.hasStyle('noLink')) {
       $el = jquery('<div>')
         .attr('title', desc || choice.seeAlso || choice.value)
-        .text(utils.getLocalizedValue(choice.label).value)
+        .text(utils.getLocalizedValue(choice.label, locale).value)
         .appendTo(fieldDiv);
     } else {
       $el = jquery('<a class="rdformsUrl">')
@@ -60,7 +60,7 @@ presenters.itemtype('choice').register(choicify(
     }
     if (choice.load != null) {
       choice.load(() => {
-        const locValue2 = utils.getLocalizedValue(choice.label);
+        const locValue2 = utils.getLocalizedValue(choice.label, locale);
         $el.text(locValue2.value);
         if (locValue2.lang) {
           $el.attr('lang', locValue2.lang);

package/src/view/jquery/labels.js

@@ -1,9 +1,11 @@
 import jquery from 'jquery';
 import renderingContext from '../renderingContext';
 import Editor from '../Editor';
+import utils from '../../utils';
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelRow) => {
-  let label = context.view instanceof Editor ? item.getEditLabel() || item.getLabel() : item.getLabel();
+  let labelMap = context.view instanceof Editor ? item.getEditLabelMap() || item.getLabelMap() : item.getLabelMap();
+  let label = utils.getLocalizedValue(labelMap, context.view.getLocale()).value
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
@@ -31,7 +33,8 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
       (view.compact && !item.hasStyle('nonCompact') && (
         (view.topLevel && item.getType() !== 'group') ||
         (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
-    const desc = item.getDescription();
+    const desc = utils.getLocalizedValue(item.getDescriptionMap(), context.view.getLocale()).value
+
     if (!compactField && desc) {
       jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
     }
@@ -40,10 +43,10 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
   renderingContext.attachItemInfo(item, $labelDiv[0], context);
 };
 
-renderingContext.attachItemInfo = function (item, aroundNode/* , context */) {
-  if (item == null || item.getDescription() == null) {
+renderingContext.attachItemInfo = function (item, aroundNode, context) {
+  if (item == null || item.getDescriptionMap() == null) {
     return;
   }
-  const desc = item.getDescription();
+  const desc = utils.getLocalizedValue(item.getDescriptionMap(), context.view.getLocale()).value
   aroundNode.setAttribute('title', desc);
 };

package/src/view/jquery/table.js

@@ -1,5 +1,6 @@
 import renderingContext from '../renderingContext';
 import jquery from 'jquery';
+import utils from '../../utils';
 
 renderingContext.addPresenterTable = (newRow, firstBinding, context) => {
   const item = firstBinding.getItem();
@@ -9,7 +10,8 @@ renderingContext.addPresenterTable = (newRow, firstBinding, context) => {
   const $tHeadRow = jquery('<tr>').appendTo($table);
   for (let colInd = 0; colInd < childItems.length; colInd++) {
     const $th = jquery('<th>').appendTo($tHeadRow);
-    renderingContext.attachItemInfo(item, jquery('<span>').text(childItems[colInd].getLabel()).appendTo($th), context);
+    let label = utils.getLocalizedValue(childItems[colInd].getLabel(), context.view.getLocale()).value
+    renderingContext.attachItemInfo(item, jquery('<span>').text(label).appendTo($th), context);
   }
   return $table[0];
 };

package/src/view/jquery/text.js

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import { escape } from 'lodash-es';
 import { getDatePresentation, fromDuration } from '../viewUtils';
 import renderingContext from '../renderingContext';
@@ -35,12 +34,12 @@ presenters.itemtype('group').nodetype('URI').style('linkWithLabel').register((fi
   const val = binding.getValue();
   const labelItem = binding.getItem().getChildren().find(i => i.hasStyle('label'));
   const labelBindings = labelItem ?
-    renderingContext.filterTranslations(binding.getChildBindingsFor(labelItem), moment.locale(),
+    renderingContext.filterTranslations(binding.getChildBindingsFor(labelItem), context.view.getLocale(),
       context.view.defaultLanguage) : [];
 
   const tooltipItem = binding.getItem().getChildren().find(i => i.hasStyle('tooltip'));
   const tooltipBindings = tooltipItem ?
-    renderingContext.filterTranslations(binding.getChildBindingsFor(tooltipItem), moment.locale(),
+    renderingContext.filterTranslations(binding.getChildBindingsFor(tooltipItem), context.view.getLocale(),
       context.view.defaultLanguage) : [];
   const tooltip = tooltipBindings.length > 0 ? tooltipBindings[0].getValue() : val;
 
@@ -128,9 +127,9 @@ presenters.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding
   });
 });
 
-const datePresenter = (fieldDiv, binding) => {
+const datePresenter = (fieldDiv, binding, context) => {
   try {
-    const pres = getDatePresentation(binding);
+    const pres = getDatePresentation(binding, context.view.getLocale());
     jquery('<div>').html(pres).appendTo(fieldDiv);
   } catch (e) {
     console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 

package/src/view/react/buttons.js

@@ -8,6 +8,8 @@ import IconButton from '@mui/material/IconButton';
 import renderingContext from '../renderingContext';
 import * as engine from '../../model/engine';
 import { useNamedGraphId } from './hooks';
+import utils from '../../utils';
+
 
 renderingContext.addExpandButton = (rowDiv, labelDiv, item, context) => {
   console.log('Expand button not yet supported');
@@ -107,7 +109,8 @@ renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) =>
       context.view.addRow(rowDiv, nBinding); // not the first binding...
     }
   };
-  let label = item.getEditLabel() || item.getLabel();
+  let labelMap = item.getEditLabelMap() || item.getLabelMap();
+  let label = utils.getLocalizedValue(labelMap, context.view.getLocale()).value
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {