@etsoo/materialui 1.6.23 → 1.6.25

package/lib/cjs/FabBox.js

@@ -9,7 +9,7 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const Paper_1 = __importDefault(require("@mui/material/Paper"));
 const styles_1 = require("@mui/material/styles");
 const react_1 = __importDefault(require("react"));
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 /**
  * Fabs container box
  * @param props Props

package/lib/cjs/ResponsibleContainer.js

@@ -89,8 +89,9 @@ function ResponsibleContainer(props) {
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
-            Math.abs(rect.height - lastRect.height) <= 32)
+            Math.abs(rect.height - lastRect.height) <= 32) {
             return true;
+        }
         // Hold the new rect
         state.rect = rect;
         return false;
@@ -133,20 +134,15 @@ function ResponsibleContainer(props) {
         return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = react_1.default.useMemo(() => {
-        if (!hasFields ||
-            showDataGrid == null ||
-            rect?.width == null ||
-            rect.width < 20)
+        if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
         return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
-    const pullContainer = showDataGrid == null
-        ? undefined
-        : showDataGrid
-            ? ".DataGridEx-Body"
-            : ".ScrollerListEx-Body";
+    const pullContainer = showDataGrid
+        ? ".DataGridEx-Body"
+        : ".ScrollerListEx-Body";
     // Layout
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: containerBoxSx == null
             ? undefined

package/lib/cjs/SearchBar.d.ts

@@ -3,6 +3,10 @@ import React from "react";
  * Search bar props
  */
 export interface SearchBarProps {
+    /**
+     * Auto submit delay miliseconds, default is 100ms
+     */
+    autoSubmitDelay?: number;
     /**
      * Style class name
      */

package/lib/cjs/SearchBar.js

@@ -80,7 +80,7 @@ function checkFormEvent(event) {
  */
 function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
+    const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Menu index
@@ -93,8 +93,9 @@ function SearchBar(props) {
     const { dimensions } = (0, react_2.useDimensions)(1, (target, rect) => {
         // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
-            (!state.hasMore && rect.width > state.lastMaxWidth))
+            (!state.hasMore && rect.width > state.lastMaxWidth)) {
             return false;
+        }
         // Len
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
@@ -238,11 +239,13 @@ function SearchBar(props) {
     };
     react_1.default.useEffect(() => {
         // Delayed way
-        delayed.call(100);
+        if (autoSubmitDelay > 0) {
+            delayed.call(autoSubmitDelay);
+        }
         return () => {
             delayed.clear();
         };
-    }, [className]);
+    }, [autoSubmitDelay]);
     // Layout
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)

package/lib/mjs/FabBox.js

@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import { useTheme } from "@mui/material/styles";
 import React from "react";
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 /**
  * Fabs container box
  * @param props Props

package/lib/mjs/ResponsibleContainer.js

@@ -83,8 +83,9 @@ export function ResponsibleContainer(props) {
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
-            Math.abs(rect.height - lastRect.height) <= 32)
+            Math.abs(rect.height - lastRect.height) <= 32) {
             return true;
+        }
         // Hold the new rect
         state.rect = rect;
         return false;
@@ -127,20 +128,15 @@ export function ResponsibleContainer(props) {
         return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = React.useMemo(() => {
-        if (!hasFields ||
-            showDataGrid == null ||
-            rect?.width == null ||
-            rect.width < 20)
+        if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
         return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
-    const pullContainer = showDataGrid == null
-        ? undefined
-        : showDataGrid
-            ? ".DataGridEx-Body"
-            : ".ScrollerListEx-Body";
+    const pullContainer = showDataGrid
+        ? ".DataGridEx-Body"
+        : ".ScrollerListEx-Body";
     // Layout
     return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined

package/lib/mjs/SearchBar.d.ts

@@ -3,6 +3,10 @@ import React from "react";
  * Search bar props
  */
 export interface SearchBarProps {
+    /**
+     * Auto submit delay miliseconds, default is 100ms
+     */
+    autoSubmitDelay?: number;
     /**
      * Style class name
      */

package/lib/mjs/SearchBar.js

@@ -74,7 +74,7 @@ function checkFormEvent(event) {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
+    const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Menu index
@@ -87,8 +87,9 @@ export function SearchBar(props) {
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
-            (!state.hasMore && rect.width > state.lastMaxWidth))
+            (!state.hasMore && rect.width > state.lastMaxWidth)) {
             return false;
+        }
         // Len
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
@@ -232,11 +233,13 @@ export function SearchBar(props) {
     };
     React.useEffect(() => {
         // Delayed way
-        delayed.call(100);
+        if (autoSubmitDelay > 0) {
+            delayed.call(autoSubmitDelay);
+        }
         return () => {
             delayed.clear();
         };
-    }, [className]);
+    }, [autoSubmitDelay]);
     // Layout
     return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.23",
