@etsoo/materialui 1.4.22 → 1.4.24

package/src/DataGridRenderers.tsx

@@ -1,140 +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';
+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} />;
+  /**
+   * 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;
+      // Others return undefined
+      return undefined;
+    }
 
-        // Cell value
-        const value = formattedValue ?? data[field!];
-        if (value == null) return undefined;
+    // No formatted value and data field
+    if (formattedValue == null && field == 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);
+    // Cell value
+    const value = formattedValue ?? data[field!];
+    if (value == null) return undefined;
 
-            const option = type === GridDataType.DateTime ? 'ds' : 'd';
+    // For date time
+    // Conversion if necessary
+    if (type === GridDataType.Date || type === GridDataType.DateTime) {
+      const dateValue = value instanceof Date ? value : new Date(value);
 
-            const nearDays = renderProps?.nearDays;
-            if (nearDays != null) {
-                return (
-                    <DateText
-                        value={dateValue}
-                        locale={renderProps?.culture}
-                        timeZone={renderProps?.timeZone}
-                        options={option}
-                        nearDays={nearDays}
-                    />
-                );
-            }
+      const option = type === GridDataType.DateTime ? "ds" : "d";
 
-            return DateUtils.format(
-                dateValue,
-                renderProps?.culture,
-                option,
-                renderProps?.timeZone
-            );
-        }
+      const nearDays = renderProps?.nearDays;
+      if (nearDays != null) {
+        return (
+          <DateText
+            value={dateValue}
+            locale={renderProps?.culture}
+            timeZone={renderProps?.timeZone}
+            options={option}
+            nearDays={nearDays}
+          />
+        );
+      }
 
-        // 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
-                );
-        }
+      return DateUtils.format(
+        dateValue,
+        renderProps?.culture,
+        option,
+        renderProps?.timeZone
+      );
+    }
 
-        // 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'
-                };
-            }
+    // 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
+        );
+    }
 
-            if (value) return <CheckIcon fontSize="small" />;
-            else return <ClearIcon fontSize="small" color="warning" />;
-        }
+    // 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"
+        };
+      }
 
-        // To string
-        return new String(value);
+      if (value) return <CheckIcon fontSize="small" />;
+      else return <ClearIcon fontSize="small" color="warning" />;
     }
 
-    /**
-     * 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;
+    // To string
+    return new String(value);
+  }
 
-        if (index === location) {
-            if (checkable) {
-                return [
-                    selectedItems.length,
-                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
-                ].join(' / ');
-            } else {
-                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
-            }
-        }
+  /**
+   * 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;
 
-        return undefined;
+    if (index === location) {
+      if (checkable) {
+        return [
+          selectedItems.length,
+          loadedItems.toLocaleString() + (hasNextPage ? "+" : "")
+        ].join(" / ");
+      } else {
+        return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
+      }
     }
+
+    return undefined;
+  }
 }

package/src/DataTable.tsx

@@ -30,16 +30,6 @@ export type DataTableProps<R extends GridValidRowModel = any> = Omit<
    * @returns Result
    */
   onCellSelection?: (params: DataTableSelectedCellParams) => void | false;
-
-  /**
-   * Toolbar creator
-   * @returns Toolbar
-   */
-  toolbarCreator?: (
-    selectedCellParams: DataTableSelectedCellParams | null,
-    setCellModesModel: React.Dispatch<React.SetStateAction<GridCellModesModel>>,
-    cellModesModel: GridCellModesModel
-  ) => React.ReactElement;
 };
 
 /**
@@ -54,9 +44,9 @@ export function DataTable<R extends GridValidRowModel = any>(
   const {
     localeText = {},
     onCellSelection,
-    toolbarCreator,
     onProcessRowUpdateError = (error) =>
       console.log("onProcessRowUpdateError", error),
+    slotProps,
     ...rest
   } = props;
 
@@ -64,9 +54,6 @@ export function DataTable<R extends GridValidRowModel = any>(
   const { noRows } = globalApp?.getLabels("noRows") ?? {};
   if (noRows && !localeText.noRowsLabel) localeText.noRowsLabel = noRows;
 
-  const [selectedCellParams, setSelectedCellParams] =
-    React.useState<DataTableSelectedCellParams | null>(null);
-
   const [cellModesModel, setCellModesModel] =
     React.useState<GridCellModesModel>({});
 
@@ -92,8 +79,6 @@ export function DataTable<R extends GridValidRowModel = any>(
       if (onCellSelection) {
         if (onCellSelection(params) === false) return;
       }
-
-      setSelectedCellParams(params);
     },
     []
   );
@@ -106,22 +91,8 @@ export function DataTable<R extends GridValidRowModel = any>(
       cellModesModel={cellModesModel}
       onCellModesModelChange={(model) => setCellModesModel(model)}
       onProcessRowUpdateError={onProcessRowUpdateError}
-      slots={{
-        toolbar: toolbarCreator
-          ? ({ selectedCellParams, setCellModesModel, cellModesModel }) =>
-              toolbarCreator(
-                selectedCellParams,
-                setCellModesModel,
-                cellModesModel
-              )
-          : undefined
-      }}
       slotProps={{
-        toolbar: {
-          selectedCellParams,
-          setCellModesModel,
-          cellModesModel
-        },
+        ...slotProps,
         cell: {
           onFocus: handleCellFocus
         }

package/src/DialogButton.tsx

@@ -1,71 +1,71 @@
 import {
-    Breakpoint,
-    Button,
-    ButtonProps,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    IconButton
-} from '@mui/material';
-import React from 'react';
-import { Labels } from './app/Labels';
+  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;
+  /**
+   * 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;
 }
 
 /**
@@ -74,90 +74,88 @@ export interface DialogButtonProps extends ButtonProps {
  * @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>
-    );
+  // 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/EmailInput.tsx

@@ -1,24 +1,22 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
+import { TextField, TextFieldProps } from "@mui/material";
+import React from "react";
 
 /**
  * Email input props
  */
-export type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
+export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
 
 /**
  * Email input
  * @param props Props
  */
 export function EmailInput(props: EmailInputProps) {
-    // Destruct
-    const { inputProps = {}, ...rest } = props;
+  // Destruct
+  const { inputProps = {}, ...rest } = props;
 
-    // Default max length
-    inputProps.maxLength ??= 128;
+  // Default max length
+  inputProps.maxLength ??= 128;
 
-    // Layout
-    return (
-        <TextField type="email" fullWidth inputProps={inputProps} {...rest} />
-    );
+  // Layout
+  return <TextField type="email" fullWidth inputProps={inputProps} {...rest} />;
 }