@etsoo/materialui 1.0.1

package/lib/ListMoreDisplay.js

@@ -0,0 +1,99 @@
+import { Card, CardActions, CardContent, CardHeader, CircularProgress } from '@mui/material';
+import React from 'react';
+import { GridDataGet } from '@etsoo/react';
+import { LoadingButton } from './LoadingButton';
+import { globalApp } from './app/ReactApp';
+/**
+ * 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/LoadingButton.d.ts

@@ -0,0 +1,16 @@
+/// <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/LoadingButton.js

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

package/lib/MUGlobal.d.ts

@@ -0,0 +1,102 @@
+/// <reference types="react" />
+import { ListItemButtonProps, Theme } from '@mui/material';
+/**
+ * Mouse event handler with data
+ */
+export declare type MouseEventWithDataHandler<T> = (event: React.MouseEvent<HTMLDivElement>, data: T) => void;
+/**
+ * MUGlobal for global configurations
+ */
+export declare class MUGlobal {
+    /**
+     * Search field shrink
+     */
+    static searchFieldShrink: boolean;
+    /**
+     * Search field size
+     */
+    static searchFieldSize: 'small' | 'medium';
+    /**
+     * Search field variant
+     */
+    static searchFieldVariant: 'standard' | 'filled' | 'outlined';
+    /**
+     * Input field shrink
+     */
+    static inputFieldShrink: boolean;
+    /**
+     * Input field size
+     */
+    static inputFieldSize: 'small' | 'medium';
+    /**
+     * Input field variant
+     */
+    static inputFieldVariant: 'standard' | 'filled' | 'outlined';
+    /**
+     * TextField variant
+     */
+    static textFieldVariant: 'standard' | 'filled' | 'outlined';
+    /**
+     * Page default paddings
+     */
+    static pagePaddings: {
+        xs: number;
+        sm: number;
+    };
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path: string, href: string): ListItemButtonProps<"div", {}>;
+    /**
+     * Update object number properties with half of it
+     * @param input Input object
+     * @returns Updated object
+     */
+    static half(input: object): {};
+    /**
+     * Reverse object number properties, like 5 to -5
+     * @param input Input object
+     * @returns Updated object
+     */
+    static reverse(input: object): {};
+    /**
+     * 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): {};
+    /**
+     * 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): {};
+    /**
+     * Break points defined
+     */
+    static breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+    /**
+     * 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): number;
+    /**
+     * 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): {};
+}

package/lib/MUGlobal.js

@@ -0,0 +1,184 @@
+import { NumberUtils } from '@etsoo/shared';
+import { RLink } from './RLink';
+/**
+ * MUGlobal for global configurations
+ */
+export class MUGlobal {
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path, href) {
+        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
+                    }
+                })
+            }
+        };
+    }
+    /**
+     * Update object number properties with half of it
+     * @param input Input object
+     * @returns Updated object
+     */
+    static half(input) {
+        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) {
+        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, adjust, field) {
+        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, adjust, updateFunc) {
+        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;
+    }
+    /**
+     * 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, 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);
+                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) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === 'number') {
+                Reflect.set(newObj, key, updateFunc(value));
+            }
+        });
+        return newObj;
+    }
+}
+/**
+ * Search field shrink
+ */
+MUGlobal.searchFieldShrink = true;
+/**
+ * Search field size
+ */
+MUGlobal.searchFieldSize = 'small';
+/**
+ * Search field variant
+ */
+MUGlobal.searchFieldVariant = 'outlined';
+/**
+ * Input field shrink
+ */
+MUGlobal.inputFieldShrink = true;
+/**
+ * Input field size
+ */
+MUGlobal.inputFieldSize = 'medium';
+/**
+ * Input field variant
+ */
+MUGlobal.inputFieldVariant = 'outlined';
+/**
+ * TextField variant
+ */
+MUGlobal.textFieldVariant = 'filled';
+/**
+ * Page default paddings
+ */
+MUGlobal.pagePaddings = { xs: 2, sm: 3 };
+/**
+ * Break points defined
+ */
+MUGlobal.breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];

package/lib/MaskInput.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+/**
+ * Mask input props
+ */
+export declare 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 declare function MaskInput<T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions>(props: MaskInputProps<T>): JSX.Element;

package/lib/MaskInput.js

@@ -0,0 +1,43 @@
+import { TextField } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+import { useIMask } from 'react-imask';
+/**
+ * Mask input
+ * https://imask.js.org/
+ * @param props Props
+ * @returns Component
+ */
+export function MaskInput(props) {
+    // 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 !== null && defaultValue !== void 0 ? 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 (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
+}

package/lib/MobileListItemRenderer.d.ts

@@ -0,0 +1,17 @@
+import { ListItemReact } from '@etsoo/react';
+import React from 'react';
+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 declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>, renderer: (data: T) => [
+    string,
+    string | undefined,
+    React.ReactNode | (ListItemReact | boolean)[],
+    React.ReactNode,
+    React.ReactNode?
+]): JSX.Element;

package/lib/MobileListItemRenderer.js

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { MoreFab } from './MoreFab';
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+export function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
+    // Loading
+    if (data == null)
+        return React.createElement(LinearProgress, null);
+    // Elements
+    const [title, subheader, actions, children, cardActions] = renderer(data);
+    return (React.createElement(Card, { sx: {
+            height: itemHeight,
+            ...margins
+        } },
+        React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, 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' } }),
+        React.createElement(CardContent, { sx: {
+                paddingTop: 0,
+                paddingBottom: cardActions == null
+                    ? Reflect.get(margins, 'marginBottom')
+                    : 0
+            } }, children),
+        cardActions));
+}

package/lib/MoreFab.d.ts

@@ -0,0 +1,45 @@
+import { CustomFabProps } from './CustomFabProps';
+import React from 'react';
+import { PaperProps, PopoverOrigin } from '@mui/material';
+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;
+}
+/**
+ * More fab
+ * @returns Component
+ */
+export declare function MoreFab(props: MoreFabProps): JSX.Element;