@etsoo/materialui 1.1.41 → 1.1.43

package/lib/DataTable.d.ts

@@ -0,0 +1,33 @@
+import { GridCellModesModel, GridRowId, GridValidRowModel } from "@mui/x-data-grid";
+import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import React from "react";
+/**
+ * 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 declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): JSX.Element;

package/lib/DataTable.js

@@ -0,0 +1,56 @@
+import { DataGrid } from "@mui/x-data-grid";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+/**
+ * Data table
+ * @param props Props
+ * @returns Component
+ */
+export function DataTable(props) {
+    var _a;
+    // Destructor
+    const { localeText = {}, onCellSelection, toolbarCreator, ...rest } = props;
+    // Labels
+    const { noRows } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noRows")) !== null && _a !== void 0 ? _a : {};
+    if (noRows && !localeText.noRowsLabel)
+        localeText.noRowsLabel = noRows;
+    const [selectedCellParams, setSelectedCellParams] = React.useState(null);
+    const [cellModesModel, setCellModesModel] = React.useState({});
+    const handleCellFocus = React.useCallback((event) => {
+        // 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 = {
+            id,
+            field,
+            index: parseInt(index)
+        };
+        if (onCellSelection) {
+            if (onCellSelection(params) === false)
+                return;
+        }
+        setSelectedCellParams(params);
+    }, []);
+    return (React.createElement(DataGrid, { disableColumnMenu: true, hideFooter: true, 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 }));
+}

package/lib/SwitchAnt.d.ts

@@ -11,11 +11,11 @@ export interface SwitchAntProps extends SwitchProps {
     /**
      * Start label
      */
-    startLabel: string;
+    startLabel?: string;
     /**
      * End label
      */
-    endLabel: string;
+    endLabel?: string;
 }
 /**
  * Ant style switch

package/lib/SwitchField.d.ts

@@ -0,0 +1,45 @@
+import { FormControlProps } from "@mui/material";
+import React from "react";
+/**
+ * SwitchField props
+ */
+export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+    /**
+     * Helper text
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Checked
+     */
+    checked?: boolean;
+    /**
+     * Active color
+     */
+    activeColor?: string;
+    /**
+     * Start label
+     */
+    startLabel?: string;
+    /**
+     * End label
+     */
+    endLabel?: string;
+    /**
+     * Height in px
+     */
+    height?: number;
+    /**
+     * Value, default is true
+     */
+    value?: unknown;
+};
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export declare function SwitchField(props: SwitchFieldProps): JSX.Element;

package/lib/SwitchField.js

@@ -0,0 +1,33 @@
+import { Box, FormControl, FormHelperText, InputLabel } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+import { SwitchAnt } from "./SwitchAnt";
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchField(props) {
+    // Destruct
+    const { activeColor, startLabel, endLabel, value = true, fullWidth, height = 56, helperText, label, name, required, sx = {}, checked, variant = "outlined", ...rest } = props;
+    // Outlined
+    const outlined = variant === "outlined";
+    if (sx) {
+        Object.assign(sx, { height: outlined ? `${height}px` : undefined });
+    }
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
+            label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
+            outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
+                    cursor: "default",
+                    position: "absolute",
+                    width: fullWidth ? "100%" : "auto",
+                    "& input": {
+                        visibility: "hidden"
+                    }
+                } })),
+            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
+                React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }))),
+        helperText && React.createElement(FormHelperText, null, helperText)));
+}

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
 export * from "./DataSteps";
+export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
@@ -77,6 +78,7 @@ export * from "./SelectEx";
 export * from "./ShowDataComparison";
 export * from "./Switch";
 export * from "./SwitchAnt";
+export * from "./SwitchField";
 export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";

package/lib/index.js

@@ -38,6 +38,7 @@ export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
 export * from "./DataSteps";
+export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
@@ -77,6 +78,7 @@ export * from "./SelectEx";
 export * from "./ShowDataComparison";
 export * from "./Switch";
 export * from "./SwitchAnt";
+export * from "./SwitchField";
 export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -56,6 +56,7 @@
     "@etsoo/shared": "^1.1.89",
     "@mui/icons-material": "^5.11.9",
     "@mui/material": "^5.11.10",
+    "@mui/x-data-grid": "^6.0.0-beta.5",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",

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}
+    />
+  );
+}

package/src/SwitchAnt.tsx

@@ -15,12 +15,12 @@ export interface SwitchAntProps extends SwitchProps {
   /**
    * Start label
    */
-  startLabel: string;
+  startLabel?: string;
 
   /**
    * End label
    */
-  endLabel: string;
+  endLabel?: string;
 }
 
 /**

package/src/SwitchField.tsx

@@ -0,0 +1,133 @@
+import {
+  Box,
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+import { SwitchAnt } from "./SwitchAnt";
+
+/**
+ * SwitchField props
+ */
+export type SwitchFieldProps = Omit<
+  FormControlProps<"fieldset">,
+  "defaultValue"
+> & {
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Checked
+   */
+  checked?: boolean;
+
+  /**
+   * Active color
+   */
+  activeColor?: string;
+
+  /**
+   * Start label
+   */
+  startLabel?: string;
+
+  /**
+   * End label
+   */
+  endLabel?: string;
+
+  /**
+   * Height in px
+   */
+  height?: number;
+
+  /**
+   * Value, default is true
+   */
+  value?: unknown;
+};
+
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchField(props: SwitchFieldProps) {
+  // Destruct
+  const {
+    activeColor,
+    startLabel,
+    endLabel,
+    value = true,
+
+    fullWidth,
+    height = 56,
+    helperText,
+    label,
+    name,
+    required,
+    sx = {},
+    checked,
+    variant = "outlined",
+    ...rest
+  } = props;
+
+  // Outlined
+  const outlined = variant === "outlined";
+
+  if (sx) {
+    Object.assign(sx, { height: outlined ? `${height}px` : undefined });
+  }
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+        {label && (
+          <InputLabel required={required} variant={variant} shrink>
+            {label}
+          </InputLabel>
+        )}
+        {outlined && (
+          <NotchedOutline
+            label={label && required ? label + " *" : label}
+            notched
+            sx={{
+              cursor: "default",
+              position: "absolute",
+              width: fullWidth ? "100%" : "auto",
+              "& input": {
+                visibility: "hidden"
+              }
+            }}
+          />
+        )}
+        <Box
+          paddingLeft={2}
+          paddingY="7px"
+          position={outlined ? "absolute" : undefined}
+        >
+          <SwitchAnt
+            activeColor={activeColor}
+            name={name}
+            startLabel={startLabel}
+            endLabel={endLabel}
+            value={value}
+            checked={checked}
+          />
+        </Box>
+      </FormControl>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </React.Fragment>
+  );
+}

package/src/index.ts

@@ -41,6 +41,7 @@ export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
 export * from "./DataSteps";
+export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
@@ -80,6 +81,7 @@ export * from "./SelectEx";
 export * from "./ShowDataComparison";
 export * from "./Switch";
 export * from "./SwitchAnt";
+export * from "./SwitchField";
 export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";