@etsoo/react 1.5.80 → 1.5.81

package/src/mu/ItemList.tsx

@@ -1,204 +0,0 @@
-import React from 'react';
-import {
-    Dialog,
-    DialogTitle,
-    List,
-    ListItemText,
-    DialogContent,
-    Button,
-    ListItemButton
-} from '@mui/material';
-import {
-    DataTypes,
-    IdDefaultType,
-    LabelDefaultType,
-    ListType
-} from '@etsoo/shared';
-
-/**
- * Item list properties
- */
-export interface ItemListProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    L extends DataTypes.Keys<T, string>
-> {
-    /**
-     * Style class name
-     */
-    className?: string;
-
-    /**
-     * Id field name
-     */
-    idField?: D;
-
-    /**
-     * Label field name or callback
-     */
-    labelField?: L | ((item: T) => string);
-
-    /**
-     * Button icon
-     */
-    icon?: React.ReactNode;
-
-    /**
-     * Button color
-     */
-    color?: 'inherit' | 'primary' | 'secondary';
-
-    /**
-     * Close event
-     */
-    onClose?(item: T, changed: boolean): void;
-
-    /**
-     * Current selected language
-     */
-    selectedValue?: T[D];
-
-    /**
-     * Button size
-     */
-    size?: 'small' | 'medium' | 'large';
-
-    /**
-     * Title
-     */
-    title?: string;
-
-    /**
-     * Items
-     */
-    items: T[];
-
-    /**
-     * Button variant
-     */
-    variant?: 'text' | 'outlined' | 'contained';
-}
-
-/**
- * Item list component
- * @param props Properties
- */
-export function ItemList<
-    T extends object = ListType,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
->(props: ItemListProps<T, D, L>) {
-    //  properties destructure
-    const {
-        className,
-        color = 'primary',
-        items,
-        idField = 'id' as D,
-        labelField = 'label' as L,
-        icon,
-        onClose,
-        selectedValue,
-        size = 'medium',
-        title,
-        variant = 'outlined'
-    } = props;
-
-    // Get label
-    const getLabel = (item: T): string => {
-        if (typeof labelField === 'function') {
-            return labelField(item);
-        } else {
-            return DataTypes.convert(item[labelField], 'string') ?? '';
-        }
-    };
-
-    // Dialog open or not state
-    const [open, setOpen] = React.useState(false);
-
-    // Default state
-    const defaultItem =
-        items.find((item) => item[idField] === selectedValue) ?? items[0];
-
-    // Current item
-    const [currentItem, setCurrentItem] = React.useState(defaultItem);
-
-    // Click handler
-    const clickHandler = () => {
-        // More than one language
-        if (items.length < 2) {
-            return;
-        }
-
-        // Open the dialog
-        setOpen(true);
-    };
-
-    // Close handler
-    const closeHandler = () => {
-        if (!open) return;
-
-        // Close the dialog
-        setOpen(false);
-
-        // Emit close event
-        if (onClose) {
-            onClose(currentItem, false);
-        }
-    };
-
-    // Close item handler
-    const closeItemHandler = (item: any) => {
-        // Update the current item
-        setCurrentItem(item);
-
-        // Close the dialog
-        setOpen(false);
-
-        // Emit close event
-        if (onClose) {
-            onClose(item, true);
-        }
-    };
-
-    return (
-        <>
-            <Button
-                className={className}
-                variant={variant}
-                startIcon={icon}
-                color={color}
-                size={size}
-                onClick={clickHandler}
-            >
-                {getLabel(currentItem)}
-            </Button>
-            <Dialog
-                aria-labelledby="dialog-title"
-                open={open}
-                onClose={closeHandler}
-            >
-                <DialogTitle sx={{ minWidth: '200px' }} id="dialog-title">
-                    {title || ''}
-                </DialogTitle>
-                <DialogContent>
-                    <List>
-                        {items.map((item) => {
-                            const id = item[idField];
-                            return (
-                                <ListItemButton
-                                    key={id as unknown as React.Key}
-                                    disabled={id === currentItem[idField]}
-                                    onClick={() => closeItemHandler(item)}
-                                >
-                                    <ListItemText>
-                                        {getLabel(item)}
-                                    </ListItemText>
-                                </ListItemButton>
-                            );
-                        })}
-                    </List>
-                </DialogContent>
-            </Dialog>
-        </>
-    );
-}

