(ui) form-switch component

+ refactored form components

app/frontend/src/javascript/components/form/abstract-form-item.tsx

@@ -0,0 +1,59 @@
+import React, { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import { AbstractFormComponent } from '../../models/form-component';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+import { get as _get } from 'lodash';
+
+export interface AbstractFormItemProps<TFieldValues> extends PropsWithChildren<AbstractFormComponent<TFieldValues>> {
+  id: string,
+  label?: string,
+  tooltip?: ReactNode,
+  className?: string,
+  disabled?: boolean,
+  readOnly?: boolean
+}
+
+/**
+ * This abstract component should not be used directly.
+ * Other forms components that are intended to be used with react-hook-form must extend this component.
+ */
+export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label, tooltip, className, disabled, readOnly, error, warning, rules, formState, children }: AbstractFormItemProps<TFieldValues>) => {
+  const [isDirty, setIsDirty] = useState(false);
+  const [fieldError, setFieldError] = useState(error);
+
+  useEffect(() => {
+    setIsDirty(_get(formState?.dirtyFields, id));
+    setFieldError(_get(formState?.errors, id));
+  }, [formState]);
+
+  useEffect(() => {
+    setFieldError(error);
+  }, [error]);
+
+  // Compose classnames from props
+  const classNames = [
+    'form-item',
+    `${className || ''}`,
+    `${isDirty && fieldError ? 'is-incorrect' : ''}`,
+    `${isDirty && warning ? 'is-warned' : ''}`,
+    `${rules && rules.required ? 'is-required' : ''}`,
+    `${readOnly ? 'is-readonly' : ''}`,
+    `${disabled ? 'is-disabled' : ''}`
+  ].join(' ');
+
+  return (
+    <label className={classNames}>
+      {label && <div className='form-item-header'>
+        <p>{label}</p>
+        {tooltip && <div className="item-tooltip">
+          <span className="trigger"><i className="fa fa-question-circle" /></span>
+          <div className="content">{tooltip}</div>
+        </div>}
+      </div>}
+      <div className='form-item-field'>
+        {children}
+      </div>
+      {(isDirty && fieldError) && <div className="form-item-error">{fieldError.message}</div> }
+      {(isDirty && warning) && <div className="form-item-warning">{warning.message}</div> }
+    </label>
+  );
+};

app/frontend/src/javascript/components/form/form-input.tsx

@@ -1,36 +1,27 @@
-import React, { InputHTMLAttributes, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { FieldPathValue } from 'react-hook-form';
-import { debounce as _debounce, get as _get } from 'lodash';
+import { debounce as _debounce } from 'lodash';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FormComponent } from '../../models/form-component';
+import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 
-interface FormInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElement>, FormComponent<TFieldValues>{
+interface FormInputProps<TFieldValues, TInputType> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
-  id: string,
-  label?: string,
-  tooltip?: ReactNode,
   icon?: ReactNode,
   addOn?: ReactNode,
   addOnClassName?: string,
   debounce?: number,
+  type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week' | 'hidden',
+  defaultValue?: TInputType,
+  placeholder?: string,
+  step?: number | 'any',
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
 }
 
 /**
  * This component is a template for an input component to use within React Hook Form
  */
