@etsoo/react 1.5.80 → 1.5.83

package/lib/mu/EmailInput.js

@@ -1,15 +0,0 @@
-import { TextField } from '@mui/material';
-import React from 'react';
-/**
- * Email input
- * @param props Props
- */
-export function EmailInput(props) {
-    var _a;
-    // Destruct
-    const { inputProps = {}, ...rest } = props;
-    // Default max length
-    (_a = inputProps.maxLength) !== null && _a !== void 0 ? _a : (inputProps.maxLength = 128);
-    // Layout
-    return (React.createElement(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest }));
-}

package/lib/mu/FabBox.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { BoxProps } from '@mui/material';
-/**
- * Fabs container box props
- */
-export declare type FabBoxProps = BoxProps & {
-    /**
-     * Item gap
-     */
-    itemGap?: number;
-    /**
-     * Flex direction, row or column
-     */
-    columnDirection?: boolean;
-};
-/**
- * Fabs container box
- * @param props Props
- * @returns Component
- */
-export declare function FabBox(props: FabBoxProps): JSX.Element;

package/lib/mu/FabBox.js

@@ -1,31 +0,0 @@
-import { Box, useTheme } from '@mui/material';
-import React from 'react';
-/**
- * Fabs container box
- * @param props Props
- * @returns Component
- */
-export function FabBox(props) {
-    // Destruct
-    const { columnDirection, itemGap = 1, sx = {}, ...rest } = props;
-    // Theme
-    const theme = useTheme();
-    const spaceGap = theme.spacing(itemGap);
-    if (columnDirection == null)
-        return React.createElement(React.Fragment, null);
-    // margin
-    const margin = columnDirection
-        ? { marginTop: spaceGap }
-        : { marginLeft: spaceGap };
-    // Default style
-    if (typeof sx === 'object') {
-        Object.assign(sx, {
-            position: 'fixed',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: columnDirection ? 'column' : 'row',
-            '& > :not(style) + :not(style)': margin
-        });
-    }
-    return React.createElement(Box, { sx: sx, ...rest });
-}

package/lib/mu/FlexBox.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { StackProps } from '@mui/material';
-/**
- * Horizonal box
- * @param props Props
- * @returns Component
- */
-export declare function HBox(props: Omit<StackProps, 'ref'>): JSX.Element;
-/**
- * Vertial box
- * @param props Props
- * @returns Component
- */
-export declare function VBox(props: Omit<StackProps, 'ref'>): JSX.Element;

package/lib/mu/FlexBox.js

@@ -1,18 +0,0 @@
-import { Stack } from '@mui/material';
-import React from 'react';
-/**
- * Horizonal box
- * @param props Props
- * @returns Component
- */
-export function HBox(props) {
-    return React.createElement(Stack, { direction: "row", width: "100%", ...props });
-}
-/**
- * Vertial box
- * @param props Props
- * @returns Component
- */
-export function VBox(props) {
-    return React.createElement(Stack, { direction: "column", ...props });
-}

package/lib/mu/GridDataFormat.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { GridColumnRenderProps, GridDataType } from '../components/GridColumn';
-/**
- * Grid data format
- * @param data Input data
- * @param type Data type
- * @param renderProps Render props
- * @returns Result
- */
-export declare function GridDataFormat(data: unknown, type: GridDataType, renderProps?: GridColumnRenderProps): React.ReactNode;

package/lib/mu/GridDataFormat.js

