@etsoo/react 1.5.80 → 1.5.83

package/src/mu/DataGridRenderers.tsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { CircularProgress } from '@mui/material';
-import { GridCellRendererProps, GridDataType } from '../components/GridColumn';
-import { DateUtils, NumberUtils } from '@etsoo/shared';
-import CheckIcon from '@mui/icons-material/Check';
-import ClearIcon from '@mui/icons-material/Clear';
-import { DataGridExFooterItemRendererProps } from './DataGridEx';
-import { DateText } from './texts/DateText';
-
-/**
- * Data grid renderers
- */
-export namespace DataGridRenderers {
-    /**
-     * Default cell renderer
-     * @param param Props
-     * @returns Component
-     */
-    export function defaultCellRenderer<T extends Record<string, any>>({
-        cellProps,
-        data,
-        field,
-        formattedValue,
-        columnIndex,
-        type,
-        renderProps
-    }: GridCellRendererProps<T>): React.ReactNode {
-        // Is loading
-        if (data == null) {
-            // First column, show loading indicator
-            if (columnIndex === 0) return <CircularProgress size={15} />;
-
-            // Others return undefined
-            return undefined;
-        }
-
-        // No formatted value and data field
-        if (formattedValue == null && field == null) return undefined;
-
-        // Cell value
-        const value = formattedValue ?? data[field!];
-        if (value == null) return undefined;
-
-        // For date time
-        // Conversion if necessary
-        if (type === GridDataType.Date || type === GridDataType.DateTime) {
-            const dateValue = value instanceof Date ? value : new Date(value);
-
-            const option = type === GridDataType.DateTime ? 'ds' : 'd';
-
-            const nearDays = renderProps?.nearDays;
-            if (nearDays != null) {
-                return (
-                    <DateText
-                        value={dateValue}
-                        locale={renderProps?.culture}
-                        timeZone={renderProps?.timeZone}
-                        options={option}
-                        nearDays={nearDays}
-                    />
-                );
-            }
-
-            return DateUtils.format(
-                dateValue,
-                renderProps?.culture,
-                option,
-                renderProps?.timeZone
-            );
-        }
-
-        // For numbers
-        if (typeof value === 'number') {
-            if (type === GridDataType.Money || type === GridDataType.IntMoney)
-                return NumberUtils.formatMoney(
-                    value,
-                    renderProps?.currency,
-                    renderProps?.culture,
-                    type === GridDataType.IntMoney,
-                    renderProps?.numberFormatOptions
-                );
-            else
-                return NumberUtils.format(
-                    value,
-                    renderProps?.culture,
-                    renderProps?.numberFormatOptions
-                );
-        }
-
-        // For boolean
-        if (typeof value === 'boolean') {
-            // Add style
-            if ('align' in cellProps) {
-                cellProps.sx = {
-                    paddingTop: '12px!important',
-                    paddingBottom: '6px!important'
-                };
-            } else {
-                cellProps.sx = {
-                    paddingTop: '16px!important',
-                    paddingBottom: '8px!important'
-                };
-            }
-
-            if (value) return <CheckIcon fontSize="small" />;
-            else return <ClearIcon fontSize="small" color="warning" />;
-        }
-
-        // To string
-        return new String(value);
-    }
-
-    /**
-     * Default footer item renderer
-     * @param rows Rows
-     * @param props Renderer props
-     * @param location Renderer location (column index)
-     * @returns Component
-     */
-    export function defaultFooterItemRenderer<T extends object>(
-        _rows: T[],
-        { index, states, checkable }: DataGridExFooterItemRendererProps<T>,
-        location: number = 0
-    ) {
-        const { selectedItems, loadedItems, hasNextPage } = states;
-
-        if (index === location) {
-            if (checkable) {
-                return [
-                    selectedItems.length,
-                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
-                ].join(' / ');
-            } else {
-                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
-            }
-        }
-
-        return undefined;
-    }
-}

package/src/mu/DialogButton.tsx

@@ -1,163 +0,0 @@
-import {
-    Breakpoint,
-    Button,
-    ButtonProps,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    IconButton
-} from '@mui/material';
-import React from 'react';
-import { Labels } from '../app/Labels';
-
-export interface DialogButtonProps extends ButtonProps {
-    /**
-     * Button label
-     */
-    buttonLabel?: string;
-
-    /**
-     * Dialog content
-     */
-    content: string;
-
-    /**
-     * Show content in pre component
-     */
-    contentPre?: boolean;
-
-    /**
-     * Default is label
-     */
-    dialogTitle?: string;
-
-    /**
-     * Disable the scroll lock behavior.
-     * @default false
-     */
-    disableScrollLock?: boolean;
-
-    /**
-     * Show fullscreen dialog
-     */
-    fullScreen?: boolean;
-
-    /**
-     * If `true`, the dialog stretches to `maxWidth`.
-     *
-     * Notice that the dialog width grow is limited by the default margin.
-     * @default false
-     */
-    fullWidth?: boolean;
-
-    /**
-     * Other layouts
-     */
-    inputs?: React.ReactNode;
-
-    /**
-     * Max width of the dialog
-     */
-    maxWidth?: Breakpoint | false;
-
-    /**
-     * Icon button
-     */
-    icon?: React.ReactNode;
-}
-
-/**
- * Dialog button
- * @param props Props
- * @returns Component
- */
-export function DialogButton(props: DialogButtonProps) {
-    // Labels shared with NotificationMU
-    const labels = Labels.NotificationMU;
-
-    // Destruct
-    const {
-        buttonLabel = labels.alertOK,
-        children,
-        content,
-        contentPre,
-        dialogTitle,
-        disableScrollLock,
-        fullScreen,
-        fullWidth,
-        icon,
-        inputs,
-        maxWidth,
-        onClick,
-        title,
-        ...rest
-    } = props;
-
-    // Open state
-    const [open, setOpen] = React.useState(false);
-
-    const handleClickOpen = () => {
-        setOpen(true);
-    };
-
-    // Onclick handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
-        // Stop propagation
-        event.stopPropagation();
-        event.preventDefault();
-
-        // Show dialog
-        handleClickOpen();
-
-        // Additional callback
-        if (onClick) onClick(event);
-    };
-
-    // Layout
-    return (
-        <React.Fragment>
-            {icon == null ? (
-                <Button {...rest} title={title} onClick={onClickLocal}>
-                    {children}
-                </Button>
-            ) : (
-                <IconButton
-                    {...rest}
-                    onClick={onClickLocal}
-                    title={title ?? children?.toString()}
-                >
-                    {icon}
-                </IconButton>
-            )}
-
-            <Dialog
-                disableScrollLock={disableScrollLock}
-                fullScreen={fullScreen}
-                fullWidth={fullWidth}
-                maxWidth={maxWidth}
-                open={open}
-                onClose={() => setOpen(false)}
-                onClick={(event) => {
-                    // The dialog will be embeded and the click event will bubble up
-                    // Stop propatation but will also cancel onClose and onBackdropClick event
-                    event.stopPropagation();
-                }}
-            >
-                <DialogTitle>{dialogTitle ?? title ?? children}</DialogTitle>
-                <DialogContent>
-                    <DialogContentText component={contentPre ? 'pre' : 'span'}>
-                        {content}
-                    </DialogContentText>
-                    {inputs}
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => setOpen(false)}>
-                        {buttonLabel}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </React.Fragment>
-    );
-}

