@jasperoosthoek/react-toolbox 0.5.6 → 0.6.0

package/dist/index.js.LICENSE.txt

@@ -6,9 +6,9 @@
 
 /**
  * @license React
- * react-jsx-runtime.production.min.js
+ * react-jsx-runtime.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.13.16",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.19",
@@ -50,19 +50,17 @@
     "url": "https://github.com/jasperoosthoek/react-toolbox/issues"
   },
   "homepage": "https://github.com/jasperoosthoek/react-toolbox#readme",
-  "dependencies": {
-  },
   "peerDependencies": {
     "axios": "^1.4.0",
     "bootstrap": "^5.1.3",
     "moment": "^2.29.4",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-bootstrap": "^2.7.4",
     "react-dnd": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.3.0",
-    "react-localization": "^1.0.19",
-    "react-redux": "^9.1.2",
+    "react-localization": "^2.0.5",
+    "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0"
   },

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/tables/DataTable.tsx

@@ -6,6 +6,7 @@ import React, {
   ReactElement,
   ReactNode,
   ChangeEvent,
+  useMemo,
   Ref,
 } from 'react';
 import { FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';
@@ -45,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>;
 }
@@ -87,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[]>({
@@ -107,6 +111,7 @@ export const DataTable = <D extends any[]>({
   className,
   rowClassName,
   style,
+  showSum,
   ...restProps
 }: DataTableProps<D>) => {
   const { showEditModal, hasProvider } = useFormModal();
@@ -198,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 (
@@ -414,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/utils/hooks.ts

@@ -3,7 +3,9 @@ import { useDispatch } from 'react-redux';
 
 // https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
 export const usePrevious = <T>(value: T): T | undefined => {
-  const ref = useRef<T>();
+  // Explicitly set initial value to `undefined`
+  const ref = useRef<T | undefined>(undefined);
+
   useEffect(() => {
     ref.current = value;
   });