@lumx/react 2.2.9-alpha-exported-hooks2 → 2.2.10

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

@@ -40,6 +40,40 @@ export const Simple = ({ theme }: any) => {
     );
 };
 
+export const SimpleWithAutoPlay = ({ theme }: any) => {
+    const images = thumbnailsKnob(6);
+    const activeIndex = number('Active index', 0);
+    const groupBy = number('Group by', 1);
+    const interval = number('Autoplay interval (in milliseconds)', 1000);
+
+    return (
+        <Slideshow
+            activeIndex={activeIndex}
+            autoPlay
+            interval={interval}
+            slideshowControlsProps={{
+                nextButtonProps: { label: 'Next' },
+                previousButtonProps: { label: 'Previous' },
+                playButtonProps: { label: 'Play/Pause' },
+            }}
+            theme={theme}
+            groupBy={groupBy}
+            style={{ width: '50%' }}
+        >
+            {images.map(({ image, alt }, index) => (
+                <SlideshowItem key={`${image}-${index}`}>
+                    <ImageBlock
+                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
+                        image={image}
+                        alt={alt}
+                        theme={theme}
+                    />
+                </SlideshowItem>
+            ))}
+        </Slideshow>
+    );
+};
+
 export const ResponsiveSlideShowSwipe = () => {
     const slides = range(3);
     return (
@@ -52,6 +86,7 @@ export const ResponsiveSlideShowSwipe = () => {
             </ul>
             <FlexBox vAlign="center">
                 <Slideshow
+                    activeIndex={0}
                     slideshowControlsProps={{
                         nextButtonProps: { label: 'Next' },
                         previousButtonProps: { label: 'Previous' },

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

@@ -35,5 +35,5 @@ describe(`<${Slideshow.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuite(setup, { prop: 'wrapper' }, { className: CLASSNAME });
 });

package/src/components/slideshow/Slideshow.tsx

@@ -1,25 +1,19 @@
-import React, { CSSProperties, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
-import classNames from 'classnames';
-
-import { SlideshowControls, SlideshowControlsProps, Theme } from '@lumx/react';
+import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils';
+import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Defines the props of the component.
  */
-export interface SlideshowProps extends GenericProps {
-    /** Index of the current slide. */
-    activeIndex?: number;
-    /** Whether the automatic rotation of the slideshow is enabled or not. */
-    autoPlay?: boolean;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Number of slides to group together. */
-    groupBy?: number;
+export interface SlideshowProps
+    extends GenericProps,
+        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy'> {
+    /** current slide active */
+    activeIndex?: SlidesProps['activeIndex'];
     /** Interval between each slide when automatic rotation is enabled. */
     interval?: number;
     /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
@@ -34,26 +28,10 @@ export interface SlideshowProps extends GenericProps {
             | 'parentRef'
             | 'theme'
         >;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Callback when slide changes */
     onChange?(index: number): void;
-    /** slideshow HTML id attribute */
-    id?: string;
-    /** slides wrapper HTML id attribute */
-    slidesId?: string;
 }
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Slideshow';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
 /**
  * Component default props.
  */
@@ -102,6 +80,10 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         onPaginationClick,
         onPreviousClick,
         slideshow,
+        stopAutoPlay,
+        startAutoPlay,
+        isForcePaused,
+        setIsForcePaused,
     } = SlideshowControls.useSlideshowControls({
         activeIndex,
         defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,
@@ -114,72 +96,68 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         slidesId,
     });
 
-    // Inline style of wrapper element.
-    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
+    useFocusWithin({
+        element: slideshow,
+        onFocusIn: stopAutoPlay,
+        onFocusOut: startAutoPlay,
+    });
 
-    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
-        <section
+        <Slides
+            activeIndex={currentIndex}
             id={slideshowId}
+            className={className}
+            theme={theme}
+            fillHeight={fillHeight}
+            groupBy={groupBy}
+            isAutoPlaying={isAutoPlaying}
+            autoPlay={autoPlay}
+            slidesId={slideshowSlidesId}
+            setIsAutoPlaying={setIsAutoPlaying}
+            startIndexVisible={startIndexVisible}
+            endIndexVisible={endIndexVisible}
+            interval={interval}
             ref={mergeRefs(ref, setSlideshow)}
+            afterSlides={
+                slideshowControlsProps && slidesCount > 1 ? (
+                    <div className={`${Slides.className}__controls`}>
+                        <SlideshowControls
+                            {...slideshowControlsProps}
+                            activeIndex={currentIndex}
+                            onPaginationClick={onPaginationClick}
+                            onNextClick={onNextClick}
+                            onPreviousClick={onPreviousClick}
+                            slidesCount={slidesCount}
+                            parentRef={slideshow}
+                            theme={theme}
+                            isAutoPlaying={isAutoPlaying}
+                            nextButtonProps={{
+                                'aria-controls': slideshowSlidesId,
+                                ...slideshowControlsProps.nextButtonProps,
+                            }}
+                            previousButtonProps={{
+                                'aria-controls': slideshowSlidesId,
+                                ...slideshowControlsProps.previousButtonProps,
+                            }}
+                            playButtonProps={
+                                autoPlay
+                                    ? {
+                                          'aria-controls': slideshowSlidesId,
+                                          onClick: () => setIsForcePaused(!isForcePaused),
+                                          ...slideshowControlsProps.playButtonProps,
+                                      }
+                                    : undefined
+                            }
+                        />
+                    </div>
+                ) : undefined
+            }
             {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--fill-height`]: fillHeight,
-                [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy),
-            })}
-            aria-roledescription="carousel"
-            aria-live={isAutoPlaying ? 'off' : 'polite'}
         >
-            <div
-                id={slideshowSlidesId}
-                className={`${CLASSNAME}__slides`}
-                onMouseEnter={() => setIsAutoPlaying(false)}
-                onMouseLeave={() => setIsAutoPlaying(Boolean(autoPlay))}
-            >
-                <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {React.Children.map(children, (child: React.ReactNode, index: number) => {
-                        if (React.isValidElement(child)) {
-                            const isCurrentlyVisible = index >= startIndexVisible && index <= endIndexVisible;
-
-                            return React.cloneElement(child, {
-                                style: !isCurrentlyVisible
-                                    ? { visibility: 'hidden', ...(child.props.style || {}) }
-                                    : child.props.style || {},
-                                'aria-hidden': !isCurrentlyVisible,
-                            });
-                        }
-
-                        return null;
-                    })}
-                </div>
-            </div>
-
-            {slideshowControlsProps && slidesCount > 1 && (
-                <div className={`${CLASSNAME}__controls`}>
-                    <SlideshowControls
-                        {...slideshowControlsProps}
-                        activeIndex={currentIndex}
-                        onPaginationClick={onPaginationClick}
-                        onNextClick={onNextClick}
-                        onPreviousClick={onPreviousClick}
-                        slidesCount={slidesCount}
-                        parentRef={slideshow}
-                        theme={theme}
-                        nextButtonProps={{
-                            'aria-controls': slideshowSlidesId,
-                            ...slideshowControlsProps.nextButtonProps,
-                        }}
-                        previousButtonProps={{
-                            'aria-controls': slideshowSlidesId,
-                            ...slideshowControlsProps.previousButtonProps,
-                        }}
-                    />
-                </div>
-            )}
-        </section>
+            {children}
+        </Slides>
     );
 });
 