package/src/mu/ListItemRightIcon.tsx

@@ -1,9 +0,0 @@
-import { ListItemIcon, styled } from '@mui/material';
-
-/**
- * List item right icon component
- */
-export const ListItemRightIcon = styled(ListItemIcon)(({ theme }) => ({
-    minWidth: '20px!important',
-    paddingLeft: theme.spacing(2)
-}));

package/src/mu/ListMoreDisplay.tsx

@@ -1,205 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import {
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    CardProps,
-    CircularProgress
-} from '@mui/material';
-import React from 'react';
-import { globalApp } from '../app/ReactApp';
-import {
-    GridData,
-    GridDataGet,
-    GridLoadDataProps,
-    GridLoader,
-    GridLoaderStates
-} from '../components/GridLoader';
-import { LoadingButton } from './LoadingButton';
-
-/**
- * ListMoreDisplay props
- */
-export interface ListMoreDisplayProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> extends Omit<CardProps, 'children'>,
-        GridLoader<T> {
-    /**
-     * Children to display the list
-     */
-    children: (data: T, index: number) => React.ReactNode;
-
-    /**
-     * Search field template
-     */
-    fieldTemplate?: F;
-
-    /**
-     * Header renderer
-     */
-    headerRenderer?: (reset: (data?: GridData) => void) => React.ReactNode;
-
-    /**
-     * Header title
-     */
-    headerTitle?: React.ReactNode;
-
-    /**
-     * More button label
-     */
-    moreLabel?: string;
-}
-
-type states<T> = {
-    items?: T[];
-    completed: boolean;
-};
-
-/**
- * ListMoreDisplay
- * @param props Props
- * @returns Component
- */
-export function ListMoreDisplay<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ListMoreDisplayProps<T, F>) {
-    // Destruct
-    const {
-        children,
-        defaultOrderBy,
-        headerRenderer,
-        autoLoad = headerRenderer == null,
-        headerTitle,
-        loadBatchSize,
-        loadData,
-        moreLabel = typeof globalApp === 'undefined'
-            ? undefined
-            : globalApp.get('more') + '...',
-        fieldTemplate,
-        threshold,
-        ...rest
-    } = props;
-
-    // Refs
-    const refs = React.useRef<GridLoaderStates<T>>({
-        autoLoad,
-        currentPage: 0,
-        hasNextPage: true,
-        isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        batchSize: 10,
-        loadedItems: 0,
-        selectedItems: []
-    });
-    const ref = refs.current;
-
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentStates: states<T>, newStates: Partial<states<T>>) => {
-            return { ...currentStates, ...newStates };
-        },
-        { completed: false }
-    );
-
-    // Load data
-    const loadDataLocal = async (reset: boolean = false) => {
-        // Prevent multiple loadings
-        if (!ref.hasNextPage || ref.isNextPageLoading) return;
-
-        // Update state
-        ref.isNextPageLoading = true;
-
-        // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
-
-        const loadProps: GridLoadDataProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
-            data
-        };
-
-        const mergedData = GridDataGet(loadProps, fieldTemplate);
-
-        const items = await loadData(mergedData);
-        if (items == null || ref.isMounted === false) {
-            return;
-        }
-        ref.isMounted = true;
-
-        const newItems = items.length;
-        const hasNextPage = newItems >= batchSize;
-        ref.lastLoadedItems = newItems;
-        ref.isNextPageLoading = false;
-        ref.hasNextPage = hasNextPage;
-
-        // Next page
-        ref.currentPage = currentPage + 1;
-
-        // Update rows
-        if (states.items == null || reset)
-            setStates({ items, completed: !hasNextPage });
-        else
-            setStates({
-                items: [...states.items, ...items],
-                completed: !hasNextPage
-            });
-    };
-
-    const reset = (data?: GridData) => {
-        // Update the form data
-        ref.data = data;
-
-        // Reset page number
-        ref.isNextPageLoading = false;
-        ref.currentPage = 0;
-        ref.hasNextPage = true;
-
-        // Load data
-        loadDataLocal(true);
-    };
-
-    React.useEffect(() => {
-        if (autoLoad) loadDataLocal();
-    }, [autoLoad]);
-
-    React.useEffect(() => {
-        return () => {
-            ref.isMounted = false;
-        };
-    }, []);
-
-    return (
-        <React.Fragment>
-            {headerRenderer && headerRenderer(reset)}
-            <Card {...rest}>
-                <CardHeader title={headerTitle}></CardHeader>
-                <CardContent
-                    sx={{
-                        paddingTop: 0,
-                        paddingBottom: states.completed ? 0 : 'inherit'
-                    }}
-                >
-                    {states.items == null ? (
-                        <CircularProgress size={20} />
-                    ) : (
-                        states.items.map((item, index) => children(item, index))
-                    )}
-                </CardContent>
-                {!states.completed && (
-                    <CardActions sx={{ justifyContent: 'flex-end' }}>
-                        <LoadingButton
-                            onClick={async () => await loadDataLocal()}
-                        >
-                            {moreLabel}
-                        </LoadingButton>
-                    </CardActions>
-                )}
-            </Card>
-        </React.Fragment>
-    );
-}

