@etsoo/materialui 1.1.55 → 1.1.57

package/lib/ResponsibleContainer.d.ts

@@ -13,11 +13,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Height will be deducted
      * @param height Current calcuated height
      */
-    adjustHeight?: (height: number) => number;
-    /**
-     * Top height
-     */
-    topHeight?: number;
+    adjustHeight?: (height: number, rect: DOMRect) => number;
     /**
      * Columns
      */
@@ -82,6 +78,10 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Size ready to read miliseconds span
      */
     sizeReadyMiliseconds?: number;
+    /**
+     * SearchBar height
+     */
+    searchBarHeight?: number;
 };
 /**
  * Responsible container

package/lib/ResponsibleContainer.js

@@ -22,7 +22,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, topHeight, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -89,15 +89,13 @@ export function ResponsibleContainer(props) {
         else {
             // Auto calculation
             heightLocal =
-                document.documentElement.clientHeight -
-                    (topHeight !== null && topHeight !== void 0 ? topHeight : Math.round(rect.bottom + 1));
+                document.documentElement.clientHeight - Math.round(rect.bottom + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
                 heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
-            if (adjustHeight != null) {
-                heightLocal -= adjustHeight(heightLocal);
-            }
+            if (adjustHeight != null)
+                heightLocal -= adjustHeight(heightLocal, rect);
         }
         if (showDataGrid) {
             // Delete
@@ -132,8 +130,8 @@ export function ResponsibleContainer(props) {
     const searchBar = React.useMemo(() => {
         if (!hasFields || showDataGrid == null)
             return;
-        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
-    }, [showDataGrid, hasFields]);
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, innerHeight: searchBarHeight }));
+    }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null
         ? undefined

package/lib/SearchBar.js

@@ -52,7 +52,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, innerHeight = 40, onSubmit } = props;
+    const { className, fields, innerHeight = 45.6, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -223,14 +223,12 @@ export function SearchBar(props) {
                 if (form)
                     state.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight < 1 ? undefined : innerHeight, sx: {
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,
                         flexShrink: 0,
-                        maxWidth: "180px"
-                    },
-                    "& > :not:first-child": {
+                        maxWidth: "180px",
                         visibility: "hidden"
                     },
                     "& > .hiddenChild": {

package/lib/app/ReactApp.d.ts

@@ -61,10 +61,11 @@ export interface IReactAppBase {
      */
     setPageData(data: IPageData): void;
     /**
-     * Set page title and data
-     * @param key Page title resource key
+     * Set page title and subtitle
+     * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageKey(key: string): void;
+    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Set page title and data
      * @param title Page title
@@ -183,10 +184,11 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      */
     setPageData(data: P): void;
     /**
-     * Set page title and data
+     * Set page title and subtitle
      * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageTitle(title: string): void;
+    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Navigate to Url or delta
      * @param url Url or delta

package/lib/app/ReactApp.js

@@ -206,12 +206,13 @@ export class ReactApp extends CoreApp {
         }
     }
     /**
-     * Set page title and data
+     * Set page title and subtitle
      * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageTitle(title) {
+    setPageTitle(title, subtitle) {
         // Data
-        const data = { title };
+        const data = { title, subtitle };
         // Dispatch the change
         if (this.pageStateDispatch != null) {
             this.pageStateDispatch({

package/lib/pages/ResponsivePage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ResponsePageProps } from './ResponsivePageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { ResponsePageProps } from "./ResponsivePageProps";
 /**
  * Fixed height list page
  * @param props Props

package/lib/pages/ResponsivePage.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ResponsibleContainer } from '../ResponsibleContainer';
-import { CommonPage } from './CommonPage';
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ResponsibleContainer } from "../ResponsibleContainer";
+import { CommonPage } from "./CommonPage";
 /**
  * Fixed height list page
  * @param props Props
@@ -24,15 +24,15 @@ export function ResponsivePage(props) {
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
                     paddingTop: paddings,
-                    '& .SearchBox': {
+                    "& .SearchBox": {
                         marginLeft: paddings,
                         marginRight: paddings,
                         marginBottom: hasField ? half : 0
                     },
-                    '& .ListBox': {
+                    "& .ListBox": {
                         marginBottom: paddings
                     },
-                    '& .DataGridBox': {
+                    "& .DataGridBox": {
                         marginLeft: paddings,
                         marginRight: paddings,
                         marginBottom: paddings

package/lib/pages/SearchPageProps.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { GridJsonData, GridLoader } from '@etsoo/react';
-import { DataTypes } from '@etsoo/shared';
-import { CommonPageProps } from './CommonPageProps';
+import { GridJsonData, GridLoader } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { CommonPageProps } from "./CommonPageProps";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate> = Omit<GridLoader<T>, 'loadData'> & {
+export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate> = Omit<GridLoader<T>, "loadData"> & {
     /**
      * Search fields
      */