package/src/mu/DraggablePaperComponent.tsx

@@ -1,19 +0,0 @@
-import { Paper, PaperProps } from '@mui/material';
-import React from 'react';
-import Draggable from 'react-draggable';
-
-/**
- * Draggable paper component
- * @param props Props
- * @returns Component
- */
-export function DraggablePaperComponent(props: PaperProps) {
-    return (
-        <Draggable
-            handle=".draggable-dialog-title"
-            cancel={'[class*="MuiDialogContent-root"]'}
-        >
-            <Paper {...props} />
-        </Draggable>
-    );
-}

package/src/mu/EmailInput.tsx

@@ -1,24 +0,0 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-
-/**
- * Email input props
- */
-export type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
-
-/**
- * Email input
- * @param props Props
- */
-export function EmailInput(props: EmailInputProps) {
-    // Destruct
-    const { inputProps = {}, ...rest } = props;
-
-    // Default max length
-    inputProps.maxLength ??= 128;
-
-    // Layout
-    return (
-        <TextField type="email" fullWidth inputProps={inputProps} {...rest} />
-    );
-}

package/src/mu/FabBox.tsx

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

package/src/mu/FlexBox.tsx

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

package/src/mu/GridDataFormat.tsx

@@ -1,77 +0,0 @@
-import { DateUtils, NumberUtils } from '@etsoo/shared';
-import React from 'react';
-import { DateText } from './texts/DateText';
-import { GridColumnRenderProps, 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: unknown,
-    type: GridDataType,
-    renderProps?: GridColumnRenderProps
-): React.ReactNode {
-    // 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?.nearDays;
-        if (nearDays != null) {
-            return (
-                <DateText
-                    value={dateValue}
-                    locale={renderProps?.culture}
-                    timeZone={renderProps?.timeZone}
-                    options={option}
-                    nearDays={nearDays}
-                />
-            );
-        }
-
-        return DateUtils.format(
-            dateValue,
-            renderProps?.culture,
-            option,
-            renderProps?.timeZone
-        );
-    }
-
-    // For numbers
-    if (typeof data === 'number') {
-        if (type === GridDataType.Money || type === GridDataType.IntMoney)
-            return NumberUtils.formatMoney(
-                data,
-                renderProps?.currency,
-                renderProps?.culture,
-                type === GridDataType.IntMoney,
-                renderProps?.numberFormatOptions
-            );
-        else
-            return NumberUtils.format(
-                data,
-                renderProps?.culture,
-                renderProps?.numberFormatOptions
-            );
-    }
-
-    if (typeof data === 'string') return data;
-
-    return `${data}`;
-}

package/src/mu/GridMethodRef.ts

@@ -1,12 +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/src/mu/IconButtonLink.tsx

@@ -1,29 +0,0 @@
-import { IconButton, IconButtonProps } from '@mui/material';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-/**
- * IconButtonLink props
- */
-export type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
-    /**
-     * To href
-     */
-    href: string;
-};
-
-/**
- * IconButtonLink
- * @param props Props
- * @returns Component
- */
-export function IconButtonLink(props: IconButtonLinkProps) {
-    // Destruct
-    const { href, ...rest } = props;
-
-    // Navigate
-    const navigate = useNavigate();
-
-    // Layout
-    return <IconButton {...rest} onClick={() => navigate(href)} />;
-}

package/src/mu/InputField.tsx

@@ -1,82 +0,0 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-import { MUGlobal } from './MUGlobal';
-
-/**
- * Input field props
- */
-export 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 function InputField(props: InputFieldProps) {
-    // 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: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        if (onChange == null) return;
-
-        if (changeDelay == null || changeDelay < 1) {
-            onChange(event);
-            return;
-        }
-
-        delayed?.call(undefined, event);
-    };
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed?.clear();
-        };
-    }, []);
-
-    // Layout
-    return (
-        <TextField
-            InputLabelProps={InputLabelProps}
-            InputProps={InputProps}
-            onChange={onChangeEx}
-            size={size}
-            variant={variant}
-            {...rest}
-        />
-    );
-}