package/src/mu/LoadingButton.tsx

@@ -1,75 +0,0 @@
-import {
-    Button,
-    ButtonProps,
-    CircularProgress,
-    CircularProgressProps
-} from '@mui/material';
-import React from 'react';
-
-/**
- * Loading button props
- */
-export type LoadingButtonProps = ButtonProps & {
-    /**
-     * Loading icon props
-     */
-    loadingIconProps?: CircularProgressProps;
-};
-
-/**
- * Loading button
- * @param props Props
- */
-export function LoadingButton(props: LoadingButtonProps) {
-    // Destruct
-    const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
-
-    // Default size
-    loadingIconProps.size ??= 12;
-
-    // State
-    // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
-    const [loading, setLoading] = React.useState(false);
-
-    // Icon
-    const localEndIcon = loading ? (
-        <CircularProgress {...loadingIconProps} />
-    ) : (
-        endIcon
-    );
-
-    // Check if the component is mounted
-    const isMounted = React.useRef(true);
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    // Layout
-    return (
-        <Button
-            disabled={loading}
-            endIcon={localEndIcon}
-            onClick={async (event) => {
-                if (onClick) {
-                    // Update state
-                    setLoading(true);
-
-                    // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
-                    // const AsyncFunction = (async () => {}).constructor;
-                    // onClick instanceof AsyncFunction
-                    await onClick(event);
-
-                    // Warning: Can't perform a React state update on an unmounted component
-                    // It's necessary to check the component is mounted now
-                    if (isMounted.current) {
-                        setLoading(false);
-                    }
-                }
-            }}
-            {...rest}
-        />
-    );
-}

package/src/mu/MUGlobal.ts

