@entryscape/rdforms 10.3.0 → 10.5.0

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

@@ -0,0 +1,87 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useMemo } from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { FormGroup } from '@mui/material';
+import { useLocalizedSortedChoices, useName } from '../hooks';
+import * as engine from '../../../model/engine';
+
+const CheckOption = (props) => {
+  const { choice, binding, onChoiceChange } = props;
+  const [checked, setChecked] = React.useState(choice.value === binding.getValue());
+
+  const handleChange = (evt) => {
+    binding.setChoice(evt.target.checked ? choice.original : null);
+    setChecked(evt.target.checked);
+    onChoiceChange();
+  };
+  return <FormControlLabel
+    label={choice.label} control={<Checkbox checked={checked} onChange={handleChange}/>}
+    {...(choice.mismatch ? { className: 'mismatch' } : {})}
+    title={choice.description || choice.seeAlso || choice.value}/>;
+};
+
+export default function CheckBoxesEditor(props) {
+  const [resetCount, setResetCount] = React.useState(0);
+  const binding = props.binding;
+  const item = binding.getItem();
+  const choices = useLocalizedSortedChoices(binding);
+  const choiceBindingPairs = useMemo(() => {
+    const parentBinding = binding.getParent();
+    const val2binding = {};
+    // eslint-disable-next-line no-return-assign
+    parentBinding.getChildBindingsFor(item).forEach(b => (val2binding[b.getValue()] = b));
+    const pairs = choices.map((c) => {
+      const existingbinding = val2binding[c.value];
+      if (existingbinding) {
+        delete val2binding[c.value];
+        return [c, existingbinding];
+      }
+      return [c, engine.create(parentBinding, item)];
+    });
+    // Add checks for values that are non-conforming (should have mismatch on their choices).
+    Object.values(val2binding).forEach((b) => {
+      const choice = b.getChoice();
+      if (choice) {
+        pairs.push([choice, b]);
+      }
+    });
+    return pairs;
+  });
+
+  const [error, setError] = useState(binding.getChoice()?.mismatch === true);
+  const row = item.hasStyle('verticalCheckboxes') ? {} : { row: true };
+
+  const onChoiceChange = () => {
+    const newError = choiceBindingPairs.find(pair => pair[1].getChoice()
+      && pair[1].getChoice().mismatch) !== undefined;
+    if (newError !== error) {
+      setError(newError);
+    }
+  };
+
+  useEffect(() => {
+    props.field.toggleClass('mismatchReport', error);
+  }, [error]);
+
+  props.context.clear = () => {
+    choiceBindingPairs.forEach(pair => pair[1].setChoice(null));
+    setError(false);
+    setResetCount(resetCount + 1);
+  };
+
+  return (
+    <><FormGroup {...row}>
+      {choiceBindingPairs.map(pair => (
+        <CheckOption key={`${resetCount}-${pair[1].getHash()}`}
+                     choice={pair[0]}
+                     binding={pair[1]}
+                     onChoiceChange={onChoiceChange} />
+      ))}
+    </FormGroup>{error && (
+      <div key="warning" className="rdformsWarning">
+        {props.context.view.messages.wrongValueField}
+      </div>
+    )}</>
+  );
+}

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import renderingContext from '../../renderingContext';
 import { loadLocalizedChoice } from '../hooks';
 import utils from '../../../utils';

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

