@entryscape/rdforms 10.5.2 → 10.6.0

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

@@ -5,7 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import BuildIcon from '@mui/icons-material/Build';
 import IconButton from '@mui/material/IconButton';
 import renderingContext from '../../renderingContext';
-import { loadLocalizedChoice, localizedChoice } from '../hooks';
+import { useLocalizedChoice, editLocalizedChoice } from '../hooks';
 import ShowButton from './ShowButton';
 
 let globalChoiceQueryThrottle;
@@ -13,7 +13,7 @@ let globalChoiceQueryThrottle;
 export default (props) => {
   const binding = props.binding;
   const [options, setOptions] = useState([]);
-  const [value, setValue] = loadLocalizedChoice(binding, options);
+  const [value, setValue] = useLocalizedChoice(binding, options);
   const [inputValue, setInputValue] = useState('');
   const [open, setOpen] = useState(false);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
@@ -51,7 +51,7 @@ export default (props) => {
         globalChoiceQueryThrottle = undefined;
         props.context.chooser.search(binding.getItem(), inputValue.trimStart()).then((results) => {
           if (active) {
-            setOptions(results.map(localizedChoice));
+            setOptions(results.map(editLocalizedChoice));
           }
         });
       }, 200);
@@ -71,6 +71,7 @@ export default (props) => {
         aria-labelledby={labelledBy}
         {...params}
         {...(value && value.mismatch ? { error: true } : {})}
+        placeholder={binding.getItem().getPlaceholder()}
         onKeyDown={({ key, keyCode }) => {
           const isEnterKey = key === 'Enter' || keyCode === 13;
           if (isEnterKey && !open) {
@@ -84,14 +85,14 @@ export default (props) => {
   const showHandler = () => {
     renderingContext.openChoiceSelector(props.binding, (selectedChoice) => {
       binding.setChoice(selectedChoice);
-      setValue(localizedChoice(selectedChoice));
+      setValue(editLocalizedChoice(selectedChoice));
       setError(selectedChoice.mismatch === true);
     }, props.field);
   };
 
   const upgradeHandler = () => {
     value.original.upgrade(props.binding, (upgradedChoice) => {
-      setValue(localizedChoice(upgradedChoice));
+      setValue(editLocalizedChoice(upgradedChoice));
       setError(upgradedChoice.mismatch === true);
     });
   };

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

@@ -15,7 +15,7 @@ import { useLocalizedSortedChoices, useLocalizedChoice } from '../hooks';
  */
 export default (props) => {
   const binding = props.binding;
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const [value, setValue] = useLocalizedChoice(binding, choices);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
 
@@ -37,6 +37,7 @@ export default (props) => {
     params.inputProps['aria-labelledby'] = labelledBy;
     return (
       <TextField
+        placeholder={binding.getItem().getPlaceholder()}
         {...params}
         {...(value && value.mismatch ? { error: true } : {})}
         variant={renderingContext.materialVariant}

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

@@ -15,7 +15,7 @@ export default function RadioButtonsEditor(props) {
   const binding = props.binding;
   const item = binding.getItem();
   const name = useName();
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
   const [value, setValue] = useState(() => {
     const choice = binding.getChoice();
@@ -52,7 +52,7 @@ export default function RadioButtonsEditor(props) {
         <RadioGroup
           {...row}
           key="radio"
-          aria-label={item.getLabel()}
+          aria-label={item.getEditLabel() || item.getLabel()}
           name={name}
           value={value}
           onChange={handleChange}

package/src/view/react/components.js

@@ -83,7 +83,7 @@ let structId = 0;
  * Note that all update of state variables are done by replacing the value (even for arrays and sets) to allow
  * correct diffing of react.
  */
-const newStruct = (Tag, parent) => {
+const newStruct = (Tag, parent, nodeId) => {
   const firstClsSet = new Set();
   let firstChildArr = [];
   let firstTextStr;
@@ -153,7 +153,7 @@ const newStruct = (Tag, parent) => {
       };
       // -- END
       return (
-        <Tag className={clsSet.join(' ')}>
+        <Tag id={nodeId} className={clsSet.join(' ')}>
           {childArr.map((child, index) => getReactComponent(child, index))}
           {text}
         </Tag>
@@ -166,15 +166,15 @@ const newStruct = (Tag, parent) => {
 
 renderingContext.domQuery = (selector, struct) => struct.domQuery(selector);
 
-renderingContext.domCreate = (nodeStr, parentStruct) => {
-  const struct = newStruct(nodeStr, parentStruct);
+renderingContext.domCreate = (nodeStr, parentStruct, nodeId) => {
+  const struct = newStruct(nodeStr, parentStruct, nodeId);
   parentStruct.appendChild(struct);
   return struct;
 };
 
-renderingContext.domCreateAfter = (nodeStr, siblingStruct) => {
+renderingContext.domCreateAfter = (nodeStr, siblingStruct, nodeId) => {
   if (siblingStruct.parent) {
-    const struct = newStruct(nodeStr, siblingStruct.parent);
+    const struct = newStruct(nodeStr, siblingStruct.parent, nodeId);
     siblingStruct.parent.appendAfter(struct, siblingStruct);
     return struct;
   }

package/src/view/react/date.js

@@ -140,14 +140,6 @@ const dateEditor = (fieldDiv, binding, context) => {
               onChange={onDateChange}
               autoOk={true}
               mask={datePickerConfig.mask[selectedDatatype]}
-              PopperProps={{
-                modifiers: [
-                  {
-                    name: 'flip',
-                    enabled: false,
-                  },
-                ],
-              }}
             />
           )}
           {(alternatives.DateTime || alternatives.Time) && (
@@ -162,14 +154,6 @@ const dateEditor = (fieldDiv, binding, context) => {
               onChange={onDateChange}
               ampm={false}
               autoOk={true}
-              PopperProps={{
-                modifiers: [
-                  {
-                    name: 'flip',
-                    enabled: false,
-                  },
-                ],
-              }}
             />
           )}
           {!onlyOneAlternative && (

package/src/view/react/hooks.js

@@ -3,18 +3,24 @@ import utils from '../../utils';
 
 /**
  * Wraps a choice in an object where the current label, and description is localized.
+ *
  * @param {Object} choice an original choice object with label and descriptions being maps with language strings
+ * @param {isEditor} true means we are in edit mode and editLabel or editDescription have preference if they exist.
  * @return {Object}
  */
-export const localizedChoice = choice => ({
+export const localizedChoice = (choice, isEditor) => ({
   value: choice.value,
-  label: utils.getLocalizedValue(choice.label).value,
-  description: choice.description ? utils.getLocalizedValue(choice.description).value : undefined,
+  label: utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label).value,
+  description: choice.description || choice.editdescription ?
+    (utils.getLocalizedValue(isEditor ? choice.editdescription || choice.description : choice.description).value)
+    : undefined,
   seeAlso: choice.seeAlso,
   mismatch: choice.mismatch,
   original: choice,
 });
 
+export const editLocalizedChoice = choice => localizedChoice(choice, true);
+
 /**
  * Use choices from a binding with localized labels and sorted.
  * A copy is returned with precalculated labels to allow sorting, use the original property on each choice
@@ -24,9 +30,9 @@ export const localizedChoice = choice => ({
  * @param {Binding} binding
  * @return {Array}
  */
-export const useLocalizedSortedChoices = binding => useMemo(() => {
+export const useLocalizedSortedChoices = (binding, isEditor) => useMemo(() => {
   const item = binding.getItem();
-  const choices = item.getChoices().map(localizedChoice);
+  const choices = item.getChoices().map(isEditor ? editLocalizedChoice : localizedChoice);
   if (!item.hasStyle('preserveOrderOfChoices')) {
     choices.sort((c1, c2) => (c1.label < c2.label ? -1 : 1));
   }
@@ -56,18 +62,20 @@ export const useLocalizedChoice = (binding, choices) => useState(() => {
  * Returns a localized choice, may trigger a load step to get a more fleshed out version of the choice,
  * i.e. with label, description and seeAlso.
  * @param {Binding} binding
+ * @param {boolean} isEditor if true any editlabel or editdescription takes precedence
  */
-export const loadLocalizedChoice = (binding) => {
+export const loadLocalizedChoice = (binding, isEditor) => {
+  const localize = isEditor ? editLocalizedChoice : localizedChoice;
   const [choice, setChoice] = useState(() => {
     const originalChoice = binding.getChoice() || null;
-    return originalChoice ? localizedChoice(originalChoice) : null;
+    return originalChoice ? localize(originalChoice) : null;
   });
   useEffect(() => {
     if (choice && choice.original.load) {
       choice.original.load(() => {
-        setChoice(localizedChoice(choice.original));
+        setChoice(localize(choice.original));
       }, () => {
-        setChoice(localizedChoice(choice.original));
+        setChoice(localize(choice.original));
       });
     }
   }, []);

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 { Editor } from './Wrappers';
 import { CODES } from '../../model/engine';
 
 const StyledTooltip = styled(
@@ -37,7 +38,9 @@ const ItemTooltip = (props) => {
   if (property) {
     propinfo = <div className="rdformsProperty"><a target="_blank" href={property}>{property}</a></div>;
   }
-  const description = props.item.getDescription() || (property ? '' : props.context.view.messages.info_missing || '');
+  const description = props.context.view instanceof Editor ?
+    props.item.getEditDescription() || props.item.getDescription() : props.item.getDescription()
+    || (property ? '' : props.context.view.messages.info_missing || '');
 
   return (
     <ClickAwayListener onClickAway={handleTooltipClose}>
@@ -64,24 +67,26 @@ const ItemTooltip = (props) => {
 };
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
-  let label = item.getLabel();
+  let label = context.view instanceof Editor ?
+    item.getEditLabel() || item.getLabel() : item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
     label = '';
   }
+  const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
   label = item.hasStyle('heading') ?
-    <h2 tabIndex="0" className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></h2> :
-    <span tabIndex="0" className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></span>;
-  rowNode.appendChild(<ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` } context={context} item={item
-  }>{label}</ItemTooltip>);
+    <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>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   if (item.hasStyle('nonEditable') || item.hasStyle('heading')) {
     renderingContext.renderPresenterLabel(rowNode, binding, item, context, true);
   } else {
-    let label = item.getLabel();
+    let label = item.getEditLabel() || item.getLabel();
     if (label != null && label !== '') {
       label = label.charAt(0).toUpperCase() + label.slice(1);
     } else {

package/src/view/react/textEditors.js

@@ -93,7 +93,9 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
     return <><TextField
       className={extLink || langlit ? 'rdformsTwoThirds' : ''}
       multiline={multiline}
+      placeholder={item.getPlaceholder()}
       error={!valid}
+      helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />{extLink && (value != null || value === '') &&
     (<IconButton aria-label={bundle.openLinkExternally} disabled={!valid} target='_blank' href={value}
@@ -107,6 +109,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
 
 const bindToPattern = pattern => (fieldDiv, binding, context) => {
   const regex = pattern ? new RegExp(pattern) : null;
+  const item = binding.getItem();
 
   const TextComp = () => {
     const [gist, setGist] = useState(binding.getGist());
@@ -131,6 +134,8 @@ const bindToPattern = pattern => (fieldDiv, binding, context) => {
     };
     return <TextField
       error={!valid}
+      placeholder={item.getPlaceholder()}
+      helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />;
   };

package/src/view/renderingContext.js

@@ -58,9 +58,9 @@ const defaultLanguages = [
 const renderingContext = {
   domQuery(/* selector, node */) {
   },
-  domCreate(/* domStr, node */) {
+  domCreate(/* domStr, node, id */) {
   },
-  domCreateAfter(/* domStr, node */) {
+  domCreateAfter(/* domStr, node, id */) {
   },
   domClassToggle(/* node, classStr, addOrRemove */) {
   },

package/src/view/resources/rdforms.css

@@ -314,7 +314,7 @@ a.rdformsUrl:hover {
  	padding-right: 55px;
 	position: relative;
  }
- 
+
  .rdformsEditor .rdformsField .rdformsChoiceLabel {
  	margin-left: 0.2em;
  	margin-right: 1em;
@@ -475,7 +475,6 @@ a.rdformsUrl:hover {
 
 .compact .rdformsRow.rdformsTopLevel {
 	display: table;
-	width: 98%;
 }
 .compact .rdformsRow.rdformsTopLevel>div {
 	display: table-cell;