@lumx/react 2.0.0-alpha.0 → 2.0.1

package/src/components/select/WithSelectContext.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Ref, useCallback, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 import { uid } from 'uid';
@@ -10,7 +10,7 @@ import { Placement } from '@lumx/react/components/popover/Popover';
 
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { CoreSelectProps, SelectVariant } from './constants';
 
 /** The display name of the component. */
@@ -25,57 +25,6 @@ export const DEFAULT_PROPS: Partial<CoreSelectProps> = {
     variant: SelectVariant.input,
 };
 
-/**
- * Listen on element focus to store the focus status.
- *
- * @param element    Element to focus.
- * @param setIsFocus Setter used to store the focus status of the element.
- * @param isOpen Is the list opened
- * @param wasBlurred is it blurred
- * @param setWasBlurred set blurred
- * @param onBlur when its blurred
- */
-function useHandleElementFocus(
-    element: HTMLElement | null,
-    setIsFocus: (b: boolean) => void,
-    isOpen: boolean,
-    wasBlurred: boolean,
-    setWasBlurred: (b: boolean) => void,
-    onBlur?: () => void,
-) {
-    useEffect((): VoidFunction | void => {
-        if (!element) {
-            return undefined;
-        }
-
-        const setFocus = () => {
-            if (!isOpen) {
-                setIsFocus(true);
-            }
-        };
-
-        const setBlur = () => {
-            if (!isOpen) {
-                setIsFocus(false);
-
-                if (onBlur) {
-                    onBlur();
-                }
-            }
-
-            setWasBlurred(true);
-        };
-
-        element.addEventListener('focus', setFocus);
-        element.addEventListener('blur', setBlur);
-
-        return () => {
-            element.removeEventListener('focus', setFocus);
-            element.removeEventListener('blur', setBlur);
-        };
-    }, [element, isOpen, onBlur, setIsFocus, setWasBlurred, wasBlurred]);
-}
-
 export const WithSelectContext = (
     SelectElement: React.FC<any>,
     {
@@ -94,7 +43,6 @@ export const WithSelectContext = (
         isRequired,
         isValid,
         label,
-        onBlur,
         onClear,
         onDropdownClose,
         onInfiniteScroll,
@@ -110,10 +58,7 @@ export const WithSelectContext = (
     const selectId = useMemo(() => id || `select-${uid()}`, [id]);
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
-    const [isFocus, setIsFocus] = useState(Boolean(isOpen));
-    const [wasBlurred, setWasBlurred] = useState(false);
-
-    useHandleElementFocus(anchorRef.current, setIsFocus, Boolean(isOpen), wasBlurred, setWasBlurred, onBlur);
+    const isFocus = useListenFocus(anchorRef);
 
     const handleKeyboardNav = useCallback(
         (evt: React.KeyboardEvent<HTMLElement>) => {
@@ -129,8 +74,6 @@ export const WithSelectContext = (
         if (onDropdownClose) {
             onDropdownClose();
         }
-
-        setWasBlurred(false);
         anchorRef?.current?.blur();
     };
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,6 +1,7 @@
-import { AspectRatio, ImageBlock, Slideshow, SlideshowItem, SlideshowProps } from '@lumx/react';
-import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
+import range from 'lodash/range';
+import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem } from '@lumx/react';
+import { boolean, number } from '@storybook/addon-knobs';
 import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 
 export default { title: 'LumX components/slideshow/Slideshow' };
@@ -12,16 +13,15 @@ export const Simple = ({ theme }: any) => {
     const autoPlay = boolean('Autoplay', false);
     const interval = number('Autoplay interval (in milliseconds)', 1000);
 
-    const slideshowControlsProps: SlideshowProps['slideshowControlsProps'] = {
-        nextButtonProps: { label: 'Next' },
-        previousButtonProps: { label: 'Previous' },
-    };
     return (
         <Slideshow
             activeIndex={activeIndex}
             autoPlay={autoPlay}
             interval={interval}
-            slideshowControlsProps={slideshowControlsProps}
+            slideshowControlsProps={{
+                nextButtonProps: { label: 'Next' },
+                previousButtonProps: { label: 'Previous' },
+            }}
             theme={theme}
             groupBy={groupBy}
             style={{ width: '50%' }}
@@ -39,3 +39,43 @@ export const Simple = ({ theme }: any) => {
         </Slideshow>
     );
 };
+
+export const ResponsiveSlideShowSwipe = () => {
+    const slides = range(3);
+    return (
+        <>
+            In responsive mode
+            <ul>
+                <li>The slideshow is swipe-able (horizontal left/right)</li>
+                <li>The vertical scroll should still be possible</li>
+                <li>Clicking on elements inside a slide should work correctly</li>
+            </ul>
+            <FlexBox vAlign="center">
+                <Slideshow
+                    slideshowControlsProps={{
+                        nextButtonProps: { label: 'Next' },
+                        previousButtonProps: { label: 'Previous' },
+                    }}
+                >
+                    {slides.map((slide) => (
+                        <SlideshowItem key={`${slide}`}>
+                            <FlexBox
+                                style={{ border: '1px solid grey', maxWidth: 300, height: 300 }}
+                                hAlign="center"
+                                vAlign="center"
+                            >
+                                <Button onClick={() => alert(`Clicked button ${slide}`)}>Button {slide}</Button>
+                            </FlexBox>
+                        </SlideshowItem>
+                    ))}
+                </Slideshow>
+            </FlexBox>
+            {
+                /* Line padding to test the vertical scroll.*/
+                range(100).map((i) => (
+                    <br key={i} />
+                ))
+            }
+        </>
+    );
+};

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import pick from 'lodash/pick';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
@@ -28,7 +29,9 @@ const setup = ({ ...propsOverride }: Partial<SlideshowProps> = {}, shallowRender
 describe(`<${Slideshow.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, { or: [Slideshow, { path: [Slideshow, SlideshowControls] }] });
+        itShouldRenderStories(pick(stories, ['default', 'Simple']), {
+            or: [Slideshow, { path: [Slideshow, SlideshowControls] }],
+        });
     });
 
     // Common tests suite.

package/src/components/slideshow/Slideshow.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, forwardRef, useCallback, useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -83,7 +83,8 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         ...forwardedProps
     } = props;
     const [currentIndex, setCurrentIndex] = useState(activeIndex as number);
-    const rootRef: React.MutableRefObject<null> = useRef(null);
+    // Use state instead of a ref to make the slideshow controls update directly when the element is set.
+    const [element, setElement] = useState<HTMLDivElement>();
 
     // Number of slideshow items.
     const itemsCount = React.Children.count(children);
@@ -93,22 +94,40 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
     const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
 
     // Change current index to display next slide.
-    const goToNextSlide = useCallback(() => {
-        if (currentIndex === slidesCount - 1) {
-            setCurrentIndex(0);
-        } else if (currentIndex < slidesCount - 1) {
-            setCurrentIndex((index) => index + 1);
-        }
-    }, [currentIndex, slidesCount, setCurrentIndex]);
+    const goToNextSlide = useCallback(
+        (loopback = true) => {
+            setCurrentIndex((index) => {
+                if (loopback && index === slidesCount - 1) {
+                    // Loopback to the start.
+                    return 0;
+                }
+                if (index < slidesCount - 1) {
+                    // Next slide.
+                    return index + 1;
+                }
+                return index;
+            });
+        },
+        [slidesCount, setCurrentIndex],
+    );
 
     // Change current index to display previous slide.
-    const goToPreviousSlide = useCallback(() => {
-        if (currentIndex === 0) {
-            setCurrentIndex(slidesCount - 1);
-        } else if (currentIndex > 0) {
-            setCurrentIndex((index) => index - 1);
-        }
-    }, [currentIndex, slidesCount, setCurrentIndex]);
+    const goToPreviousSlide = useCallback(
+        (loopback = true) => {
+            setCurrentIndex((index) => {
+                if (loopback && index === 0) {
+                    // Loopback to the end.
+                    return slidesCount - 1;
+                }
+                if (index > 0) {
+                    // Previous slide.
+                    return index - 1;
+                }
+                return index;
+            });
+        },
+        [slidesCount, setCurrentIndex],
+    );
 
     // Auto play
     const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
@@ -135,16 +154,22 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
     );
 
     // Handle click or keyboard event to go to next slide.
-    const handleControlNextSlide = useCallback(() => {
-        setIsAutoPlaying(false);
-        goToNextSlide();
-    }, [goToNextSlide]);
+    const handleControlNextSlide = useCallback(
+        (loopback = true) => {
+            setIsAutoPlaying(false);
+            goToNextSlide(loopback);
+        },
+        [goToNextSlide],
+    );
 
     // Handle click or keyboard event to go to previous slide.
-    const handleControlPreviousSlide = useCallback(() => {
-        setIsAutoPlaying(false);
-        goToPreviousSlide();
-    }, [goToPreviousSlide]);
+    const handleControlPreviousSlide = useCallback(
+        (loopback = true) => {
+            setIsAutoPlaying(false);
+            goToPreviousSlide(loopback);
+        },
+        [goToPreviousSlide],
+    );
 
     // If the activeIndex props changes, update the current slide
     useEffect(() => {
@@ -160,7 +185,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
         <div
-            ref={mergeRefs(ref, rootRef)}
+            ref={mergeRefs(ref, setElement)}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
                 [`${CLASSNAME}--fill-height`]: fillHeight,
@@ -183,7 +208,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                         onNextClick={handleControlNextSlide}
                         onPreviousClick={handleControlPreviousSlide}
                         slidesCount={slidesCount}
-                        parentRef={rootRef}
+                        parentRef={element}
                         theme={theme}
                     />
                 </div>

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -6,7 +6,6 @@ import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
 export const Simple = () => {
-    const parentRef = React.useRef(null);
     const slidesCount = 9;
     const [activeIndex, setActiveIndex] = React.useState(0);
     const maxIndex = slidesCount - 1;
@@ -19,7 +18,6 @@ export const Simple = () => {
         <SlideshowControls
             activeIndex={activeIndex}
             slidesCount={slidesCount}
-            parentRef={parentRef}
             onNextClick={onNextClick}
             onPreviousClick={onPreviousClick}
             onPaginationClick={onPaginationClick}
@@ -30,7 +28,6 @@ export const Simple = () => {
 };
 
 export const ControllingSlideshow = ({ theme }: any) => {
-    const parentRef = React.useRef(null);
     const items = thumbnailsKnob(6);
     const [activeIndex, setActiveIndex] = React.useState(0);
     const maxIndex = items.length - 1;
@@ -67,7 +64,6 @@ export const ControllingSlideshow = ({ theme }: any) => {
                 <SlideshowControls
                     activeIndex={activeIndex}
                     slidesCount={items.length}
-                    parentRef={parentRef}
                     onNextClick={onNextClick}
                     onPreviousClick={onPreviousClick}
                     onPaginationClick={onPaginationClick}

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useMemo } from 'react';
+import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import range from 'lodash/range';
@@ -6,8 +6,10 @@ import range from 'lodash/range';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
-import { useKeyOrSwipeNavigate } from '@lumx/react/components/slideshow/useKeyOrSwipeNavigate';
+import { WINDOW } from '@lumx/react/constants';
 
+import { useSwipeNavigate } from './useSwipeNavigate';
+import { useKeyNavigate } from './useKeyNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
 
@@ -20,8 +22,8 @@ export interface SlideshowControlsProps extends GenericProps {
     /** Props to pass to the next button (minus those already set by the SlideshowControls props). */
     nextButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-    /** Reference to the parent element. */
-    parentRef: RefObject<HTMLDivElement>;
+    /** Reference to the parent element on which we want to listen touch swipe. */
+    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement;
     /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
@@ -30,11 +32,11 @@ export interface SlideshowControlsProps extends GenericProps {
     /** Theme adapting the component to light or dark background. */
     theme?: Theme;
     /** On next button click callback. */
-    onNextClick?(): void;
+    onNextClick?(loopback?: boolean): void;
     /** On pagination change callback. */
     onPaginationClick?(index: number): void;
     /** On previous button click callback. */
-    onPreviousClick?(): void;
+    onPreviousClick?(loopback?: boolean): void;
 }
 
 /**
@@ -77,8 +79,21 @@ export const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = f
         ...forwardedProps
     } = props;
 
-    // Listen to keyboard & touch swipe to navigate left & right.
-    useKeyOrSwipeNavigate(parentRef.current, onNextClick, onPreviousClick);
+    let parent;
+    if (WINDOW) {
+        // Checking window object to avoid errors in SSR.
+        parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
+    }
+    // Listen to keyboard navigate left & right.
+    useKeyNavigate(parent, onNextClick, onPreviousClick);
+    // Listen to touch swipe navigate left & right.
+    useSwipeNavigate(
+        parent,
+        // Go next without loopback.
+        useCallback(() => onNextClick?.(false), [onNextClick]),
+        // Go previous without loopback.
+        useCallback(() => onPreviousClick?.(false), [onPreviousClick]),
+    );
 
     // Pagination "bullet" range.
     const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -133,11 +133,6 @@ Array [
         onNextClick={[Function]}
         onPaginationClick={[Function]}
         onPreviousClick={[Function]}
-        parentRef={
-          Object {
-            "current": null,
-          }
-        }
         previousButtonProps={
           Object {
             "label": "Previous",

package/src/components/slideshow/useKeyNavigate.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+/**
+ * Listen keyboard to navigate left and right.
+ */
+export function useKeyNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
+    useEffect(() => {
+        if (!element) return undefined;
+        const onKeyNavigate = (evt: KeyboardEvent) => {
+            let callback;
+            if (evt?.key === 'ArrowRight') {
+                callback = onPrevious;
+            } else if (evt?.key === 'ArrowLeft') {
+                callback = onNext;
+            }
+            if (!callback) return;
+
+            callback();
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+
+        element.addEventListener('keydown', onKeyNavigate);
+        return () => {
+            element.removeEventListener('keydown', onKeyNavigate);
+        };
+    }, [onPrevious, onNext, element]);
+}