@entryscape/rdforms 10.11.2 → 10.12.0

package/src/view/react/choice.js

@@ -16,15 +16,21 @@ const choicify = func => (fieldDiv, binding, context) => {
     return;
   }
 
+  const locale = context.view.getLocale();
+
   if (isEditor && choice.editdescription) {
-    desc = utils.getLocalizedValue(choice.editdescription).value;
+    desc = utils.getLocalizedValue(choice.editdescription, locale).value;
   } else if (choice.description) {
-    desc = utils.getLocalizedValue(choice.description).value;
+    desc = utils.getLocalizedValue(choice.description, locale).value;
   }
 
-  func(fieldDiv, binding, choice, desc, isEditor);
+  func(fieldDiv, binding, choice, desc, isEditor, locale);
 };
 
+const getLocalizedLabel = (choice, isEditor, locale) =>
+  utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label, locale);
+
+
 // Presenter for image.
 presenters.itemtype('choice').style('image').register(choicify(
   (fieldDiv, binding, choice, desc) => {
@@ -40,27 +46,24 @@ presenters.itemtype('choice').style('stars').register(choicify(
     }
   }));
 
-const getLocalizedLabel = (choice, isEditor) =>
-  utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label);
-
 // Presenter for choices.
 presenters.itemtype('choice').register(choicify(
-  (fieldDiv, binding, choice, desc, isEditor) => {
+  (fieldDiv, binding, choice, desc, isEditor, locale) => {
     const item = binding.getItem();
     const title = desc || choice.seeAlso || choice.value;
     if ((item.hasStaticChoices() && !item.hasStyle('externalLink')) || item.hasStyle('noLink')) {
       fieldDiv.appendChild(React.createElement(() => {
-        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor));
+        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor, locale));
         useEffect(() => {
           if (choice.load != null) {
             choice.load(() => {
-              setLocValue(getLocalizedLabel(choice, isEditor));
+              setLocValue(getLocalizedLabel(choice, isEditor, locale));
             });
           }
         }, []);
         const langAttr = locValue.lang ? {lang: locValue.lang} : {};
         return <div key={binding.getHash()} {...langAttr} title={title}>{locValue.value}</div>
-      }));
+      }, {key: binding.getHash()}));
     } else {
       let attrs;
       if (item.hasStyle('externalLink')) {
@@ -72,11 +75,11 @@ presenters.itemtype('choice').register(choicify(
       delete attrs.component;
 
       fieldDiv.appendChild(React.createElement(() => {
-        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor));
+        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor, locale));
         useEffect(() => {
           if (choice.load != null) {
             choice.load(() => {
-              setLocValue(getLocalizedLabel(choice, isEditor));
+              setLocValue(getLocalizedLabel(choice, isEditor, locale));
             });
           }
         }, []);

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

@@ -5,6 +5,7 @@ import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
 import { useLocalizedSortedChoices, useName, useNamedGraphId } from '../hooks';
+import utils from '../../../utils';
 
 const ChoiceOption = props => <FormControlLabel
   disabled={props.disabled}
@@ -48,13 +49,15 @@ export default function RadioButtonsEditor(props) {
   }, []);
 
   const ngId = useNamedGraphId(binding, props.context);
+  let labelMap = item.getEditLabelMap() || item.getLabelMap();
+  let label = utils.getLocalizedValue(labelMap, props.context.view.getLocale()).value
   return (
     <>
       <FormControl component="fieldset">
         <RadioGroup
           {...row}
           key="radio"
-          aria-label={item.getEditLabel() || item.getLabel()}
+          aria-label={label}
           name={name}
           value={value}
           onChange={handleChange}

package/src/view/react/date.js

@@ -32,7 +32,7 @@ const getDatatypeFromBinding = (binding, alternatives) => {
 
 const datePresenter = (fieldDiv, binding, context) => {
   try {
-    const pres = getDatePresentation(binding);
+    const pres = getDatePresentation(binding, context.view.getLocale());
     fieldDiv.appendChild(<div key={binding.getHash()} >{pres}</div>);
   } catch (e) {
     console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 

package/src/view/react/labels.js

@@ -4,6 +4,7 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import renderingContext from '../renderingContext';
+import utils from '../../utils';
 import { Editor } from './Wrappers';
 import CODES from '../../model/CODES';
 
@@ -38,9 +39,10 @@ const ItemTooltip = (props) => {
   if (property) {
     propinfo = <div className="rdformsProperty"><a target="_blank" href={property}>{property}</a></div>;
   }
-  const description = props.context.view instanceof Editor ?
-    props.item.getEditDescription() || props.item.getDescription() : props.item.getDescription()
+  const descriptionMap = props.context.view instanceof Editor ?
+    props.item.getEditDescriptionMap() || props.item.getDescriptionMap() : props.item.getDescriptionMap()
     || (property ? '' : props.context.view.messages.info_missing || '');
+  const description = utils.getLocalizedValue(descriptionMap, props.context.view.getLocale()).value
 
   return (
     <ClickAwayListener onClickAway={handleTooltipClose}>
@@ -67,8 +69,9 @@ const ItemTooltip = (props) => {
 };
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
-  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 {
@@ -85,8 +88,9 @@ renderingContext.renderPresenterLabel = (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 = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
-      item.getDescription();
+    const descMap = view instanceof Editor ? item.getEditDescriptionMap() || item.getDescriptionMap() :
+      item.getDescriptionMap();
+    const desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value;
     if (!compactField && desc) {
       description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
     }
@@ -104,7 +108,8 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   if (item.hasStyle('nonEditable') || item.hasStyle('heading')) {
     renderingContext.renderPresenterLabel(rowNode, binding, item, context, true);
   } else {
-    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 {
@@ -147,8 +152,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 = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
-        item.getDescription();
+      const descMap = view instanceof Editor ? item.getEditDescriptionMap() || item.getDescriptionMap() :
+        item.getDescriptionMap();
+      const desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value
+
       if (!compactField && desc) {
         description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
       }

package/src/view/react/table.js

@@ -1,4 +1,5 @@
 import renderingContext from '../renderingContext';
+import utils from '../../utils';
 import jquery from 'jquery';
 
 renderingContext.addPresenterTable = (newRow, firstBinding, context) => {
@@ -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].getLabelMap(), context.view.getLocale()).value
+    renderingContext.attachItemInfo(item, jquery('<span>').text(label).appendTo($th), context);
   }
   return $table[0];
 };

package/src/view/react/text.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useMemo } from 'react';
-import moment from 'moment';
 import system from '../../model/system';
 import renderingContext from '../renderingContext';
 import { fromDuration } from '../viewUtils';
@@ -41,12 +40,12 @@ presenters.itemtype('group').nodetype('URI').style('linkWithLabel').register((fi
   delete attrs.component;
   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;
 

package/src/view/react/textEditors.js

@@ -7,7 +7,6 @@ import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
-import moment from 'moment';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import { useNamedGraphId } from './hooks';
@@ -21,7 +20,7 @@ const LanguageControl = (props) => {
   });
   useEffect(() => {
     if (!props.binding.isValid()) {
-      const defLang = moment.locale();
+      const defLang = props.context.view.getDefaultTextLanguage();
       if (typeof defLang === 'string' && defLang !== '') {
         setLang(defLang);
         props.binding.setLanguage(defLang, true);

package/src/view/viewUtils.js

@@ -142,20 +142,20 @@ export const getDateValue = (value, datatype) => {
   return '';
 };
 
-export const getDatePresentationFromDatatype = (datatype, date) => {
+export const getDatePresentationFromDatatype = (datatype, date, locale) => {
   switch (datatype) {
     case 'DateTime':
-      return moment(date).format('lll');
+      return moment(date).locale(locale).format('lll');
     case 'Date':
-      return moment(date).format('LL');
+      return moment(date).locale(locale).format('LL');
     case 'Time':
-      return moment(date).format('LT');
+      return moment(date).locale(locale).format('LT');
     case 'Year':
-      return moment(date).format('YYYY');
+      return moment(date).locale(locale).format('YYYY');
     case 'YearMonth':
-      return moment(date).format('MMMM YYYY');
+      return moment(date).locale(locale).format('MMMM YYYY');
     case 'MonthDay':
-      return moment(date).format('D MMMM');
+      return moment(date).locale(locale).format('D MMMM');
     default:
       return '';
   }
@@ -174,7 +174,7 @@ export const getAllowedDateAlternatives = (item) => {
   return dateAllowedDataAlternatives;
 };
 
-export const getDatePresentation = (binding) => {
+export const getDatePresentation = (binding, locale) => {
   const data = binding.getValue();
   if (data != null && data !== '') {
     const item = binding.getItem();
@@ -195,7 +195,7 @@ export const getDatePresentation = (binding) => {
         // Rely on the datatype from the item if everything else fails
         datatype = itemSuggestedDatatype;
       }
-      return getDatePresentationFromDatatype(datatype, date);
+      return getDatePresentationFromDatatype(datatype, date, locale);
     }
   }
   return undefined;