@@ -1,9 +1,9 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import BuildIcon from '@material-ui/icons/Build';
-import IconButton from '@material-ui/core/IconButton';
+import TextField from '@mui/material/TextField';
+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 ShowButton from './ShowButton';
@@ -70,7 +70,7 @@ export default (props) => {
       <TextField
         aria-labelledby={labelledBy}
         {...params}
-        { ...(value && value.mismatch ? { error: true } : {}) }
+        {...(value && value.mismatch ? { error: true } : {})}
         onKeyDown={({ key, keyCode }) => {
           const isEnterKey = key === 'Enter' || keyCode === 13;
           if (isEnterKey && !open) {
@@ -96,29 +96,42 @@ export default (props) => {
     });
   };
 
-  return <><Autocomplete
-    className="rdformsSearch"
-    disableClearable={true}
-    fullWidth={false}
-    value={value}
-    options={options}
-    filterOptions={fopts => fopts}
-    open={open}
-    onOpen={() => setOpen(true)}
-    onClose={() => setOpen(false)}
-    onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
-    onChange={onChange}
-    getOptionSelected={ (option, choice) => option.value === choice.value }
-    getOptionLabel={ choice => (choice === null ? '' : choice.label || choice.value) }
-    getOptionDisabled={ option => option.mismatch === true}
-    renderInput={renderInput}
-  /><ShowButton {...props} onClick={showHandler}
-  />{value && value.original.upgrade && (
-    <IconButton
-      aria-label={props.context.view.messages.edit_upgrade}
-      title={props.context.view.messages.edit_upgrade}
-      onClick={upgradeHandler}
-    ><BuildIcon/></IconButton>
-  )}{ error && (<div key="warning" className="rdformsWarning">{
-    props.context.view.messages.wrongValueField}</div>)}</>;
+  return (
+    <>
+      <Autocomplete
+        className="rdformsSearch"
+        disableClearable={true}
+        fullWidth={false}
+        value={value}
+        options={options}
+        filterOptions={(fopts) => fopts}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
+        onChange={onChange}
+        isOptionEqualToValue={(option, choice) => option.value === choice.value}
+        getOptionLabel={(choice) =>
+          choice === null ? '' : choice.label || choice.value
+        }
+        getOptionDisabled={(option) => option.mismatch === true}
+        renderInput={renderInput}
+      />
+      <ShowButton {...props} onClick={showHandler} />
+      {value && value.original.upgrade && (
+        <IconButton
+          aria-label={props.context.view.messages.edit_upgrade}
+          title={props.context.view.messages.edit_upgrade}
+          onClick={upgradeHandler}
+        >
+          <BuildIcon />
+        </IconButton>
+      )}
+      {error && (
+        <div key="warning" className="rdformsWarning">
+          {props.context.view.messages.wrongValueField}
+        </div>
+      )}
+    </>
+  );
 };

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
 import renderingContext from '../../renderingContext';
 import { useLocalizedSortedChoices, useLocalizedChoice } from '../hooks';
 
@@ -35,8 +35,13 @@ export default (props) => {
   const renderInput = (params) => {
     params.inputProps = params.inputProps || {};
     params.inputProps['aria-labelledby'] = labelledBy;
-    return (<TextField {...params} {...(value && value.mismatch ? { error: true } : {})}
-                       variant={renderingContext.materialVariant}/>);
+    return (
+      <TextField
+        {...params}
+        {...(value && value.mismatch ? { error: true } : {})}
+        variant={renderingContext.materialVariant}
+      />
+    );
   };
   const handleChange = (event, newChoice) => {
     binding.setChoice(newChoice.original);
@@ -44,17 +49,25 @@ export default (props) => {
     setError(newChoice.original.mismatch === true);
   };
 
-  return <><Autocomplete
-    className="rdformsSearch"
-    disableClearable={true}
-    value={value}
-    options={choices}
-    onChange={handleChange}
-    getOptionSelected={ (option, choice) => option.value === choice.value }
-    getOptionLabel={ choice => (choice === null ? '' : choice.label) }
-    getOptionDisabled={ option => option.mismatch === true}
-    filterSelectedOptions
-    renderInput={renderInput}
-  />{ error && (<div key="warning" className="rdformsWarning">{
-    props.context.view.messages.wrongValueField}</div>)}</>;
+  return (
+    <>
+      <Autocomplete
+        className="rdformsSearch"
+        disableClearable={true}
+        value={value}
+        options={choices}
+        onChange={handleChange}
+        isOptionEqualToValue={(option, choice) => option.value === choice.value}
+        getOptionLabel={(choice) => (choice === null ? '' : choice.label)}
+        getOptionDisabled={(option) => option.mismatch === true}
+        filterSelectedOptions
+        renderInput={renderInput}
+      />
+      {error && (
+        <div key="warning" className="rdformsWarning">
+          {props.context.view.messages.wrongValueField}
+        </div>
+      )}
+    </>
+  );
 };

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

@@ -1,9 +1,9 @@
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
 import { useLocalizedSortedChoices, useName } from '../hooks';
 
 const ChoiceOption = props => <FormControlLabel
@@ -46,13 +46,27 @@ export default function RadioButtonsEditor(props) {
     };
   }, []);
 
