@jasperoosthoek/react-toolbox 0.8.0 → 0.9.0

package/src/components/forms/FormModalProvider.tsx

@@ -1,92 +1,90 @@
 import React, { useState, useContext, ReactNode } from 'react';
-
 import { useLocalization } from '../../localization/LocalizationContext';
-import {
-    FormFields,
-    IncludeData,
-    InitialState,
-    OnSave,
-    Validate,
-    ModalTitle,
-    Width,
-		FormModal,
-    
-} from './FormModal';
+import { FormProvider, FormFields, InitialState, OnSubmit, Validate } from './FormProvider';
+import { FormModal, ModalTitle, Width } from './FormModal';
 import { FormValue } from './FormFields';
 import { ButtonProps, CreateButton, EditButton } from '../buttons/IconButtons';
 
 export type ShowCreateModal = (show?: boolean) => void;
-export type ShowEditModal<T, K> = (state: { [key in keyof T]: FormValue } & K) => void;
+export type ShowEditModal<T extends FormFields> = (state: InitialState<T> | null) => void;
+
+type FormModalContextType<T extends FormFields> = {
+  showCreateModal: ShowCreateModal;
+  showEditModal: ShowEditModal<T>;
+  hasProvider: boolean;
+}
+
+const defaultErrorState: FormModalContextType<any> = {
+  showCreateModal: () => {
+    console.error('The showCreateModal function should only be used in a child of the FormModalProvider component.');
+  },
+  showEditModal: () => {
+    console.error('The showEditModal function should only be used in a child of the FormModalProvider component.');
+  },
+  hasProvider: false,
+};
+
+export const FormModalContext = React.createContext(defaultErrorState);
+
+export const useFormModal = <T extends FormFields>() => useContext(FormModalContext) as FormModalContextType<T>;
 
 export type FormCreateModalButton = ButtonProps;
 export const FormCreateModalButton = ({ onClick, ...props }: ButtonProps) => {
-  const { showCreateModal, hasProvider } = useFormModal();
-
+  const context = useContext(FormModalContext);
+  
   return (
     <CreateButton
       {...props}
       onClick={(e) => {
         // A onClick function was given to CreateButton
         if (onClick) onClick(e);
-        // CreateButton is inside a CreateEditButtonProvider which can handle
-        // showCreateModal. Without the provider, showCreateModal will log an error
-        if (hasProvider) showCreateModal();
+        
+        // Check if we have a provider context
+        if (!context || !context.hasProvider) {
+          console.error('The showCreateModal function should only be used in a child of the FormModalProvider component.');
+          return;
+        }
+        
+        // CreateButton is inside a FormModalProvider which can handle showCreateModal
+        context.showCreateModal();
       }}
     />
   )
 }
