@jasperoosthoek/react-toolbox 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {

package/src/components/forms/FormFields.tsx

@@ -85,6 +85,8 @@ export const FormTextArea = ({ as = 'textarea', rows = 3, ...restProps }: FormIn
   />
 );
 
+export type FormTextAreaProps = FormInputProps;
+
 export const FormDate = (props: FormInputProps) => (
   <FormInput
     {...props}
@@ -382,6 +384,7 @@ export const FormDropdown = <T,>({
   variant = 'light',
   pristine,
   keyName,
+  onEnter,
   ...restProps
 }: FormDropdownProps<T>) => {
   const { strings } = useLocalization();
@@ -418,7 +421,14 @@ export const FormDropdown = <T,>({
       {label && <Form.Label>{label}</Form.Label>}
       
       <div className={`form-control ${isInvalid ? 'is-invalid' : ''}`}>
-        <Dropdown>
+        <Dropdown
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter' && typeof onEnter === 'function') {
+              e.preventDefault();
+              onEnter();
+            }
+          }}
+        >
           <Dropdown.Toggle variant={variant}>
             {selectedItem
               ? selectedItem[nameKey] as string

package/src/components/forms/FormModal.tsx

@@ -73,6 +73,10 @@ export const FormModal = <
     console.error(`Unrecognised props given to FormModal:`, restProps);
   }
 
+  if (!formFields) {
+    console.error(`Property formFields cannot be empty.`)
+    return null;
+  }
   const getInitialFormData = () => ({
     ...Object.entries(formFields).reduce((o, [key, { initialValue }]) => ({ ...o, [key]: initialValue || '' }), {}),
     ...initialState || {},

package/src/components/tables/DataTable.tsx

@@ -78,7 +78,7 @@ export type DataTableProps<D extends any[]> = {
   columns: DataTableColumn<D[number]>[];
   rowsPerPage?: number | null;
   rowsPerPageOptions?: RowsPerPageOptions;
-  filterColumn?: (keyof D) | ((row: D[number]) => string) | ((keyof D) | ((row: D[number]) => string))[];
+  filterColumn?: string | ((row: D[number]) => string) | (string | ((row: D[number]) => string))[];
   orderByDefault?: ((row: D[number]) => number) | string | null;
   orderByDefaultDirection?: OrderByDirection;
   onMove?: OnMove<D[number]>;
@@ -98,7 +98,7 @@ export const DataTable = <D extends any[]>({
   data: allData,
   columns,
   rowsPerPage: rowsPerPageDefault = 10,
-  rowsPerPageOptions = [10,25, 50, 100, null],
+  rowsPerPageOptions = [10, 25, 50, 100, null],
   filterColumn,
   orderByDefault,
   orderByDefaultDirection='asc',
@@ -271,9 +271,8 @@ export const DataTable = <D extends any[]>({
                   }
                 >
                   <option
-                    value=""
+                    value="everything"
                     disabled={rowsPerPage !== null}
-                    selected={rowsPerPage === null}
                   >
                     {strings.getString('select')}
                   </option>

package/src/utils/hooks.ts

@@ -12,7 +12,6 @@ export const usePrevious = <T>(value: T): T | undefined => {
   return ref.current;
 };
 
-  
 // https://stackoverflow.com/questions/54666401/how-to-use-throttle-or-debounce-with-react-hook
 export const useDebouncedEffect = (effect: () => void, deps: any[], delay: number) => {
   useEffect(() => {
@@ -66,6 +65,11 @@ export const useInterval = (func: () => void, value: number) => useEffect(() =>
 
 export const useLocalStorage = <T,>(key: string, initialValue: T): [T, (value: T) => void] => {
   const initialLocalStorageValue = localStorage.getItem(key);
+
+  if (initialLocalStorageValue === null) {
+    localStorage.setItem(key, JSON.stringify(initialValue));
+  }
+
   const [state, setState] = useState<T>(
     initialLocalStorageValue
       ? JSON.parse(initialLocalStorageValue) as T
@@ -79,18 +83,14 @@ export const useLocalStorage = <T,>(key: string, initialValue: T): [T, (value: T
       }
     };
 
+    // Manually dispatch an event to update components in the same document
     window.addEventListener('storage', handleStorageChange);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-    };
+    return () => window.removeEventListener('storage', handleStorageChange);
   }, [key]);
 
   const setLocalStorage = (value: T) => {
     setState(value);
     localStorage.setItem(key, JSON.stringify(value));
-
-    // Manually dispatch an event to update components in the same document
     window.dispatchEvent(new StorageEvent('storage', {
       key,
       newValue: JSON.stringify(value),