-Slideshow.displayName = COMPONENT_NAME;
-Slideshow.className = CLASSNAME;
+Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { AspectRatio, ImageBlock, Slideshow, SlideshowControls, SlideshowItem } from '@lumx/react';
+import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
 import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
@@ -30,53 +31,88 @@ export const Simple = () => {
 };
 
 export const ControllingSlideshow = ({ theme }: any) => {
-    const items = thumbnailsKnob(6);
-    const slideshowStyle = {
-        width: '50%',
-    };
+    const images = thumbnailsKnob(6);
 
     const {
-        activeIndex,
-        setActiveIndex,
+        activeIndex: currentIndex,
+        slideshowId,
+        setSlideshow,
+        isAutoPlaying,
+        slideshowSlidesId,
+        setIsAutoPlaying,
+        startIndexVisible,
+        endIndexVisible,
+        slidesCount,
         onNextClick,
-        onPreviousClick,
         onPaginationClick,
+        onPreviousClick,
+        slideshow,
+        isForcePaused,
+        setIsForcePaused,
+        stopAutoPlay,
+        startAutoPlay,
     } = SlideshowControls.useSlideshowControls({
+        activeIndex: 0,
+        defaultActiveIndex: 0,
+        autoPlay: true,
         itemsCount: 6,
+        groupBy: 1,
+    });
+
+    useFocusWithin({
+        element: slideshow,
+        onFocusIn: stopAutoPlay,
+        onFocusOut: startAutoPlay,
     });
 
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
-        <div style={{ height: 400, width: 500, position: 'relative' }}>
-            <Slideshow
-                activeIndex={activeIndex}
-                theme={theme}
-                autoPlay
-                groupBy={1}
-                style={slideshowStyle}
-                onChange={setActiveIndex}
-            >
-                {items.map(({ image, alt }) => (
-                    <SlideshowItem key={image}>
-                        <ImageBlock
-                            image={image}
-                            alt={alt}
-                            thumbnailProps={{ aspectRatio: AspectRatio.vertical }}
-                            theme={theme}
-                        />
-                    </SlideshowItem>
-                ))}
-            </Slideshow>
-            <div style={{ position: 'absolute', bottom: 0, right: -24 }}>
-                <SlideshowControls
-                    activeIndex={activeIndex}
-                    slidesCount={items.length}
-                    onNextClick={onNextClick}
-                    onPreviousClick={onPreviousClick}
-                    onPaginationClick={onPaginationClick}
-                    nextButtonProps={{ label: 'Next' }}
-                    previousButtonProps={{ label: 'Previous' }}
-                />
-            </div>
-        </div>
+        <Slides
+            activeIndex={currentIndex}
+            id={slideshowId}
+            ref={setSlideshow}
+            theme={theme}
+            isAutoPlaying={isAutoPlaying}
+            autoPlay
+            slidesId={slideshowSlidesId}
+            setIsAutoPlaying={setIsAutoPlaying}
+            startIndexVisible={startIndexVisible}
+            endIndexVisible={endIndexVisible}
+            groupBy={1}
+            style={{ width: '50%' }}
+            afterSlides={
+                <div className={`${Slides.className}__controls`}>
+                    <SlideshowControls
+                        activeIndex={currentIndex}
+                        onPaginationClick={onPaginationClick}
+                        onNextClick={onNextClick}
+                        onPreviousClick={onPreviousClick}
+                        slidesCount={slidesCount}
+                        parentRef={slideshow}
+                        theme={theme}
+                        isAutoPlaying={isAutoPlaying}
+                        nextButtonProps={{ label: 'Next', 'aria-controls': slideshowSlidesId }}
+                        previousButtonProps={{ label: 'Previous', 'aria-controls': slideshowSlidesId }}
+                        playButtonProps={{
+                            label: 'Play/Pause',
+                            'aria-controls': slideshowSlidesId,
+                            onClick: () => setIsForcePaused(!isForcePaused),
+                        }}
+                        paginationItemLabel={(index) => `Slide ${index}`}
+                    />
+                </div>
+            }
+        >
+            {images.map(({ image, alt }, index) => (
+                <SlideshowItem key={`${image}-${index}`}>
+                    <ImageBlock
+                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
+                        image={image}
+                        alt={alt}
+                        theme={theme}
+                    />
+                </SlideshowItem>
+            ))}
+        </Slides>
     );
 };

