import * as React from 'react'
import StyledAccidentalKey from '../StyledAccidentalKey/StyledAccidentalKey'
import StyledNaturalKey from '../StyledNaturalKey/StyledNaturalKey'
import Keyboard, { Props } from './Keyboard'
const Wrapper: React.FC = (props) => (
)
export default {
title: 'Keyboard',
}
// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props?: Partial) => (
)
export const WithActiveKeys = (props?: Partial) => (
)
export const WithDifferentKeyRange = (props?: Partial) => (
)
export const Styled = (props?: Partial) => (
)
export const AnotherStyled = (props?: Partial) => (
)
export const DarkStyled = (props?: Partial) => (
)
const HasMapComponent = (props: any) => {
const [keyChannels, setKeyChannels] = React.useState<{ key: number; velocity: number; channel: number }[]>([])
const midiAccess = React.useRef(undefined)
const handleKeyOn = (newKeys: { key: number; velocity: number; channel: number; id: number }[]) => {
setKeyChannels((oldKeys) => {
const oldKeysKeys = oldKeys.map((k) => k.key)
const newKeysKeys = newKeys.map((k) => k.key)
const keysOff = oldKeys.filter((ok) => !newKeysKeys.includes(ok.key))
const keysOn = newKeys.filter((nk) => !oldKeysKeys.includes(nk.key))
const channel = 0
keysOn.forEach((k) => {
midiAccess.current?.send([0b10010000 + channel, k.key, Math.floor(k.velocity * 127)])
})
keysOff.forEach((k) => {
midiAccess.current?.send([0b10000000 + channel, k.key, Math.floor(k.velocity * 127)])
})
return newKeys
})
}
React.useEffect(() => {
const { navigator: maybeNavigator } = window
const navigator = maybeNavigator as Navigator & {
requestMIDIAccess: () => Promise<{ outputs: Map }>
}
if ('requestMIDIAccess' in navigator) {
navigator.requestMIDIAccess().then((m) => {
midiAccess.current = Array.from(m.outputs.values())[0]
})
}
}, [])
return (
)
}
export const HasMap = () =>
export const Mirrored = () =>
export const Checkbox = (props?: Partial) => (
)
export const Radio = (props?: Partial) => (
)
export const Link = (props?: Partial) => (
`?key=${key}`} />
)
export const Rotated90 = (props?: Partial) => (
)
export const Rotated180 = (props?: Partial) =>
export const Rotated270 = (props?: Partial) => (
)
export const Rotated90Mirrored = (props?: Partial) => (
)
export const Rotated180Mirrored = (props?: Partial) =>
export const Rotated270Mirrored = (props?: Partial) => (
)
export const LabelledKeyboard = (props?: Partial) => (
key} />
)
export const LabelledOctave = (props?: Partial) => (
{
if (Math.floor(key / 12) === 5) {
return key.toString()
}
return ''
}}
/>
)
export const LabelledPitch = (props?: Partial) => (
{
if (key % 12 === 0) {
return 'C'
}
return ''
}}
/>
)
export const LabelledRotatedKeyboard = (props?: Partial) => (
key}
/>
)
export const LabelledRotatedMirroredKeyboard = (props?: Partial) => (
key}
/>
)
export const LabelledStyledKeyboard = (props?: Partial) => (
key}
/>
)