@etsoo/materialui 1.0.1

package/src/FabBox.tsx

@@ -0,0 +1,51 @@
+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/FlexBox.tsx

@@ -0,0 +1,20 @@
+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/GridDataFormat.tsx

@@ -0,0 +1,77 @@
+import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
+import { DateUtils, NumberUtils } from '@etsoo/shared';
+import React from 'react';
+import { DateText } from './texts/DateText';
+
+/**
+ * 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/IconButtonLink.tsx

@@ -0,0 +1,29 @@
+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/InputField.tsx

@@ -0,0 +1,82 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { TextField, TextFieldProps } from '@mui/material';
+import React from 'react';
+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}
+        />
+    );
+}

package/src/ItemList.tsx

@@ -0,0 +1,204 @@
+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/ListItemRightIcon.tsx

@@ -0,0 +1,9 @@
+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/ListMoreDisplay.tsx

@@ -0,0 +1,205 @@
+import { DataTypes } from '@etsoo/shared';
+import {
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    CardProps,
+    CircularProgress
+} from '@mui/material';
+import React from 'react';
+import {
+    GridData,
+    GridDataGet,
+    GridLoadDataProps,
+    GridLoader,
+    GridLoaderStates
+} from '@etsoo/react';
+import { LoadingButton } from './LoadingButton';
+import { globalApp } from './app/ReactApp';
+
+/**
+ * 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>
+    );
+}