const TrackPlayingPad = ({ active, padPressed, padReleased, pad}) => ( <DomGridPad padPressed={padPressed} active={active} rgb={Colours.turquoise} > <PushGridPad rgb={active ? Colours.turquoise : Colours.off} pad={pad} padPressed={padPressed} /> </DomGridPad> )
const displayRgb = (fadeEffect, { isCurrentStep, isDisplayedInEditWindow, isSelected, hasNote, velocity, recording }) => { if (isDisplayedInEditWindow) return Colours.yellow if (isSelected) return Colours.orange if (isCurrentStep) return hasNote ? Colours.turquoise : (recording ? Colours.red : Colours.green) return hasNote ? fadeEffect(Colours.blue, velocity) : Colours.off }
render() { const {pad, rgb, velocity} = this.props if (rgb) { (rgb === Colours.off) ? pad.ledOff() : pad.ledRGB(...rgb) } else { pad.ledOn(velocity) } return null }
const KitSelectButton = props => { const {button, selectKit, selected} = props return ( <DomGridButton onPressed={selectKit} active={selected} rgb={selected ? Colours.green : Colours.off} > <PushChannelSelectButton button={button} onPressed={selectKit} rgb={selected ? Colours.green : Colours.off} /> </DomGridButton> ) }
const PatternSelect = props => { const {pad, patternId, selectPattern, selected} = props const rgb = selected ? Colours.orange : (patternId ? Colours.blue : Colours.off) return ( <DomGridPad padPressed={selectPattern} active={true} rgb={rgb} > <PushGridPad pad={pad} padPressed={selectPattern} rgb={rgb} /> </DomGridPad> ) }
const TrackSelectButton = ({ button, onPressed, trackId, selected }) => ( <DomGridButton onPressed={onPressed} active={selected} rgb={Colours.orange} > <PushGridSelectButton button={button} onPressed={onPressed} rgb={selected ? Colours.orange : Colours.off} /> </DomGridButton> )
render() { const {button, rgb} = this.props switch (rgb) { case Colours.off: button.ledOff() break case Colours.green: button.ledOn('green') break case Colours.red: button.ledOn('red') break case Colours.yellow: button.ledOn('yellow') break case Colours.orange: default: button.ledOn('orange') break } return null }
const PatternLengthPad = props => { const {length, numberOfSteps, pad, padPressed} = props return ( <DomGridPad padPressed={padPressed} active={true} rgb={length <= numberOfSteps ? Colours.orange : Colours.off} > <PushGridPad pad={pad} padPressed={padPressed} rgb={length <= numberOfSteps ? Colours.orange : Colours.off} /> </DomGridPad> ) }