@etsoo/materialui 1.0.1

package/src/LoadingButton.tsx

@@ -0,0 +1,75 @@
+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/MUGlobal.ts

@@ -0,0 +1,220 @@
+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;
+    }
+}

package/src/MaskInput.tsx

@@ -0,0 +1,107 @@
+import { TextField, TextFieldProps } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+import { useIMask } from 'react-imask';
+
+/**
+ * Mask input props
+ */
+export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
+    TextFieldProps & {
+        /**
+         * Mask props
+         */
+        mask: T;
+
+        /**
+         * Accept hanlder
+         */
+        onAccept?: (
+            value: unknown,
+            maskRef: IMask.InputMask<T>,
+            e?: InputEvent
+        ) => void;
+
+        /**
+         * Complete handler
+         */
+        onComplete?: (
+            value: unknown,
+            maskRef: IMask.InputMask<T>,
+            e?: InputEvent
+        ) => void;
+
+        /**
+         * Is the field read only?
+         */
+        readOnly?: boolean;
+
+        /**
+         * Search case
+         */
+        search?: boolean;
+    };
+
+/**
+ * Mask input
+ * https://imask.js.org/
+ * @param props Props
+ * @returns Component
+ */
+export function MaskInput<
+    T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions
+>(props: MaskInputProps<T>) {
+    // Destruct
+    const {
+        defaultValue,
+        mask,
+        InputLabelProps = {},
+        InputProps = {},
+        onAccept,
+        onComplete,
+        readOnly,
+        search = false,
+        size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
+        value,
+        variant = search
+            ? MUGlobal.searchFieldVariant
+            : MUGlobal.inputFieldVariant,
+        ...rest
+    } = props;
+
+    const { ref, maskRef } = useIMask(mask, {
+        onAccept: (value, maskRef, event) => {
+            if (onAccept) onAccept(value, maskRef, event);
+        },
+        onComplete: (value, maskRef, event) => {
+            if (onComplete) onComplete(value, maskRef, event);
+        }
+    });
+    const localValue = defaultValue ?? value;
+
+    // Shrink
+    InputLabelProps.shrink = search
+        ? MUGlobal.searchFieldShrink
+        : MUGlobal.inputFieldShrink;
+
+    // Read only
+    if (readOnly != null) InputProps.readOnly = readOnly;
+    InputProps.inputRef = ref;
+
+    React.useEffect(() => {
+        if (maskRef.current == null || localValue == null) return;
+        maskRef.current.value = String(localValue);
+        maskRef.current.updateValue();
+    }, [maskRef.current, localValue]);
+
+    // Layout
+    return (
+        <TextField
+            InputLabelProps={InputLabelProps}
+            InputProps={InputProps}
+            size={size}
+            variant={variant}
+            {...rest}
+        />
+    );
+}

package/src/MobileListItemRenderer.tsx

@@ -0,0 +1,79 @@
+import { ListItemReact } from '@etsoo/react';
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { MoreFab } from './MoreFab';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+export function MobileListItemRenderer<T>(
+    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
+    renderer: (
+        data: T
+    ) => [
+        string,
+        string | undefined,
+        React.ReactNode | (ListItemReact | boolean)[],
+        React.ReactNode,
+        React.ReactNode?
+    ]
+) {
+    // Loading
+    if (data == null) return <LinearProgress />;
+
+    // Elements
+    const [title, subheader, actions, children, cardActions] = renderer(data);
+
+    return (
+        <Card
+            sx={{
+                height: itemHeight,
+                ...margins
+            }}
+        >
+            <CardHeader
+                sx={{ paddingBottom: 0.5 }}
+                action={
+                    Array.isArray(actions) ? (
+                        <MoreFab
+                            iconButton
+                            size="small"
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'right'
+                            }}
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right'
+                            }}
+                            actions={actions}
+                        />
+                    ) : (
+                        actions
+                    )
+                }
+                title={title}
+                titleTypographyProps={{ variant: 'body2' }}
+                subheader={subheader}
+                subheaderTypographyProps={{ variant: 'caption' }}
+            />
+            <CardContent
+                sx={{
+                    paddingTop: 0,
+                    paddingBottom:
+                        cardActions == null
+                            ? Reflect.get(margins, 'marginBottom')
+                            : 0
+                }}
+            >
+                {children}
+            </CardContent>
+            {cardActions}
+        </Card>
+    );
+}

package/src/MoreFab.tsx

