const DomGridButton = ({active, children, onPressed, onReleased, rgb = Colours.orange}) => ( <div onMouseDown={() => onPressed && onPressed()} onMouseUp={() => onReleased && onReleased()} style={{ ...padStyleBase, ...(active ? padStyleActive(rgb) : {}) }} > {children} </div> )
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 {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 DomButton = ({active, children, doubleHeight, padPressed, padReleased, rgb = Colours.orange, label = ''}) => ( <div onMouseDown={() => padPressed && padPressed()} onMouseUp={() => padReleased && padReleased()} style={Object.assign({}, padStyleBase, active ? padStyleActive(rgb) : {}, doubleHeight ? { height: 48 } : {} )} > {label} {children} </div> )
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> ) }
const ChromaticKeyboard = ({trackId, basePitch, blackRow, whiteRow, recording, isStepSelected, selectedStepPitch}) => { const Component = isStepSelected ? ChromaticStepEditorContainer : recording ? ChromaticSampleRecorderContainer : ChromaticSamplePlayerContainer return ( <div style={style} > {[0, 1, 3, 0, 6, 8, 10, 0].map((offset, index) => offset ? ( <Component key={index} trackId={trackId} pitch={offset + basePitch} pad={blackRow[index]} rgb={(selectedStepPitch === (offset + basePitch)) ? Colours.orange : Colours.black} /> ) : <DomGridPad key={index} /> )} {[0, 2, 4, 5, 7, 9, 11, 12].map((offset, index) => ( <Component key={index} trackId={trackId} pitch={offset + basePitch} pad={whiteRow[index]} rgb={(selectedStepPitch === (offset + basePitch)) ? Colours.orange : Colours.white} /> ))} </div> ) }
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> ) }