<label className="option">

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

<input

type={type}

name={name}

id={name}

value={value}

onChange={onChange}

/>

</label>

static propTypes = {

children: array,

visibleSlides: number,

slideBy: number

}

constructor (props) {

super(props)

this.state = {

mount: true,

visibleSlides: this.props.visibleSlides || 3,

slideBy: this.props.slideBy

}

}

setRef = (name) => (ref) => { this[name] = ref }

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

const { checked, value, type } = target

const isCheckable = (type) => ['checkbox', 'radio'].includes(type)

const coerceValueToType = ({ type, vlaue }) => type === 'number' ? Number(value) : value

this.setState({

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

})

}

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

<label className="option">

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

<input

type={type}

name={name}

id={name}

value={this.state[name]}

onChange={this.setStateFromInput(name)}

/>

</label>

)

render () {

const { children } = this.props

const {

animationDuration = 300, infinte, gutter = '1em', preventScroll,

preventSnapping, slideBy, startAt = 4, slideTo, mount } = this.state

const next = () => this.track.next().catch(() => {})

const prev = () => this.track.prev().catch(() => {})

return (

<div>

<div className="options">

<this.Control label="un/mount Track" type="checkbox" name="mount" />

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

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

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

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

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

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

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

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

</div>

{ mount

? <div className="slider">

<Track

animationDuration={animationDuration}

className="track"

easing={(t) => t}

infinite={infinte}

gutter={gutter}

onSlideClick={() => { console.log('You clicked on a slide!') }}

preventScroll={preventScroll}

preventSnapping={preventSnapping}

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

slideBy={slideBy}

slideClass="slideClassName"

slideTo={slideTo}

startAt={startAt}

visibleSlides={this.state.visibleSlides}

>{ children }</Track>

<div className="controls">

<button className="prevButton" onClick={prev}>Let me see that beard again!</button>

<button className="nextButton" onClick={next}>I wanna see more beards!</button>

</div>

</div>

: null }

</div>

)

}