@@ -1,43 +0,0 @@
-import { DateUtils, NumberUtils } from '@etsoo/shared';
-import React from 'react';
-import { DateText } from './texts/DateText';
-import { GridDataType } from '../components/GridColumn';
-/**
- * Grid data format
- * @param data Input data
- * @param type Data type
- * @param renderProps Render props
- * @returns Result
- */
-export function GridDataFormat(data, type, renderProps) {
-    // Null
-    if (data == null)
-        return undefined;
-    // For date time
-    // Conversion if necessary
-    if (type === GridDataType.Date || type === GridDataType.DateTime) {
-        const dateValue = data instanceof Date
-            ? data
-            : typeof data === 'number' || typeof data === 'string'
-                ? new Date(data)
-                : undefined;
-        if (dateValue == null)
-            return undefined;
-        const option = type === GridDataType.DateTime ? 'ds' : 'd';
-        const nearDays = renderProps === null || renderProps === void 0 ? void 0 : renderProps.nearDays;
-        if (nearDays != null) {
-            return (React.createElement(DateText, { value: dateValue, locale: renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, timeZone: renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone, options: option, nearDays: nearDays }));
-        }
-        return DateUtils.format(dateValue, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, option, renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone);
-    }
-    // For numbers
-    if (typeof data === 'number') {
-        if (type === GridDataType.Money || type === GridDataType.IntMoney)
-            return NumberUtils.formatMoney(data, renderProps === null || renderProps === void 0 ? void 0 : renderProps.currency, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, type === GridDataType.IntMoney, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
-        else
-            return NumberUtils.format(data, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
-    }
-    if (typeof data === 'string')
-        return data;
-    return `${data}`;
-}

package/lib/mu/GridMethodRef.d.ts

@@ -1,11 +0,0 @@
-import { GridLoaderStates } from '../components/GridLoader';
-/**
- * Grid method ref
- */
-export interface GridMethodRef {
-    /**
-     * Reset
-     * @param add Additional data
-     */
-    reset(add?: Partial<GridLoaderStates<unknown>>): void;
-}

package/lib/mu/IconButtonLink.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { IconButtonProps } from '@mui/material';
-/**
- * IconButtonLink props
- */
-export declare type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
-    /**
-     * To href
-     */
-    href: string;
-};
-/**
- * IconButtonLink
- * @param props Props
- * @returns Component
- */
-export declare function IconButtonLink(props: IconButtonLinkProps): JSX.Element;

package/lib/mu/IconButtonLink.js

@@ -1,16 +0,0 @@
-import { IconButton } from '@mui/material';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-/**
- * IconButtonLink
- * @param props Props
- * @returns Component
- */
-export function IconButtonLink(props) {
-    // Destruct
-    const { href, ...rest } = props;
-    // Navigate
-    const navigate = useNavigate();
-    // Layout
-    return React.createElement(IconButton, { ...rest, onClick: () => navigate(href) });
-}

package/lib/mu/InputField.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
-/**
- * Input field props
- */
-export declare type InputFieldProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-};
-/**
- * Input field
- * @param props Props
- * @returns Component
- */
-export declare function InputField(props: InputFieldProps): JSX.Element;

package/lib/mu/InputField.js

@@ -1,39 +0,0 @@
-import { TextField } from '@mui/material';
-import React from 'react';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-import { MUGlobal } from './MUGlobal';
-/**
- * Input field
- * @param props Props
- * @returns Component
- */
-export function InputField(props) {
-    // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
-    // Shrink
-    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    const isMounted = React.useRef(true);
-    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
-        ? useDelayedExecutor(onChange, changeDelay)
-        : undefined;
-    const onChangeEx = (event) => {
-        if (onChange == null)
-            return;
-        if (changeDelay == null || changeDelay < 1) {
-            onChange(event);
-            return;
-        }
-        delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
-    };
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
-        };
-    }, []);
-    // Layout
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
-}

package/lib/mu/ItemList.d.ts

@@ -1,56 +0,0 @@
-import React from 'react';
-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 declare 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>): JSX.Element;