@@ -0,0 +1,211 @@
+import { CustomFabProps } from './CustomFabProps';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import React from 'react';
+import {
+    Divider,
+    Fab,
+    IconButton,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    PaperProps,
+    PopoverOrigin
+} from '@mui/material';
+import { Link } from 'react-router-dom';
+import { ListItemReact } from '@etsoo/react';
+
+/**
+ * More fab props
+ */
+export interface MoreFabProps extends CustomFabProps {
+    /**
+     * Actions
+     */
+    actions?: (ListItemReact | boolean)[];
+
+    /**
+     * Dray arrow
+     */
+    drawArrow?: boolean;
+
+    /**
+     * Main icon
+     */
+    icon?: React.ReactNode;
+
+    /**
+     * Show as icon button
+     */
+    iconButton?: boolean;
+
+    /**
+     * This is the point on the anchor where the popover's
+     * `anchorEl` will attach to
+     */
+    anchorOrigin?: PopoverOrigin;
+
+    /**
+     * Props applied to the [`Paper`](/api/paper/) element.
+     * @default {}
+     */
+    PaperProps?: Partial<PaperProps>;
+
+    /**
+     * This is the point on the popover which
+     * will attach to the anchor's origin
+     */
+    transformOrigin?: PopoverOrigin;
+}
+
+function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
+    // Actions
+    const actions: ListItemReact[] = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean') return;
+        actions.push(action);
+    });
+    return actions;
+}
+
+/**
+ * More fab
+ * @returns Component
+ */
+export function MoreFab(props: MoreFabProps) {
+    // Destruct
+    const {
+        actions,
+        drawArrow = true,
+        anchorOrigin = {
+            vertical: 'top',
+            horizontal: 'right'
+        },
+        color = 'primary',
+        icon = <MoreHorizIcon />,
+        iconButton = false,
+        PaperProps = drawArrow
+            ? {
+                  elevation: 0,
+                  sx: {
+                      overflow: 'visible',
+                      filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                      mt: -0.4,
+                      '& .MuiAvatar-root': {
+                          width: 32,
+                          height: 32,
+                          ml: -0.5,
+                          mr: 1
+                      },
+                      '&:before': {
+                          content: '""',
+                          display: 'block',
+                          position: 'absolute',
+                          top: 0,
+                          right: 14,
+                          width: 10,
+                          height: 10,
+                          bgcolor: 'background.paper',
+                          transform: 'translateY(-50%) rotate(45deg)',
+                          zIndex: 0
+                      }
+                  }
+              }
+            : undefined,
+        size,
+        title,
+        transformOrigin = {
+            vertical: 'bottom',
+            horizontal: 'right'
+        }
+    } = props;
+
+    // State
+    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
+
+    // Open state
+    const open = Boolean(anchorEl);
+
+    // Handle click
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    // Handle close
+    const handleClose = () => {
+        setAnchorEl(undefined);
+    };
+
+    // No actions
+    if (actions == null || actions.length == 0) return <React.Fragment />;
+
+    // Actions
+    const actionsLocal = getActions(actions);
+
+    // Has any icon
+    const hasIcon = actionsLocal.some((action) => action.icon != null);
+
+    // Main
+    const main = iconButton ? (
+        <IconButton
+            color={color}
+            size={size}
+            title={title}
+            onClick={handleClick}
+        >
+            {icon}
+        </IconButton>
+    ) : (
+        <Fab color={color} size={size} title={title} onClick={handleClick}>
+            {icon}
+        </Fab>
+    );
+
+    return (
+        <React.Fragment>
+            {main}
+            <Menu
+                disableScrollLock={true}
+                anchorEl={anchorEl}
+                anchorOrigin={anchorOrigin}
+                keepMounted
+                transformOrigin={transformOrigin}
+                open={open}
+                onClose={handleClose}
+                PaperProps={PaperProps}
+            >
+                {actionsLocal.map(({ label, icon, action }, index) =>
+                    label === '-' ? (
+                        <Divider key={index} />
+                    ) : (
+                        <MenuItem
+                            key={label}
+                            {...(typeof action === 'string'
+                                ? action.includes('://')
+                                    ? {
+                                          component: 'a',
+                                          href: action,
+                                          target: '_blank'
+                                      }
+                                    : { component: Link, to: action }
+                                : {
+                                      onClick: () => {
+                                          handleClose();
+                                          if (typeof action === 'function')
+                                              action();
+                                      }
+                                  })}
+                        >
+                            {icon != null && (
+                                <ListItemIcon>{icon}</ListItemIcon>
+                            )}
+                            <ListItemText inset={icon == null && hasIcon}>
+                                {label}
+                            </ListItemText>
+                        </MenuItem>
+                    )
+                )}
+            </Menu>
+        </React.Fragment>
+    );
+}