@@ -27,4 +27,8 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
      * @default 100
      */
     sizeReadyMiliseconds?: number;
+    /**
+     * SearchBar height
+     */
+    searchBarHeight?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.55",
+  "version": "1.1.57",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ResponsibleContainer.tsx

@@ -42,12 +42,7 @@ export type ResponsibleContainerProps<
    * Height will be deducted
    * @param height Current calcuated height
    */
-  adjustHeight?: (height: number) => number;
-
-  /**
-   * Top height
-   */
-  topHeight?: number;
+  adjustHeight?: (height: number, rect: DOMRect) => number;
 
   /**
    * Columns
@@ -136,6 +131,11 @@ export type ResponsibleContainerProps<
    * Size ready to read miliseconds span
    */
   sizeReadyMiliseconds?: number;
+
+  /**
+   * SearchBar height
+   */
+  searchBarHeight?: number;
 };
 
 interface LocalRefs<T> {
@@ -177,13 +177,13 @@ export function ResponsibleContainer<
     fields,
     fieldTemplate,
     height,
-    topHeight,
     loadData,
     mRef,
     paddings = MUGlobal.pagePaddings,
     pullToRefresh = true,
     quickAction,
     sizeReadyMiliseconds = 0,
+    searchBarHeight,
     ...rest
   } = props;
 
@@ -271,16 +271,13 @@ export function ResponsibleContainer<
     } else {
       // Auto calculation
       heightLocal =
-        document.documentElement.clientHeight -
-        (topHeight ?? Math.round(rect.bottom + 1));
+        document.documentElement.clientHeight - Math.round(rect.bottom + 1);
 
       const style = window.getComputedStyle(dimensions[0][1]!);
       const boxMargin = parseFloat(style.marginBottom);
       if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
-      if (adjustHeight != null) {
-        heightLocal -= adjustHeight(heightLocal);
-      }
+      if (adjustHeight != null) heightLocal -= adjustHeight(heightLocal, rect);
     }
 
     if (showDataGrid) {
@@ -344,9 +341,10 @@ export function ResponsibleContainer<
         fields={fields}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
+        innerHeight={searchBarHeight}
       />
     );
-  }, [showDataGrid, hasFields]);
+  }, [showDataGrid, hasFields, searchBarHeight]);
 
   // Pull container
   const pullContainer =

package/src/SearchBar.tsx

@@ -83,7 +83,7 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, innerHeight = 40, onSubmit } = props;
+  const { className, fields, innerHeight = 45.6, onSubmit } = props;
 
   // Labels
   const labels = Labels.CommonPage;
