@etsoo/react 1.4.26 → 1.4.30

package/lib/mu/ResponsibleContainer.js

@@ -64,6 +64,7 @@ export function ResponsibleContainer(props) {
         // Last rect
         const lastRect = state.rect;
         // 32 = scroll bar width
+        console.log(lastRect, rect);
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&

package/lib/mu/SearchBar.js

@@ -52,6 +52,7 @@ const setChildState = (child, enabled) => {
  * @returns Component
  */
 export function SearchBar(props) {
+    var _a;
     // Destruct
     const { className, fields, innerHeight = 40, onSubmit } = props;
     // Labels
@@ -64,11 +65,14 @@ export function SearchBar(props) {
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
     // State
-    const state = React.useRef({}).current;
+    const state = React.useRef({ hasMore: true }).current;
+    const lastMaxWidth = (_a = state.lastMaxWidth) !== null && _a !== void 0 ? _a : 9999;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === state.lastMaxWidth)
+        console.log('useDimensions', state.hasMore, rect.width, lastMaxWidth);
+        if (rect.width === lastMaxWidth ||
+            (!state.hasMore && rect.width > lastMaxWidth))
             return false;
         // Len
         const len = target.children.length;
@@ -95,8 +99,10 @@ export function SearchBar(props) {
             containerRect.width < 10)
             return;
         // Container width
+        console.log('resetButtonRef', state.hasMore, containerRect.width, lastMaxWidth);
         let maxWidth = containerRect.width;
-        if (maxWidth === state.lastMaxWidth) {
+        if (maxWidth === lastMaxWidth ||
+            (!state.hasMore && maxWidth > lastMaxWidth)) {
             return;
         }
         state.lastMaxWidth = maxWidth;
@@ -158,6 +164,7 @@ export function SearchBar(props) {
             }
         }
         // Show or hide more button
+        state.hasMore = hasMore;
         setElementVisible(buttonMore, hasMore);
         setElementVisible(resetButton, true);
         // Update menu start index

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.26",
+    "version": "1.4.30",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/ResponsibleContainer.tsx

@@ -229,6 +229,7 @@ export function ResponsibleContainer<
             const lastRect = state.rect;
 
             // 32 = scroll bar width
+            console.log(lastRect, rect);
             if (
                 lastRect != null &&
                 state.mounted !== true &&

package/src/mu/SearchBar.tsx

@@ -105,12 +105,19 @@ export function SearchBar(props: SearchBarProps) {
         moreForm?: HTMLFormElement;
         submitSeed?: number;
         lastMaxWidth?: number;
-    }>({}).current;
+        hasMore: boolean;
+    }>({ hasMore: true }).current;
+    const lastMaxWidth = state.lastMaxWidth ?? 9999;
 
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === state.lastMaxWidth) return false;
+        console.log('useDimensions', state.hasMore, rect.width, lastMaxWidth);
+        if (
+            rect.width === lastMaxWidth ||
+            (!state.hasMore && rect.width > lastMaxWidth)
+        )
+            return false;
 
         // Len
         const len = target.children.length;
@@ -142,8 +149,17 @@ export function SearchBar(props: SearchBarProps) {
             return;
 
         // Container width
+        console.log(
+            'resetButtonRef',
+            state.hasMore,
+            containerRect.width,
+            lastMaxWidth
+        );
         let maxWidth = containerRect.width;
-        if (maxWidth === state.lastMaxWidth) {
+        if (
+            maxWidth === lastMaxWidth ||
+            (!state.hasMore && maxWidth > lastMaxWidth)
+        ) {
             return;
         }
         state.lastMaxWidth = maxWidth;
@@ -220,6 +236,7 @@ export function SearchBar(props: SearchBarProps) {
         }
 
         // Show or hide more button
+        state.hasMore = hasMore;
         setElementVisible(buttonMore, hasMore);
         setElementVisible(resetButton, true);