From f45d45ac3ffaf70094fdea2a8279bdd5bd011fd7 Mon Sep 17 00:00:00 2001 From: Kristers Date: Sun, 10 Jul 2022 01:23:59 +0300 Subject: [PATCH 1/3] fix: metronome render props explicit any --- src/components/Metronome.tsx | 9 +- src/react-pro-metronome/src/index.js | 133 +++++++++++++++------------ 2 files changed, 76 insertions(+), 66 deletions(-) diff --git a/src/components/Metronome.tsx b/src/components/Metronome.tsx index 6fc3e92..ee30339 100644 --- a/src/components/Metronome.tsx +++ b/src/components/Metronome.tsx @@ -114,11 +114,10 @@ const Metronome = ({ soundEnabled soundPattern={barCount === 0 ? patternMaker.getMetronomeCountInString() : metronomeString} beatsPerBar={beatsPerBar} - // temporary any for props and state - render={(props: any, state: any) => ( + render={(_, { qNote, subNote }) => ( <> - {setCurrentBeat(state.qNote)} - {setCurrentSubBeat(state.subNote)} + {setCurrentBeat(qNote)} + {setCurrentSubBeat(subNote)}
{isCountIn() - ? Number(patternMaker.getSettings().timeSignature.beats) - state.qNote + 1 + ? Number(patternMaker.getSettings().timeSignature.beats) - qNote + 1 : barCount > 0 && oneToBeatsPerBar.map((beat) => { return ; diff --git a/src/react-pro-metronome/src/index.js b/src/react-pro-metronome/src/index.js index 8e268d6..83c9b1d 100644 --- a/src/react-pro-metronome/src/index.js +++ b/src/react-pro-metronome/src/index.js @@ -1,80 +1,92 @@ -import React, { PureComponent } from 'react' -import PropTypes, { number } from 'prop-types' -import { Howl } from 'howler' - -import { numberInRange, stringWithLength } from '../utils/advanced-prop-types' - -import click3SoundFileMP3 from './sounds/click3.mp3' -import click3SoundFileOGG from './sounds/click3.ogg' -import click3SoundFileAAC from './sounds/click3.aac' - -import click2SoundFileMP3 from './sounds/click2.mp3' -import click2SoundFileOGG from './sounds/click2.ogg' -import click2SoundFileAAC from './sounds/click2.aac' - -import click1SoundFileMP3 from './sounds/click1.mp3' -import click1SoundFileOGG from './sounds/click1.ogg' -import click1SoundFileAAC from './sounds/click1.aac' - -const MAXBPM = 300 -const MAXSUBDIVISION = 8 - -class ProMetronome extends PureComponent { +import { Howl } from 'howler'; +import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + +import { numberInRange, stringWithLength } from '../utils/advanced-prop-types'; + +import click3SoundFileAAC from './sounds/click3.aac'; +import click3SoundFileMP3 from './sounds/click3.mp3'; +import click3SoundFileOGG from './sounds/click3.ogg'; + +import click2SoundFileAAC from './sounds/click2.aac'; +import click2SoundFileMP3 from './sounds/click2.mp3'; +import click2SoundFileOGG from './sounds/click2.ogg'; + +import click1SoundFileAAC from './sounds/click1.aac'; +import click1SoundFileMP3 from './sounds/click1.mp3'; +import click1SoundFileOGG from './sounds/click1.ogg'; + +const MAXBPM = 300; +const MAXSUBDIVISION = 8; + +type ProMetronomeState = { + qNote: number, + subNote: number, +}; + +type ProMetronomeProps = { + bpm: number, + subdivision: number, + isPlaying: boolean, + soundEnabled: boolean, + beatsPerBar: number, + soundPattern: string, + render: (props: ProMetronomeProps, state: ProMetronomeState) => JSX.Element, +}; + +class ProMetronome extends PureComponent { state = { qNote: 1, - subNote: 1 - } + subNote: 1, + }; clickSounds = [ new Howl({ src: [click1SoundFileMP3, click1SoundFileOGG, click1SoundFileAAC], - preload: true + preload: true, }), new Howl({ src: [click2SoundFileMP3, click2SoundFileOGG, click2SoundFileAAC], - preload: true + preload: true, }), new Howl({ src: [click3SoundFileMP3, click3SoundFileOGG, click3SoundFileAAC], - preload: true - }) - ] + preload: true, + }), + ]; update = () => { - const { soundEnabled, soundPattern, subdivision } = this.props - const { qNote, subNote } = this.state + const { soundEnabled, soundPattern, subdivision } = this.props; + const { qNote, subNote } = this.state; if (soundEnabled && soundPattern.length === this.props.beatsPerBar * subdivision) { - const soundLevel = soundPattern.charAt( - (qNote - 1) * subdivision + subNote - 1 - ) - if (soundLevel > 0 && soundLevel <= 3) - this.clickSounds[soundLevel - 1].play() + const soundLevel = soundPattern.charAt((qNote - 1) * subdivision + subNote - 1); + if (soundLevel > 0 && soundLevel <= 3) this.clickSounds[soundLevel - 1].play(); } if (subNote < subdivision) { - this.setState(prevState => ({ - subNote: prevState.subNote + 1 - })) + this.setState((prevState) => ({ + subNote: prevState.subNote + 1, + })); } else { - this.setState(prevState => ({ + this.setState((prevState) => ({ // modification: prevState.qNote === X (Beats per Bar) qNote: prevState.qNote === this.props.beatsPerBar ? 1 : prevState.qNote + 1, - subNote: 1 - })) + subNote: 1, + })); } - } + }; calculateInterval = (bpm, subdivision) => { - return Math.floor(60000 / (bpm * subdivision)) - } + return Math.floor(60000 / (bpm * subdivision)); + }; componentDidMount() { if (this.props.isPlaying) { this.timerID = setInterval( this.update, this.calculateInterval(this.props.bpm, this.props.subdivision) - ) + ); } } @@ -84,29 +96,28 @@ class ProMetronome extends PureComponent { this.timerID = setInterval( this.update, this.calculateInterval(nextProps.bpm, nextProps.subdivision) - ) + ); } else { - clearInterval(this.timerID) + clearInterval(this.timerID); } } else if ( nextProps.isPlaying && - (nextProps.bpm !== this.props.bpm || - nextProps.subdivision !== this.props.subdivision) + (nextProps.bpm !== this.props.bpm || nextProps.subdivision !== this.props.subdivision) ) { - clearInterval(this.timerID) + clearInterval(this.timerID); this.timerID = setInterval( this.update, this.calculateInterval(nextProps.bpm, nextProps.subdivision) - ) + ); } } componentWillUnmount() { - clearInterval(this.timerID) + clearInterval(this.timerID); } render() { - return this.props.render(this.props, this.state) + return this.props.render(this.props, this.state); } } @@ -117,13 +128,13 @@ ProMetronome.propTypes = { soundEnabled: PropTypes.bool, beatsPerBar: PropTypes.number, soundPattern: (props, propName, componentName) => - // pretty sure props['beatsPerBar'] is correct for prop access within propTypes - // it follows the props['subdivision'] pattern, look more into propTypes checks as I believe - // these are for error checking (console, or test). Probably redundant after upgrade to typescript, - // but maybe useful for logging as cannot be checked at compile time. + // pretty sure props['beatsPerBar'] is correct for prop access within propTypes + // it follows the props['subdivision'] pattern, look more into propTypes checks as I believe + // these are for error checking (console, or test). Probably redundant after upgrade to typescript, + // but maybe useful for logging as cannot be checked at compile time. stringWithLength(props['beatsPerBar'] * props['subdivision'])(props, propName, componentName), render: PropTypes.func.isRequired, -} +}; ProMetronome.defaultProps = { bpm: 80, @@ -132,6 +143,6 @@ ProMetronome.defaultProps = { soundEnabled: false, beatsPerBar: 4, soundPattern: '', -} +}; -export default ProMetronome +export default ProMetronome; From bafae4ea7640dda41c73a28d170d87237a49da2b Mon Sep 17 00:00:00 2001 From: Kristers Date: Sun, 10 Jul 2022 01:55:55 +0300 Subject: [PATCH 2/3] fix: change to jsdoc instead of ts --- src/react-pro-metronome/src/index.js | 45 ++++++++++++++++++---------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/src/react-pro-metronome/src/index.js b/src/react-pro-metronome/src/index.js index 83c9b1d..47b2be4 100644 --- a/src/react-pro-metronome/src/index.js +++ b/src/react-pro-metronome/src/index.js @@ -19,22 +19,35 @@ import click1SoundFileOGG from './sounds/click1.ogg'; const MAXBPM = 300; const MAXSUBDIVISION = 8; -type ProMetronomeState = { - qNote: number, - subNote: number, -}; - -type ProMetronomeProps = { - bpm: number, - subdivision: number, - isPlaying: boolean, - soundEnabled: boolean, - beatsPerBar: number, - soundPattern: string, - render: (props: ProMetronomeProps, state: ProMetronomeState) => JSX.Element, -}; - -class ProMetronome extends PureComponent { +/** + * @callback renderItem + * @param {ProMetronomeProps} props + * @param {ProMetronomeState} state + * @returns {JSX.Element} + */ +/** + * @typedef ProMetronomeProps + * @type {object} + * @property {number} bpm + * @property {number} subdivision + * @property {boolean} isPlaying + * @property {boolean} soundEnabled + * @property {number} beatsPerBar + * @property {string} soundPattern + * @property {renderItem} render + * + */ + +/** + * @typedef ProMetronomeState + * @type {object} + * @property {number} qNote + * @property {number} subNote + */ +/** + * @augments {PureComponent} + */ +class ProMetronome extends PureComponent { state = { qNote: 1, subNote: 1, From 8a6b02bfbbe0f020b0fbad3025a1c7caa3fbc90f Mon Sep 17 00:00:00 2001 From: Kristers Date: Sun, 10 Jul 2022 02:08:32 +0300 Subject: [PATCH 3/3] Update index.js --- src/react-pro-metronome/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/react-pro-metronome/src/index.js b/src/react-pro-metronome/src/index.js index 47b2be4..958a556 100644 --- a/src/react-pro-metronome/src/index.js +++ b/src/react-pro-metronome/src/index.js @@ -44,6 +44,7 @@ const MAXSUBDIVISION = 8; * @property {number} qNote * @property {number} subNote */ + /** * @augments {PureComponent} */