-export interface FormEditModalButtonProps<T, K> extends ButtonProps {
-  state: { [key in keyof T]: FormValue } & K;
+
+export interface FormEditModalButtonProps<T extends FormFields> extends ButtonProps {
+  state: InitialState<T>;
 }
-export const FormEditModalButton = ({ state, onClick, ... props }: FormEditModalButtonProps<T, K>) => {
-  const { showEditModal, hasProvider } = useFormModal();
 
+export const FormEditModalButton = <T extends FormFields>({ state, onClick, ...props }: FormEditModalButtonProps<T>) => {
+  const context = useContext(FormModalContext);
+  
   return (
     <EditButton
       {...props}
       onClick={(e) => {
-        // A onClick function was given to CreateButton
+        // A onClick function was given to EditButton
         if (onClick) onClick(e);
-        // CreateButton is inside a CreateEditButtonProvider which can handle
-        // showEditModal. Without the provider, showEditModal will log an error
-        if (hasProvider) showEditModal(state);
+        
+        // Check if we have a provider context
+        if (!context || !context.hasProvider) {
+          console.error('The showEditModal function should only be used in a child of the FormModalProvider component.');
+          return;
+        }
+        
+        // EditButton is inside a FormModalProvider which can handle showEditModal
+        context.showEditModal(state);
       }}
     />
   )
 }
 
-type FormModalContextType<T, K> = {
-	showCreateModal: ShowCreateModal;
-	showEditModal: ShowEditModal<T, K>;
-  hasProvider: boolean;
-}
-
-type T = any;
-type K = any;
-const defaultErrorState: FormModalContextType<T, K> = {
-  showCreateModal: () => {
-		console.error('The showCreateModal function should only be used in a child of the FormModalProvider component.');
-	},
-  showEditModal: (state: { [key in keyof T]: FormValue } & K) => {
-		console.error('The showEditModal function should only be used in a child of the FormModalProvider component.');
-	},
-  hasProvider: false,
-};
-export const FormModalContext = React.createContext(defaultErrorState);
-
-export const useFormModal = () => useContext(FormModalContext);
-
-
-export type FormModalProviderProps<
-  T extends FormFields,
-  K extends IncludeData<T>
-> = {
-  initialState: InitialState<T> | K;
-  includeData?: K;
+export type FormModalProviderProps<T extends FormFields> = {
   formFields: T;
-  onSave?: OnSave<T, K>;
-  onCreate?: OnSave<T, K>;
-  onUpdate?: OnSave<T, K>;
+  initialState?: InitialState<T>;
+  onSave?: OnSubmit<T>;
+  onCreate?: OnSubmit<T>;
+  onUpdate?: OnSubmit<T>;
   validate?: Validate;
   createModalTitle?: ModalTitle;
   editModalTitle?: ModalTitle;
@@ -95,58 +93,106 @@ export type FormModalProviderProps<
   width?: Width;
   children: ReactNode;
 }
-export const FormModalProvider: React.FC<FormModalProviderProps<T, K>> = ({
-	createModalTitle,
-	editModalTitle,
-	formFields,
-  initialState,
+
+export const FormModalProvider = <T extends FormFields>({
+  createModalTitle,
+  editModalTitle,
+  formFields,
+  initialState = {} as InitialState<T>,
   validate,
-	loading,
-	onCreate,
-	onUpdate,
+  loading = false,
+  onCreate,
+  onUpdate,
   onSave,
   dialogClassName,
-	children,
-}) => {
-  const [createModalActive, showCreateModal] = useState(false);
-  const [instanceInEditModal, showEditModal] = useState<({ [key in keyof T]: FormValue } & K) | null>(null);
+  width,
+  children,
+}: FormModalProviderProps<T>) => {
+  const [createModalActive, setCreateModalActive] = useState(false);
+  const [editModalState, setEditModalState] = useState<InitialState<T> | null>(null);
   const { strings } = useLocalization();
+
+  const handleCreateSubmit: OnSubmit<T> = (state, callback) => {
+    // Priority: onCreate > onSave fallback
+    const submitHandler = onCreate || onSave;
+    if (submitHandler) {
+      // For testing purposes and direct submission, always call the handler
+      // The FormProvider's submit() will call this with current form state
+      submitHandler(state, () => {
+        setCreateModalActive(false);
+        if (callback) callback();
+      });
+    } else {
+      // No handler provided, just close modal
+      setCreateModalActive(false);
+      if (callback) callback();
+    }
+  };
+
+  const handleEditSubmit: OnSubmit<T> = (state, callback) => {
+    // Priority: onUpdate > onSave fallback
+    const submitHandler = onUpdate || onSave;
+    if (submitHandler) {
+      submitHandler(state, () => {
+        setEditModalState(null);
+        if (callback) callback();
+      });
+    } else {
+      // No handler provided, just close modal
+      setEditModalState(null);
+      if (callback) callback();
+    }
+  };
+
   return (
     <FormModalContext.Provider
       value={{
-				showCreateModal: (show?: boolean) =>
-					showCreateModal(typeof show === 'undefined' ? true : show),
-				showEditModal,
+        showCreateModal: (show?: boolean) =>
+          setCreateModalActive(typeof show === 'undefined' ? true : show),
+        showEditModal: (
+          (state: InitialState<T> | null) => setEditModalState(state)
+        ) as (state: Partial<{ [x: string]: FormValue; }> | null) => void,
         hasProvider: true,
-			}}>
+      }}
+    >
       {children}
-			
+      
       {createModalActive && (onCreate || onSave) && (
-				<FormModal
-					modalTitle={createModalTitle || strings.getString('modal_create')}
-					onHide={() => showCreateModal(false)}
-					initialState={initialState}
-					formFields={formFields}
+        <FormProvider
+          formFields={formFields}
+          initialState={initialState}
+          onSubmit={handleCreateSubmit}
           validate={validate}
-					loading={loading}
-          // @ts-ignore Ignore as Typescript does not recognize that this is allowed
-					onSave={onCreate || onSave}
-          dialogClassName={dialogClassName}
-				/>
-			)}
-      {instanceInEditModal && (onUpdate || onSave) && (
-        <FormModal
-          show={!!instanceInEditModal}
-          modalTitle={editModalTitle || strings.getString('modal_edit')}
-          onHide={() => showEditModal(null)}
-          initialState={instanceInEditModal}
+          loading={loading}
+          resetTrigger={createModalActive}
+        >
+          <FormModal
+            show={createModalActive}
+            modalTitle={createModalTitle || strings.getString('modal_create')}
+            onHide={() => setCreateModalActive(false)}
+            dialogClassName={dialogClassName}
+            width={width}
+          />
+        </FormProvider>
+      )}
+      
+      {editModalState && (onUpdate || onSave) && (
+        <FormProvider
           formFields={formFields}
+          initialState={editModalState}
+          onSubmit={handleEditSubmit}
           validate={validate}
           loading={loading}
-          // @ts-ignore
-          onSave={onUpdate || onSave}
-          dialogClassName={dialogClassName}
-        />
+          resetTrigger={editModalState}
+        >
+          <FormModal
+            show={!!editModalState}
+            modalTitle={editModalTitle || strings.getString('modal_edit')}
+            onHide={() => setEditModalState(null)}
+            dialogClassName={dialogClassName}
+            width={width}
+          />
+        </FormProvider>
       )}
     </FormModalContext.Provider>
   );

package/src/components/forms/FormProvider.tsx

@@ -0,0 +1,218 @@
+import React, { useEffect, useState, useContext, ReactNode, createContext } from 'react';
+import { useSetState, usePrevious } from '../../utils/hooks';
+import { isEmpty } from '../../utils/utils';
+import { useLocalization } from '../../localization/LocalizationContext';
+import { FormValue } from './FormFields';
+
+export type FormFieldConfig = {
+  initialValue?: any;
+  type?: 'string' | 'number' | 'select' | 'checkbox' | 'boolean' | 'textarea' | 'dropdown';
+  required?: boolean;
+  formProps?: any;
+  component?: any;
+  onChange?: (value: FormValue, formData?: any) => any;
+  label?: React.ReactElement | string;
+  options?: Array<{ value: string | number; label: string; disabled?: boolean }>; // For select fields
+  list?: any[]; // For dropdown fields
+  idKey?: string; // For dropdown fields
+  nameKey?: string; // For dropdown fields
+}
+
+export type FormFields = { [key: string]: FormFieldConfig };
+
+export type InitialState<T> = Partial<{
+  [key in keyof T]: FormValue;
+}>
+
+export type OnSubmit<T> = (state: { [key in keyof T]: FormValue }, callback?: () => void) => void;
+
+export type Validate = (state: any) => any;
+
+type FormContextType<T extends FormFields> = {
+  formFields: T;
+  formData: { [key in keyof T]: FormValue } | null;
+  initialFormData: { [key in keyof T]: FormValue } | null;
+  pristine: boolean;
+  validated: boolean;
+  validationErrors: { [key: string]: any };
+  loading: boolean;
+  getValue: (key: string) => FormValue;
+  setValue: (key: string, value: FormValue) => void;
+  setFormData: (data: Partial<{ [key in keyof T]: FormValue }>) => void;
+  resetForm: () => void;
+  submit: () => void;
+  setPristine: (pristine: boolean) => void;
+  setLoading: (loading: boolean) => void;
+  hasProvider: boolean;
+}
+
+const defaultFormState: FormContextType<any> = {
+  formFields: {},
+  formData: null,
+  initialFormData: null,
+  pristine: true,
+  validated: false,
+  validationErrors: {},
+  loading: false,
+  getValue: () => '',
+  setValue: () => console.error('setValue should only be used within a FormProvider'),
+  setFormData: () => console.error('setFormData should only be used within a FormProvider'),
+  resetForm: () => console.error('resetForm should only be used within a FormProvider'),
+  submit: () => console.error('submit should only be used within a FormProvider'),
+  setPristine: () => console.error('setPristine should only be used within a FormProvider'),
+  setLoading: () => console.error('setLoading should only be used within a FormProvider'),
+  hasProvider: false,
+};
+
+const FormContext = createContext<FormContextType<any>>(defaultFormState);
+
+export const useForm = <T extends FormFields>() => useContext(FormContext) as FormContextType<T>;
+
+export type FormProviderProps<T extends FormFields> = {
+  formFields: T;
+  initialState?: InitialState<T>;
+  onSubmit: OnSubmit<T>;
+  validate?: Validate;
+  loading?: boolean;
+  children: ReactNode;
+  resetTrigger?: any; // When this value changes, the form will reset
+}
+
+export const FormProvider = <T extends FormFields>({
+  formFields,
+  initialState = {} as InitialState<T>,
+  onSubmit,
+  validate,
+  loading = false,
+  children,
+  resetTrigger,
+}: FormProviderProps<T>) => {
+  const { strings } = useLocalization();
+
+  if (!formFields) {
+    console.error(`Property formFields cannot be empty.`);
+    return null;
+  }
+
+  const getInitialFormData = () => ({
+    ...Object.entries(formFields).reduce((o, [key, { initialValue }]) => ({ ...o, [key]: initialValue || '' }), {}),
+    ...initialState || {},
+  }) as { [key in keyof T]: FormValue };
+
+  const [initialFormData, setInitialFormData] = useState<{ [key in keyof T]: FormValue }>(getInitialFormData());
+
+  const [{ pristine, formData, internalLoading }, setState] = useSetState({
+    pristine: true,
+    formData: initialFormData,
+    internalLoading: false,
+  });
+
+  const prevResetTrigger = usePrevious(resetTrigger);
+
+  useEffect(() => {
+    if (resetTrigger !== undefined && prevResetTrigger !== resetTrigger) {
+      const newInitialFormData = getInitialFormData();
+      setInitialFormData(newInitialFormData);
+      setState({
+        pristine: true,
+        formData: newInitialFormData,
+      });
+    }
+  }, [resetTrigger, prevResetTrigger]);
+
+  const getValue = (key: string): FormValue => {
+    const value = formData[key];
+    if (value !== undefined && value !== null) {
+      return value;
+    }
+    return (formFields[key] || {}).type === 'number' ? '0' : '';
+  };
+
+  const setValue = (key: string, value: FormValue) => {
+    const fieldOnChange = formFields[key]?.onChange;
+    const newFormData = typeof fieldOnChange === 'function'
+      ? { ...formData, ...fieldOnChange(value, formData) }
+      : { ...formData, [key]: value };
+    
+    setState({ formData: newFormData });
+  };
+
+  const setFormData = (data: Partial<{ [key in keyof T]: FormValue }>) => {
+    setState({ formData: { ...formData, ...data } });
+  };
+
+  const resetForm = () => {
+    const newInitialFormData = getInitialFormData();
+    setInitialFormData(newInitialFormData);
+    setState({
+      pristine: true,
+      formData: newInitialFormData,
+    });
+  };
+
+  const validationErrors = {
+    ...validate
+      ? Object.entries(validate(formData) || {})
+        .reduce(
+          (o, [key, val]) => {
+            // Remove all empty elements
+            if (isEmpty(val)) return o;
+            return { ...o, [key]: val };
+          },
+          {}
+        )
+      : {},
+    ...Object.keys(formData).reduce(
+      (o, key) => {
+        if (!formFields[key] || !formFields[key].required || !isEmpty(getValue(key))) return o;
+        return { ...o, [key]: strings.getString('required_field') };
+      },
+      {}
+    ),
+  } as { [key: string]: any };
+
+  const validated = Object.values(validationErrors).length === 0;
+
+  const submit = () => {
+    setState({ pristine: false });
+    if (!validated) return;
+    
+    setState({ internalLoading: true });
+    onSubmit(
+      formData,
+      () => setState({ internalLoading: false })
+    );
+  };
+
+  const setPristine = (pristine: boolean) => {
+    setState({ pristine });
+  };
+
+  const setLoading = (loading: boolean) => {
+    setState({ internalLoading: loading });
+  };
+
+  const contextValue: FormContextType<T> = {
+    formFields,
+    formData,
+    initialFormData,
+    pristine,
+    validated,
+    validationErrors,
+    loading: loading || internalLoading,
+    getValue,
+    setValue,
+    setFormData,
+    resetForm,
+    submit,
+    setPristine,
+    setLoading,
+    hasProvider: true,
+  };
+
+  return (
+    <FormContext.Provider value={contextValue}>
+      {children}
+    </FormContext.Provider>
+  );
+};

package/src/components/forms/fields/FormBadgesSelection.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Form, Badge } from 'react-bootstrap';
+import { BadgeProps } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface BadgeSelectionProps extends BadgeProps {
+  selected: boolean;
+  cursor: string;
+  disabled?: boolean;
+} 
+
+export const BadgeSelection = ({ selected = true, disabled, cursor, onClick, style, bg, ...restProps }: BadgeSelectionProps) => (
+  <Badge
+    bg={bg || (selected ? 'primary' : 'secondary')}
+    style={{
+      userSelect: 'none',
+      ...cursor ? { cursor } : {},
+      ...style || {},
+    }}
+    {...disabled ? {} : { onClick }}
+    {...restProps}
+  />
+)
+
+type DisabledProps = {
+  list: any[];
+  value: string | number;
+  state: any;
+  initialState: any;
+  initialValue: any;
+}
+
+export interface FormBadgesSelectionProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'name' | 'value' | 'onChange' | 'disabled' | 'list'
+> {
+  name: string;
+  label?: React.ReactElement | string;
+  list: any[];
+  idKey?: string;
+  multiple?: boolean;
+  integer?: boolean;
+  disabled?: boolean | ((props: DisabledProps) => boolean);
+}
+
+export const FormBadgesSelection = (props: FormBadgesSelectionProps) => {
+  const {
+    list,
+    idKey = 'id',
+    multiple,
+    integer,
+    disabled,
+    ...componentProps
+  } = props;
+  
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(componentProps);
+  
+  const isMultiple = multiple || multiple === false ? multiple : value instanceof Array;
+  const parseInteger = (value: string | number): string | number => integer ? parseInt(`${value}`) : `${value}`;
+  
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <div className={`form-control ${isInvalid ? 'is-invalid' : ''}`}>
+        {list.map((item: any, key) => {
+          const selected = isMultiple
+            ? !!value && Array.isArray(value) && (value as Array<any>).includes(item[idKey])
+            : value === item[idKey];
+          return (
+            <BadgeSelection
+              key={key}
+              disabled={
+                typeof disabled === 'function'
+                  ? disabled({ list, value: item[idKey], state: {}, initialState: {}, initialValue: '' })
+                  : disabled
+              }
+              selected={selected}
+              cursor='pointer'
+              onClick={() => {
+                if (Array.isArray(value)) {
+                  if(selected) {
+                    onChange(value.filter(id => parseInteger(id) !== parseInteger(item[idKey])).toString());
+                  } else {
+                    onChange(
+                      integer
+                        ? [...value.map((v: string | number ) => parseInt(v as string)), parseInt(item[idKey])]
+                        : [...value.map((v: string | number ) => `${v}`), `${item[idKey]}`]
+                     );
+                  }
+                } else {
+                  onChange(item[idKey])
+                }
+              }}
+              {...mergedProps}
+            >
+              {item.name}
+            </BadgeSelection>
+          );
+        })}
+      </div>
+    </Form.Group>
+  );
+}

package/src/components/forms/fields/FormCheckbox.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'onChange' | 'type'> {
+  name: string;
+  label?: React.ReactElement | string;
+}
+
+export const FormCheckbox = (props: FormCheckboxProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+  const checkboxId = `${props.name}-checkbox`; // Use different ID to avoid conflict
+
+  return (
+    <Form.Group controlId={props.name}>
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Check
+        id={checkboxId}
+        type="checkbox"
+        {...mergedProps}
+        checked={!!value}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.checked);
+        }}
+        label={label ? (
+          <span>
+            {label}
+            {required && ' *'}
+          </span>
+        ) : undefined}
+      />
+    </Form.Group>
+  );
+};
+
+export const FormSwitch = (props: FormCheckboxProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+  const switchId = `${props.name}-switch`; // Use different ID to avoid conflict
+
+  return (
+    <Form.Group controlId={props.name}>
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Check
+        id={switchId}
+        type="switch"
+        {...mergedProps}
+        checked={!!value}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.checked);
+        }}
+        label={label ? (
+          <span>
+            {label}
+            {required && ' *'}
+          </span>
+        ) : undefined}
+      />
+    </Form.Group>
+  );
+};