react-motion-gallery 1.0.0 → 2.0.1

package/dist/index.d.ts

@@ -1,54 +1,521 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import { APITypes } from 'plyr-react';
 
+type BreakpointMap = Record<string, number>;
+type ResponsiveNumber = number | string | Array<number | string> | Record<string, number | string>;
 type MediaItem = {
     kind: 'image';
     src: string;
     alt?: string;
+    caption?: React__default.ReactNode;
+    srcSet?: string;
+    sizes?: string;
+    width?: number;
+    height?: number;
 } | {
     kind: 'video';
     src: string;
     alt?: string;
     thumb?: string;
+    caption?: React__default.ReactNode;
 };
-type ThumbnailPosition = 'top' | 'right' | 'bottom' | 'left' | null;
+type EntryItem = {
+    media?: MediaItem[];
+    [key: string]: any;
+};
+type EntryMediaRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    media: MediaItem;
+    mediaIndex: number;
+};
+type MediaEntryLink = {
+    entryIndex: number;
+    mediaIndex: number;
+};
+type EntryOverlayRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    mediaIndex: number | null;
+    link: MediaEntryLink | null;
+    opacity: number;
+    fsIndex: number;
+    style: React__default.CSSProperties;
+    containerProps: React__default.HTMLAttributes<HTMLDivElement>;
+};
+type EntryMediaLayout = 'slider' | 'grid' | 'masonry';
+type EntryCardRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    media: React__default.ReactNode;
+};
+type ThumbnailPosition = 'top' | 'right' | 'bottom' | 'left';
+type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
 type FSImageRender = (args: {
-    item: {
-        kind: 'image';
-        src: string;
-        alt?: string;
-    };
+    item: Extract<MediaItem, {
+        kind: "image";
+    }>;
     index: number;
     isZoomed: boolean;
     className: string;
-    baseStyle: React.CSSProperties;
-}) => React.ReactNode;
+    baseStyle: React__default.CSSProperties;
+}) => React__default.ReactNode;
 type PlyrSourceBuilder = (item: MediaItem, index: number) => Plyr.SourceInfo;
 type PlyrOptionsResolver = Plyr.Options | ((item: MediaItem, index: number) => Plyr.Options);
