overridable: Add support for all custom field widgets

* Implemented the standardised props and dynamic-ID overridable wrapper
for all the UI widgets available for use in custom widgets.

Author: palkerecsenyi

src/lib/forms/RichInputField.js

@@ -15,7 +15,8 @@ import { Form } from "semantic-ui-react";
 
 export class RichInputField extends Component {
   renderFormField = (formikBag) => {
-    const { fieldPath, label, required, className, editor, editorConfig } = this.props;
+    const { fieldPath, label, required, className, editor, editorConfig, disabled } =
+      this.props;
     const value = getIn(formikBag.form.values, fieldPath, "");
     const initialValue = getIn(formikBag.form.initialValues, fieldPath, "");
     const error =
@@ -28,6 +29,7 @@ export class RichInputField extends Component {
       <Form.Field
         id={fieldPath}
         required={required}
+        disabled={disabled}
         error={error}
         className={className}
       >
@@ -74,6 +76,7 @@ RichInputField.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   required: PropTypes.bool,
   editorConfig: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 RichInputField.defaultProps = {
@@ -83,4 +86,5 @@ RichInputField.defaultProps = {
   label: "",
   editor: undefined,
   editorConfig: undefined,
+  disabled: false,
 };

src/lib/forms/widgets/array/Array.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 
 import { FieldLabel } from "../../FieldLabel";
 import { ArrayField } from "../../ArrayField";
+import { fieldCommonProps } from "src/lib/utils";
 
 export default class Array extends Component {
   render() {
@@ -17,16 +18,21 @@ export default class Array extends Component {
       addButtonLabel,
       defaultNewValue,
       className,
+      helpText: helpTextProp,
+      labelIcon: labelIconProp,
     } = this.props;
 
+    const helpText = helpTextProp ?? description;
+    const labelIcon = labelIconProp ?? icon;
+
     return (
       <ArrayField
         key={fieldPath}
         fieldPath={fieldPath}
         required={required}
-        helpText={description}
+        helpText={helpText}
         disabled={disabled}
-        label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
+        label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
         addButtonLabel={addButtonLabel}
         defaultNewValue={defaultNewValue}
         className={className}
@@ -38,21 +44,22 @@ export default class Array extends Component {
 }
 
 Array.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  icon: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
   children: PropTypes.func.isRequired,
   addButtonLabel: PropTypes.string.isRequired,
   defaultNewValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   className: PropTypes.string,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
+  icon: PropTypes.string,
+  /**
+   * @deprecated Use `helpText` instead
+   */
+  description: PropTypes.string.isRequired,
+  ...fieldCommonProps,
 };
 
 Array.defaultProps = {
-  icon: undefined,
-  required: false,
-  disabled: false,
   className: "",
+  icon: undefined,
 };

src/lib/forms/widgets/text/BooleanCheckbox.js

@@ -12,23 +12,33 @@ import { FieldLabel } from "../../FieldLabel";
 import { RadioField } from "../../RadioField";
 
 import { useField } from "formik";
+import {
+  createDynamicOverridableComponent,
+  createShowHideComponent,
+  fieldCommonProps,
+} from "../../../utils";
 
-export default function BooleanCheckbox({
+function _BooleanCheckboxComponent({
   description,
   icon,
   falseLabel,
   fieldPath,
   label,
   trueLabel,
   required,
+  helpText: helpTextProp,
+  labelIcon: labelIconProp,
 }) {
+  const helpText = helpTextProp ?? description;
+  const labelIcon = labelIconProp ?? icon;
+
   // eslint-disable-next-line no-unused-vars
   const [_, meta] = useField(fieldPath);
   return (
     <>
       <Form.Group inline className="mb-0">
         <Form.Field required={required}>
-          <FieldLabel htmlFor={fieldPath} icon={icon} label={label} />
+          <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
         </Form.Field>
         <RadioField
           fieldPath={fieldPath}
@@ -52,22 +62,33 @@ export default function BooleanCheckbox({
           </Form.Field>
         )}
       </Form.Group>
-      {description && <label className="helptext">{description}</label>}
+      {helpText && <label className="helptext">{helpText}</label>}
     </>
   );
 }
 
-BooleanCheckbox.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+_BooleanCheckboxComponent.propTypes = {
   trueLabel: PropTypes.string.isRequired,
   falseLabel: PropTypes.string.isRequired,
+  /**
+   * @deprecated Use `helpText` instead
+   */
   description: PropTypes.string.isRequired,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
   icon: PropTypes.string,
-  required: PropTypes.bool,
+  ...fieldCommonProps,
 };
 
-BooleanCheckbox.defaultProps = {
+_BooleanCheckboxComponent.defaultProps = {
   icon: undefined,
   required: false,
 };
+
+export const BooleanCheckboxComponent = createShowHideComponent(
+  _BooleanCheckboxComponent
+);
+export const BooleanCheckbox = createDynamicOverridableComponent(
+  BooleanCheckboxComponent
+);

src/lib/forms/widgets/text/Input.js

@@ -1,10 +1,14 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-
 import { FieldLabel } from "../../FieldLabel";
 import { TextField } from "../../TextField";
+import {
+  createShowHideComponent,
+  createDynamicOverridableComponent,
+  fieldCommonProps,
+} from "../../../utils/";
 
-export default class Input extends Component {
+class _InputComponent extends Component {
   render() {
     const {
       fieldPath,
@@ -15,37 +19,45 @@ export default class Input extends Component {
       description,
       disabled,
       type,
+      helpText: helpTextProp,
+      labelIcon: labelIconProp,
     } = this.props;
 
+    const helpText = helpTextProp ?? description;
+    const labelIcon = labelIconProp ?? icon;
+
     return (
       <TextField
         key={fieldPath}
         fieldPath={fieldPath}
         required={required}
-        helpText={description}
+        helpText={helpText}
         disabled={disabled}
-        label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
+        label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
         placeholder={placeholder}
         type={type}
       />
     );
   }
 }
 
-Input.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
+_InputComponent.propTypes = {
+  /**
+   * @deprecated Use `helpText` instead
+   */
   description: PropTypes.string.isRequired,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
   icon: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
   type: PropTypes.string,
+  ...fieldCommonProps,
 };
 
-Input.defaultProps = {
+_InputComponent.defaultProps = {
   icon: undefined,
-  required: false,
-  disabled: false,
   type: "input",
 };
+
+export const InputComponent = createShowHideComponent(_InputComponent);
+export const Input = createDynamicOverridableComponent(InputComponent);

src/lib/forms/widgets/text/MultiInput.js

@@ -1,18 +1,25 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useFormikContext, getIn } from "formik";
-
 import { FieldLabel } from "../../FieldLabel";
 import { SelectField } from "../../SelectField";
+import {
+  createDynamicOverridableComponent,
+  createShowHideComponent,
+  fieldCommonProps,
+} from "../../../utils";
 
-export default function MultiInput({
+function _MultiInputComponent({
   additionLabel,
   description,
   placeholder,
   fieldPath,
   label,
   icon,
   required,
+  disabled,
+  helpText: helpTextProp,
+  labelIcon: labelIconProp,
 }) {
   const [options, setOptions] = useState([]);
   const { values } = useFormikContext();
@@ -23,14 +30,18 @@ export default function MultiInput({
       value: item,
     }));
 
+  const helpText = helpTextProp ?? description;
+  const labelIcon = labelIconProp ?? icon;
+
   return (
     <>
       <SelectField
         fieldPath={fieldPath}
-        label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
+        label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
         options={serializeValues(getIn(values, fieldPath, []))}
         placeholder={placeholder}
         required={required}
+        disabled={disabled}
         search
         multiple
         clearable
@@ -47,23 +58,28 @@ export default function MultiInput({
           setOptions([{ text: data.value, value: data.value }, ...options]);
         }}
       />
-      {description && <label className="helptext">{description}</label>}
+      {helpText && <label className="helptext">{helpText}</label>}
     </>
   );
 }
 
-MultiInput.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
+_MultiInputComponent.propTypes = {
+  /**
+   * @deprecated Use `helpText` instead
+   */
   description: PropTypes.string.isRequired,
   additionLabel: PropTypes.string,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
   icon: PropTypes.string,
-  required: PropTypes.bool,
+  ...fieldCommonProps,
 };
 
-MultiInput.defaultProps = {
+_MultiInputComponent.defaultProps = {
   additionLabel: undefined,
   icon: undefined,
-  required: false,
 };
+
+export const MultiInputComponent = createShowHideComponent(_MultiInputComponent);
+export const MultiInput = createDynamicOverridableComponent(MultiInputComponent);

src/lib/forms/widgets/text/NumberInput.js

@@ -1,5 +1,10 @@
 import React from "react";
-import Input from "./Input";
+import {
+  createDynamicOverridableComponent,
+  createShowHideComponent,
+} from "../../../utils";
+import InputComponent from "./Input";
 
-const NumberInput = (props) => <Input {...props} type="number" />;
-export default NumberInput;
+const _NumberInputComponent = (props) => <InputComponent {...props} type="number" />;
+export const NumberInputComponent = createShowHideComponent(_NumberInputComponent);
+export const NumberInput = createDynamicOverridableComponent(NumberInputComponent);