package/src/components/slideshow/SlideshowControls.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import range from 'lodash/range';
 
-import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
+import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { WINDOW } from '@lumx/react/constants';
@@ -24,7 +24,7 @@ export interface SlideshowControlsProps extends GenericProps {
     nextButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** Reference to the parent element on which we want to listen touch swipe. */
-    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement;
+    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;
     /** 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'>;
@@ -38,6 +38,13 @@ export interface SlideshowControlsProps extends GenericProps {
     onPaginationClick?(index: number): void;
     /** On previous button click callback. */
     onPreviousClick?(loopback?: boolean): void;
+    /** whether the slideshow is currently playing */
+    isAutoPlaying?: boolean;
+    /** function to be executed in order to retrieve the label for the pagination item */
+    paginationItemLabel?: (index: number) => string;
+    /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
+    playButtonProps?: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
 }
 
 /**
@@ -77,6 +84,9 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         previousButtonProps,
         slidesCount,
         theme,
+        isAutoPlaying = false,
+        playButtonProps,
+        paginationItemLabel,
         ...forwardedProps
     } = props;
 
@@ -130,7 +140,6 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                 const isActive = activeIndex === index;
                                 const isOutRange = index < visibleRange.min || index > visibleRange.max;
                                 return (
-                                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                     <button
                                         className={classNames(
                                             handleBasicClasses({
@@ -143,13 +152,36 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                         key={index}
                                         type="button"
                                         onClick={() => onPaginationClick?.(index)}
+                                        {...{
+                                            'aria-label': paginationItemLabel
+                                                ? paginationItemLabel(index)
+                                                : `${index + 1} / ${slidesCount}`,
+                                        }}
                                     />
                                 );
                             }),
-                        [slidesCount, visibleRange.min, visibleRange.max, activeIndex, onPaginationClick],
+                        [
+                            slidesCount,
+                            visibleRange.min,
+                            visibleRange.max,
+                            activeIndex,
+                            paginationItemLabel,
+                            onPaginationClick,
+                        ],
                     )}
                 </div>
             </div>
+
+            {playButtonProps ? (
+                <IconButton
+                    {...playButtonProps}
+                    icon={isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline}
+                    className={`${CLASSNAME}__play`}
+                    color={theme === Theme.dark ? 'light' : 'dark'}
+                    emphasis={Emphasis.low}
+                />
+            ) : null}
+
             <IconButton
                 {...nextButtonProps}
                 icon={mdiChevronRight}

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,13 +1,22 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import classNames from 'classnames';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
+import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
+
+import { SLIDESHOW_TRANSITION_DURATION } from '@lumx/core/js/constants';
+
 /**
  * Defines the props of the component.
  */
-export type SlideshowItemProps = GenericProps;
+export interface SlideshowItemProps extends GenericProps {
+    /** whether the slideshow item is currently visible */
+    isCurrentlyVisible?: boolean;
+    /** interval in which slides are automatically shown */
+    interval?: number;
+}
 
 /**
  * Component display name.
@@ -27,7 +36,12 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, children, ...forwardedProps } = props;
+    const { className, children, isCurrentlyVisible = false, ...forwardedProps } = props;
+    const [isVisible, setIsVisible] = useState<boolean>(isCurrentlyVisible);
+
+    useDelayedVisibility(isCurrentlyVisible, SLIDESHOW_TRANSITION_DURATION, (isNowVisible) => {
+        setIsVisible(isNowVisible);
+    });
 
     return (
         <div
@@ -41,6 +55,8 @@ export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRe
             aria-roledescription="slide"
             role="group"
             {...forwardedProps}
+            style={!isVisible ? { visibility: 'hidden', ...(forwardedProps.style || {}) } : forwardedProps.style || {}}
+            aria-hidden={!isVisible}
         >
             {children}
         </div>