refactored the useBreadcrumbSize hook

assets/js/src/core/components/breadcrumb/hooks/use-breadcrumb-size.ts

@@ -23,60 +23,28 @@ export const useBreadcrumbSize = (editorTabsWidth?: number, initialBreadcrumbLas
   useLayoutEffect(() => {
     if (editorTabsWidth == null || initialBreadcrumbLastElementWidth == null) return
 
-    if (editorTabsWidth <= 375) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(50)
-    }
-
-    if (editorTabsWidth > 375 && editorTabsWidth <= 450) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(70)
-    }
-
-    if (editorTabsWidth > 450 && editorTabsWidth <= 550) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(85)
-    }
-
-    if (editorTabsWidth > 550 && editorTabsWidth <= 700) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(100)
-    }
-
-    if (editorTabsWidth > 700 && editorTabsWidth <= 800) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(150)
-    }
-
-    if (editorTabsWidth > 800 && editorTabsWidth <= 900) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(200)
-    }
-
-    if (editorTabsWidth > 900 && editorTabsWidth <= 1000) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(300)
-    }
-
-    if (editorTabsWidth > 1000 && editorTabsWidth <= 1100) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(400)
-    }
-
-    if (editorTabsWidth > 1100 && editorTabsWidth <= 1200) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(500)
-    }
-
-    if (editorTabsWidth > 1200 && editorTabsWidth <= 1300) {
-      setIsHideBreadcrumb(true)
-      setCurrentBreadcrumbWidth(600)
-    }
-
-    if (editorTabsWidth > 1300) {
-      setIsHideBreadcrumb(false)
-      setCurrentBreadcrumbWidth(initialBreadcrumbLastElementWidth)
-    }
+    const getBreadcrumbSettings = (width: number): { isHide: boolean, width: number } => {
+      if (width <= 375) return { isHide: true, width: 50 }
+      if (width <= 450) return { isHide: true, width: 70 }
+      if (width <= 550) return { isHide: true, width: 85 }
+      if (width <= 700) return { isHide: true, width: 100 }
+      if (width <= 800) return { isHide: true, width: 150 }
+      if (width <= 900) return { isHide: true, width: 200 }
+      if (width <= 1000) return { isHide: true, width: 300 }
+      if (width <= 1100) return { isHide: true, width: 400 }
+      if (width <= 1200) return { isHide: true, width: 500 }
+      if (width <= 1300) return { isHide: true, width: 600 }
+
+      return {
+        isHide: false,
+        width: initialBreadcrumbLastElementWidth
+      }
+    }
+
+    const { isHide, width } = getBreadcrumbSettings(editorTabsWidth)
+
+    setIsHideBreadcrumb(isHide)
+    setCurrentBreadcrumbWidth(width)
   }, [editorTabsWidth, initialBreadcrumbLastElementWidth])
 
   return { isHideBreadcrumb, currentBreadcrumbWidth }

public/build/34aa4b09-bbab-4024-87eb-d529a45ad24d/entrypoints.json

@@ -0,0 +1,14 @@
+{
+  "entrypoints": {
+    "main": {
+      "css": [
+        "http://localhost:3030/build/34aa4b09-bbab-4024-87eb-d529a45ad24d/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-cbce9d.css",
+        "http://localhost:3030/build/34aa4b09-bbab-4024-87eb-d529a45ad24d/main.css"
+      ],
+      "js": [
+        "http://localhost:3030/build/34aa4b09-bbab-4024-87eb-d529a45ad24d/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-cbce9d.js",
+        "http://localhost:3030/build/34aa4b09-bbab-4024-87eb-d529a45ad24d/main.js"
+      ]
+    }
+  }
+}