@etsoo/materialui 1.0.1

package/lib/DnDList.js

@@ -0,0 +1,153 @@
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useTheme } from '@mui/material';
+import React from 'react';
+function SortableItem(props) {
+    // 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, isDragging, 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 (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList(props) {
+    // 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([]);
+    const [activeId, setActiveId] = React.useState();
+    const changeItems = (newItems) => {
+        // Possible to alter items with the handler
+        if (onChange)
+            onChange(newItems);
+        // Update state
+        setItems(newItems);
+    };
+    // Drag event handlers
+    function handleDragStart(event) {
+        const { active } = event;
+        setActiveId(active.id);
+    }
+    function handleDragEnd(event) {
+        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) {
+                // 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) {
+                // 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, index) {
+                // 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) {
+                // 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 (React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
+            const id = item[keyField];
+            return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
+        }))));
+}

package/lib/DraggablePaperComponent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaperProps } from '@mui/material';
+/**
+ * Draggable paper component
+ * @param props Props
+ * @returns Component
+ */
+export declare function DraggablePaperComponent(props: PaperProps): JSX.Element;

package/lib/DraggablePaperComponent.js

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

package/lib/EmailInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+/**
+ * Email input props
+ */
+export declare type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
+/**
+ * Email input
+ * @param props Props
+ */
+export declare function EmailInput(props: EmailInputProps): JSX.Element;

package/lib/EmailInput.js

@@ -0,0 +1,15 @@
+import { TextField } from '@mui/material';
+import React from 'react';
+/**
+ * Email input
+ * @param props Props
+ */
+export function EmailInput(props) {
+    var _a;
+    // Destruct
+    const { inputProps = {}, ...rest } = props;
+    // Default max length
+    (_a = inputProps.maxLength) !== null && _a !== void 0 ? _a : (inputProps.maxLength = 128);
+    // Layout
+    return (React.createElement(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest }));
+}

package/lib/FabBox.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+/**
+ * Fabs container box props
+ */
+export declare type FabBoxProps = BoxProps & {
+    /**
+     * Item gap
+     */
+    itemGap?: number;
+    /**
+     * Flex direction, row or column
+     */
+    columnDirection?: boolean;
+};
+/**
+ * Fabs container box
+ * @param props Props
+ * @returns Component
+ */
+export declare function FabBox(props: FabBoxProps): JSX.Element;

package/lib/FabBox.js

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

package/lib/FlexBox.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StackProps } from '@mui/material';
+/**
+ * Horizonal box
+ * @param props Props
+ * @returns Component
+ */
+export declare function HBox(props: Omit<StackProps, 'ref'>): JSX.Element;
+/**
+ * Vertial box
+ * @param props Props
+ * @returns Component
+ */
+export declare function VBox(props: Omit<StackProps, 'ref'>): JSX.Element;

package/lib/FlexBox.js

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

package/lib/GridDataFormat.d.ts

@@ -0,0 +1,10 @@
+import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
+import React from 'react';
+/**
+ * Grid data format
+ * @param data Input data
+ * @param type Data type
+ * @param renderProps Render props
+ * @returns Result
+ */
+export declare function GridDataFormat(data: unknown, type: GridDataType, renderProps?: GridColumnRenderProps): React.ReactNode;

package/lib/GridDataFormat.js

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

package/lib/IconButtonLink.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+/**
+ * IconButtonLink props
+ */
+export declare type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
+    /**
+     * To href
+     */
+    href: string;
+};
+/**
+ * IconButtonLink
+ * @param props Props
+ * @returns Component
+ */
+export declare function IconButtonLink(props: IconButtonLinkProps): JSX.Element;

package/lib/IconButtonLink.js

@@ -0,0 +1,16 @@
+import { IconButton } from '@mui/material';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+/**
+ * IconButtonLink
+ * @param props Props
+ * @returns Component
+ */
+export function IconButtonLink(props) {
+    // Destruct
+    const { href, ...rest } = props;
+    // Navigate
+    const navigate = useNavigate();
+    // Layout
+    return React.createElement(IconButton, { ...rest, onClick: () => navigate(href) });
+}

package/lib/InputField.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+/**
+ * Input field props
+ */
+export declare 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 declare function InputField(props: InputFieldProps): JSX.Element;

package/lib/InputField.js

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

package/lib/ItemList.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+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 declare 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>): JSX.Element;

package/lib/ItemList.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Dialog, DialogTitle, List, ListItemText, DialogContent, Button, ListItemButton } from '@mui/material';
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Item list component
+ * @param props Properties
+ */
+export function ItemList(props) {
+    var _a;
+    //  properties destructure
+    const { className, color = 'primary', items, idField = 'id', labelField = 'label', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
+    // Get label
+    const getLabel = (item) => {
+        var _a;
+        if (typeof labelField === 'function') {
+            return labelField(item);
+        }
+        else {
+            return (_a = DataTypes.convert(item[labelField], 'string')) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    // Dialog open or not state
+    const [open, setOpen] = React.useState(false);
+    // Default state
+    const defaultItem = (_a = items.find((item) => item[idField] === selectedValue)) !== null && _a !== void 0 ? _a : 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) => {
+        // Update the current item
+        setCurrentItem(item);
+        // Close the dialog
+        setOpen(false);
+        // Emit close event
+        if (onClose) {
+            onClose(item, true);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, getLabel(currentItem)),
+        React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler },
+            React.createElement(DialogTitle, { sx: { minWidth: '200px' }, id: "dialog-title" }, title || ''),
+            React.createElement(DialogContent, null,
+                React.createElement(List, null, items.map((item) => {
+                    const id = item[idField];
+                    return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField], onClick: () => closeItemHandler(item) },
+                        React.createElement(ListItemText, null, getLabel(item))));
+                }))))));
+}

package/lib/ListItemRightIcon.d.ts

@@ -0,0 +1,4 @@
+/**
+ * List item right icon component
+ */
+export declare const ListItemRightIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/ListItemRightIcon.js

@@ -0,0 +1,8 @@
+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/lib/ListMoreDisplay.d.ts

@@ -0,0 +1,35 @@
+import { DataTypes } from '@etsoo/shared';
+import { CardProps } from '@mui/material';
+import React from 'react';
+import { GridData, GridLoader } from '@etsoo/react';
+/**
+ * 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;
+}
+/**
+ * ListMoreDisplay
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMoreDisplay<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListMoreDisplayProps<T, F>): JSX.Element;