107 lines
2.3 KiB
TypeScript
107 lines
2.3 KiB
TypeScript
import { Row, Box } from "native-base";
|
|
import React, { useState, useEffect } from "react";
|
|
import Octave from "./Octave";
|
|
import {
|
|
Note,
|
|
PianoKey,
|
|
NoteNameBehavior,
|
|
KeyPressStyle,
|
|
keyToStr,
|
|
} from "../../models/Piano";
|
|
|
|
type VirtualPianoProps = Parameters<typeof Row>[0] & {
|
|
onNoteDown: (note: PianoKey) => void;
|
|
onNoteUp: (note: PianoKey) => void;
|
|
startOctave: number;
|
|
startNote: Note;
|
|
endOctave: number;
|
|
endNote: Note;
|
|
showNoteNames: NoteNameBehavior; // default "onpress"
|
|
highlightedNotes: Array<PianoKey | string>;
|
|
highlightColor: string;
|
|
specialHighlightedNotes: Array<PianoKey | string>;
|
|
specialHighlightColor: string;
|
|
showOctaveNumbers: boolean;
|
|
keyPressStyle: KeyPressStyle;
|
|
vividKeyPressColor: string;
|
|
};
|
|
|
|
const VirtualPiano = ({
|
|
onNoteDown,
|
|
onNoteUp,
|
|
startOctave,
|
|
startNote,
|
|
endOctave,
|
|
endNote,
|
|
showNoteNames,
|
|
highlightedNotes,
|
|
highlightColor,
|
|
specialHighlightedNotes,
|
|
specialHighlightColor,
|
|
showOctaveNumbers,
|
|
keyPressStyle,
|
|
vividKeyPressColor,
|
|
}: VirtualPianoProps) => {
|
|
const notesList: Array<Note> = [
|
|
Note.C,
|
|
Note.D,
|
|
Note.E,
|
|
Note.F,
|
|
Note.G,
|
|
Note.A,
|
|
Note.B,
|
|
];
|
|
const octaveList = [];
|
|
|
|
for (let octaveNum = startOctave; octaveNum <= endOctave; octaveNum++) {
|
|
octaveList.push(octaveNum);
|
|
}
|
|
|
|
return (
|
|
<Row>
|
|
{octaveList.map((octaveNum) => {
|
|
return (
|
|
<Octave
|
|
width={"350px"}
|
|
height={"200px"}
|
|
key={octaveNum}
|
|
number={octaveNum}
|
|
showNoteNames={showNoteNames}
|
|
showOctaveNumber={showOctaveNumbers}
|
|
highlightedNotes={highlightedNotes}
|
|
startNote={octaveNum == startOctave ? startNote : notesList[0]}
|
|
endNote={
|
|
octaveNum == endOctave ? endNote : notesList[notesList.length - 1]
|
|
}
|
|
onNoteDown={onNoteDown}
|
|
onNoteUp={onNoteUp}
|
|
/>
|
|
);
|
|
})}
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
VirtualPiano.defaultProps = {
|
|
onNoteDown: (n) => {
|
|
console.log("Note down: " + keyToStr(n));
|
|
},
|
|
onNoteUp: (n) => {
|
|
console.log("Note up: " + keyToStr(n));
|
|
},
|
|
startOctave: 2,
|
|
startNote: Note.C,
|
|
endOctave: 2,
|
|
endNote: Note.B,
|
|
showNoteNames: NoteNameBehavior.onpress,
|
|
highlightedNotes: [{ key: Note.D }, { key: Note.G, bgColor: "blue" }],
|
|
highlightColor: "red",
|
|
specialHighlightedNotes: [Note.D, Note.G],
|
|
specialHighlightColor: "blue",
|
|
showOctaveNumbers: true,
|
|
keyPressStyle: "subtle",
|
|
vividKeyPressColor: "red",
|
|
};
|
|
|
|
export default VirtualPiano;
|