@@ -311,15 +311,13 @@ export function SearchBar(props: SearchBarProps) {
           alignItems="center"
           direction="row"
           spacing={1}
-          height={innerHeight}
+          height={innerHeight < 1 ? undefined : innerHeight}
           sx={{
             "& > :not(style)": {
               flexBasis: "auto",
               flexGrow: 0,
               flexShrink: 0,
-              maxWidth: "180px"
-            },
-            "& > :not:first-child": {
+              maxWidth: "180px",
               visibility: "hidden"
             },
             "& > .hiddenChild": {

package/src/app/ReactApp.ts

@@ -133,10 +133,11 @@ export interface IReactAppBase {
   setPageData(data: IPageData): void;
 
   /**
-   * Set page title and data
-   * @param key Page title resource key
+   * Set page title and subtitle
+   * @param title Page title
+   * @param subtitle Page subtitle
    */
-  setPageKey(key: string): void;
+  setPageTitle(title: string, subtitle?: string): void;
 
   /**
    * Set page title and data
@@ -425,12 +426,13 @@ export class ReactApp<
   }
 
   /**
-   * Set page title and data
+   * Set page title and subtitle
    * @param title Page title
+   * @param subtitle Page subtitle
    */
-  setPageTitle(title: string): void {
+  setPageTitle(title: string, subtitle?: string): void {
     // Data
-    const data = { title } as P;
+    const data = { title, subtitle } as P;
 
     // Dispatch the change
     if (this.pageStateDispatch != null) {

package/src/pages/ResponsivePage.tsx

@@ -1,9 +1,9 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ResponsibleContainer } from '../ResponsibleContainer';
-import { CommonPage } from './CommonPage';
-import { ResponsePageProps } from './ResponsivePageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ResponsibleContainer } from "../ResponsibleContainer";
+import { CommonPage } from "./CommonPage";
+import { ResponsePageProps } from "./ResponsivePageProps";
 
 /**
  * Fixed height list page
@@ -11,58 +11,58 @@ import { ResponsePageProps } from './ResponsivePageProps';
  * @returns Component
  */
 export function ResponsivePage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ResponsePageProps<T, F, D>) {
-    // Destruct
-    const { pageProps = {}, ...rest } = props;
+  // Destruct
+  const { pageProps = {}, ...rest } = props;
 
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
+  pageProps.paddings ??= MUGlobal.pagePaddings;
+  const { paddings, fabColumnDirection, ...pageRest } = pageProps;
 
-    // State
-    const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
-    const [direction, setDirection] = React.useState(fabColumnDirection);
+  // State
+  const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
+  const [direction, setDirection] = React.useState(fabColumnDirection);
 
-    // Layout
-    return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={scrollContainer}
-            fabColumnDirection={direction}
-        >
-            <ResponsibleContainer<T, F, D>
-                paddings={paddings}
-                containerBoxSx={(paddings, hasField, _dataGrid) => {
-                    // Half
-                    const half = MUGlobal.half(paddings);
+  // Layout
+  return (
+    <CommonPage
+      {...pageRest}
+      paddings={{}}
+      scrollContainer={scrollContainer}
+      fabColumnDirection={direction}
+    >
+      <ResponsibleContainer<T, F, D>
+        paddings={paddings}
+        containerBoxSx={(paddings, hasField, _dataGrid) => {
+          // Half
+          const half = MUGlobal.half(paddings);
 
-                    // .SearchBox keep the same to avoid flick when switching between DataGrid and List
-                    return {
-                        paddingTop: paddings,
-                        '& .SearchBox': {
-                            marginLeft: paddings,
-                            marginRight: paddings,
-                            marginBottom: hasField ? half : 0
-                        },
-                        '& .ListBox': {
-                            marginBottom: paddings
-                        },
-                        '& .DataGridBox': {
-                            marginLeft: paddings,
-                            marginRight: paddings,
-                            marginBottom: paddings
-                        }
-                    };
-                }}
-                elementReady={(element, isDataGrid) => {
-                    setDirection(!isDataGrid);
-                    setScrollContainer(element);
-                }}
-                {...rest}
-            />
-        </CommonPage>
-    );
+          // .SearchBox keep the same to avoid flick when switching between DataGrid and List
+          return {
+            paddingTop: paddings,
+            "& .SearchBox": {
+              marginLeft: paddings,
+              marginRight: paddings,
+              marginBottom: hasField ? half : 0
+            },
+            "& .ListBox": {
+              marginBottom: paddings
+            },
+            "& .DataGridBox": {
+              marginLeft: paddings,
+              marginRight: paddings,
+              marginBottom: paddings
+            }
+          };
+        }}
+        elementReady={(element, isDataGrid) => {
+          setDirection(!isDataGrid);
+          setScrollContainer(element);
+        }}
+        {...rest}
+      />
+    </CommonPage>
+  );
 }

package/src/pages/SearchPageProps.ts

@@ -1,39 +1,44 @@
-import { GridJsonData, GridLoader } from '@etsoo/react';
-import { DataTypes } from '@etsoo/shared';
-import { CommonPageProps } from './CommonPageProps';
+import { GridJsonData, GridLoader } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { CommonPageProps } from "./CommonPageProps";
 
 /**
  * Search page props
  */
 export type SearchPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate
-> = Omit<GridLoader<T>, 'loadData'> & {
-    /**
-     * Search fields
-     */
-    fields: React.ReactElement[];
+  T extends object,
+  F extends DataTypes.BasicTemplate
+> = Omit<GridLoader<T>, "loadData"> & {
+  /**
+   * Search fields
+   */
+  fields: React.ReactElement[];
 
-    /**
-     * Search field template
-     */
-    fieldTemplate?: F;
+  /**
+   * Search field template
+   */
+  fieldTemplate?: F;
 
-    /**
-     * Load data callback
-     */
-    loadData: (
-        data: GridJsonData & DataTypes.BasicTemplateType<F>
-    ) => PromiseLike<T[] | null | undefined>;
+  /**
+   * Load data callback
+   */
+  loadData: (
+    data: GridJsonData & DataTypes.BasicTemplateType<F>
+  ) => PromiseLike<T[] | null | undefined>;
 
-    /**
-     * Page props
-     */
-    pageProps?: CommonPageProps;
+  /**
+   * Page props
+   */
+  pageProps?: CommonPageProps;
 
-    /**
-     * Size ready to read miliseconds span
-     * @default 100
-     */
-    sizeReadyMiliseconds?: number;
+  /**
+   * Size ready to read miliseconds span
+   * @default 100
+   */
+  sizeReadyMiliseconds?: number;
+
+  /**
+   * SearchBar height
+   */
+  searchBarHeight?: number;
 };