@jasperoosthoek/react-toolbox 0.5.5 → 0.5.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 jasperoosthoek
+Copyright (c) 2024 jasperoosthoek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/change-log.md

@@ -239,3 +239,10 @@
 
 ##### Version 0.5.5
 - Remove unnecessary packages from devDependencies
+
+##### Version 0.5.6
+- Rename `CreateEditModal` & `CreateEditModalProvider` to `FormModal` & `FormModalProvider`
+- Remove out of context error when clicking row to open `EditModal` on `DataTable`
+
+##### Version 0.5.7
+- New optional footer with sum of values in `DataTable` component

package/dist/components/forms/FormFields.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import { BadgeProps, FormControlProps, FormCheckProps } from 'react-bootstrap';
 import { Variant } from 'react-bootstrap/types';
-import PropTypes from 'prop-types';
 import { Moment } from 'moment';
 export type FormValue = boolean | string | string[] | number | number[];
 export type FormOnChange = (((value: FormValue) => void) | ((value: FormValue, formData: any) => any));
@@ -65,12 +64,7 @@ export type FormSelectProps = Omit<FormInputProps, 'disabled' | 'onChange'> & {
     idKey?: string;
     disabled?: boolean | ((props: DisabledProps) => boolean);
 };
-export declare const FormSelect: {
-    ({ list, idKey, integer, value, defaultValue, onChange, label, controlId, htmlSize, state, formatTitle, multiple, disabled, isInvalid, initialState, initialValue, keyName, pristine, }: FormSelectProps): React.JSX.Element;
-    propTypes: {
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-    };
-};
+export declare const FormSelect: ({ list, idKey, integer, value, defaultValue, onChange, label, controlId, htmlSize, state, formatTitle, multiple, disabled, isInvalid, initialState, initialValue, keyName, pristine, }: FormSelectProps) => React.JSX.Element;
 export interface BadgeSelectionProps extends BadgeProps {
     selected: boolean;
     cursor: string;

package/dist/components/forms/FormModal.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react';
+import { FormComponentProps, FormSelectProps, FormOnChange, FormValue } from './FormFields';
+export type FormField = {
+    initialValue?: any;
+    type?: 'string' | 'number';
+    required?: boolean;
+    formProps?: any;
+    component?: (props: FormComponentProps | FormSelectProps) => ReactElement;
+    onChange?: FormOnChange;
+    label?: ReactElement | string;
+};
+export type IncludeData<T> = {
+    [key in Exclude<string, keyof T>]: any;
+};
+export type InitialState<T> = Partial<{
+    [key in keyof T]: FormValue;
+}>;
+export type FormFields = {
+    [key: string]: FormField;
+};
+export type OnSave<T, K> = (state: ({
+    [key in keyof T]: FormValue;
+}), callback: () => void) => void;
+export type Validate = (state: any) => any;
+export type ModalTitle = ReactElement | string;
+export type Width = 25 | 50 | 75 | 100;
+export type FormModalProps<T extends FormFields, K extends IncludeData<T>> = {
+    initialState: InitialState<T> | K;
+    includeData?: K;
+    formFields: T;
+    show?: boolean;
+    onSave: OnSave<T, K>;
+    onHide: () => void;
+    validate?: Validate;
+    modalTitle?: ModalTitle;
+    loading?: boolean;
+    dialogClassName?: string;
+    width?: Width;
+};
+export declare const FormModal: <T extends FormFields, K extends IncludeData<T>>({ initialState, formFields, includeData, show, onSave, onHide, validate, modalTitle, loading, dialogClassName, width, ...restProps }: FormModalProps<T, K>) => React.JSX.Element;
+export declare const DisabledFormField: ({ value }: any) => React.JSX.Element;

package/dist/components/forms/FormModalProvider.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import { FormFields, IncludeData, InitialState, OnSave, Validate, ModalTitle, Width } from './FormModal';
+import { FormValue } from './FormFields';
+import { ButtonProps } 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 declare const ShowCreateModalButton: ({ onClick, ...props }: ButtonProps) => React.JSX.Element;
+export interface ShowEditModalButtonProps<T, K> extends ButtonProps {
+    state: {
+        [key in keyof T]: FormValue;
+    } & K;
+}
+export declare const ShowEditModalButton: ({ state, onClick, ...props }: ShowEditModalButtonProps<T, K>) => React.JSX.Element;
+type FormModalContextType<T, K> = {
+    showCreateModal: ShowCreateModal;
+    showEditModal: ShowEditModal<T, K>;
+    hasProvider: boolean;
+};
+type T = any;
+type K = any;
+export declare const FormModalContext: React.Context<FormModalContextType<any, any>>;
+export declare const useFormModal: () => FormModalContextType<any, any>;
+export type FormModalProviderProps<T extends FormFields, K extends IncludeData<T>> = {
+    initialState: InitialState<T> | K;
+    includeData?: K;
+    formFields: T;
+    onSave?: OnSave<T, K>;
+    onCreate?: OnSave<T, K>;
+    onUpdate?: OnSave<T, K>;
+    validate?: Validate;
+    createModalTitle?: ModalTitle;
+    editModalTitle?: ModalTitle;
+    loading?: boolean;
+    dialogClassName?: string;
+    width?: Width;
+    children: ReactNode;
+};
+export declare const FormModalProvider: React.FC<FormModalProviderProps<T, K>>;
+export {};

package/dist/components/tables/DataTable.d.ts

@@ -12,6 +12,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>;
 };
@@ -47,5 +49,6 @@ export type DataTableProps<D extends any[]> = {
     className?: string;
     rowClassName?: string | ((row: D[number]) => string);
     style?: any;
+    showSum?: boolean;
 };
-export declare const DataTable: <D extends any[]>({ data: allData, columns, rowsPerPage: rowsPerPageDefault, rowsPerPageOptions, filterColumn, orderByDefault, orderByDefaultDirection, onMove, moveId, moveIsLoading, showHeader, onClickRow, showEditModalOnClickRow, textOnEmpty, className, rowClassName, style, ...restProps }: DataTableProps<D>) => React.JSX.Element;
+export declare const DataTable: <D extends any[]>({ data: allData, columns, rowsPerPage: rowsPerPageDefault, rowsPerPageOptions, filterColumn, orderByDefault, orderByDefaultDirection, onMove, moveId, moveIsLoading, showHeader, onClickRow, showEditModalOnClickRow, textOnEmpty, className, rowClassName, style, showSum, ...restProps }: DataTableProps<D>) => React.JSX.Element;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export * from './components/buttons/ConfirmButton';
 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';
 export * from './components/indicators/CheckIndicator';