💄 UI: Add dynamic height and gradient toggle for floor selector

0niel · Aug 24, 2024 · 6e36e57 · 6e36e57
1 parent 67a27cd
commit 6e36e57
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/components/map/ScaleButtons.tsx b/components/map/ScaleButtons.tsx
@@ -14,7 +14,7 @@ const ScaleButtons: React.FC<ScaleButtonsProps> = ({ onZoomIn, onZoomOut }) => {
   useHotkeys('-', onZoomOut)
 
   return (
-    <div className="flex w-12 flex-col space-y-2 rounded-lg border border-input bg-background  p-2 sm:w-full">
+    <div className="flex w-14 flex-col space-y-2 rounded-lg border border-input bg-background  p-2 sm:w-full">
       <Button type="button" className={buttonStyle} onClick={onZoomIn}>
         <Plus size={24} />
       </Button>

diff --git a/components/map/floor-buttons.tsx b/components/map/floor-buttons.tsx
@@ -1,6 +1,9 @@
+'use client'
+
 import { Button } from '../ui/button'
 import clsx from 'clsx'
 import { ScrollArea, ScrollBar } from '../ui/scroll-area'
+import { useState, useEffect, useRef } from 'react'
 
 interface FloorSelectorButtonsProps {
   floors: number[]
@@ -13,14 +16,40 @@ const FloorSelectorButtons: React.FC<FloorSelectorButtonsProps> = ({
   selectedFloor,
   onFloorSelect
 }) => {
+  const [isScrollable, setIsScrollable] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (container) {
+      setIsScrollable(container.scrollHeight > container.clientHeight)
+    }
+  }, [floors])
+
+  const buttonHeight = 42
+  const maxHeight = 6 * buttonHeight + 2 * 1.5
+  const containerHeight = floors.length * buttonHeight + 2 * 3 * floors.length
+
   return (
-    <ScrollArea className="relative h-60 w-12 overflow-auto rounded-lg border border-input bg-background p-1.5 sm:w-full sm:max-w-[60px] sm:p-2">
-      <div className="pointer-events-none absolute inset-y-0 left-0 right-0">
-        {/* Верхний градиент затемнения */}
-        <div className="absolute left-0 right-0 top-0 h-6 bg-gradient-to-b from-background to-transparent"></div>
-        {/* Нижний градиент затемнения */}
-        <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-background to-transparent"></div>
-      </div>
+    <ScrollArea
+      ref={containerRef}
+      className={clsx(
+        'relative w-14 overflow-auto rounded-lg border border-input bg-background p-1.5 sm:w-full sm:max-w-[60px] sm:p-2',
+        {
+          'h-60': floors.length > 6,
+          'h-auto': floors.length <= 6
+        }
+      )}
+      style={{ height: `${Math.min(containerHeight, maxHeight)}px` }}
+    >
+      {isScrollable && (
+        <div className="pointer-events-none absolute inset-y-0 left-0 right-0">
+          {/* Верхний градиент затемнения */}
+          <div className="absolute left-0 right-0 top-0 h-6 bg-gradient-to-b from-background to-transparent"></div>
+          {/* Нижний градиент затемнения */}
+          <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-background to-transparent"></div>
+        </div>
+      )}
       <div className="space-y-1">
         {floors.map(floor => (
           <Button