@jasperoosthoek/react-toolbox 0.5.5 → 0.5.7

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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/",

package/src/components/buttons/IconButtons.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useContext, ChangeEvent, MouseEvent, ReactElement } from 'react';
-import { Button, ButtonProps as ReactBootstrapButtonProps, Modal, Form } from 'react-bootstrap';
+import React, { useRef,  ChangeEvent } from 'react';
+import { Button, ButtonProps as ReactBootstrapButtonProps, Form } from 'react-bootstrap';
 import {
   AiFillCaretDown,
   AiFillCaretUp,

package/src/components/forms/FormFields.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, ChangeEvent, KeyboardEvent } from 'react';
 import { Form, FormControl, Badge, Dropdown, BadgeProps, FormControlProps, FormCheckProps  } from 'react-bootstrap';
 import { Variant} from 'react-bootstrap/types';
-import PropTypes from 'prop-types';
 import { useLocalization } from '../../localization/LocalizationContext';
 import moment, { Moment } from 'moment';
 
@@ -264,9 +263,6 @@ export const FormSelect = ({
     </Form.Group>
   </>;
 }
-FormSelect.propTypes = {
-  onChange: PropTypes.func.isRequired,
-}
 
 export interface BadgeSelectionProps extends BadgeProps {
   selected: boolean;

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

@@ -1,4 +1,3 @@
-import { useDragDropManager } from 'react-dnd';
 import React, {
   useEffect,
   useState,
@@ -7,6 +6,7 @@ import React, {
   ReactElement,
   ReactNode,
   ChangeEvent,
+  useMemo,
   Ref,
 } from 'react';
 import { FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';
@@ -25,16 +25,11 @@ 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) => {
-  
-  const manager = useDragDropManager();
-  console.log({ manager })
-  return (
+const PaginationButton = (props: ButtonProps) => (
   <Button variant='outline-secondary' size='sm' {...props} />
 )
-}
 
 export type OrderByColumn<R> = string | ((row: R) => string | number);
 
@@ -51,6 +46,8 @@ export type DataTableColumn<R> = {
   orderBy?: OrderByColumn<R>;
   optionsDropdown?: OptionsDropdown;
   className?: string;
+  value?: number | string | ((row: R)  => number);
+  formatSum?: ((value: number) => ReactElement | string | number) | ReactElement | string | number;
   selector: number | string | ((row: R) => ReactElement | string | number | (ReactElement | string | number)[]);
   onClick?: OnClickRow<R>;
 }
@@ -93,6 +90,7 @@ export type DataTableProps<D extends any[]> = {
   className?: string;
   rowClassName?: string | ((row: D[number]) => string);
   style?: any;
+  showSum?: boolean;
 }
 
 export const DataTable = <D extends any[]>({
@@ -113,13 +111,11 @@ export const DataTable = <D extends any[]>({
   className,
   rowClassName,
   style,
+  showSum,
   ...restProps
 }: DataTableProps<D>) => {
-  const { showEditModal } = useCreateEditModal()
+  const { showEditModal, hasProvider } = useFormModal();
   type R = D[number];
-  
-  const manager = useDragDropManager();
-  console.log({ manager })
 
   if (Object.keys(restProps).length !== 0) console.error('Unrecognised props:', restProps);
   
@@ -186,7 +182,7 @@ export const DataTable = <D extends any[]>({
       {...{ ...(typeof onClickRow === 'function' || showEditModal)
         ? { onClick: () => {
             if (onClickRow) onClickRow(row);
-            if (showEditModal) showEditModal(row);
+            if (hasProvider) showEditModal(row);
           } }
         : {}
       }}
@@ -207,6 +203,12 @@ export const DataTable = <D extends any[]>({
       )}
     </tr>
   );
+
+  const sums = useMemo(() => columns.map(({ value }) => (
+    value && data.reduce((sum, row) => (
+      sum + (typeof value === 'function' ? value(row) : row[value])
+    ), 0)
+  )), [columns])
   
   if (!Component) return null;
   return (
@@ -423,6 +425,25 @@ export const DataTable = <D extends any[]>({
             : data.map((row, index) => <Component row={row} key={index} />)
           }
         </tbody>
+        {showSum && (
+          <tfoot>
+            <tr>
+
+              {columns.map(({ value, formatSum }, index) =>
+                <td
+                  key={index}
+                >
+                  {value 
+                    ? (typeof formatSum === 'function'
+                        ? formatSum(sums[index])
+                        : sums[index]
+                      )
+                    : formatSum}
+                </td>
+              )}
+            </tr>
+          </tfoot>
+        )}
       </Table>
     </div>
   )

package/src/components/tables/DragAndDropList.tsx

@@ -1,4 +1,3 @@
-
 import React, { useCallback, useEffect, useState, useRef, ReactElement } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 

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';