+  "version": "1.6.25",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.56",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.78",
+    "@etsoo/react": "^1.8.80",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",

package/src/FabBox.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material/styles";
 import React from "react";
 
 type SharedProps = keyof BoxProps & keyof PaperProps;
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 
 /**
  * Fabs container box props

package/src/ResponsibleContainer.tsx

@@ -275,8 +275,9 @@ export function ResponsibleContainer<T extends object, F>(
         state.mounted !== true &&
         Math.abs(rect.width - lastRect.width) <= 32 &&
         Math.abs(rect.height - lastRect.height) <= 32
-      )
+      ) {
         return true;
+      }
 
       // Hold the new rect
       state.rect = rect;
@@ -373,13 +374,7 @@ export function ResponsibleContainer<T extends object, F>(
   })();
 
   const searchBar = React.useMemo(() => {
-    if (
-      !hasFields ||
-      showDataGrid == null ||
-      rect?.width == null ||
-      rect.width < 20
-    )
-      return;
+    if (!hasFields || rect?.width == null || rect.width < 20) return;
 
     const f = typeof fields == "function" ? fields(searchData) : fields;
 
@@ -395,12 +390,9 @@ export function ResponsibleContainer<T extends object, F>(
   }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
 
   // Pull container
-  const pullContainer =
-    showDataGrid == null
-      ? undefined
-      : showDataGrid
-      ? ".DataGridEx-Body"
-      : ".ScrollerListEx-Body";
+  const pullContainer = showDataGrid
+    ? ".DataGridEx-Body"
+    : ".ScrollerListEx-Body";
 
   // Layout
   return (

package/src/SearchBar.tsx

@@ -13,6 +13,11 @@ import Toolbar from "@mui/material/Toolbar";
  * Search bar props
  */
 export interface SearchBarProps {
+  /**
+   * Auto submit delay miliseconds, default is 100ms
+   */
+  autoSubmitDelay?: number;
+
   /**
    * Style class name
    */
@@ -123,6 +128,7 @@ function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
 export function SearchBar(props: SearchBarProps) {
   // Destruct
   const {
+    autoSubmitDelay = 100,
     className,
     fields,
     onSubmit,
@@ -157,8 +163,9 @@ export function SearchBar(props: SearchBarProps) {
       if (
         rect.width === state.lastMaxWidth ||
         (!state.hasMore && rect.width > state.lastMaxWidth)
-      )
+      ) {
         return false;
+      }
 
       // Len
       const len = target.children.length;
@@ -331,12 +338,14 @@ export function SearchBar(props: SearchBarProps) {
 
   React.useEffect(() => {
     // Delayed way
-    delayed.call(100);
+    if (autoSubmitDelay > 0) {
+      delayed.call(autoSubmitDelay);
+    }
 
     return () => {
       delayed.clear();
     };
-  }, [className]);
+  }, [autoSubmitDelay]);
 
   // Layout
   return (