package/lib/mu/ItemList.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Dialog, DialogTitle, List, ListItemText, DialogContent, Button, ListItemButton } from '@mui/material';
-import { DataTypes } from '@etsoo/shared';
-/**
- * Item list component
- * @param props Properties
- */
-export function ItemList(props) {
-    var _a;
-    //  properties destructure
-    const { className, color = 'primary', items, idField = 'id', labelField = 'label', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
-    // Get label
-    const getLabel = (item) => {
-        var _a;
-        if (typeof labelField === 'function') {
-            return labelField(item);
-        }
-        else {
-            return (_a = DataTypes.convert(item[labelField], 'string')) !== null && _a !== void 0 ? _a : '';
-        }
-    };
-    // Dialog open or not state
-    const [open, setOpen] = React.useState(false);
-    // Default state
-    const defaultItem = (_a = items.find((item) => item[idField] === selectedValue)) !== null && _a !== void 0 ? _a : 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) => {
-        // Update the current item
-        setCurrentItem(item);
-        // Close the dialog
-        setOpen(false);
-        // Emit close event
-        if (onClose) {
-            onClose(item, true);
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, getLabel(currentItem)),
-        React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler },
-            React.createElement(DialogTitle, { sx: { minWidth: '200px' }, id: "dialog-title" }, title || ''),
-            React.createElement(DialogContent, null,
-                React.createElement(List, null, items.map((item) => {
-                    const id = item[idField];
-                    return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField], onClick: () => closeItemHandler(item) },
-                        React.createElement(ListItemText, null, getLabel(item))));
-                }))))));
-}

package/lib/mu/ListItemRightIcon.d.ts

@@ -1,4 +0,0 @@
-/**
- * List item right icon component
- */
-export declare const ListItemRightIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/mu/ListItemRightIcon.js

@@ -1,8 +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/lib/mu/ListMoreDisplay.d.ts

@@ -1,35 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { CardProps } from '@mui/material';
-import React from 'react';
-import { GridData, GridLoader } from '../components/GridLoader';
-/**
- * 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;
-}
-/**
- * ListMoreDisplay
- * @param props Props
- * @returns Component
- */
-export declare function ListMoreDisplay<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListMoreDisplayProps<T, F>): JSX.Element;

package/lib/mu/ListMoreDisplay.js

@@ -1,99 +0,0 @@
-import { Card, CardActions, CardContent, CardHeader, CircularProgress } from '@mui/material';
-import React from 'react';
-import { globalApp } from '../app/ReactApp';
-import { GridDataGet } from '../components/GridLoader';
-import { LoadingButton } from './LoadingButton';
-/**
- * ListMoreDisplay
- * @param props Props
- * @returns Component
- */
-export function ListMoreDisplay(props) {
-    // 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({
-        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, newStates) => {
-        return { ...currentStates, ...newStates };
-    }, { completed: false });
-    // Load data
-    const loadDataLocal = async (reset = 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 = {
-            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) => {
-        // 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.createElement(React.Fragment, null,
-        headerRenderer && headerRenderer(reset),
-        React.createElement(Card, { ...rest },
-            React.createElement(CardHeader, { title: headerTitle }),
-            React.createElement(CardContent, { sx: {
-                    paddingTop: 0,
-                    paddingBottom: states.completed ? 0 : 'inherit'
-                } }, states.items == null ? (React.createElement(CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index)))),
-            !states.completed && (React.createElement(CardActions, { sx: { justifyContent: 'flex-end' } },
-                React.createElement(LoadingButton, { onClick: async () => await loadDataLocal() }, moreLabel))))));
-}

package/lib/mu/LoadingButton.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps, CircularProgressProps } from '@mui/material';
-/**
- * Loading button props
- */
-export declare type LoadingButtonProps = ButtonProps & {
-    /**
-     * Loading icon props
-     */
-    loadingIconProps?: CircularProgressProps;
-};
-/**
- * Loading button
- * @param props Props
- */
-export declare function LoadingButton(props: LoadingButtonProps): JSX.Element;

package/lib/mu/LoadingButton.js

@@ -1,41 +0,0 @@
-import { Button, CircularProgress } from '@mui/material';
-import React from 'react';
-/**
- * Loading button
- * @param props Props
- */
-export function LoadingButton(props) {
-    var _a;
-    // Destruct
-    const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
-    // Default size
-    (_a = loadingIconProps.size) !== null && _a !== void 0 ? _a : (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 ? (React.createElement(CircularProgress, { ...loadingIconProps })) : (endIcon);
-    // Check if the component is mounted
-    const isMounted = React.useRef(true);
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    // Layout
-    return (React.createElement(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 }));
-}