react-images/index.d.ts

A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

import React from 'react'

export interface FrameProps {
  accessibility?: boolean
  autoSize?: boolean | 'width' | 'height'
  springConfig?: { [key: string]: number }
  tag?: string
}

export interface Formatters {
  getAltText?: (props: CommonProps) => string
  getNextLabel?: (props: CommonProps) => string
  getPrevLabel?: (props: CommonProps) => string
  getNextTitle?: (props: CommonProps) => string
  getPrevTitle?: (props: CommonProps) => string
  getCloseLabel?: (props: CommonProps) => string
  getFullscreenLabel?: (props: CommonProps) => string
}

export interface TrackProps {
  align?: number
  animations?: Array<{ props: string; stops: Array<[number, number]> }>
  axis?: 'x' | 'y'
  contain?: boolean
  currentView?: any
  flickTimeout?: number
  infinite?: boolean
  instant?: boolean
  onRest?: () => void
  onScroll?: () => void
  onSwipeEnd?: () => void
  onSwipeMove?: () => void
  onSwipeStart?: () => void
  onViewChange?: (view: number) => void
  springConfig?: { [key: string]: number }
  swipe?: boolean | 'mouse' | 'touch'
  swipeThreshold?: number
  tag?: any
  viewsToMove?: number
  viewsToShow?: number | 'auto'
}

export interface ViewType {
  caption?: React.ReactNode
  alt?: string
  source:
    | string
    | {
        download?: string
        fullscreen?: string
        regular: string
        thumbnail?: string
      }
}

export interface CarouselModalProps {
  allowFullscreen?: boolean
  isFullscreen?: boolean
  onClose?(event: React.SyntheticEvent<HTMLButtonElement>): void
  toggleFullscreen?: () => void
}

export interface ModalProps {
  allowFullscreen?: boolean
  children?: React.ReactNode
  closeOnBackdropClick?: boolean
  closeOnEsc?: boolean
  onClose?(event: React.SyntheticEvent<HTMLButtonElement>): void
  styles?: {
    blanket?(base: React.CSSProperties, state: any): React.CSSProperties
    dialog?(base: React.CSSProperties, state: any): React.CSSProperties
    positioner?(base: React.CSSProperties, state: any): React.CSSProperties
  }
}

export interface CommonProps {
  carouselProps?: CarouselProps
  currentIndex?: number
  currentView?: ViewType
  frameProps?: FrameProps
  getStyles?(base: React.CSSProperties, state: any): React.CSSProperties
  innerProps?: { [key: string]: any }
  isFullscreen?: boolean
  isModal?: boolean
  modalProps?: CarouselModalProps
  interactionIsIdle?: boolean
  trackProps?: TrackProps
  views?: Array<ViewType>
}

export type Components = {
  Container?: React.ComponentType<CommonProps>
  Footer?: React.ComponentType<CommonProps>
  FooterCaption?: React.ComponentType<CommonProps>
  FooterCount?: React.ComponentType<CommonProps>
  Header?: React.ComponentType<CommonProps>
  HeaderClose?: React.ComponentType<CommonProps>
  HeaderFullscreen?: React.ComponentType<CommonProps>
  Navigation?: React.ComponentType<CommonProps>
  NavigationPrev?: React.ComponentType<CommonProps>
  NavigationNext?: React.ComponentType<CommonProps>
  View?: React.ComponentType<CommonProps>
}

export interface CarouselState {
  isFullscreen?: boolean
  isModal?: boolean
  interactionIsIdle?: boolean
}

export interface CarouselStyles {
  container?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  footer?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  footerCaption?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  footerCount?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  header?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  headerClose?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  headerFullscreen?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  navigation?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  navigationPrev?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  navigationNext?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
  view?(base: React.CSSProperties, state: CarouselState): React.CSSProperties
}

export interface CarouselProps {
  components?: Components
  currentIndex?: number
  frameProps?: FrameProps
  formatters?: Formatters
  hideControlsWhenIdle?: number | false
  modalProps?: CarouselModalProps
  styles?: CarouselStyles
  trackProps?: TrackProps
  views: Array<ViewType>
}

declare const Carousel: React.ComponentType<CarouselProps>

declare const Modal: React.ComponentType<ModalProps>

declare const ModalGateway: React.ComponentType<{}>

export default Carousel
export { Modal, ModalGateway }