-export const FormInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, warning, formState, step, onChange, debounce }: FormInputProps<TFieldValues>) => {
+export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, warning, formState, step, onChange, debounce }: FormInputProps<TFieldValues, TInputType>) => {
-  const [isDirty, setIsDirty] = useState(false);
-  const [fieldError, setFieldError] = useState(error);
-
-  useEffect(() => {
-    setIsDirty(_get(formState?.dirtyFields, id));
-    setFieldError(_get(formState?.errors, id));
-  }, [formState]);
-
-  useEffect(() => {
-    setFieldError(error);
-  }, [error]);
-
   /**
    * Debounced (ie. temporised) version of the 'on change' callback.
    */
@@ -51,26 +42,16 @@ export const FormInput = <TFieldValues extends FieldValues>({ id, register, labe
 
   // Compose classnames from props
   const classNames = [
-    'form-input form-item',
+    'form-input',
     `${className || ''}`,
-    `${type === 'hidden' ? 'is-hidden' : ''}`,
+    `${type === 'hidden' ? 'is-hidden' : ''}`
-    `${isDirty && fieldError ? 'is-incorrect' : ''}`,
-    `${isDirty && warning ? 'is-warned' : ''}`,
-    `${rules && rules.required ? 'is-required' : ''}`,
-    `${readOnly ? 'is-readonly' : ''}`,
-    `${disabled ? 'is-disabled' : ''}`
   ].join(' ');
 
   return (
-    <label className={classNames}>
+    <AbstractFormItem id={id} formState={formState} label={label}
-      {label && <div className='form-item-header'>
+                      className={classNames} tooltip={tooltip}
-        <p>{label}</p>
+                      disabled={disabled} readOnly={readOnly}
-        {tooltip && <div className="item-tooltip">
+                      rules={rules} error={error} warning={warning}>
-          <span className="trigger"><i className="fa fa-question-circle" /></span>
-          <div className="content">{tooltip}</div>
-        </div>}
-      </div>}
-      <div className='form-item-field'>
         {icon && <span className="icon">{icon}</span>}
         <input id={id}
           {...register(id as FieldPath<TFieldValues>, {
@@ -85,9 +66,6 @@ export const FormInput = <TFieldValues extends FieldValues>({ id, register, labe
           readOnly={readOnly}
           placeholder={placeholder} />
         {addOn && <span className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
-      </div>
+    </AbstractFormItem>
-      {(isDirty && fieldError) && <div className="form-item-error">{fieldError.message}</div> }
-      {(isDirty && warning) && <div className="form-item-warning">{warning.message}</div> }
-    </label>
   );
 };

app/frontend/src/javascript/components/form/form-multi-select.tsx

@@ -1,21 +1,17 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import Select from 'react-select';
 import { Controller, Path } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
+import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 
-interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
-  id: string,
-  label?: string,
-  tooltip?: ReactNode,
   options: Array<selectOption<TOptionValue>>,
   valuesDefault?: Array<TOptionValue>,
   onChange?: (values: Array<TOptionValue>) => void,
-  className?: string,
   placeholder?: string,
-  disabled?: boolean,
 }
 
 /**
@@ -28,15 +24,7 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
  * This component is a wrapper around react-select to use with react-hook-form.
  * It is a multi-select component.
  */
-export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange, formState, readOnly, warning }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
-  const classNames = [
-    'form-multi-select form-item',
-    `${className || ''}`,
-    `${error ? 'is-incorrect' : ''}`,
-    `${rules && rules.required ? 'is-required' : ''}`,
-    `${disabled ? 'is-disabled' : ''}`
-  ].join(' ');
-
   /**
    * The following callback will trigger the onChange callback, if it was passed to this component,
    * when the selected option changes.
@@ -48,15 +36,10 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
   };
 
   return (
-    <label className={classNames}>
+    <AbstractFormItem id={id} formState={formState} label={label}
-      {label && <div className="form-item-header">
+                      className={`form-multi-select ${className}`} tooltip={tooltip}
-        <p>{label}</p>
+                      disabled={disabled} readOnly={readOnly}
-        {tooltip && <div className="item-tooltip">
+                      rules={rules} error={error} warning={warning}>
-          <span className="trigger"><i className="fa fa-question-circle" /></span>
-          <div className="content">{tooltip}</div>
-        </div>}
-      </div>}
-      <div className="form-item-field">
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}
                     defaultValue={valuesDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
@@ -74,8 +57,6 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
                               options={options}
                               isMulti />
                     } />
-      </div>
+    </AbstractFormItem>
-      {(error) && <div className="form-item-error">{error.message}</div> }
-    </label>
   );
 };

app/frontend/src/javascript/components/form/form-select.tsx

@@ -1,22 +1,17 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import Select from 'react-select';
 import { Controller, Path } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
+import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 
-interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
-  id: string,
-  label?: string,
-  tooltip?: ReactNode,
   options: Array<selectOption<TOptionValue>>,
   valueDefault?: TOptionValue,
   onChange?: (value: TOptionValue) => void,
-  className?: string,
   placeholder?: string,
-  disabled?: boolean,
-  readOnly?: boolean,
   clearable?: boolean,
 }
 
@@ -29,15 +24,7 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
 /**
  * This component is a wrapper for react-select to use with react-hook-form
  */
-export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valueDefault, error, rules, disabled, onChange, readOnly, clearable }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valueDefault, error, warning, rules, disabled, onChange, readOnly, clearable, formState }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
-  const classNames = [
-    'form-select form-item',
-    `${className || ''}`,
-    `${error ? 'is-incorrect' : ''}`,
-    `${rules && rules.required ? 'is-required' : ''}`,
-    `${disabled ? 'is-disabled' : ''}`
-  ].join(' ');
-
   /**
    * The following callback will trigger the onChange callback, if it was passed to this component,
    * when the selected option changes.
@@ -49,34 +36,27 @@ export const FormSelect = <TFieldValues extends FieldValues, TContext extends ob
   };
 
   return (
-    <label className={classNames}>
+    <AbstractFormItem id={id} label={label} tooltip={tooltip}
-      {label && <div className="form-item-header">
+                      className={`form-select ${className}`} formState={formState}
-        <p>{label}</p>
+                      error={error} warning={warning} rules={rules}
-        {tooltip && <div className="item-tooltip">
+                      disabled={disabled} readOnly={readOnly}>
-          <span className="trigger"><i className="fa fa-question-circle" /></span>
+      <Controller name={id as FieldPath<TFieldValues>}
-          <div className="content">{tooltip}</div>
+                  control={control}
-        </div>}
+                  defaultValue={valueDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
-      </div>}
+                  render={({ field: { onChange, value, ref } }) =>
-      <div className="form-item-field">
+                    <Select ref={ref}
-        <Controller name={id as FieldPath<TFieldValues>}
+                            classNamePrefix="rs"
-                    control={control}
+                            className="rs"
-                    defaultValue={valueDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
+                            value={options.find(c => c.value === value)}
-                    render={({ field: { onChange, value, ref } }) =>
+                            onChange={val => {
-                      <Select ref={ref}
+                              onChangeCb(val.value);
-                              classNamePrefix="rs"
+                              onChange(val.value);
-                              className="rs"
+                            }}
-                              value={options.find(c => c.value === value)}
+                            placeholder={placeholder}
-                              onChange={val => {
+                            isDisabled={readOnly}
-                                onChangeCb(val.value);
+                            isClearable={clearable}
-                                onChange(val.value);
+                            options={options} />
-                              }}
+                  } />
-                              placeholder={placeholder}
+    </AbstractFormItem>
-                              isDisabled={readOnly}
-                              isClearable={clearable}
-                              options={options} />
-                    } />
-      </div>
-      {(error) && <div className="form-item-error">{error.message}</div> }
-    </label>
   );
 };

app/frontend/src/javascript/components/form/form-switch.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormControlledComponent } from '../../models/form-component';
+import { FieldPath } from 'react-hook-form/dist/types/path';
+import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
+import { Controller, Path } from 'react-hook-form';
+import Switch from 'react-switch';
+import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
+
+interface FormSwitchProps<TFieldValues, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
+  defaultValue?: boolean,
+}
+
+/**
+ * This component is a wrapper for react-switch, to use with react-hook-form.
+ */
+export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, tooltip, className, error, rules, disabled, control, defaultValue, formState, readOnly, warning }: FormSwitchProps<TFieldValues, TContext>) => {
+  return (
+    <AbstractFormItem id={id} formState={formState} label={label}
+                      className={`form-switch ${className}`} tooltip={tooltip}
+                      disabled={disabled} readOnly={readOnly}
+                      rules={rules} error={error} warning={warning}>
+        <Controller name={id as FieldPath<TFieldValues>}
+                    control={control}
+                    defaultValue={defaultValue as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
+                    render={({ field: { onChange, value, ref } }) =>
+                      <Switch onChange={onChange} checked={value as boolean} ref={ref} disabled={disabled} readOnly={readOnly} />
+                    } />
+    </AbstractFormItem>
+  );
+};

app/frontend/src/javascript/models/form-component.ts

@@ -16,18 +16,17 @@ export type ruleTypes = {
  * Automatic error handling is done through the `formState` prop.
  * Even for manual error/warning, the `formState` prop is required, because it is used to determine is the field is dirty.
  */
-export interface FormComponent<TFieldValues> {
+export interface AbstractFormComponent<TFieldValues> {
-  register: UseFormRegister<TFieldValues>,
   error?: { message: string },
   warning?: { message: string },
   rules?: ruleTypes,
   formState?: FormState<TFieldValues>;
 }
 
-export interface FormControlledComponent<TFieldValues, TContext extends object> {
+export interface FormComponent<TFieldValues> extends AbstractFormComponent<TFieldValues> {
-  control: Control<TFieldValues, TContext>,
+  register: UseFormRegister<TFieldValues>,
-  error?: { message: string },
+}
-  warning?: { message: string },
+
-  rules?: ruleTypes,
+export interface FormControlledComponent<TFieldValues, TContext extends object> extends AbstractFormComponent<TFieldValues> {
-  formState?: FormState<TFieldValues>;
+  control: Control<TFieldValues, TContext>
 }

app/frontend/src/stylesheets/application.scss

@@ -29,7 +29,9 @@
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
 @import "modules/calendar/calendar";
+@import "modules/form/form-input";
 @import "modules/form/form-item";
+@import "modules/form/form-switch";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";
 @import "modules/machines/machines-list";

app/frontend/src/stylesheets/modules/form/form-input.scss

@@ -0,0 +1,5 @@
+.form-input {
+  &.is-hidden {
+    display: none;
+  }
+}

app/frontend/src/stylesheets/modules/form/form-item.scss

@@ -44,9 +44,6 @@
       &:hover .content { display: block; }
     }
   }
-  &.is-hidden {
-    display: none;
-  }
   &.is-required &-header p::after {
     content: "*";
     margin-left: 0.5ch;

app/frontend/src/stylesheets/modules/form/form-switch.scss

@@ -0,0 +1,3 @@
+.form-switch {
+
+}