static propTypes = {

afterSlide: func,

animationDuration: number,

beforeSlide: func,

children: array,

className: string,

easing: func,

gutter: string,

infinite: bool,

onSlideClick: func,

preventScroll: bool,

slideBy: number,

slideClass: string,

slideTo: number,

snapPositionOffset: number,

snapToSlide: bool,

startAt: number,

visibleSlides: number,

}

static defaultProps = {

afterSlide: (newIndex) => console.log(`slid to index ${newIndex}`),

animationDuration: 300,

beforeSlide: (newIndex) =>

console.log(`about to slide to index ${newIndex}`),

className: 'whirligig',

gutter: '1em',

onSlideClick: () => {

console.log('You clicked on a slide!')

},

easing: (t) => t,

infinite: false,

preventScroll: false,

slideClass: 'slideClassName',

slideBy: 0,

slideTo: 0,

snapPositionOffset: 0,

snapToSlide: false,

startAt: 0,

visibleSlides: 0,

}

state = {

afterSlide: this.props.afterSlide,

animationDuration: this.props.animationDuration,

beforeSlide: this.props.beforeSlide,

className: this.props.className,

easing: this.props.easing,

gutter: this.props.gutter,

infinite: this.props.infinite,

onSlideClick: this.props.onSlideClick,

preventScroll: this.props.preventScroll,

slideBy: this.props.slideBy,

slideClass: this.props.slideClass,

slideTo: this.props.slideTo,

snapPositionOffset: this.props.snapPositionOffset,

snapToSlide: this.props.snapToSlide,

startAt: this.props.startAt,

visibleSlides: this.props.visibleSlides,

}

// eslint-disable-next-line camelcase

UNSAFE_componentWillReceiveProps(nextProps) {

this.setState({

afterSlide: nextProps.afterSlide,

animationDuration: nextProps.animationDuration,

beforeSlide: nextProps.beforeSlide,

className: nextProps.className,

easing: nextProps.easing,

infinite: nextProps.infinite,

gutter: nextProps.gutter,

onSlideClick: nextProps.onSlideClick,

preventScroll: nextProps.preventScroll,

slideBy: nextProps.slideBy,

slideClass: nextProps.slideClass,

slideTo: nextProps.slideTo,

snapPositionOffset: nextProps.snapPositionOffset,

snapToSlide: nextProps.snapToSlide,

startAt: nextProps.startAt,

visibleSlides: nextProps.visibleSlides,

})

}

componentDidMount() {

try {

const persistedState = window.localStorage.getItem('react-whirligig')

if (persistedState) {

const state = JSON.parse(persistedState)

this.setState(state)

}

} catch (_) {}

}

componentDidUpdate() {

window.localStorage.setItem('react-whirligig', JSON.stringify(this.state))

}

handleAfterSlide = (currentSlide) => {

this.setState({ currentSlide })

}

setRef = (name) => (ref) => {

this[name] = ref

}

setStateFromInput = (propName) => ({ target }) => {

const { checked, type } = target

this.setState({

[propName]: isCheckable(type) ? checked : coerceValueToType(target),

})

}

Control = ({ label, type, name }) => (

<label htmlFor={name} className="option">

<span className="label">{label}</span>

<input

type={type}

name={name}

id={name}

checked={isCheckable(type) && this.state[name]}

value={isCheckable(type) ? name : this.state[name]}

onChange={this.setStateFromInput(name)}

/>

</label>

)

render() {

const { children } = this.props

const {

animationDuration,

beforeSlide,

className,

easing,

infinite,

gutter,

onSlideClick,

preventScroll,

slideBy,

slideClass,

slideTo,

snapPositionOffset,

snapToSlide,

startAt,

visibleSlides,

} = this.state

const next = () => this.whirligig.next().catch(noop)

const prev = () => this.whirligig.prev().catch(noop)

const after = (idx) => this.handleAfterSlide(idx)

return (

<div>

<div className="slider">

<W

afterSlide={after}

animationDuration={animationDuration}

beforeSlide={beforeSlide}

className={className}

easing={easing}

gutter={gutter}

infinite={infinite}

onSlideClick={onSlideClick}

preventScroll={preventScroll}

ref={this.setRef('whirligig')}

slideBy={slideBy}

slideClass={slideClass}

slideTo={slideTo}

snapPositionOffset={snapPositionOffset}

snapToSlide={snapToSlide}

startAt={startAt}

visibleSlides={visibleSlides}

>

{children}

</W>

<div className="controls">

<button className="prevButton" onClick={prev} />

<button className="nextButton" onClick={next} />

</div>

</div>

<div className="options">

<span className="option currentSlide">

Current slide is {this.state.currentSlide}

</span>

<this.Control label="afterSlide" type="func" name="afterSlide" />

<this.Control

label="animationDuration"

type="number"

name="animationDuration"

/>

<this.Control label="beforeSlide" type="func" name="beforeSlide" />

<this.Control label="className" type="text" name="className" />

<this.Control label="easing" type="func" name="easing" />

<this.Control label="infinite" type="checkbox" name="infinite" />

<this.Control label="gutter" type="text" name="gutter" />

<this.Control label="onSlideClick" type="func" name="onSlideClick" />

<this.Control

label="preventScroll"

type="checkbox"

name="preventScroll"

/>

<this.Control

label="snapToSlide"

type="checkbox"

name="snapToSlide"

/>

<this.Control label="slideBy" type="number" name="slideBy" />

<this.Control label="slideClass" type="text" name="slideClass" />

<this.Control label="slideTo" type="number" name="slideTo" />

<this.Control label="startAt" type="number" name="startAt" />

<this.Control

label="snapPositionOffset"

type="number"

name="snapPositionOffset"

/>

<this.Control

label="visibleSlides"

type="number"

name="visibleSlides"

/>

</div>

</div>

)

}

state = { docs: '' }

// eslint-disable-next-line camelcase

UNSAFE_componentWillMount() {

window

.fetch(

'https://raw.githubusercontent.com/jane/react-whirligig/master/README.md'

)

.then((a) => a.text())

.then((t) => {

this.setState({ docs: marked(t) })

})

.catch(console.error)

}

render() {

return (

<div className="wrapper">

<div

dangerouslySetInnerHTML={{ __html: this.state.docs }}

className="md"

/>

<Slider>

{slides.map(({ src, height, width, joiner, text }, i) => (

<figure className="mySlide" key={`${src}-${i}`}>

<figcaption className="caption">Slide index {i}</figcaption>

{src && (

<img

alt="Place Zombie"

src={`${src}/${width}${joiner}${height}?${i}`}

/>

)}

{text && <div className="text">{text}</div>}

</figure>

))}

</Slider>

</div>

)

}