(ui) form-select: onChange cb

app/frontend/src/javascript/components/authentication-provider/provider-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { react2angular } from 'react2angular';
 import { AuthenticationProvider } from '../../models/authentication-provider';
@@ -32,6 +32,7 @@ type selectProvidableTypeOption = { value: string, label: string };
  */
 export const ProviderForm: React.FC<ProviderFormProps> = ({ action, provider, onError, onSuccess }) => {
   const { handleSubmit, register, control } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } });
+  const [providableType, setProvidableType] = useState<string>(provider?.providable_type);
   const { t } = useTranslation('shared');
 
   /**
@@ -54,11 +55,28 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ action, provider, on
     });
   };
 
+  /**
+   * Callback triggered when the providable type is changed.
+   * Changing the providable type will change the form to match the new type.
+   */
+  const onProvidableTypeChange = (type: string) => {
+    setProvidableType(type);
+  };
+
   return (
     <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
-      <FormInput id="name" register={register} readOnly={action === 'update'} rules={{ required: true }} label={t('app.shared.authentication.name')} />
-      <FormSelect id="providable_type" control={control} options={buildProvidableTypeOptions()} label={t('app.shared.authentication.authentication_type')} rules={{ required: true }} />
-      {provider?.providable_type === 'OAuth2Provider' && <Oauth2Form register={register} />}
+      <FormInput id="name"
+                 register={register}
+                 readOnly={action === 'update'}
+                 rules={{ required: true }}
+                 label={t('app.shared.authentication.name')} />
+      <FormSelect id="providable_type"
+                  control={control}
+                  options={buildProvidableTypeOptions()}
+                  label={t('app.shared.authentication.authentication_type')}
+                  onChange={onProvidableTypeChange}
+                  rules={{ required: true }} />
+      {providableType === 'OAuth2Provider' && <Oauth2Form register={register} />}
       <input type={'submit'} />
     </form>
   );

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

@@ -1,4 +1,4 @@
-import React, { SelectHTMLAttributes } 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';
@@ -6,11 +6,15 @@ import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
 
-interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
   options: Array<selectOption<TOptionValue>>,
   valuesDefault?: Array<TOptionValue>,
+  onChange?: (values: Array<TOptionValue>) => void,
+  className?: string,
+  placeholder?: string,
+  disabled?: boolean,
 }
 
 /**
@@ -23,13 +27,23 @@ 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, className, control, placeholder, options, valuesDefault, error, rules, disabled }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const classNames = `
     form-item ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${disabled ? 'is-disabled' : ''}`;
 
+  /**
+   * The following callback will trigger the onChange callback, if it was passed to this component,
+   * when the selected option changes.
+   */
+  const onChangeCb = (newValues: Array<TOptionValue>): void => {
+    if (typeof onChange === 'function') {
+      onChange(newValues);
+    }
+  };
+
   return (
     <label className={classNames}>
       {label && <div className="form-item-header">
@@ -40,15 +54,19 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
                     control={control}
                     defaultValue={valuesDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
                     render={({ field: { onChange, value, ref } }) =>
-          <Select inputRef={ref}
-                  classNamePrefix="rs"
-                  className="rs"
-                  value={options.filter(c => value?.includes(c.value))}
-                  onChange={val => onChange(val.map(c => c.value))}
-                  placeholder={placeholder}
-                  options={options}
-                  isMulti />
-        } />
+                      <Select ref={ref}
+                              classNamePrefix="rs"
+                              className="rs"
+                              value={options.filter(c => value?.includes(c.value))}
+                              onChange={val => {
+                                const values = val?.map(c => c.value);
+                                onChangeCb(values);
+                                onChange(values);
+                              }}
+                              placeholder={placeholder}
+                              options={options}
+                              isMulti />
+                    } />
       </div>
     </label>
   );

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

@@ -1,4 +1,4 @@
-import React, { SelectHTMLAttributes } 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';
@@ -6,11 +6,15 @@ import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
 
-interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
   options: Array<selectOption<TOptionValue>>,
   valueDefault?: TOptionValue,
+  onChange?: (value: TOptionValue) => void,
+  className?: string,
+  placeholder?: string,
+  disabled?: boolean,
 }
 
 /**
@@ -22,13 +26,23 @@ 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, className, control, placeholder, options, valueDefault, error, rules, disabled }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault, error, rules, disabled, onChange }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const classNames = `
     form-item ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${disabled ? 'is-disabled' : ''}`;
 
+  /**
+   * The following callback will trigger the onChange callback, if it was passed to this component,
+   * when the selected option changes.
+   */
+  const onChangeCb = (newValue: TOptionValue): void => {
+    if (typeof onChange === 'function') {
+      onChange(newValue);
+    }
+  };
+
   return (
     <label className={classNames}>
       {label && <div className="form-item-header">
@@ -39,14 +53,17 @@ export const FormSelect = <TFieldValues extends FieldValues, TContext extends ob
                     control={control}
                     defaultValue={valueDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
                     render={({ field: { onChange, value, ref } }) =>
-          <Select inputRef={ref}
-                  classNamePrefix="rs"
-                  className="rs"
-                  value={options.find(c => c.value === value)}
-                  onChange={val => onChange(val.value)}
-                  placeholder={placeholder}
-                  options={options} />
-        } />
+                      <Select ref={ref}
+                              classNamePrefix="rs"
+                              className="rs"
+                              value={options.find(c => c.value === value)}
+                              onChange={val => {
+                                onChangeCb(val.value);
+                                onChange(val.value);
+                              }}
+                              placeholder={placeholder}
+                              options={options} />
+                    } />
       </div>
     </label>
   );