-  return (<><FormControl component="fieldset">
-      <RadioGroup {...row} key="radio" aria-label={item.getLabel()} name={name} value={value} onChange={handleChange}>
-        {(choices).map(choice =>
-          <ChoiceOption key={choice.value} choice={choice} />,
-        )}
-      </RadioGroup>
-    </FormControl>{ error && (<div key="warning" className="rdformsWarning">{
-      props.context.view.messages.wrongValueField}</div>)}</>
+  return (
+    <>
+      <FormControl component="fieldset">
+        <RadioGroup
+          {...row}
+          key="radio"
+          aria-label={item.getLabel()}
+          name={name}
+          value={value}
+          onChange={handleChange}
+        >
+          {choices.map((choice) => (
+            <ChoiceOption key={choice.value} choice={choice} />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      {error && (
+        <div key="warning" className="rdformsWarning">
+          {props.context.view.messages.wrongValueField}
+        </div>
+      )}
+    </>
   );
 }

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

@@ -1,8 +1,8 @@
 /* eslint-disable no-unused-vars,max-len */
 import React, { useMemo } from 'react';
-import SearchIcon from '@material-ui/icons/Search';
-import IconButton from '@material-ui/core/IconButton';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
 
 function SearchAndCreateIcon(props) {
   return (

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderingContext from '../../renderingContext';
 import RadioButtonsEditor from './RadioButtonsEditor';
+import CheckBoxesEditor from './CheckBoxesEditor';
 import ChoiceSelector from './ChoiceSelector';
 import ChoiceLookup from './ChoiceLookup';
 import ChoiceLookupAndInlineSearch from './ChoiceLookupAndInlineSearch';
@@ -27,6 +28,14 @@ editors.itemtype('choice').choices().check(radioCheck).register((fieldDiv, bindi
                                            field={fieldDiv}/>);
 });
 
+const checkBoxComponent = (fieldDiv, binding, context) => {
+  // eslint-disable-next-line no-new
+  fieldDiv.appendChild(<CheckBoxesEditor key={binding.getHash()} binding={binding} context={context}
+                                         field={fieldDiv}/>);
+};
+editors.itemtype('choice').choices().style('verticalCheckBoxes').register(checkBoxComponent);
+editors.itemtype('choice').choices().style('horizontalCheckBoxes').register(checkBoxComponent);
+
 editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
   fieldDiv.appendChild(<ChoiceSelector key={binding.getHash()} binding={binding} context={context} field={fieldDiv}/>);
 });

package/src/view/react/components.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import WarningIcon from '@material-ui/icons/Warning';
-import ErrorIcon from '@material-ui/icons/Error';
-import OfflineBoltIcon from '@material-ui/icons/OfflineBolt';
+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 renderingContext from '../renderingContext';
 import './labels';
 import './text';
@@ -13,6 +13,30 @@ import './date';
 import './duration';
 import '../bootstrap/auto';
 
+/**
+ * A wrapper for adding a dom element to
+ * a react component.
+ */
+const DOMElementWrapper = ({ element }) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current.appendChild(element);
+  }, [element]);
+
+  return <div ref={ref} />;
+};
+
+/**
+ * If child is not a react component, it creates one.
+ */
+const getReactComponent = (child, index) => {
+  // In case child is a dom element
+  if (child instanceof Node) return <DOMElementWrapper key={index} element={child} />;
+  // In case child is a struct
+  if (child.component) return React.createElement(child.component, { key: child.id });
+  return child; // Assumes child a react component
+};
 
 /**
  * Utility to toggle a set of classes potentially separated by spaces in a set.
@@ -71,11 +95,11 @@ const newStruct = (Tag, parent) => {
     // -- START: Initial methods used before react kicks in.
     toggleClass: (clsStr, addOrNot) => toggleClass(firstClsSet, clsStr, addOrNot),
     domQuery: selector => (selectorInClasses(selector, firstClsSet) ? ext : findStruct(selector, firstChildArr)),
-    appendChild: struct => {
+    appendChild: (struct) => {
       firstChildArr.push(struct);
     },
     appendAfter: (struct, sibling) => {
-      firstChildArr.splice(firstChildArr.indexOf(sibling) + 1, 0, struct)
+      firstChildArr.splice(firstChildArr.indexOf(sibling) + 1, 0, struct);
     },
     text: (str) => {
       firstTextStr = str;
@@ -128,9 +152,12 @@ const newStruct = (Tag, parent) => {
         setAttrs(oldAttrs => updateObjAttr(Object.assign({}, oldAttrs), attr, value));
       };
       // -- END
-
-      return <Tag className={clsSet.join(' ')}>{childArr.map(child =>
-        (child.component ? React.createElement(child.component, { key: child.id }) : child))}{text}</Tag>;
+      return (
+        <Tag className={clsSet.join(' ')}>
+          {childArr.map((child, index) => getReactComponent(child, index))}
+          {text}
+        </Tag>
+      );
     },
   };
 
@@ -188,7 +215,6 @@ renderingContext.destroyDomNode = (struct /* , view */) => {
   }
 };
 
-
 renderingContext.prePresenterViewRenderer = () => {};
 
 renderingContext.materialVariant = 'filled';
@@ -222,3 +248,5 @@ renderingContext.renderValidationMessage = (fieldDiv, type, message) => {
   fieldDiv.appendChild(<div className="rdformsValidationMessageWrapper" key={ `rdforms_valcount_${validationCounter}`}
   ><ValidationIcon/><span className="rdformsValidationMessage">{message}</span></div>);
 };
+
+renderingContext.multiValueSupport = true;