@@ -1,220 +0,0 @@
-import { NumberUtils } from '@etsoo/shared';
-import { Breakpoint, ListItemButtonProps, Theme } from '@mui/material';
-import { RLink } from './RLink';
-
-/**
- * Mouse event handler with data
- */
-export type MouseEventWithDataHandler<T> = (
-    event: React.MouseEvent<HTMLDivElement>,
-    data: T
-) => void;
-
-/**
- * MUGlobal for global configurations
- */
-export class MUGlobal {
-    /**
-     * Search field shrink
-     */
-    static searchFieldShrink: boolean = true;
-
-    /**
-     * Search field size
-     */
-    static searchFieldSize: 'small' | 'medium' = 'small';
-
-    /**
-     * Search field variant
-     */
-    static searchFieldVariant: 'standard' | 'filled' | 'outlined' = 'outlined';
-
-    /**
-     * Input field shrink
-     */
-    static inputFieldShrink: boolean = true;
-
-    /**
-     * Input field size
-     */
-    static inputFieldSize: 'small' | 'medium' = 'medium';
-
-    /**
-     * Input field variant
-     */
-    static inputFieldVariant: 'standard' | 'filled' | 'outlined' = 'outlined';
-
-    /**
-     * TextField variant
-     */
-    static textFieldVariant: 'standard' | 'filled' | 'outlined' = 'filled';
-
-    /**
-     * Page default paddings
-     */
-    static pagePaddings = { xs: 2, sm: 3 };
-
-    /**
-     * Get menu item props
-     * @param path Current path
-     * @param href Item's href
-     * @returns Props
-     */
-    static getMenuItem(path: string, href: string) {
-        let selected = false;
-
-        if (path === href) {
-            // Exact match, most common case
-            selected = true;
-        } else if (href.endsWith('*')) {
-            href = href.slice(0, -1);
-            selected = path.startsWith(href);
-        } else if (href.endsWith('/all')) {
-            selected = path.startsWith(href.slice(0, -3));
-        }
-
-        return {
-            component: RLink,
-            selected,
-            href,
-            sx: {
-                ...(selected && {
-                    '.MuiListItemIcon-root': {
-                        color: (theme) => theme.palette.primary.main
-                    }
-                })
-            }
-        } as ListItemButtonProps;
-    }
-
-    /**
-     * Update object number properties with half of it
-     * @param input Input object
-     * @returns Updated object
-     */
-    static half(input: object) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, value / 2.0);
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Reverse object number properties, like 5 to -5
-     * @param input Input object
-     * @returns Updated object
-     */
-    static reverse(input: object) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, -value);
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Update object number properties with adjustment
-     * @param input Input object
-     * @param adjust Adjust value or new size object
-     * @param field Specific field
-     * @returns Updated object
-     */
-    static increase(input: object, adjust: number | object, field?: string) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                if (field == null || field === key) {
-                    const adjustValue =
-                        typeof adjust === 'number'
-                            ? adjust
-                            : Reflect.get(adjust, key);
-                    if (adjustValue == null || typeof adjustValue !== 'number')
-                        return;
-
-                    Reflect.set(newObj, key, value + adjustValue);
-                }
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Adjust size with theme update
-     * @param size Base size
-     * @param adjust Adjustment
-     * @param updateFunc Theme update function
-     * @returns Updated object
-     */
-    static adjustWithTheme(
-        size: number,
-        adjust: object,
-        updateFunc: (value: number) => string
-    ) {
-        const newObj = { ...adjust };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                const newValue = NumberUtils.parseWithUnit(updateFunc(value));
-                if (newValue != null) {
-                    Reflect.set(
-                        newObj,
-                        key,
-                        `${size - newValue[0]}${newValue[1]}`
-                    );
-                }
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Break points defined
-     */
-    static breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-    /**
-     * Get multple medias theme space
-     * Responsive values and Breakpoints as an object
-     * xs = theme.breakpoints.up('xs')
-     * https://mui.com/system/basics/
-     * @param spaces Spaces
-     * @param theme Theme
-     * @returns Result
-     */
-    static getSpace(spaces: object, theme: Theme) {
-        const start = this.breakpoints.length - 1;
-        for (let i = start; i >= 0; i--) {
-            const key = this.breakpoints[i];
-            const value = Reflect.get(spaces, key);
-            if (typeof value === 'number') {
-                const mediaRaw = theme.breakpoints.up(key as Breakpoint);
-                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
-                if (window.matchMedia(mediaQuery).matches) {
-                    return parseInt(theme.spacing(value), 10);
-                }
-            }
-        }
-
-        return 0;
-    }
-
-    /**
-     * Update object number properties with theme
-     * @param input Input object
-     * @param updateFunc Theme update function
-     * @returns Updated object
-     */
-    static updateWithTheme(input: {}, updateFunc: (value: number) => string) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, updateFunc(value));
-            }
-        });
-        return newObj;
-    }
-}