@etsoo/materialui 1.4.48 → 1.4.50

package/__tests__/ResponsePage.tsx

@@ -1,5 +1,10 @@
 import { act, render } from "@testing-library/react";
-import { MUGlobal, MobileListItemRenderer, ResponsivePage } from "../src";
+import {
+  MUGlobal,
+  MobileListItemRenderer,
+  ResponsivePage,
+  SearchField
+} from "../src";
 import React from "react";
 
 globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -8,7 +13,13 @@ globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn()
 }));
 
-type Data = { id: number; name: string; value?: string };
+type Data = {
+  id: number;
+  name: string;
+  deviceName?: string;
+  data?: string;
+  creation?: Date;
+};
 
 // Timer mock
 // https://jestjs.io/docs/en/timer-mocks
@@ -25,16 +36,7 @@ it("Render ResponsePage", async () => {
     // Act
     render(
       <ResponsivePage<Data, typeof fieldTemplate>
-        fields={[]}
-        columns={[
-          { field: "id", header: "ID" },
-          { field: "name", header: "Name" },
-          {
-            field: "value",
-            header: "Value",
-            valueFormatter: ({ data }) => data?.value ?? data?.name
-          }
-        ]}
+        fields={[<SearchField label="Keyword" name="keyword" minChars={2} />]}
         height={200}
         itemSize={[118, MUGlobal.pagePaddings]}
         fieldTemplate={fieldTemplate}
@@ -45,6 +47,15 @@ it("Render ResponsePage", async () => {
             { id: id ?? 0, name: "auto" }
           ])
         }
+        columns={[
+          { field: "id", header: "ID" },
+          { field: "name", header: "Name" },
+          {
+            field: "deviceName",
+            header: "Value",
+            valueFormatter: ({ data }) => data?.deviceName ?? data?.name
+          }
+        ]}
         innerItemRenderer={(props) =>
           MobileListItemRenderer(props, (data) => {
             return [

package/__tests__/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
+    "target": "ES2022",
+    "module": "ES2022",
     "moduleResolution": "bundler",
     "allowJs": false,
     "skipLibCheck": true,

package/lib/DataGridEx.d.ts

@@ -1,4 +1,4 @@
-import { GridColumn, GridLoaderStates, ScrollerGridProps } from "@etsoo/react";
+import { GridColumn, GridJsonData, GridLoadDataProps, GridLoaderStates, ScrollerGridProps } from "@etsoo/react";
 import React from "react";
 import { MouseEventWithDataHandler } from "./MUGlobal";
 /**
@@ -14,7 +14,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object> = Omit<ScrollerGridProps<T>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
+export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
     /**
      * Alternating colors for odd/even rows
      */

package/lib/pages/DataGridPageProps.d.ts

@@ -1,10 +1,10 @@
+import { GridJsonData, GridTemplateType } from "@etsoo/react";
 import type { DataGridExProps } from "../DataGridEx";
 import type { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
- * Change it to interface extends can find the conflicts quickly
  */
-export type DataGridPageProps<T extends object, F> = SearchPageProps<T, F> & Omit<DataGridExProps<T>, "loadData" | "cacheKey" | "cacheMinutes" | "height"> & {
+export type DataGridPageProps<T extends object, F> = DataGridExProps<T, GridJsonData & GridTemplateType<F>> & SearchPageProps<T, F> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/SearchPageProps.d.ts

@@ -3,7 +3,7 @@ import type { CommonPageProps } from "./CommonPage";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object, F> = Omit<GridLoader<T>, "loadData"> & {
+export type SearchPageProps<T extends object, F> = GridLoader<T, GridJsonData & GridTemplateType<F>> & {
     /**
      * Cache key
      */
@@ -20,10 +20,6 @@ export type SearchPageProps<T extends object, F> = Omit<GridLoader<T>, "loadData
      * Search field template
      */
     readonly fieldTemplate: F;
-    /**
-     * Load data callback
-     */
-    loadData: (data: GridJsonData & GridTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Page props
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.48",
+  "version": "1.4.50",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -37,7 +37,7 @@
     "@emotion/styled": "^11.13.5",
     "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.11",
+    "@etsoo/react": "^1.8.14",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.10",
     "@mui/material": "^6.1.10",

package/src/DataGridEx.tsx

@@ -5,6 +5,8 @@ import {
   GridCellRendererProps,
   GridColumn,
   GridHeaderCellRendererProps,
+  GridJsonData,
+  GridLoadDataProps,
   GridLoaderPartialStates,
   GridLoaderStates,
   ScrollerGrid,
@@ -40,8 +42,11 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object> = Omit<
-  ScrollerGridProps<T>,
+export type DataGridExProps<
+  T extends object,
+  P extends GridJsonData = GridLoadDataProps
+> = Omit<
+  ScrollerGridProps<T, P>,
   "itemRenderer" | "columnCount" | "columnWidth" | "width"
 > & {
   /**

package/src/pages/DataGridPageProps.ts

@@ -1,15 +1,15 @@
+import { GridJsonData, GridTemplateType } from "@etsoo/react";
 import type { DataGridExProps } from "../DataGridEx";
 import type { SearchPageProps } from "./SearchPageProps";
 
 /**
  * DataGrid page props
- * Change it to interface extends can find the conflicts quickly
  */
-export type DataGridPageProps<T extends object, F> = SearchPageProps<T, F> &
-  Omit<
-    DataGridExProps<T>,
-    "loadData" | "cacheKey" | "cacheMinutes" | "height"
-  > & {
+export type DataGridPageProps<T extends object, F> = DataGridExProps<
+  T,
+  GridJsonData & GridTemplateType<F>
+> &
+  SearchPageProps<T, F> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/src/pages/SearchPageProps.ts

@@ -4,9 +4,9 @@ import type { CommonPageProps } from "./CommonPage";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object, F> = Omit<
-  GridLoader<T>,
-  "loadData"
+export type SearchPageProps<T extends object, F> = GridLoader<
+  T,
+  GridJsonData & GridTemplateType<F>
 > & {
   /**
    * Cache key
@@ -30,14 +30,6 @@ export type SearchPageProps<T extends object, F> = Omit<
    */
   readonly fieldTemplate: F;
 
-  /**
-   * Load data callback
-   */
-  loadData: (
-    data: GridJsonData & GridTemplateType<F>,
-    lastItem?: T
-  ) => PromiseLike<T[] | null | undefined>;
-
   /**
    * Page props
    */

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "ES2022",
-    "module": "ESNext",
+    "module": "ES2022",
     "moduleResolution": "bundler",
     "allowJs": false,
     "isolatedModules": true,