pretty big changes: added highlighted keys refactored Octave component to use a PianoKeyComponent and updated TS types to enums

2023-03-20 00:13:57 +01:00
parent a9cd0f16ae
commit efede253dc
4 changed files with 313 additions and 124 deletions
@@ -0,0 +1,109 @@
+import { Box, Pressable, Text } from "native-base";
+import { Key } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import {
+	Note,
+	PianoKey,
+	NoteNameBehavior,
+	octaveKeys,
+	Accidental,
+	HighlightedKey,
+	keyToStr,
+} from "../../models/Piano";
+
+type PianoKeyProps = {
+	key?: Key;
+	pianoKey: PianoKey;
+	showNoteNames: NoteNameBehavior;
+	bg: string;
+	bgPressed: string;
+	bgHovered: string;
+	onKeyDown: () => void;
+	onKeyUp: () => void;
+	text: Parameters<typeof Text>[0];
+	style: StyleProp<ViewStyle>;
+};
+
+const isNoteVisible = (
+	noteNameBehavior: NoteNameBehavior,
+	isPressed: boolean,
+	isHovered: boolean
+) => {
+	if (noteNameBehavior === NoteNameBehavior.always) return true;
+	if (noteNameBehavior === NoteNameBehavior.never) return false;
+
+	if (noteNameBehavior === NoteNameBehavior.onpress) {
+		return isPressed;
+	} else if (noteNameBehavior === NoteNameBehavior.onhover) {
+		return isHovered;
+	}
+	return false;
+};
+
+const PianoKeyComp = ({
+	key,
+	pianoKey,
+	showNoteNames,
+	bg,
+	bgPressed,
+	bgHovered,
+	onKeyDown,
+	onKeyUp,
+	text,
+	style,
+}: PianoKeyProps) => {
+	const textDefaultProps = {
+		style: {
+			userSelect: "none",
+			WebkitUserSelect: "none",
+			MozUserSelect: "none",
+			msUserSelect: "none",
+		},
+		fontSize: "xl",
+		color: "black",
+	} as Parameters<typeof Text>[0];
+
+	const textProps = { ...textDefaultProps, ...text };
+	return (
+		<Pressable
+			key={key}
+			onPressIn={onKeyDown}
+			onPressOut={onKeyUp}
+			style={style}
+		>
+			{({ isHovered, isPressed }) => (
+				<Box
+					bg={(() => {
+						if (isPressed) return bgPressed;
+						if (isHovered) return bgHovered;
+						return bg;
+					})()}
+					w="100%"
+					h="100%"
+					borderWidth="1px"
+					borderColor="black"
+					justifyContent="flex-end"
+					alignItems="center"
+				>
+					{isNoteVisible(showNoteNames, isPressed, isHovered) && (
+						<Text {...textProps}>{keyToStr(pianoKey)}</Text>
+					)}
+				</Box>
+			)}
+		</Pressable>
+	);
+};
+
+PianoKeyComp.defaultProps = {
+	key: octaveKeys[0],
+	showNoteNames: NoteNameBehavior.onhover,
+	keyBg: "white",
+	keyBgPressed: "gray.200",
+	keyBgHovered: "gray.100",
+	onKeyDown: () => {},
+	onKeyUp: () => {},
+	text: {},
+	style: {},
+};
+
+export default PianoKeyComp;