resolve comments, fix bug with disabled arrows

openstax · Jan 22, 2025 · c27809c · c27809c
1 parent 250f849
commit c27809c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 25 deletions.
diff --git a/src/components/Carousel.stories.tsx b/src/components/Carousel.stories.tsx
@@ -40,15 +40,15 @@ export const WithToggleButtonGroups = () => {
     const FirstToggleGroup =
         <ToggleButtonGroup
             selectedItems={selectedIetms}
-            handlerSelectedItems={setSelectedItems}
+            onSelectionChange={setSelectedItems}
         >
             {firstSection}
         </ToggleButtonGroup>
 
     const SecondToggleGroup =
         <ToggleButtonGroup
             selectedItems={selectedIetms}
-            handlerSelectedItems={setSelectedItems}
+            onSelectionChange={setSelectedItems}
         >
             {secondSection}
         </ToggleButtonGroup>

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -12,17 +12,28 @@ export const Carousel = ({ children, customWidth }: CarouselProps) => {
     const [dragX, setDragX] = React.useState(0);
     const [dragging, setDragging] = React.useState(false);
     const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const [isLeftArrowDisabled, setIsLeftArrowDisabled] = React.useState(false);
+    const [isRightArrowDisabled, setIsRightArrowDisabled] = React.useState(false);
     const scrollSpeed = 100;
 
-    const handlePrev = () => {
+    React.useEffect(() => {
         if (wrapperRef.current) {
+          const isDisabled = (currentIndex >= ((wrapperRef.current.scrollWidth || 0) - (wrapperRef.current.clientWidth || 0)));
+          setIsRightArrowDisabled(isDisabled);
+          setIsLeftArrowDisabled((currentIndex) === 0);
+
+        }
+      }, [currentIndex, wrapperRef]);
+
+    const handlePrev = () => {
+        if (wrapperRef.current && !isLeftArrowDisabled) {
             const itemWidth = (wrapperRef.current.clientWidth / children.length);
             setCurrentIndex((prevIndex) => Math.max(prevIndex - itemWidth - scrollSpeed, 0));
         }
     };
 
     const handleNext = () => {
-        if (wrapperRef.current) {
+        if (wrapperRef.current && !isRightArrowDisabled) {
             const itemWidth = (wrapperRef.current.clientWidth / children.length);
             const maxIndex = (wrapperRef.current.scrollWidth - wrapperRef.current.clientWidth);
             setCurrentIndex((prevIndex) => Math.min(prevIndex + itemWidth + scrollSpeed, maxIndex));
@@ -61,7 +72,12 @@ export const Carousel = ({ children, customWidth }: CarouselProps) => {
 
     return (
         <CarouselContainer customWidth={customWidth}>
-            <StyledLeftArrow onClick={handlePrev} disabled={(currentIndex) === 0} />
+            <StyledLeftArrow 
+                onClick={handlePrev} 
+                width="20" 
+                height="15" 
+                disabled={isLeftArrowDisabled} 
+            />
             <CarouselOverflow
                 onPointerDown={handleMouseDown}
                 onPointerMove={handleMouseMove}
@@ -84,7 +100,11 @@ export const Carousel = ({ children, customWidth }: CarouselProps) => {
                     })}
                 </CarouselWrapper>
             </CarouselOverflow>
-            <StyledRightArrow onClick={handleNext} disabled={currentIndex >= ((wrapperRef.current?.scrollWidth) || 0) - (wrapperRef.current?.clientWidth || 0)} />
+            <StyledRightArrow 
+                onClick={handleNext} 
+                width="20" 
+                height="15" 
+                disabled={isRightArrowDisabled} />
         </CarouselContainer>
 
     );

diff --git a/src/components/Carousel/styles.ts b/src/components/Carousel/styles.ts
@@ -4,7 +4,7 @@ import { RightArrow } from "../svgs/RightArrow";
 
 export const CarouselContainer = styled.div<{customWidth?: string}>`
   position: relative;
-  width: ${({customWidth}) =>  customWidth ? customWidth : '30rem'};
+  width: ${({customWidth}) =>  customWidth ? customWidth : '100%'};
   margin: 0 4rem;
 `;
 
@@ -27,7 +27,7 @@ export const CarouselItem = styled.div`
 export const StyledLeftArrow = styled(LeftArrow)<{ disabled: boolean }>`
   position: absolute;
   top: 50%;
-  left: -2rem;
+  left: -3rem;
   transform: translateY(-50%);
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
@@ -36,7 +36,7 @@ export const StyledLeftArrow = styled(LeftArrow)<{ disabled: boolean }>`
 export const StyledRightArrow = styled(RightArrow)<{ disabled: boolean }>`
   position: absolute;
   top: 50%;
-  right: -2rem;
+  right: -3rem;
   transform: translateY(-50%);
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};

diff --git a/src/components/ToggleButtonGroup.stories.tsx b/src/components/ToggleButtonGroup.stories.tsx
@@ -18,7 +18,7 @@ export const MultipleSelection = () => {
             <ToggleButtonGroup
                 selectionMode='multiple'
                 selectedItems={selectedIetms}
-                handlerSelectedItems={setSelectedItems}
+                onSelectionChange={setSelectedItems}
             >
                 {childrenListWithKeys}
             </ToggleButtonGroup>
@@ -29,16 +29,16 @@ export const MultipleSelection = () => {
 };
 
 export const SingleSelection = () => {
-    const [selectedIetms, setSelectedItems] = React.useState(new Set<Key>([]));
+    const [selectedItems, setSelectedItems] = React.useState(new Set<Key>([]));
     return (
         <>
             <ToggleButtonGroup
-                selectedItems={selectedIetms}
-                handlerSelectedItems={setSelectedItems}
+                selectedItems={selectedItems}
+                onSelectionChange={setSelectedItems}
             >
                 {childrenListWithKeys}
             </ToggleButtonGroup>
-            <p>Current selections: {[...selectedIetms].join(', ')}</p>
+            <p>Current selections: {[...selectedItems].join(', ')}</p>
         </>
 
     );

diff --git a/src/components/ToggleButtonGroup/index.tsx b/src/components/ToggleButtonGroup/index.tsx
@@ -5,23 +5,23 @@ import { Key } from "react-aria-components";
 export interface ToggleButtonGroupProps {
     children: { key: string, value: string }[];
     selectedItems: Set<Key>;
-    handlerSelectedItems?: React.Dispatch<React.SetStateAction<Set<Key>>>;
+    onSelectionChange?: React.Dispatch<React.SetStateAction<Set<Key>>>;
     selectionMode?: 'single' | 'multiple'
 }
 
 export const ToggleButtonGroup = (
     {
         children,
         selectedItems,
-        handlerSelectedItems,
+        onSelectionChange,
         selectionMode = 'single',
     }: ToggleButtonGroupProps) => {
 
     return (
         <StyledToggleButtonGroup
             selectionMode={selectionMode}
             selectedKeys={selectedItems}
-            onSelectionChange={handlerSelectedItems}
+            onSelectionChange={onSelectionChange}
         >
             {children.map((child) =>
                 <StyledToggleButton 

diff --git a/src/components/__snapshots__/Carousel.spec.tsx.snap b/src/components/__snapshots__/Carousel.spec.tsx.snap
@@ -5,13 +5,13 @@ exports[`Carousel matches snapshot 1`] = `
   className="sc-bczRLJ UjSde"
 >
   <svg
-    className="sc-eCYdqJ dpQayj"
-    disabled={true}
+    className="sc-eCYdqJ hCWvEb"
+    disabled={false}
     fill="none"
-    height="10"
+    height="15"
     onClick={[Function]}
     viewBox="0 0 8 10"
-    width="8"
+    width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -72,13 +72,13 @@ exports[`Carousel matches snapshot 1`] = `
     </div>
   </div>
   <svg
-    className="sc-jSMfEi gdSgqS"
-    disabled={true}
+    className="sc-jSMfEi cBydFW"
+    disabled={false}
     fill="none"
-    height="10"
+    height="15"
     onClick={[Function]}
     viewBox="0 0 8 10"
-    width="8"
+    width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path