@etsoo/materialui 1.1.39 → 1.1.42

package/src/BridgeCloseButton.tsx

@@ -1,23 +1,23 @@
-import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, BoxProps, IconButton, IconButtonProps } from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
+import { BridgeUtils, IBridgeHost } from "@etsoo/appscript";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, BoxProps, IconButton, IconButtonProps } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * Bridge close button props
  */
 export interface BridgeCloseButtonProps extends IconButtonProps {
-    /**
-     * Box props
-     */
-    boxProps?: BoxProps;
+  /**
+   * Box props
+   */
+  boxProps?: BoxProps;
 
-    /**
-     * Validate the host
-     * @param host Host
-     */
-    validate?(host: IBridgeHost): boolean;
+  /**
+   * Validate the host
+   * @param host Host
+   */
+  validate?(host: IBridgeHost): boolean;
 }
 
 /**
@@ -26,44 +26,42 @@ export interface BridgeCloseButtonProps extends IconButtonProps {
  * @returns Component
  */
 export function BridgeCloseButton(props: BridgeCloseButtonProps) {
-    // Destruct
-    const {
-        boxProps,
-        onClick,
-        title = typeof globalApp === 'undefined'
-            ? 'Close'
-            : globalApp.get('close'),
-        validate,
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    boxProps,
+    onClick,
+    title = globalApp?.get("close") ?? "Close",
+    validate,
+    ...rest
+  } = props;
 
-    // Host
-    const host = BridgeUtils.host;
+  // Host
+  const host = BridgeUtils.host;
 
-    if (
-        host == null ||
-        !host.closable() ||
-        (validate && validate(host) === false)
-    ) {
-        return <React.Fragment />;
-    }
+  if (
+    host == null ||
+    !host.closable() ||
+    (validate && validate(host) === false)
+  ) {
+    return <React.Fragment />;
+  }
 
-    // Click handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) onClick(event);
-        host.exit();
-    };
+  // Click handler
+  const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+    host.exit();
+  };
 
-    return (
-        <Box {...boxProps}>
-            <IconButton
-                aria-label="close"
-                onClick={onClickLocal}
-                title={title}
-                {...rest}
-            >
-                <CloseIcon />
-            </IconButton>
-        </Box>
-    );
+  return (
+    <Box {...boxProps}>
+      <IconButton
+        aria-label="close"
+        onClick={onClickLocal}
+        title={title}
+        {...rest}
+      >
+        <CloseIcon />
+      </IconButton>
+    </Box>
+  );
 }

package/src/DataSteps.tsx

@@ -1,57 +1,57 @@
 import {
-    Button,
-    IconButton,
-    InputAdornment,
-    TextField,
-    TextFieldProps
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
-import CheckIcon from '@mui/icons-material/Check';
-import StartIcon from '@mui/icons-material/Start';
-import { InputDialogProps } from '@etsoo/react';
-import React from 'react';
-import { HBox } from './FlexBox';
-import { globalApp } from './app/ReactApp';
-import { MUGlobal } from './MUGlobal';
+  Button,
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
+import CheckIcon from "@mui/icons-material/Check";
+import StartIcon from "@mui/icons-material/Start";
+import { InputDialogProps } from "@etsoo/react";
+import React from "react";
+import { HBox } from "./FlexBox";
+import { globalApp } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Data step
  */
-export type DataStep = Omit<InputDialogProps, 'callback'> & {
-    /**
-     * Callback
-     */
-    callback: (form: HTMLFormElement) => boolean | void;
+export type DataStep = Omit<InputDialogProps, "callback"> & {
+  /**
+   * Callback
+   */
+  callback: (form: HTMLFormElement) => boolean | void;
 };
 
 /**
  * Data collecting steps component props
  */
 export type DataStepsProps<T extends object> = Omit<
-    TextFieldProps,
-    'InputProps' | 'onClick'
+  TextFieldProps,
+  "InputProps" | "onClick"
 > & {
-    /**
-     * JSON value
-     */
-    jsonValue: T;
-
-    /**
-     * Value formatter
-     */
-    valueFormatter?: (data: T) => string;
-
-    /**
-     * Steps
-     */
-    steps: (index: number, data: T) => [DataStep, boolean];
-
-    /**
-     * On value change handler
-     */
-    onValueChange?: (value: T) => void;
+  /**
+   * JSON value
+   */
+  jsonValue: T;
+
+  /**
+   * Value formatter
+   */
+  valueFormatter?: (data: T) => string;
+
+  /**
+   * Steps
+   */
+  steps: (index: number, data: T) => [DataStep, boolean];
+
+  /**
+   * On value change handler
+   */
+  onValueChange?: (value: T) => void;
 };
 
 /**
@@ -60,147 +60,150 @@ export type DataStepsProps<T extends object> = Omit<
  * @returns Component
  */
 export function DataSteps<T extends object>(props: DataStepsProps<T>) {
-    // App
-    const app = globalApp;
-
-    // Labels
-    const labels = app.getLabels('close', 'nextStep', 'previousStep', 'submit');
-
-    // Destruct
-    const {
-        InputLabelProps = {},
-        jsonValue,
-        valueFormatter = (_data) => '...',
-        onValueChange,
-        steps,
-        value = '',
-        ...rest
-    } = props;
-
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
-    // Current index
-    const indexRef = React.useRef<number>(-1);
-
-    // Current Json data
-    const jsonRef = React.useRef<T>(jsonValue);
-
-    // Ignore empty value case
-    if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
-        jsonRef.current = jsonValue;
-
-    // Current value
-    const [localValue, setLocalValue] = React.useState(value);
-
-    // Get step
-    const showStep = (index: number) => {
-        indexRef.current = index;
-        const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
-
-        app.showInputDialog({
-            ...rest,
-            buttons: (n, callback) => (
-                <HBox
-                    paddingLeft={2}
-                    paddingRight={2}
-                    paddingBottom={2}
-                    gap={2}
-                    justifyContent="space-between"
-                >
-                    {index === 0 ? (
-                        <Button
-                            variant="outlined"
-                            startIcon={<CloseIcon />}
-                            onClick={() => n.dismiss()}
-                        >
-                            {labels.close}
-                        </Button>
-                    ) : (
-                        <Button
-                            variant="outlined"
-                            startIcon={<NavigateBeforeIcon />}
-                            onClick={() => {
-                                n.dismiss();
-                                showStep(indexRef.current - 1);
-                            }}
-                        >
-                            {labels.previousStep}
-                        </Button>
-                    )}
-
-                    {more ? (
-                        <Button
-                            variant="contained"
-                            startIcon={<NavigateNextIcon />}
-                            onClick={async (event) => {
-                                const result = await callback(event);
-                                if (!result) return;
-                                showStep(indexRef.current + 1);
-                            }}
-                        >
-                            {labels.nextStep}
-                        </Button>
-                    ) : (
-                        <Button
-                            variant="contained"
-                            startIcon={<CheckIcon />}
-                            onClick={async (event) => {
-                                const result = await callback(event);
-                                if (!result) return;
-
-                                const value = jsonRef.current;
-                                setLocalValue(valueFormatter(value));
-
-                                if (onValueChange) onValueChange(value);
-                            }}
-                        >
-                            {labels.submit}
-                        </Button>
-                    )}
-                </HBox>
-            ),
-            callback: (form) => {
-                if (form == null) return;
-                const result = callback(form);
-                if (result !== true) {
-                    return false;
-                }
-            }
-        });
-    };
-
-    const cancelInput = (event: React.SyntheticEvent) => {
-        event.stopPropagation();
-        event.preventDefault();
-    };
-
-    React.useEffect(() => {
-        setLocalValue(valueFormatter(jsonRef.current));
-    }, [valueFormatter]);
-
-    return (
-        <TextField
-            autoComplete="new-password"
-            InputLabelProps={InputLabelProps}
-            inputProps={{ style: { cursor: 'pointer' } }}
-            InputProps={{
-                onKeyDown: (event) => {
-                    if (event.key === 'Tab') return;
-                    cancelInput(event);
-                },
-                onPaste: cancelInput,
-                endAdornment: (
-                    <InputAdornment position="end">
-                        <IconButton edge="end" size="small">
-                            <StartIcon />
-                        </IconButton>
-                    </InputAdornment>
-                )
-            }}
-            onClick={() => showStep(0)}
-            value={localValue}
-            {...rest}
-        />
-    );
+  // App
+  const app = globalApp;
+  if (app == null) {
+    throw new Error("No globalApp");
+  }
+
+  // Labels
+  const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
+
+  // Destruct
+  const {
+    InputLabelProps = {},
+    jsonValue,
+    valueFormatter = (_data) => "...",
+    onValueChange,
+    steps,
+    value = "",
+    ...rest
+  } = props;
+
+  // Shrink
+  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+
+  // Current index
+  const indexRef = React.useRef<number>(-1);
+
+  // Current Json data
+  const jsonRef = React.useRef<T>(jsonValue);
+
+  // Ignore empty value case
+  if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
+    jsonRef.current = jsonValue;
+
+  // Current value
+  const [localValue, setLocalValue] = React.useState(value);
+
+  // Get step
+  const showStep = (index: number) => {
+    indexRef.current = index;
+    const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
+
+    app.showInputDialog({
+      ...rest,
+      buttons: (n, callback) => (
+        <HBox
+          paddingLeft={2}
+          paddingRight={2}
+          paddingBottom={2}
+          gap={2}
+          justifyContent="space-between"
+        >
+          {index === 0 ? (
+            <Button
+              variant="outlined"
+              startIcon={<CloseIcon />}
+              onClick={() => n.dismiss()}
+            >
+              {labels.close}
+            </Button>
+          ) : (
+            <Button
+              variant="outlined"
+              startIcon={<NavigateBeforeIcon />}
+              onClick={() => {
+                n.dismiss();
+                showStep(indexRef.current - 1);
+              }}
+            >
+              {labels.previousStep}
+            </Button>
+          )}
+
+          {more ? (
+            <Button
+              variant="contained"
+              startIcon={<NavigateNextIcon />}
+              onClick={async (event) => {
+                const result = await callback(event);
+                if (!result) return;
+                showStep(indexRef.current + 1);
+              }}
+            >
+              {labels.nextStep}
+            </Button>
+          ) : (
+            <Button
+              variant="contained"
+              startIcon={<CheckIcon />}
+              onClick={async (event) => {
+                const result = await callback(event);
+                if (!result) return;
+
+                const value = jsonRef.current;
+                setLocalValue(valueFormatter(value));
+
+                if (onValueChange) onValueChange(value);
+              }}
+            >
+              {labels.submit}
+            </Button>
+          )}
+        </HBox>
+      ),
+      callback: (form) => {
+        if (form == null) return;
+        const result = callback(form);
+        if (result !== true) {
+          return false;
+        }
+      }
+    });
+  };
+
+  const cancelInput = (event: React.SyntheticEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  React.useEffect(() => {
+    setLocalValue(valueFormatter(jsonRef.current));
+  }, [valueFormatter]);
+
+  return (
+    <TextField
+      autoComplete="new-password"
+      InputLabelProps={InputLabelProps}
+      inputProps={{ style: { cursor: "pointer" } }}
+      InputProps={{
+        onKeyDown: (event) => {
+          if (event.key === "Tab") return;
+          cancelInput(event);
+        },
+        onPaste: cancelInput,
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton edge="end" size="small">
+              <StartIcon />
+            </IconButton>
+          </InputAdornment>
+        )
+      }}
+      onClick={() => showStep(0)}
+      value={localValue}
+      {...rest}
+    />
+  );
 }

package/src/DataTable.tsx

@@ -0,0 +1,124 @@
+import {
+  DataGrid,
+  GridCellModesModel,
+  GridRowId,
+  GridValidRowModel
+} from "@mui/x-data-grid";
+import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+
+/**
+ * Data table selected cell params
+ */
+export interface DataTableSelectedCellParams {
+  id: GridRowId;
+  field: string;
+  index: number;
+}
+
+/**
+ * Data table props
+ */
+export type DataTableProps<R extends GridValidRowModel = any> = Omit<
+  DataGridProps<R>,
+  "disableColumnMenu"
+> & {
+  /**
+   * Cell selection handler
+   * @param params Params
+   * @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;
+};
+
+/**
+ * Data table
+ * @param props Props
+ * @returns Component
+ */
+export function DataTable<R extends GridValidRowModel = any>(
+  props: DataTableProps<R>
+) {
+  // Destructor
+  const { localeText = {}, onCellSelection, toolbarCreator, ...rest } = props;
+
+  // Labels
+  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>({});
+
+  const handleCellFocus = React.useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      // event.target is the element that triggered the event
+      // event.currentTarget is the element that the event listener is attached to
+      const cell = event.currentTarget;
+      const row = cell.parentElement;
+      if (row == null) return;
+
+      const id = row.dataset.id;
+      const index = row.dataset.rowindex;
+      const field = cell.dataset.field;
+      if (id == null || index == null || field == null) return;
+
+      const params: DataTableSelectedCellParams = {
+        id,
+        field,
+        index: parseInt(index)
+      };
+
+      if (onCellSelection) {
+        if (onCellSelection(params) === false) return;
+      }
+
+      setSelectedCellParams(params);
+    },
+    []
+  );
+
+  return (
+    <DataGrid
+      disableColumnMenu
+      hideFooter
+      localeText={localeText}
+      cellModesModel={cellModesModel}
+      onCellModesModelChange={(model) => setCellModesModel(model)}
+      components={{
+        Toolbar: toolbarCreator
+          ? ({ selectedCellParams, setCellModesModel, cellModesModel }) =>
+              toolbarCreator(
+                selectedCellParams,
+                setCellModesModel,
+                cellModesModel
+              )
+          : undefined
+      }}
+      componentsProps={{
+        toolbar: {
+          selectedCellParams,
+          setCellModesModel,
+          cellModesModel
+        },
+        cell: {
+          onFocus: handleCellFocus
+        }
+      }}
+      {...rest}
+    />
+  );
+}