-type Props = {
-    children: ReactNode;
-    thumbnailChildren?: ReactNode;
-    items?: MediaItem[];
-    urls?: string[];
-    thumbnails?: ThumbnailPosition;
-    thumbnailWidth?: number | string;
-    thumbnailHeight?: number | string;
-    loop?: boolean;
+type ResponsiveHeightRule = {
+    query: string;
+    height: string;
+};
+type ArrowRenderArgs = {
+    ref: React__default.RefObject<HTMLDivElement | null>;
+    onClick: () => void;
+    hidden: boolean;
+    disabled: boolean;
+    createRipple: (el: HTMLElement) => void;
+    className?: string;
+};
+type DotsRenderArgs = {
+    ref: React__default.RefObject<HTMLDivElement | null>;
+    count: number;
+    activeIndex: number;
+    hidden: boolean;
+    goTo: (index: number) => void;
+    getDotRef: (index: number) => (el: HTMLDivElement | null) => void;
+    createRipple: (el: HTMLElement) => void;
+    classNameContainer?: string;
+    classNameDot?: string;
+};
+type ProgressRenderArgs = {
+    ref: React__default.Ref<HTMLDivElement>;
+    innerRef?: React__default.Ref<HTMLDivElement>;
+    hidden: boolean;
+    progress: number;
+    classNameContainer?: string;
+    classNameBar?: string;
+};
+type FsCounterArgs = {
+    index: number;
+    count: number;
+};
+type FsCaptionPlacement = 'top' | 'right' | 'bottom' | 'left';
+type FsCaptionRenderArgs = {
+    item: MediaItem;
+    index: number;
+    isZoomed: boolean;
+};
+type IndexMode = 'instant' | 'animated';
+type LoadingOptions = {
+    isLoading?: boolean;
+    skeletonCount?: ResponsiveNumber;
+    renderLoading?: (args: {
+        layout: 'slider' | 'grid' | 'masonry' | 'entries';
+        count: number;
+    }) => React__default.ReactNode;
+};
+type IntroOptions = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React__default.HTMLAttributes<HTMLDivElement>;
+    }, content: React__default.ReactNode) => React__default.ReactNode;
+    staggerMs?: number;
+    transform?: number | string;
+    durationMs?: number;
+    easing?: string;
+    staggerLimit?: number;
+};
+type ControlStyle = {
+    className?: string;
+    style?: React__default.CSSProperties;
+};
+type LoadingRenderArgs = {
+    layout: 'thumbnails';
+    count: number;
+};
+type IntroRenderArgs = {
+    active: boolean;
+    containerProps: React__default.HTMLAttributes<HTMLDivElement>;
+};
+type ThumbnailLoadingOptions = {
+    isLoading?: boolean;
+    skeletonCount?: ResponsiveNumber;
+    renderLoading?: (args: LoadingRenderArgs) => React__default.ReactNode;
+};
+type ThumbnailIntroOptions = {
+    renderIntro?: (args: IntroRenderArgs, inner: React__default.ReactNode) => React__default.ReactNode;
+    staggerMs?: number;
+    transform?: number;
+    durationMs?: number;
+    easing?: string;
+};
+type ThumbnailLayout = {
+    width?: number | string;
+    height?: number | string;
+};
+type ThumbnailContainerLayout = {
+    width?: number | string;
+    height?: number | string;
+};
+type ThumbnailsLayout = {
+    position?: ResponsivePosition;
+    gap?: number;
+    center?: boolean;
+    thumbnail?: ThumbnailLayout;
+    container?: ThumbnailContainerLayout;
+};
+type ThumbnailsElements = {
+    container?: ControlStyle;
+    thumbnail?: ControlStyle;
+};
+type ThumbnailsScroll = {
     freeScroll?: boolean;
-    autoPlay?: boolean;
-    autoScroll?: boolean;
     groupCells?: boolean;
-    centerAlign?: boolean;
+    loop?: boolean;
+    skipSnaps?: boolean;
+    centerActiveThumb?: boolean;
+};
+type ThumbnailsMotion = {
+    selectDuration?: number;
+    freeScrollDuration?: number;
+    friction?: number;
+};
+type ThumbnailsRipple = {
+    enabled?: boolean;
+    className?: string;
+};
+type ThumbnailsControls = {
+    enabled?: boolean;
+    arrow?: ControlStyle;
+    prev?: ControlStyle;
+    next?: ControlStyle;
+    render?: (args: ArrowRenderArgs & {
+        dir: "prev" | "next";
+    }) => React__default.ReactNode;
+    renderPrev?: (args: ArrowRenderArgs) => React__default.ReactNode;
+    renderNext?: (args: ArrowRenderArgs) => React__default.ReactNode;
+    ripple?: ThumbnailsRipple;
+};
+type ThumbnailsTransitions = {
+    loading?: ThumbnailLoadingOptions;
+    intro?: ThumbnailIntroOptions;
+};
+type ThumbnailsOptions = {
+    children?: React__default.ReactNode;
+    layout?: ThumbnailsLayout;
+    elements?: ThumbnailsElements;
+    scroll?: ThumbnailsScroll;
+    controls?: ThumbnailsControls;
+    motion?: ThumbnailsMotion;
+    transitions?: ThumbnailsTransitions;
+    breakpointMap?: BreakpointMap;
+};
+type FullscreenArrows = {
+    enabled?: boolean;
+    arrow?: ControlStyle;
+    prev?: ControlStyle;
+    next?: ControlStyle;
+    render?: (args: {
+        dir: "prev" | "next";
+    }) => HTMLElement | null;
+    renderPrev?: () => HTMLElement | null;
+    renderNext?: () => HTMLElement | null;
+};
+type FullscreenClose = {
+    enabled?: boolean;
+    style?: React__default.CSSProperties;
+    className?: string;
+    render?: () => React__default.ReactNode | HTMLElement | null;
+};
+type FullscreenCounter = {
+    enabled?: boolean;
+    style?: React__default.CSSProperties;
+    className?: string;
+    render?: (args: FsCounterArgs) => React__default.ReactNode | HTMLElement | null;
+};
+type FullscreenControlsOptions = {
+    close?: FullscreenClose;
+    arrows?: FullscreenArrows;
+    counter?: FullscreenCounter;
+};
+type FullscreenCaptionOptions = {
+    className?: string;
+    style?: React__default.CSSProperties;
+    placement?: FsCaptionPlacement;
+    width?: number;
+    height?: number;
+    breakpoint?: number;
+    render?: (args: FsCaptionRenderArgs) => React__default.ReactNode;
+};
+type FullscreenEffectsOptions = {
+    introDuration?: number;
+    introEasing?: string;
+    introFade?: boolean;
+    slideFade?: boolean;
+    slideFadeDuration?: number;
+    slideFadeEasing?: string;
+    thumbnailsFadeDuration?: number;
+    thumbnailsFadeEasing?: string;
+};
+type FullscreenSliderOptions = {
+    duration?: number;
+    friction?: number;
+};
+type FullscreenZoomPanOptions = {
+    clickZoomLevel?: number;
+    maxZoomLevel?: number;
+    panDuration?: number;
+    panFriction?: number;
+};
+type FullscreenVideoOptions = {
+    source?: PlyrSourceBuilder;
+    options?: PlyrOptionsResolver;
+    style?: React__default.CSSProperties;
+    className?: string;
+};
+type FullscreenOptions = {
+    enabled?: boolean;
+    items?: MediaItem[] | string[];
+    renderImage?: FSImageRender;
+    video?: FullscreenVideoOptions;
+    thumbnails?: ThumbnailsOptions;
+    controls?: FullscreenControlsOptions;
+    caption?: FullscreenCaptionOptions;
+    slider?: FullscreenSliderOptions;
+    zoom?: FullscreenZoomPanOptions;
+    effects?: FullscreenEffectsOptions;
+};
+type SliderLayout = {
     gap?: number;
-    backgroundColor?: string;
-    fsRenderImage?: FSImageRender;
-    plyrSourceBuilder?: PlyrSourceBuilder;
-    plyrOptions?: PlyrOptionsResolver;
-    responsive?: boolean;
-    containerStyle?: React.CSSProperties;
-    sliderColumnStyle?: React.CSSProperties;
-    sliderHeight?: string;
-};
-declare function Gallery({ children, thumbnailChildren, items, urls, thumbnails, thumbnailWidth, thumbnailHeight, loop, freeScroll, autoPlay, autoScroll, groupCells, centerAlign, gap, backgroundColor, fsRenderImage, plyrSourceBuilder, plyrOptions, responsive, containerStyle, sliderColumnStyle, sliderHeight }: Props): react_jsx_runtime.JSX.Element;
+    cellsPerSlide?: ResponsiveNumber;
+};
+type SliderDirection = {
+    dir?: 'ltr' | 'rtl';
+    axis?: 'x' | 'y';
+};
+type SliderSize = {
+    height?: string;
+    heightRules?: ResponsiveHeightRule[];
+    initialHeight?: number | string;
+};
+type SliderElements = {
+    viewport?: ControlStyle;
+    container?: ControlStyle;
+};
+type SliderScroll = {
+    groupCells?: boolean;
+    skipSnaps?: boolean;
+    freeScroll?: boolean;
+    loop?: boolean;
+};
+type SliderArrows = {
+    enabled?: boolean;
+    arrow?: ControlStyle;
+    prev?: ControlStyle;
+    next?: ControlStyle;
+    render?: (args: ArrowRenderArgs & {
+        dir: "prev" | "next";
+    }) => React__default.ReactNode;
+    renderPrev?: (args: ArrowRenderArgs) => React__default.ReactNode;
+    renderNext?: (args: ArrowRenderArgs) => React__default.ReactNode;
+};
+type SliderDots = {
+    enabled?: boolean;
+    root?: ControlStyle;
+    dot?: ControlStyle;
+    render?: (args: DotsRenderArgs) => React__default.ReactNode;
+};
+type SliderProgress = {
+    enabled?: boolean;
+    root?: ControlStyle;
+    bar?: ControlStyle;
+    render?: (args: ProgressRenderArgs) => React__default.ReactNode;
+};
+type SliderRipple = {
+    enabled?: boolean;
+    className?: string;
+};
+type SliderControls = {
+    arrows?: SliderArrows;
+    dots?: SliderDots;
+    progress?: SliderProgress;
+    ripple?: SliderRipple;
+};
+type SliderAutoPlay = {
+    enabled?: boolean;
+    speedMs?: number;
+    pauseMs?: number;
+    pauseOnHover?: boolean;
+};
+type SliderAutoScroll = {
+    enabled?: boolean;
+    speedMs?: number;
+    pauseMs?: number;
+    pauseOnHover?: boolean;
+};
+type SliderAuto = {
+    play?: SliderAutoPlay;
+    scroll?: SliderAutoScroll;
+};
+type SliderLoadingOptions = {
+    isLoading?: boolean;
+    skeletonCount?: ResponsiveNumber;
+    renderLoading?: (args: {
+        layout: 'slider' | 'grid' | 'masonry' | 'entries';
+        count: number;
+    }) => React__default.ReactNode;
+};
+type SliderIntroOptions = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React__default.HTMLAttributes<HTMLDivElement>;
+    }, content: React__default.ReactNode) => React__default.ReactNode;
+    staggerMs?: number;
+    transform?: number | string;
+    durationMs?: number;
+    easing?: string;
+};
+type SliderTransitions = {
+    loading?: SliderLoadingOptions;
+    intro?: SliderIntroOptions;
+};
+type SliderParallax = {
+    enabled?: boolean;
+    bleedPct?: string;
+    borderRadius?: string;
+    sideWidth?: string;
+};
+type SliderScale = {
+    enabled?: boolean;
+    amount?: number;
+};
+type SliderFade = {
+    enabled?: boolean;
+};
+type SliderEffects = {
+    parallax?: SliderParallax;
+    scale?: SliderScale;
+    fade?: SliderFade;
+};
+type SliderMotion = {
+    selectDuration?: number;
+    freeScrollDuration?: number;
+    friction?: number;
+};
+type SliderOptions = {
+    layout?: SliderLayout;
+    direction?: SliderDirection;
+    size?: SliderSize;
+    align?: 'start' | 'center';
+    scroll?: SliderScroll;
+    elements?: SliderElements;
+    lazyLoad?: boolean;
+    controls?: SliderControls;
+    thumbnails?: ThumbnailsOptions;
+    auto?: SliderAuto;
+    transitions?: SliderTransitions;
+    motion?: SliderMotion;
+    effects?: SliderEffects;
+};
+type GridOptions = {
+    columns?: ResponsiveNumber;
+    minColumnWidth?: number | string;
+    gap?: ResponsiveNumber;
+    rootClassName?: string;
+    itemClassName?: string;
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+type MasonryOptions = {
+    columns?: ResponsiveNumber;
+    gap?: ResponsiveNumber;
+    placement?: "balanced" | "roundRobin";
+    estimatedItemHeight?: number;
+    as?: React__default.ElementType;
+    rootRef?: React__default.Ref<HTMLDivElement>;
+    classNames?: {
+        root?: string;
+        column?: string;
+        item?: string;
+    };
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+type EntriesOptions = {
+    items?: EntryItem[];
+    mediaLayout?: EntryMediaLayout;
+    render?: {
+        card?: (args: EntryCardRenderArgs) => React__default.ReactNode;
+        media?: (args: EntryMediaRenderArgs) => React__default.ReactNode;
+        overlay?: (args: EntryOverlayRenderArgs) => React__default.ReactNode;
+    };
+    overlay?: ControlStyle;
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+interface GalleryApi {
+    rootNode(): HTMLElement | null;
+    containerNode(): HTMLElement | null;
+    slideNodes(): HTMLElement[];
+    onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
+    whenReady?(): Promise<HTMLElement[]>;
+    isReady?(): boolean;
+    scrollTo(index: number, jump?: boolean): void;
+    scrollNext(jump?: boolean): void;
+    scrollPrev(jump?: boolean): void;
+    canScrollNext(): boolean;
+    canScrollPrev(): boolean;
+    getIndex(): number;
+    selectCell(index: number, jump?: boolean): void;
+    scrollProgress(): number;
+    cellsInView(): number[];
+    append(nodes: React__default.ReactNode | React__default.ReactNode[]): number;
+    prepend(nodes: React__default.ReactNode | React__default.ReactNode[]): number;
+    insert(index: number, nodes: React__default.ReactNode | React__default.ReactNode[]): number;
+    remove(indexOrPredicate: number | ((i: number) => boolean)): number;
+    replace(index: number, node: React__default.ReactNode): void;
+    setItems(nodes: React__default.ReactNode[]): number;
+    onIndexChange(cb: (i: number, meta: {
+        mode: IndexMode;
+    }) => void): () => void;
+}
+type Props = {
+    children?: ReactNode;
+    fullscreen?: FullscreenOptions;
+    slider?: SliderOptions;
+    layout?: 'slider' | 'grid' | 'masonry' | 'entries';
+    grid?: GridOptions;
+    masonry?: MasonryOptions;
+    entries?: EntriesOptions;
+    breakpoints?: BreakpointMap;
+    root?: ControlStyle;
+    container?: ControlStyle;
+};
+declare const Gallery: React__default.ForwardRefExoticComponent<Props & React__default.RefAttributes<GalleryApi>>;
+
+type RmgPlyrSourceBuilder = (args: {
+    src: string;
+    poster?: string;
+}) => any;
+type RmgPlyrOptionsResolver = any | ((args: {
+    src: string;
+    poster?: string;
+    index: number;
+}) => any);
+type RmgPlyrVideoProps = {
+    src: string;
+    poster?: string;
+    alt?: string;
+    source?: any;
+    sourceBuilder?: RmgPlyrSourceBuilder;
+    options?: RmgPlyrOptionsResolver;
+    className?: string;
+    style?: React.CSSProperties;
+    posterClassName?: string;
+    posterStyle?: React.CSSProperties;
+    onApi?: (api: APITypes | null) => void;
+    registerApiByIndex?: (index: number, api: APITypes | null) => void;
+};
+declare function RmgPlyrVideo(props: RmgPlyrVideoProps): react_jsx_runtime.JSX.Element;
 
-export { type MediaItem, Gallery as default };
+export { Gallery, RmgPlyrVideo };