const DomGridPad = ({children, pad, active = false, padPressed, padReleased, rgb = Colours.blue}) => ( <div onMouseDown={() => padPressed && padPressed(100)} onMouseUp={() => padReleased && padReleased()} 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 }
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> ) }