@etsoo/materialui 1.0.1

package/src/DataGridRenderers.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { CircularProgress } from '@mui/material';
+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';
+import { GridCellRendererProps, GridDataType } from '@etsoo/react';
+
+/**
+ * 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/DialogButton.tsx

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

@@ -0,0 +1,344 @@
+import {
+    DndContext,
+    DragEndEvent,
+    DragStartEvent,
+    UniqueIdentifier
+} from '@dnd-kit/core';
+import {
+    SortableContext,
+    useSortable,
+    verticalListSortingStrategy
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DataTypes } from '@etsoo/shared';
+import { Theme, useTheme } from '@mui/material';
+import React, { CSSProperties } from 'react';
+
+function SortableItem(props: {
+    id: UniqueIdentifier;
+    itemRenderer: (
+        nodeRef: React.ComponentProps<any>,
+        actionNodeRef: React.ComponentProps<any>
+    ) => React.ReactElement;
+    style?: React.CSSProperties;
+}) {
+    // Destruct
+    const { id, itemRenderer, style = {} } = props;
+
+    // Use sortable
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        setActivatorNodeRef
+    } = useSortable({ id });
+
+    const allStyle = {
+        ...style,
+        transform: CSS.Transform.toString(transform),
+        transition
+    };
+
+    const nodeRef = {
+        style: allStyle,
+        ref: setNodeRef,
+        ...attributes
+    };
+
+    const actionNodeRef = {
+        ...listeners,
+        ref: setActivatorNodeRef
+    };
+
+    return itemRenderer(nodeRef, actionNodeRef);
+}
+
+/**
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export const DnDItemStyle = (
+    index: number,
+    isDragging: boolean,
+    theme: Theme
+) => ({
+    padding: theme.spacing(1),
+    zIndex: isDragging ? 1 : 'auto',
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+        ? theme.palette.grey[100]
+        : theme.palette.grey[50]
+});
+
+/**
+ * DnD list forward ref
+ */
+export interface DnDListRef<D extends object> {
+    /**
+     * Add item
+     * @param item New item
+     */
+    addItem(item: D): void;
+
+    /**
+     * Add items
+     * @param items items
+     */
+    addItems(items: D[]): void;
+
+    /**
+     * Delete item
+     * @param index Item index
+     */
+    deleteItem(index: number): void;
+
+    /**
+     * Edit item
+     * @param newItem New item
+     * @param index Index
+     */
+    editItem(newItem: D, index: number): boolean;
+}
+
+/**
+ * DnD sortable list properties
+ */
+export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+
+    /**
+     * Item renderer
+     */
+    itemRenderer: (
+        item: D,
+        index: number,
+        nodeRef: React.ComponentProps<any>,
+        actionNodeRef: React.ComponentProps<any>
+    ) => React.ReactElement;
+
+    /**
+     * List items
+     */
+    items: D[];
+
+    /**
+     * Unique key field
+     */
+    keyField: K;
+
+    /**
+     * Label field
+     */
+    labelField: K;
+
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<DnDListRef<D>>;
+
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+}
+
+/**
+ * DnD (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList<
+    D extends { id: UniqueIdentifier },
+    K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<
+        D,
+        UniqueIdentifier
+    >
+>(props: DnDListPros<D, K>) {
+    // Destruct
+    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } =
+        props;
+
+    let getItemStyle = props.getItemStyle;
+    if (getItemStyle == null) {
+        // Theme
+        const theme = useTheme();
+        getItemStyle = (index, isDragging) =>
+            DnDItemStyle(index, isDragging, theme);
+    }
+
+    // States
+    const [items, setItems] = React.useState<D[]>([]);
+    const [activeId, setActiveId] = React.useState<UniqueIdentifier>();
+
+    const changeItems = (newItems: D[]) => {
+        // Possible to alter items with the handler
+        if (onChange) onChange(newItems);
+
+        // Update state
+        setItems(newItems);
+    };
+
+    // Drag event handlers
+    function handleDragStart(event: DragStartEvent) {
+        const { active } = event;
+        setActiveId(active.id);
+    }
+
+    function handleDragEnd(event: DragEndEvent) {
+        const { active, over } = event;
+
+        if (over && active.id !== over.id) {
+            // Indices
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over.id);
+
+            // Clone
+            const newItems = [...items];
+
+            // Removed item
+            const [removed] = newItems.splice(oldIndex, 1);
+
+            // Insert to the destination index
+            newItems.splice(newIndex, 0, removed);
+
+            changeItems(newItems);
+
+            // Drag end handler
+            if (onDragEnd) onDragEnd(newItems);
+        }
+
+        setActiveId(undefined);
+    }
+
+    // Methods
+    React.useImperativeHandle(
+        mRef,
+        () => {
+            return {
+                addItem(newItem: D) {
+                    // Existence check
+                    if (
+                        items.some(
+                            (item) => item[labelField] === newItem[labelField]
+                        )
+                    ) {
+                        return false;
+                    }
+
+                    // Clone
+                    const newItems = [newItem, ...items];
+
+                    // Update the state
+                    changeItems(newItems);
+
+                    return true;
+                },
+
+                addItems(inputItems: D[]) {
+                    // Clone
+                    const newItems = [...items];
+
+                    // Insert items
+                    inputItems.forEach((newItem) => {
+                        // Existence check
+                        if (
+                            newItems.some(
+                                (item) =>
+                                    item[labelField] === newItem[labelField]
+                            )
+                        ) {
+                            return;
+                        }
+
+                        newItems.push(newItem);
+                    });
+
+                    // Update the state
+                    changeItems(newItems);
+
+                    return newItems.length - items.length;
+                },
+
+                editItem(newItem: D, index: number) {
+                    // Existence check
+                    const newIndex = items.findIndex(
+                        (item) => item[labelField] === newItem[labelField]
+                    );
+                    if (newIndex >= 0 && newIndex !== index) {
+                        // Label field is the same with a different item
+                        return false;
+                    }
+
+                    // Clone
+                    const newItems = [...items];
+
+                    // Remove the item
+                    newItems.splice(index, 1, newItem);
+
+                    // Update the state
+                    changeItems(newItems);
+
+                    return true;
+                },
+
+                deleteItem(index: number) {
+                    // Clone
+                    const newItems = [...items];
+
+                    // Remove the item
+                    newItems.splice(index, 1);
+
+                    // Update the state
+                    changeItems(newItems);
+                }
+            };
+        },
+        [items]
+    );
+
+    React.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+
+    return (
+        <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <SortableContext
+                items={items}
+                strategy={verticalListSortingStrategy}
+            >
+                {items.map((item, index) => {
+                    const id = item[keyField] as unknown as UniqueIdentifier;
+                    return (
+                        <SortableItem
+                            id={id}
+                            key={id}
+                            style={getItemStyle!(index, id === activeId)}
+                            itemRenderer={(nodeRef, actionNodeRef) =>
+                                itemRenderer(
+                                    item,
+                                    index,
+                                    nodeRef,
+                                    actionNodeRef
+                                )
+                            }
+                        />
+                    );
+                })}
+            </SortableContext>
+        </DndContext>
+    );
+}

package/src/DraggablePaperComponent.tsx

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

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