@jasperoosthoek/react-toolbox 0.6.5 → 0.6.7

package/package.json

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

package/src/components/forms/FormFields.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ChangeEvent, KeyboardEvent } from 'react';
+import React, { ReactElement, ChangeEvent, KeyboardEvent, useMemo } from 'react';
 import { Form, FormControl, Badge, Dropdown, BadgeProps, FormControlProps, FormCheckProps  } from 'react-bootstrap';
 import { Variant} from 'react-bootstrap/types';
 import { useLocalization } from '../../localization/LocalizationContext';
@@ -34,7 +34,7 @@ export type FormType = {
   pristine: boolean;
 }
 
-export type FormInputProps = Omit<FormControlProps, 'onChange'> & FormType & {
+export interface FormInputProps extends Omit<FormControlProps, 'onChange'>, FormType {
   onChange: (value: FormValue) => void;
   controlId?: string;
   label?: ReactElement;
@@ -92,7 +92,7 @@ export const FormDate = (props: FormInputProps) => (
   />
 )
 
-export type FormDateTimeProps = Omit<FormInputProps, 'onChange' | 'value'> & {
+export interface FormDateTimeProps extends Omit<FormInputProps, 'onChange' | 'value'> {
   value: string | Moment;
   onChange: (value: string) => void;
 }
@@ -111,7 +111,7 @@ export const FormDateTime = ({ value, onChange, ...restProps }: FormDateTimeProp
 );
 
 
-export type FormCheckboxProps = Omit<FormCheckProps, 'onChange'> & FormType & {
+export interface FormCheckboxProps extends Omit<FormCheckProps, 'onChange'>, FormType {
   onChange: (value: boolean) => void;
   controlId?: string;
   label?: ReactElement;
@@ -161,7 +161,6 @@ export const FormSwitch = ({ className = '', ...restProps }: FormCheckboxProps)
 );
 
 export type DisabledProps = {
-
   list: any[];
   value: string | number;
   state: any;
@@ -169,7 +168,7 @@ export type DisabledProps = {
   initialValue: any;
 }
 
-export type FormSelectProps = Omit<FormInputProps, 'disabled' | 'onChange'> & {
+export interface FormSelectProps extends Omit<FormInputProps, 'disabled' | 'onChange' | 'list'> {
   onChange: (value: number | string | number[] | string[] | null) => void;
   list: any[];
   multiple?: boolean;
@@ -357,48 +356,19 @@ export const FormBadgesSelection = ({
   );
 }
 
-// export const FormSelectControl = ({
-//   controlId,
-//   label,
-//   formProps,
-//   onChange,
-//   options,
-//   defaultValue,
-//   children,
-//   ...restProps
-// }) => (
-//   <InputGroup controlId={controlId}>
-//     {label && <Form.Label>{label}</Form.Label>}
-//     <FormControl as='select'
-//       onChange={e => onChange(e.target.value)}
-//       {...formProps}
-//       {...restProps}
-//     >
-//       {options.map(({ value, children, ...option }) =>
-//         <option
-//           key={value}
-//           value={value}
-//           defaultValue={defaultValue}
-//           {...option}
-//         >
-//           {children}
-//         </option>
-//       )}
-//     </FormControl>
-//     {children}
-//   </InputGroup>
-// );
-
-export type FormDropdownProps =  Omit<FormInputProps, 'disabled' | 'onChange'> & {
-  onChange: (value: number | string | number[] | string[] | null) => void;
-  list: any[];
-  idKey?: string;
+export interface FormDropdownProps<T> extends Omit<FormInputProps, 'disabled' | 'onChange' | 'list'> {
+   onChange: (value: number | string | number[] | string[] | null) => void;
+  list: T[];
+  idKey?: keyof T;
+  nameKey?: keyof T;
   disabled?: boolean | ((props: DisabledProps) => boolean);
   variant?: Variant;
 }
-export const FormDropdown = ({  
-  list,
-  id = 'id',
+
+export const FormDropdown = <T,>({
+  list: listBase,
+  idKey = 'id' as keyof T,
+  nameKey = 'name' as keyof T,
   value,
   onChange,
   label,
@@ -409,13 +379,40 @@ export const FormDropdown = ({
   disabled,
   initialState,
   initialValue,
-  variant='light',
-  keyName,
+  variant = 'light',
   pristine,
+  keyName,
   ...restProps
-}: FormDropdownProps) => {
+}: FormDropdownProps<T>) => {
   const { strings } = useLocalization();
-  const selectedItem = list.find(({ [id]: itemId }) => itemId === value);
+
+  const [list, mismatch] = useMemo(() => {
+    if (!listBase || !Array.isArray(listBase)) {
+      return [null, null] as [T[] | null, any];
+    }
+    const mismatch = listBase?.find((item: any) => (
+      !['number', 'string'].includes(typeof item[idKey])
+      || !['number', 'string'].includes(typeof item[nameKey])
+    ))
+    if (mismatch) return [null, mismatch];
+    return [listBase, null];
+  }, [listBase])
+
+  if (!list) {
+    console.error(
+      `FormDropdown Error:
+      - Each item in 'list' must include a valid 'idKey' (${String(idKey)}) and 'nameKey' (${String(nameKey)}).
+      - Both keys must exist on every item and be of type 'string' or 'number'.
+      - One or more items failed this check.
+      
+      Received list:`,
+      listBase,
+      ...mismatch ? ['First mismatch:', mismatch] : []
+    );
+    return null;
+  }
+  
+  const selectedItem = list.find(item => item[idKey] === value);
   return (
     <Form.Group controlId={controlId}>
       {label && <Form.Label>{label}</Form.Label>}
@@ -424,7 +421,7 @@ export const FormDropdown = ({
         <Dropdown>
           <Dropdown.Toggle variant={variant}>
             {selectedItem
-              ? selectedItem.name
+              ? selectedItem[nameKey] as string
               : strings.getString('choose_one')
             }
           </Dropdown.Toggle>
@@ -434,15 +431,15 @@ export const FormDropdown = ({
                 key={key}
                 disabled={
                   typeof disabled === 'function'
-                    ? disabled({ initialValue, list, value: item[id], state, initialState })
+                    ? disabled({ initialValue, list, value: item[idKey] as number | string, state, initialState })
                     : disabled
                 }
-                selected={value === item[id]}
+                selected={value === item[idKey]}
                 cursor='pointer'
-                onClick={() => onChange(item[id])}
+                onClick={() => onChange(item[idKey] as number | string)}
                 {...restProps}
               >
-                {item.name}
+                {item[nameKey] as string}
               </Dropdown.Item>
             )}
           </Dropdown.Menu>

package/src/components/tables/DataTable.tsx

@@ -67,9 +67,10 @@ export type OnMove<R> = ({ item, target, reset }: OnMoveProps<R>) => void;
 export type OnClickRow<R> = (row: R) => void;
 
 export type DataTableHeader = {
-  search?: boolean,
-  numberOfRows?: boolean,
-  pagination?: boolean,
+  search?: boolean;
+  numberOfRows?: boolean;
+  pagination?: boolean;
+  customHeader?: ReactElement | string;
 };
 
 export type DataTableProps<D extends any[]> = {
@@ -211,14 +212,19 @@ export const DataTable = <D extends any[]>({
   )), [columns])
   
   if (!Component) return null;
+
+  const customHeader = showHeader && (showHeader as DataTableHeader).customHeader;
+  const sm = customHeader ? 4 : 6; 
+  const lg = customHeader ? 3 : 4; 
+  
   return (
     <div style={style} className={className}>
-      {showHeader &&
+      {(showHeader) &&
         <Row className="mb-4">
           {(showHeader === true || showHeader.search) && (
             <Col
               xs={12}
-              lg={4}
+              lg={lg}
               className="d-flex flex-col justify-content-end align-items-end"
             >
               <InputGroup>
@@ -240,8 +246,8 @@ export const DataTable = <D extends any[]>({
           {(showHeader === true || showHeader.numberOfRows) && (
             <Col
               xs={12}
-              sm={6}
-              lg={4}
+              sm={sm}
+              lg={lg}
               className="d-flex flex-col justify-content-lg-center align-items-center justify-content-sm-start mb-2 mb-sm-0"
             >
               <Form.Group>
@@ -275,8 +281,8 @@ export const DataTable = <D extends any[]>({
           {(showHeader === true || showHeader.pagination) && (
             <Col
               xs={12}
-              sm={6}
-              lg={4}
+              sm={sm}
+              lg={lg}
               className="d-flex flex-col justify-content-end align-items-end"
             >
               <ButtonGroup>
@@ -308,6 +314,17 @@ export const DataTable = <D extends any[]>({
               </ButtonGroup>
             </Col>
           )}
+          
+          {customHeader && (
+            <Col
+              xs={12}
+              sm={sm}
+              lg={lg}
+              className="d-flex flex-col justify-content-end align-items-end"
+            >          
+              {customHeader}
+            </Col>
+          )}
         </Row>
       }