@jasperoosthoek/react-toolbox 0.5.4 → 0.5.6

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jasperoosthoek/react-toolbox.git"
   },
-  "description": "Functional factory to create Redux actions and reducers that interface with a backend",
+  "description": "Extensive library of React components that work together with react-bootstrap",
   "files": [
     "src/",
     "dist/",
@@ -31,13 +31,6 @@
     "css-loader": "^6.7.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "moment": "^2.29.4",
-    "react": "^18.3.1",
-    "react-bootstrap": "^2.7.4",
-    "react-dnd": "^16.0.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
-    "react-localization": "^1.0.19",
     "style-loader": "^3.3.1",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",

package/src/components/forms/{CreateEditModal.tsx → FormModal.tsx}

@@ -32,7 +32,7 @@ export type Validate = (state: any) => any
 export type ModalTitle = ReactElement | string;
 
 export type Width = 25 | 50 | 75 | 100;
-export type CreateEditModalProps<
+export type FormModalProps<
   T extends FormFields,
   K extends IncludeData<T>
 > = {
@@ -49,7 +49,7 @@ export type CreateEditModalProps<
   width?: Width;
 }
 
-export const CreateEditModal = <
+export const FormModal = <
   T extends FormFields,
   K extends IncludeData<T>
 >({
@@ -65,9 +65,10 @@ export const CreateEditModal = <
   dialogClassName='',
   width,
   ...restProps
-}: CreateEditModalProps<T, K>) => {
+}: FormModalProps<T, K>) => {
+  
   if (Object.values(restProps).length !==0) {
-    console.error(`Unrecognised props given to CreateEditModal:`, restProps);
+    console.error(`Unrecognised props given to FormModal:`, restProps);
   }
 
   const getInitialFormData = () => ({

package/src/components/forms/{CreateEditModalProvider.tsx → FormModalProvider.tsx}

@@ -9,26 +9,28 @@ import {
     Validate,
     ModalTitle,
     Width,
-		CreateEditModal,
+		FormModal,
     
-} from './CreateEditModal';
+} from './FormModal';
 import { FormValue } from './FormFields';
 import { ButtonProps, CreateButton, EditButton } from '../buttons/IconButtons';
-const out_of_context_error = 'The useError hook should only be used in a child of the CreateEditModalProvider component.';
 
 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) => {
-  const { showCreateModal } = useCreateEditModal();
+  const { showCreateModal, hasProvider } = useFormModal();
 
   return (
     <CreateButton
       {...props}
-      onClick={(e) => { 
+      onClick={(e) => {
+        // A onClick function was given to CreateButton
         if (onClick) onClick(e);
-        showCreateModal();
+        // CreateButton is inside a CreateEditButtonProvider which can handle
+        // showCreateModal. Without the provider, showCreateModal will log an error
+        if (hasProvider) showCreateModal();
       }}
     />
   )
@@ -37,40 +39,45 @@ export interface ShowEditModalButtonProps<T, K> extends ButtonProps {
   state: { [key in keyof T]: FormValue } & K;
 }
 export const ShowEditModalButton = ({ state, onClick, ... props }: ShowEditModalButtonProps<T, K>) => {
-  const { showEditModal } = useCreateEditModal();
+  const { showEditModal, hasProvider } = useFormModal();
 
   return (
     <EditButton
       {...props}
       onClick={(e) => {
+        // A onClick function was given to CreateButton
         if (onClick) onClick(e);
-        showEditModal(state);
+        // CreateButton is inside a CreateEditButtonProvider which can handle
+        // showEditModal. Without the provider, showEditModal will log an error
+        if (hasProvider) showEditModal(state);
       }}
     />
   )
 }
 
-type CreateEditModalContextType<T, K> = {
+type FormModalContextType<T, K> = {
 	showCreateModal: ShowCreateModal;
 	showEditModal: ShowEditModal<T, K>;
+  hasProvider: boolean;
 }
 
 type T = any;
 type K = any;
-const defaultErrorState: CreateEditModalContextType<T, K> = {
+const defaultErrorState: FormModalContextType<T, K> = {
   showCreateModal: () => {
-		console.error(out_of_context_error)
+		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(out_of_context_error)
+  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 CreateEditModalContext = React.createContext(defaultErrorState);
+export const FormModalContext = React.createContext(defaultErrorState);
 
-export const useCreateEditModal = () => useContext(CreateEditModalContext);
+export const useFormModal = () => useContext(FormModalContext);
 
 
-export type CreateEditModalProviderProps<
+export type FormModalProviderProps<
   T extends FormFields,
   K extends IncludeData<T>
 > = {
@@ -88,7 +95,7 @@ export type CreateEditModalProviderProps<
   width?: Width;
   children: ReactNode;
 }
-export const CreateEditModalProvider: React.FC<CreateEditModalProviderProps<T, K>> = ({
+export const FormModalProvider: React.FC<FormModalProviderProps<T, K>> = ({
 	createModalTitle,
 	editModalTitle,
 	formFields,
@@ -104,16 +111,17 @@ export const CreateEditModalProvider: React.FC<CreateEditModalProviderProps<T, K
   const [instanceInEditModal, showEditModal] = useState<({ [key in keyof T]: FormValue } & K) | null>(null);
   const { strings } = useLocalization();
   return (
-    <CreateEditModalContext.Provider
+    <FormModalContext.Provider
       value={{
 				showCreateModal: (show?: boolean) =>
 					showCreateModal(typeof show === 'undefined' ? true : show),
 				showEditModal,
+        hasProvider: true,
 			}}>
       {children}
 			
       {createModalActive && (onCreate || onSave) && (
-				<CreateEditModal
+				<FormModal
 					modalTitle={createModalTitle || strings.getString('modal_create')}
 					onHide={() => showCreateModal(false)}
 					initialState={initialState}
@@ -125,7 +133,7 @@ export const CreateEditModalProvider: React.FC<CreateEditModalProviderProps<T, K
 				/>
 			)}
       {instanceInEditModal && (onUpdate || onSave) && (
-        <CreateEditModal
+        <FormModal
           show={!!instanceInEditModal}
           modalTitle={editModalTitle || strings.getString('modal_edit')}
           onHide={() => showEditModal(null)}
@@ -137,6 +145,6 @@ export const CreateEditModalProvider: React.FC<CreateEditModalProviderProps<T, K
           dialogClassName={dialogClassName}
         />
       )}
-    </CreateEditModalContext.Provider>
+    </FormModalContext.Provider>
   );
 };

package/src/components/tables/DataTable.tsx

@@ -24,7 +24,7 @@ import {
 import { CloseButton } from '../buttons/IconButtons';
 import { DragAndDropList, DragAndDropListComponent, DragAndDropListComponentProps } from './DragAndDropList';
 import { useLocalization } from '../../localization/LocalizationContext';
-import { useCreateEditModal } from '../forms/CreateEditModalProvider';
+import { useFormModal } from '../forms/FormModalProvider';
 
 const PaginationButton = (props: ButtonProps) => (
   <Button variant='outline-secondary' size='sm' {...props} />
@@ -109,7 +109,7 @@ export const DataTable = <D extends any[]>({
   style,
   ...restProps
 }: DataTableProps<D>) => {
-  const { showEditModal } = useCreateEditModal()
+  const { showEditModal, hasProvider } = useFormModal();
   type R = D[number];
 
   if (Object.keys(restProps).length !== 0) console.error('Unrecognised props:', restProps);
@@ -177,7 +177,7 @@ export const DataTable = <D extends any[]>({
       {...{ ...(typeof onClickRow === 'function' || showEditModal)
         ? { onClick: () => {
             if (onClickRow) onClickRow(row);
-            if (showEditModal) showEditModal(row);
+            if (hasProvider) showEditModal(row);
           } }
         : {}
       }}

package/src/index.ts

@@ -4,8 +4,8 @@ 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/CreateEditModal';
-export * from './components/forms/CreateEditModalProvider';
+export * from './components/forms/FormModal';
+export * from './components/forms/FormModalProvider';
 export * from './components/forms/FormFields';
 
 export * from './components/indicators/LoadingIndicator';