@jasperoosthoek/react-toolbox 0.8.0 → 0.9.0

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

@@ -0,0 +1,123 @@
+import React, { useMemo, KeyboardEvent } from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+import { useLocalization } from '../../../localization/LocalizationContext';
+
+type DisabledProps = {
+  list: any[];
+  value: string | number;
+  state: any;
+  initialState: any;
+  initialValue: any;
+}
+
+export interface FormDropdownProps<T> extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'name' | 'value' | 'onChange' | 'disabled' | 'list'
+> {
+  name: string;
+  label?: React.ReactElement | string;
+  list?: T[];
+  options?: T[]; // Alias for list
+  idKey?: keyof T;
+  nameKey?: keyof T;
+  disabled?: boolean | ((props: DisabledProps) => boolean);
+}
+
+export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
+  const { 
+    list: listProp,
+    options,
+    idKey = 'value' as keyof T, // Change default to match test
+    nameKey = 'label' as keyof T, // Change default to match test
+    disabled,
+    ...componentProps
+  } = props;
+  
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(componentProps);
+  const { strings } = useLocalization();
+
+  // Use options or list, with options taking precedence
+  const listBase = options || listProp;
+
+  const [list, mismatch] = useMemo(() => {
+    if (!listBase || !Array.isArray(listBase)) {
+      return [null, null] as [T[] | null, any];
+    }
+    
+    // Handle string arrays by converting them to { value, label } objects
+    if (listBase.length > 0 && typeof listBase[0] === 'string') {
+      const convertedList = listBase.map((item: any) => ({
+        value: item,
+        label: item
+      })) as unknown as T[];
+      return [convertedList, null];
+    }
+    
+    // Only validate object arrays
+    if (listBase.length > 0 && typeof listBase[0] === 'object') {
+      const mismatch = listBase?.find((item: any) => (
+        !['number', 'string'].includes(typeof item[idKey])
+        || !['number', 'string'].includes(typeof item[nameKey])
+      ))
+      if (mismatch) return [null, mismatch];
+    }
+    
+    return [listBase, null];
+  }, [listBase, idKey, nameKey]);
+
+  if (!list) {
+    console.error(
+      `FormDropdown Error:
+      - Each item in 'list' must include a valid 'idKey' (${String(idKey)}) and 'nameKey' (${String(nameKey)}).
+      - Both keys must exist on every item and be of type 'string' or 'number'.
+      - One or more items failed this check.
+      
+      Received list:`,
+      listBase,
+      ...mismatch ? ['First mismatch:', mismatch] : []
+    );
+    return null;
+  }
+  
+  const selectedItem = list.find(item => item[idKey] === value);
+  
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      
+      <Form.Select
+        id={props.name}
+        value={value || ''}
+        isInvalid={isInvalid}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLSelectElement>) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            submit();
+          }
+        }}
+        {...mergedProps}
+      >
+        {list.map((item, key) =>
+          <option
+            key={key}
+            value={item[idKey] as string | number}
+            disabled={
+              typeof disabled === 'function'
+                ? disabled({ list, value: item[idKey] as number | string, state: {}, initialState: {}, initialValue: '' })
+                : disabled
+            }
+          >
+            {item[nameKey] as string}
+          </option>
+        )}
+      </Form.Select>
+    </Form.Group>
+  );
+};

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

