added radix ui scroll area to make scroll height capped, small add ti…

…me edits
calblueprint · Dec 3, 2024 · 462b373 · 462b373
1 parent 6ec3dfd
commit 462b373
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 21 deletions.
diff --git a/components/DateTimeSelection/DateTimeSelection.tsx b/components/DateTimeSelection/DateTimeSelection.tsx
@@ -6,7 +6,7 @@ import { AddTime, Bar, Container, TimeList, Times } from './styles';
 
 export default function DateTimeSelection({ date }: { date: Date }) {
   const [timeList, setTimeList] = useState([
-    <Times>
+    <Times key={0}>
       {/* initialize at 9 am / 5 pm */}
       <TimeSelection minutes={9 * 60} />
       <H6 $color={COLORS.gray8}> - </H6>
@@ -39,7 +39,7 @@ export default function DateTimeSelection({ date }: { date: Date }) {
       </H6>
       <Bar />
       <TimeList> {timeList}</TimeList>
-      <AddTime onClick={() => onAddBtnClick}>
+      <AddTime onClick={() => onAddBtnClick()}>
         <SMALL $color={COLORS.lilac8} $fontWeight={400}>
           add time
         </SMALL>

diff --git a/components/DateTimeSelection/styles.ts b/components/DateTimeSelection/styles.ts
@@ -24,7 +24,8 @@ export const Times = styled.div`
 
 export const AddTime = styled.button`
   all: unset;
-  margin-top: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 `;
 
 export const TimeList = styled.div`

diff --git a/components/TimeSelection/TimeSelection.tsx b/components/TimeSelection/TimeSelection.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
+import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as Select from '@radix-ui/react-select';
 import classnames from 'classnames';
-import { Container, Test } from './styles';
+import { Container, Content } from './styles';
 
 export default function TimeSelection({ minutes }: { minutes: number }) {
   const minutesToFormatted = (minutes: number) => {
@@ -37,21 +38,27 @@ export default function TimeSelection({ minutes }: { minutes: number }) {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Test>
+          <Content>
             <Select.Content className="SelectContent">
-              <Select.Viewport className="SelectViewport">
-                <Select.Group className="group">
-                  {times.map(time => {
-                    const minutes = time[0];
-                    const formattedTime = time[1];
-                    return (
-                      <SelectItem value={minutes}> {formattedTime} </SelectItem>
-                    );
-                  })}
-                </Select.Group>
-              </Select.Viewport>
+              <ScrollArea.Root className="Scroll" type="auto">
+                <Select.Viewport asChild className="SelectViewport">
+                  <ScrollArea.Viewport className="ScrollViewport">
+                    <Select.Group className="group">
+                      {times.map((time, i) => {
+                        const minutes = time[0];
+                        const formattedTime = time[1];
+                        return (
+                          <SelectItem key={i} value={minutes}>
+                            {formattedTime}
+                          </SelectItem>
+                        );
+                      })}
+                    </Select.Group>
+                  </ScrollArea.Viewport>
+                </Select.Viewport>
+              </ScrollArea.Root>
             </Select.Content>
-          </Test>
+          </Content>
         </Select.Portal>
       </Select.Root>
     </Container>

diff --git a/components/TimeSelection/styles.ts b/components/TimeSelection/styles.ts
@@ -37,18 +37,26 @@ export const Container = styled.div`
   }
 `;
 
-export const Test = styled.div`
-  .SelectContent {
-    overflow: hidden;
+export const Content = styled.div`
+  .Scroll {
+    overflow: scroll;
+    height: 200px;
     background-color: white;
     border: 1px solid ${COLORS.rose7};
     border-radius: 8px;
-    height: 200px;
     box-shadow:
       0px 10px 38px -10px rgba(22, 23, 24, 0.35),
       0px 10px 20px -15px rgba(22, 23, 24, 0.2);
   }
 
+  .ScrollViewPort {
+    width: 100%;
+    height: 100%;
+  }
+
+  .SelectContent {
+  }
+
   .SelectScrollButton {
     display: flex;
     align-items: center;

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@next/font": "^14.2.15",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@supabase/supabase-js": "^2.45.4",
     "classnames": "^2.5.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml