@jasperoosthoek/react-toolbox 0.6.1 → 0.6.3

package/dist/localization/LocalizationContext.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { AdditionalLocalization } from './localization';
+export declare const combineLocalization: (...locals: AdditionalLocalization[]) => AdditionalLocalization;
 export declare const LocalizationContext: React.Context<{
     lang: string;
     languages: string[];
     setLanguage: (lang: string) => void;
     text: (str: TemplateStringsArray, ...values: (string | number)[]) => string;
+    textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => string;
     strings: import("react-localization").LocalizedStringsMethods;
     localizationStrings: AdditionalLocalization;
     setLocalization: (localization: AdditionalLocalization) => void;
@@ -25,6 +27,7 @@ export declare const useLocalization: () => {
     languages: string[];
     setLanguage: (lang: string) => void;
     text: (str: TemplateStringsArray, ...values: (string | number)[]) => string;
+    textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => string;
     strings: import("react-localization").LocalizedStringsMethods;
     localizationStrings: AdditionalLocalization;
     setLocalization: (localization: AdditionalLocalization) => void;

package/dist/localization/localization.d.ts

@@ -1,8 +1,9 @@
 export type LocalizationFunction = (...args: (string | number)[]) => string;
+export type LocalizationElement = {
+    [languageString: string]: (string | LocalizationFunction);
+};
 export type AdditionalLocalization = {
-    [lang: string]: {
-        [languageString: string]: string | LocalizationFunction;
-    };
+    [lang: string]: LocalizationElement;
 };
 export interface LocalizationStrings {
     select: string;

package/dist/login/Login.d.ts

@@ -48,7 +48,7 @@ export declare const loginFactory: ({ authenticatedComponent, passwordResetUrl,
         unsetCurrentUser: () => any;
         logout: () => any;
     };
-    login: (userData: any, callback?: () => void) => ThunkAction<Promise<void>, any, unknown, LoginActions>;
+    login: (userData: any, callback?: () => void) => ThunkAction<Promise<void>, any, undefined, LoginActions>;
     getCurrentUser: ({ callback }?: {
         callback?: (userData: any) => void;
     }) => (dispatch: ThunkDispatch<any, undefined, any>) => Promise<void>;

package/dist/utils/hooks.d.ts

@@ -1,4 +1,4 @@
-export declare const usePrevious: <T>(value: T) => T;
+export declare const usePrevious: <T>(value: T) => T | undefined;
 export declare const useDebouncedEffect: (effect: () => void, deps: any[], delay: number) => void;
 export declare const useForceUpdate: () => () => void;
 export declare const useSetState: <T>(initialState: T) => [T, (subState: Partial<T>) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
@@ -34,7 +34,7 @@
     "style-loader": "^3.3.1",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
@@ -54,11 +54,11 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.1.3",
     "moment": "^2.29.4",
-    "react": "^19.0.0",
+    "react": "19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dnd": "^16.0.1",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.3.0",
+    "react-dom": "19.0.0",
+    "react-icons": "^5.4.0",
     "react-localization": "^2.0.5",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",

package/src/components/buttons/ConfirmButton.tsx

@@ -6,7 +6,7 @@ import { LocalizationContext } from '../../localization/LocalizationContext';
 import { ButtonProps } from './IconButtons';
 
 export interface ConfirmButtonProps extends ButtonProps {
-  modalTitle: ReactElement | string;
+  modalTitle?: ReactElement | string;
   modalBody?: ReactElement | string;
   confirmText?: ReactElement | string;
   cancelText?: ReactElement | string;

package/src/components/buttons/IconButtons.tsx

@@ -26,6 +26,8 @@ import { HiOutlineCog, HiOutlineLink } from 'react-icons/hi';
 import { VscMenu } from 'react-icons/vsc';
 import { RiQuestionnaireLine, RiDropdownList } from 'react-icons/ri';
 import { LuClipboardPaste } from "react-icons/lu";
+import { RiResetLeftLine } from "react-icons/ri";
+
 export interface ButtonProps extends ReactBootstrapButtonProps {
   loading?: boolean,
   iconSize?: string,
@@ -56,10 +58,9 @@ export const IconButton = ({
     }}
     {...restProps}
   >
-    {loading 
-      ? <CgSpinner style={{ animation: 'spinner-border .75s linear infinite' }}/>
-      : Icon && <Icon size={iconSize}/>
-    }
+    {loading && <CgSpinner style={{ animation: 'spinner-border .75s linear infinite' }} />}
+    {!loading && Icon && typeof Icon === "function" && <Icon size={iconSize} />}
+    
     {children && <>&nbsp;</>}
     {children}
   </Button>
@@ -102,6 +103,7 @@ export const UpButton = makeIconButton(AiFillCaretUp);
 export const UploadButton = makeIconButton(AiOutlineUpload);
 export const QuestionnaireButton = makeIconButton(RiQuestionnaireLine);
 export const DropdownButton = makeIconButton(RiDropdownList);
+export const ResetButton = makeIconButton(RiResetLeftLine);
 
 export interface UploadTextButtonProps extends ButtonProps {
   accept?: string;

package/src/components/forms/FormModal.tsx

@@ -7,12 +7,14 @@ import { isEmpty } from '../../utils/utils';
 import { useLocalization } from '../../localization/LocalizationContext';
 import { FormComponentProps, FormSelectProps, FormOnChange, FormValue } from './FormFields';
 
+export type FormFieldComponent = (props: FormComponentProps | FormSelectProps) => ReactElement
+
 export type FormField = {
   initialValue?: any;
   type?: 'string' | 'number';
   required?: boolean;
   formProps?: any;
-  component?: (props: FormComponentProps | FormSelectProps) => ReactElement;
+  component?: FormFieldComponent;
   onChange?: FormOnChange;
   label?: ReactElement | string;
 }
@@ -53,14 +55,14 @@ export const FormModal = <
   T extends FormFields,
   K extends IncludeData<T>
 >({
-  initialState = null,
+  initialState = {} as K,
   formFields,
   includeData = {} as K,
   show = true,
   onSave,
   onHide,
-  validate = null,
-  modalTitle = null,
+  validate,
+  modalTitle = '',
   loading = false,
   dialogClassName='',
   width,

package/src/components/forms/FormModalProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, ReactNode } from 'react';
+import React, { useState, useContext, ReactNode } from 'react';
 
 import { useLocalization } from '../../localization/LocalizationContext';
 import {
@@ -18,8 +18,8 @@ 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 ShowCreateModalButton = ButtonProps;
-export const ShowCreateModalButton = ({ onClick, ...props }: ButtonProps) => {
+export type FormCreateModalButton = ButtonProps;
+export const FormCreateModalButton = ({ onClick, ...props }: ButtonProps) => {
   const { showCreateModal, hasProvider } = useFormModal();
 
   return (
@@ -35,10 +35,10 @@ export const ShowCreateModalButton = ({ onClick, ...props }: ButtonProps) => {
     />
   )
 }
-export interface ShowEditModalButtonProps<T, K> extends ButtonProps {
+export interface FormEditModalButtonProps<T, K> extends ButtonProps {
   state: { [key in keyof T]: FormValue } & K;
 }
-export const ShowEditModalButton = ({ state, onClick, ... props }: ShowEditModalButtonProps<T, K>) => {
+export const FormEditModalButton = ({ state, onClick, ... props }: FormEditModalButtonProps<T, K>) => {
   const { showEditModal, hasProvider } = useFormModal();
 
   return (
@@ -100,6 +100,7 @@ export const FormModalProvider: React.FC<FormModalProviderProps<T, K>> = ({
 	editModalTitle,
 	formFields,
   initialState,
+  validate,
 	loading,
 	onCreate,
 	onUpdate,
@@ -126,6 +127,7 @@ export const FormModalProvider: React.FC<FormModalProviderProps<T, K>> = ({
 					onHide={() => showCreateModal(false)}
 					initialState={initialState}
 					formFields={formFields}
+          validate={validate}
 					loading={loading}
           // @ts-ignore Ignore as Typescript does not recognize that this is allowed
 					onSave={onCreate || onSave}
@@ -139,6 +141,7 @@ export const FormModalProvider: React.FC<FormModalProviderProps<T, K>> = ({
           onHide={() => showEditModal(null)}
           initialState={instanceInEditModal}
           formFields={formFields}
+          validate={validate}
           loading={loading}
           // @ts-ignore
           onSave={onUpdate || onSave}

package/src/components/tables/DataTable.tsx

@@ -137,7 +137,7 @@ export const DataTable = <D extends any[]>({
         )
   );
 
-  const pagesCount = (data && rowsPerPage && Math.ceil((data.length - 1) / rowsPerPage));
+  const pagesCount = (data && rowsPerPage && Math.ceil(data.length / rowsPerPage));
   useEffect(
     () => { if (pagesCount && page >= pagesCount) setPage(pagesCount - 1) },
     [setPage, pagesCount, page]
@@ -165,11 +165,11 @@ export const DataTable = <D extends any[]>({
   if (pagesCount) {
     data = data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
   }
+  
+  type ComponentProps<R> = { row: R } & DragAndDropListComponentProps;
 
-  const Component = forwardRef<
-    HTMLTableRowElement,
-    { row: R } & DragAndDropListComponentProps
-  >(({ row }: R, ref: Ref<HTMLTableRowElement> | null) =>
+  const Component = forwardRef<HTMLTableRowElement, ComponentProps<R>>(
+    ({ row }, ref) => (
     <tr
       ref={ref}
       {
@@ -202,7 +202,7 @@ export const DataTable = <D extends any[]>({
         </td>
       )}
     </tr>
-  );
+  ));
 
   const sums = useMemo(() => columns.map(({ value }) => (
     value && data.reduce((sum, row) => (

package/src/components/tables/SearchBox.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 import { InputGroup, Form, FormControlProps } from 'react-bootstrap';
 
 import { useLocalization } from '../../localization/LocalizationContext';
@@ -10,29 +10,47 @@ export type SearchBoxProps = {
   onChange: (value: string) => void;
   onClear?: () => void;
   onSearch?: () => void;
+  label?: ReactNode | string | number;
+  placeholder?: string | false;
 }
-export const SearchBox = ({ className='', value, onChange, onClear, onSearch }: SearchBoxProps) => {
+export const SearchBox = ({
+  className='',
+  value,
+  onChange,
+  onClear,
+  onSearch,
+  label,
+  placeholder, 
+}: SearchBoxProps) => {
   const { strings } = useLocalization();
 
-  return (<>
-    <InputGroup {...className ? { className } : {}}>
-      <Form.Control
-        value={value}
-        placeholder={strings.getString('search')}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-      />
-      {onClear &&
-        <UnCheckButton
-          variant="outline-secondary"
-          onClick={() => onClear()}
+  return (
+    <Form.Group>
+      {label && <Form.Label>{label}</Form.Label>}
+      
+      <InputGroup {...className ? { className } : {}}>
+        <Form.Control
+          value={value}
+          placeholder={
+            placeholder !== false
+              ? placeholder || strings.getString('search')
+              : undefined
+          }
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         />
-      }
-      {onSearch &&
-        <SearchButton
-          variant="outline-secondary"
-          onClick={() => onSearch()}
-        />
-      }
-    </InputGroup></>
+        {onClear &&
+          <UnCheckButton
+            variant="outline-secondary"
+            onClick={() => onClear()}
+          />
+        }
+        {onSearch &&
+          <SearchButton
+            variant="outline-secondary"
+            onClick={() => onSearch()}
+          />
+        }
+      </InputGroup>
+    </Form.Group>
   )
 }

package/src/localization/LocalizationContext.tsx

@@ -3,12 +3,29 @@ 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),
@@ -17,6 +34,10 @@ export const LocalizationContext = React.createContext({
     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),
@@ -53,13 +74,15 @@ export const LocalizationProvider = ({
         ...defaultLocalization[lang] || {},
         ...additionalLocalization[lang] || {},
       },
-    }), {});
+    }),
+    {}
+  );
     
   const strings = new LocalizedStrings(localizationStrings);
   strings.setLanguage(lang);
 
-  const text = (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    const text_or_func = strings.getString(str[0]) as string | LocalizationFunction;
+  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];
@@ -93,7 +116,8 @@ export const LocalizationProvider = ({
           setLanguage(lang);
         },
         strings,
-        text,
+        text: textByLang(lang),
+        textByLang,
         localizationStrings,
         setLocalization,
         ...restProps,

package/src/localization/localization.ts

@@ -1,12 +1,13 @@
-import LocalizedStrings, { LocalizedStringsMethods } from 'react-localization';
-
 export type LocalizationFunction = (...args: (string | number)[]) => string;
 
+export type LocalizationElement = {
+  [languageString: string]: (string | LocalizationFunction)
+}
+
 export type AdditionalLocalization = {
-  [lang: string]: {
-    [languageString: string]: string | LocalizationFunction;
-  }
+  [lang: string]: LocalizationElement;
 }
+
 export interface LocalizationStrings {
   select: string;
   search: string;

package/src/login/Login.tsx

@@ -19,11 +19,9 @@ export type LoginActions =
   | { type: 'LOGIN_UNSET_CURRENT_USER' };
 
 const useThunkDispatch = () => {
-  const store = useStore();
   const dispatch = useDispatch() as ThunkDispatch<any, undefined, LoginActions>;
-
   return dispatch;
-}
+};
 
 export type AuthState = {
   isAuthenticated: boolean;
@@ -87,8 +85,8 @@ export const loginFactory = ({
   const login = (
     userData: any,
     callback?: () => void
-  ): ThunkAction<Promise<void>, any, unknown, LoginActions> => {
-    return async (dispatch: ThunkDispatch<any, unknown, LoginActions>) => {
+  ): ThunkAction<Promise<void>, any, undefined, LoginActions> => {
+    return async (dispatch: ThunkDispatch<any, undefined, LoginActions>) => {
       try {
         const response = await axios.post(loginUrl, userData);
         const { auth_token } = response.data;