@@ -0,0 +1,114 @@
+import React, { ChangeEvent, KeyboardEvent } from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange'> {
+  name: string;
+  label?: React.ReactElement | string;
+  as?: string;         // For textarea, select, etc.
+  rows?: number;       // For textarea
+  onChange: (value: string) => void;
+}
+
+export const FormInput = (props: FormInputProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Control
+        id={props.name}
+        autoComplete="off"
+        {...mergedProps}
+        value={value || ''}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+        }}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter' && mergedProps.as !== 'textarea') {
+            // Pressing the enter key will save data unless it is a multi line text area
+            e.preventDefault();
+            submit();
+          }
+        }}
+      />
+    </Form.Group>
+  );
+};
+
+export const FormTextarea = ({ rows = 3, ...props }: FormInputProps) => (
+  <FormInput as="textarea" rows={rows} {...props} />
+);
+
+export const FormDate = (props: FormInputProps) => (
+  <FormInput type="date" {...props} />
+);
+
+export interface FormDateTimeProps extends Omit<FormInputProps, 'value' | 'onChange'> {
+  value?: string | Date;
+  onChange?: (value: string) => void;
+  timezone?: string;
+}
+
+export const FormDateTime = ({ value, onChange, timezone, ...props }: FormDateTimeProps) => {
+  // Convert value to datetime-local format (YYYY-MM-DDTHH:mm)
+  const formatForInput = (val: string | Date | undefined) => {
+    if (!val) return '';
+    
+    try {
+      const date = typeof val === 'string' ? new Date(val) : val;
+      if (isNaN(date.getTime())) return '';
+      
+      // Format as YYYY-MM-DDTHH:mm for datetime-local input
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    } catch {
+      return '';
+    }
+  };
+  
+  const handleChange = (inputValue: string) => {
+    if (!onChange) return;
+    
+    if (!inputValue) {
+      onChange('');
+      return;
+    }
+    
+    try {
+      // Convert datetime-local value to ISO string
+      const date = new Date(inputValue);
+      if (isNaN(date.getTime())) {
+        onChange('');
+        return;
+      }
+      
+      onChange(date.toISOString());
+    } catch {
+      onChange('');
+    }
+  };
+  
+  return (
+    <FormInput 
+      type="datetime-local"
+      value={formatForInput(value)}
+      onChange={handleChange}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'value' | 'onChange'> {
+  name: string;
+  label?: React.ReactElement | string;
+  options: Array<{ value: string | number; label: string; disabled?: boolean }>;
+  placeholder?: string;
+}
+
+export const FormSelect = (props: FormSelectProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+  const { options, placeholder = "Choose..." } = props;
+
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Select
+        {...mergedProps}
+        value={value || ''}
+        isInvalid={isInvalid}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          onChange(e.target.value);
+        }}
+      >
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {options.map((option, index) => (
+          <option 
+            key={index} 
+            value={option.value} 
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+};

package/src/components/forms/fields/index.ts

@@ -0,0 +1,6 @@
+// Export all form field components
+export * from './FormInput';
+export * from './FormSelect';
+export * from './FormCheckbox';
+export * from './FormDropdown';
+export * from './FormBadgesSelection';

package/src/index.ts

@@ -1,28 +1,32 @@
-export * from './components/buttons/IconButtons';
-export * from './components/buttons/ConfirmButton';
-export { default as ConfirmButton } from './components/buttons/ConfirmButton';
-export { default as DeleteConfirmButton } from './components/buttons/DeleteConfirmButton';
-export * from './components/buttons/DeleteConfirmButton';
-
-export * from './components/forms/FormModal';
-export * from './components/forms/FormModalProvider';
-export * from './components/forms/FormFields';
-
-export * from './components/indicators/LoadingIndicator';
-export * from './components/indicators/CheckIndicator';
-
-export * from './components/tables/DataTable';
-export * from './components/tables/DragAndDropList';
-export * from './components/tables/SearchBox';
-
-export * from './components/errors/Errors';
-export * from './components/errors/ErrorBoundary';
-
-export * from './utils/hooks';
-export * from './utils/timeAndDate';
-export * from './utils/utils';
-
-export * from './components/login/LoginPage';
-
-export * from './localization/localization';
-export * from './localization/LocalizationContext';
+export * from './components/buttons/IconButtons';
+export * from './components/buttons/ConfirmButton';
+export { default as ConfirmButton } from './components/buttons/ConfirmButton';
+export { default as DeleteConfirmButton } from './components/buttons/DeleteConfirmButton';
+export * from './components/buttons/DeleteConfirmButton';
+
+export * from './components/forms/FormProvider';
+export * from './components/forms/FormModal';
+export * from './components/forms/FormModalProvider';
+export * from './components/forms/FormFields';
+export * from './components/forms/FormField';
+export * from './components/forms/fields';
+
+export * from './components/indicators/LoadingIndicator';
+export * from './components/indicators/CheckIndicator';
+
+export * from './components/tables/DataTable';
+export * from './components/tables/DragAndDropList';
+export * from './components/tables/SearchBox';
+
+export * from './components/errors/Errors';
+export * from './components/errors/ErrorBoundary';
+
+export * from './components/login/LoginPage';
+
+export * from './utils/hooks';
+export * from './utils/timeAndDate';
+export * from './utils/utils';
+
+
+export * from './localization/localization';
+export * from './localization/LocalizationContext';

package/src/localization/LocalizationContext.tsx

@@ -1,131 +1,156 @@
-import React, { useState, useContext } from 'react';
-import LocalizedStrings from 'react-localization';
-import {
-  defaultLocalization,
-  AdditionalLocalization,
-  LocalizationElement,
-  LocalizationFunction,
-  defaultLanguages,
-} from './localization';
-
-const out_of_context_error = 'This function should only be used in a child of LocalizationProvider.';
-
-export const combineLocalization = (...locals: AdditionalLocalization[]) => {
-  // Extract all unique language keys
-  const languages = [...new Set(locals.flatMap(Object.keys))];
-
-  return languages.reduce(
-    (o, lang) => ({
-      ...o,
-      [lang]: locals.reduce<LocalizationElement>(
-        (acc, l) => ({ ...acc, ...(l[lang] || {}) }),
-        {} as LocalizationElement
-      ),
-    }),
-    {} as AdditionalLocalization
-  );
-};
-
-export const LocalizationContext = React.createContext({
-  lang: 'en',
-  languages: Object.keys(defaultLanguages),
-  setLanguage: (lang: string) => console.error(out_of_context_error),
-  text: (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    console.error(out_of_context_error);
-    return str[0];
-  },
-  textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    console.error(out_of_context_error);
-    return str[0];
-  },
-  strings: new LocalizedStrings({ en: {} }),
-  localizationStrings: {} as AdditionalLocalization,
-  setLocalization: (localization: AdditionalLocalization) => console.error(out_of_context_error),
-});
-
-export type RestProps = {
-  [prop: string]: any;
-}
-export interface LocalizationProviderProps extends RestProps {
-  lang?: string;
-  localization?: AdditionalLocalization;
-  languages?: string[];
-  children?: any;
-  [prop: string]: any;
-}
-
-export const LocalizationProvider = ({
-  lang: initialLanguage = 'en',
-  localization: additionalLocalizationInitial = {},
-  languages: languagesOverride,
-  children,
-  ...restProps
- }: LocalizationProviderProps) => {
-  const [additionalLocalization, setLocalization] = useState(additionalLocalizationInitial);
-  const [lang, setLanguage] = useState(initialLanguage);
-  const languages = Array.from(new Set([
-    ...languagesOverride || Object.keys(defaultLocalization),
-    ...Object.keys(additionalLocalization),
-  ]));
-  const localizationStrings = languages.reduce(
-    (o, lang) => ({
-      ...o,
-      [lang]: {
-        ...defaultLocalization[lang] || {},
-        ...additionalLocalization[lang] || {},
-      },
-    }),
-    {}
-  );
-    
-  const strings = new LocalizedStrings(localizationStrings);
-  strings.setLanguage(lang);
-
-  const textByLang = (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    const text_or_func = strings.getString(str[0], lang) as string | LocalizationFunction;
-    if (!text_or_func) {
-      console.error(`Language string not found: "${str[0]}"`);
-      return str[0];
-    } else if (typeof text_or_func === 'function') {
-      if (text_or_func.length !== values.length) {
-        console.error(
-          `Language function "${str[0]}" expects exactly ${text_or_func.length} argument${text_or_func.length === 1 ? '' : 's'}. `
-          + (
-            text_or_func.length > 0
-            ? ` Use text${'`'}${str[0]}${'${arg1}${arg2}`'}`
-            : ` Use text${'`'}${str[0]}${'`'}`
-          )
-        );
-        return text_or_func.length > 0 ? `${str[0]}${'${arg1}${arg2}'}` : str[0];
-      }
-      return text_or_func(...values);
-    }
-
-    return text_or_func;
-  }
-  return (
-    <LocalizationContext.Provider
-      value={{
-        lang,
-        languages,
-        setLanguage: (lang: string) => {
-          if (!languages.includes(lang)) {
-            console.error(`Language ${lang} not available`);
-            return;
-          }
-          setLanguage(lang);
-        },
-        strings,
-        text: textByLang(lang),
-        textByLang,
-        localizationStrings,
-        setLocalization,
-        ...restProps,
-      }}
-    >
-      {children}
-    </LocalizationContext.Provider>
-  );
-};
-
-export const useLocalization = () => useContext(LocalizationContext);
+import React, { useState, useContext, useEffect, useMemo } from 'react';
+import LocalizedStrings from 'react-localization';
+import {
+  defaultLocalization,
+  AdditionalLocalization,
+  LocalizationElement,
+  LocalizationFunction,
+  defaultLanguages,
+} from './localization';
+
+const out_of_context_error = 'This function should only be used in a child of LocalizationProvider.';
+
+export const combineLocalization = (...locals: AdditionalLocalization[]) => {
+  if (locals.length === 0) {
+    return {} as AdditionalLocalization;
+  }
+  
+  // Filter out empty objects
+  const validLocals = locals.filter(local => local && Object.keys(local).length > 0);
+  
+  if (validLocals.length === 0) {
+    return {} as AdditionalLocalization;
+  }
+  
+  // Extract all unique language keys
+  const languages = [...new Set(validLocals.flatMap(Object.keys))];
+
+  return languages.reduce(
+    (o, lang) => ({
+      ...o,
+      [lang]: validLocals.reduce<LocalizationElement>(
+        (acc, l) => ({ ...acc, ...(l[lang] || {}) }),
+        {} as LocalizationElement
+      ),
+    }),
+    {} as AdditionalLocalization
+  );
+};
+
+export const LocalizationContext = React.createContext({
+  lang: 'en',
+  languages: Object.keys(defaultLanguages),
+  setLanguage: (lang: string) => console.error(out_of_context_error),
+  text: (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    console.error(out_of_context_error);
+    return str[0];
+  },
+  textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    console.error(out_of_context_error);
+    return str[0];
+  },
+  strings: new LocalizedStrings({ en: {} }),
+  localizationStrings: {} as AdditionalLocalization,
+  setLocalization: (localization: AdditionalLocalization) => console.error(out_of_context_error),
+});
+
+export type RestProps = {
+  [prop: string]: any;
+}
+export interface LocalizationProviderProps extends RestProps {
+  lang?: string;
+  localization?: AdditionalLocalization;
+  languages?: string[];
+  children?: any;
+  [prop: string]: any;
+}
+
+export const LocalizationProvider = ({
+  lang: initialLanguage = 'en',
+  localization: additionalLocalizationInitial = {},
+  languages: languagesOverride,
+  children,
+  ...restProps
+ }: LocalizationProviderProps) => {
+  const [additionalLocalization, setAdditionalLocalization] = useState(additionalLocalizationInitial);
+  const [lang, setLanguage] = useState(initialLanguage);
+  
+  const languages = Array.from(new Set([
+    ...languagesOverride || Object.keys(defaultLocalization),
+    ...Object.keys(additionalLocalization),
+  ]));
+  
+  const localizationStrings = useMemo(() => {
+    return languages.reduce(
+      (o, lang) => ({
+        ...o,
+        [lang]: {
+          ...defaultLocalization[lang] || {},
+          ...additionalLocalization[lang] || {},
+        },
+      }),
+      {}
+    );
+  }, [languages, additionalLocalization]);
+    
+  const strings = useMemo(() => {
+    const localizedStrings = new LocalizedStrings(localizationStrings);
+    localizedStrings.setLanguage(lang);
+    return localizedStrings;
+  }, [localizationStrings, lang]);
+
+  const setLocalization = (newLocalization: AdditionalLocalization) => {
+    setAdditionalLocalization(prev => {
+      const merged = combineLocalization(prev, newLocalization);
+      return merged;
+    });
+  };
+
+  const textByLang = (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    const text_or_func = strings.getString(str[0], lang) as string | LocalizationFunction;
+    if (!text_or_func) {
+      console.error(`Language string not found: "${str[0]}"`);
+      return str[0];
+    } else if (typeof text_or_func === 'function') {
+      if (text_or_func.length !== values.length) {
+        console.error(
+          `Language function "${str[0]}" expects exactly ${text_or_func.length} argument${text_or_func.length === 1 ? '' : 's'}. `
+          + (
+            text_or_func.length > 0
+            ? ` Use text${'`'}${str[0]}${'${arg1}${arg2}`'}`
+            : ` Use text${'`'}${str[0]}${'`'}`
+          )
+        );
+        return text_or_func.length > 0 ? `${str[0]}${'${arg1}${arg2}'}` : str[0];
+      }
+      return text_or_func(...values);
+    }
+
+    return text_or_func;
+  }
+  return (
+    <LocalizationContext.Provider
+      value={{
+        lang,
+        languages,
+        setLanguage: (newLang: string) => {
+          if (!languages.includes(newLang)) {
+            console.error(`Language ${newLang} not available`);
+            return;
+          }
+          setLanguage(newLang);
+        },
+        strings,
+        text: textByLang(lang),
+        textByLang,
+        localizationStrings,
+        setLocalization,
+        ...restProps,
+      }}
+    >
+      {children}
+    </LocalizationContext.Provider>
+  );
+};
+
+export const useLocalization = () => useContext(LocalizationContext);