Skip to content

Commit ec9d5fd

Browse files
codenickycodecodenickycode
committed
fix popup menu behaviors
1 parent 9d2f97f commit ec9d5fd

File tree

13 files changed

+81
-80
lines changed

13 files changed

+81
-80
lines changed

‎src/App/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { SequencerPage } from './Sequencer/Sequencer';
1111
import { ChangeKit } from './Sequencer/MainSection/ChangeKit/ChangeKit';
1212
import { LoadSave } from './Sequencer/LoadSave/LoadSave';
1313
import { LoginPage } from './Login/LoginPage';
14-
import { GlobalMixer } from './Sequencer/MainSection/Mixer/GlobalMixer';
14+
import { MainMixer } from './Sequencer/MainSection/Mixer/MainMixer';
1515
import { SampleMixer } from './Sequencer/MainSection/Mixer/SampleMixer';
1616
import { PATHS } from 'hooks/useGoTo';
1717

@@ -34,7 +34,7 @@ const AppContent = () => {
3434
<Route path='/' exact render={() => <Redirect to={PATHS.BASE} />} />
3535
<Route path='/sequencer/:shared' component={SequencerPage} />
3636
<Route path={PATHS.CHANGE_KIT} component={ChangeKit} />
37-
<Route path={PATHS.GLOBAL_MIXER} component={GlobalMixer}/>
37+
<Route path={PATHS.GLOBAL_MIXER} component={MainMixer}/>
3838
<Route path={PATHS.SAMPLE_MIXER} component={SampleMixer}/>
3939
<Route path={PATHS.LOAD} render={() => <LoadSave tab='load' />} />
4040
<Route path={PATHS.SAVE} render={() => <LoadSave tab='save' />} />

‎src/App/Sequencer/LoadSave/Save/useSaveSequence.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const useSaveSequence = (idRef) => {
3333
kit: sequence.kit,
3434
bpm: sequence.bpm,
3535
length: sequence.length,
36+
// mainMixer: sequence.mainMixer,
37+
// sampleMixer: sequence.sampleMixer,
3638
patternStr: getStrFromPattern(sequence.pattern),
3739
};
3840
setNewName('');

src/App/Sequencer/MainSection/Mixer/GlobalMixer.js renamed to src/App/Sequencer/MainSection/Mixer/MainMixer.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { useRotaryKnob } from 'hooks/useRotaryKnob';
66
import { useEffect, useState } from 'react';
77
import { Button } from 'App/shared/Button';
88

9-
export const GlobalMixer = () => {
9+
export const MainMixer = () => {
1010
return (
1111
<Portal targetId='overGridPortal'>
1212
<div id='mixer' className='mixer'>
13-
<div className='mixItemWrapper global'>
13+
<div className='mixItemWrapper main'>
1414
{Object.entries(mainBus.mixer).map(([property, node], i) => {
1515
const currentVal = node.getVal();
1616
return (
@@ -48,14 +48,14 @@ const RotaryKnob = ({ property, node, currentVal }) => {
4848
node.setVal(value);
4949
}, [node, value]);
5050

51-
const id = `globalMixItem${property}`;
51+
const id = `mainMixItem${property}`;
5252
const knobId = `${id}Knob`;
5353
let containerClass = 'mixItem';
5454
if (editing) containerClass += ' editing';
5555
return (
5656
<div id={id} className={containerClass}>
5757
<p className='mixItemName'>{property}</p>
58-
<div className='mixProperties global'>
58+
<div className='mixProperties main'>
5959
<Knob value={value} id={knobId} {...touchAndMouse} onDoubleClick={reset} />
6060
<Button disabled={node.snapback} classes='reset' onClick={reset}>
6161
reset

‎src/App/Sequencer/MainSection/Mixer/SampleMixer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useRef } from 'react';
1+
import React, { useEffect } from 'react';
22
import { Portal } from 'App/shared/Portal';
33
import { getGrid } from 'utils/getGrid';
44
import { useTouchAndMouse } from 'hooks/useTouchAndMouse';

‎src/App/Sequencer/MainSection/Mixer/_mixer.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
@extend %full;
1717
padding: 0.25rem;
1818

19-
&.global {
19+
&.main {
2020
@include grid(3, 2, 5px);
2121
}
2222
&.mixSamples {
@@ -55,7 +55,7 @@
5555
@extend %full;
5656
@include flex(column, space-evenly);
5757

58-
&.global {
58+
&.main {
5959
flex-direction: row;
6060
}
6161

‎src/App/Sequencer/MenuBar/MenuItems/DisplayMenu/DisplayMenu.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import { setTheme, THEMES } from 'App/reducers/appSlice';
33
import { ANALYZER_MODES } from 'App/reducers/screenSlice';
44
import { TVIcon } from 'assets/icons';
55
import { useDispatch, useSelector } from 'react-redux';
6-
import {
7-
MenuItem,
8-
MenuItemToggle,
9-
PopupMenu,
10-
} from 'App/shared/PopupMenu/PopupMenu';
6+
import { MenuItem, MenuItemToggle, PopupMenu } from 'App/shared/PopupMenu/PopupMenu';
117
import { useAnalyzerMenu } from './useAnalyzerMenu';
128

139
export const DisplayMenu = () => {
14-
return (
15-
<PopupMenu name='display' Icon={TVIcon} keepOpenOnSelect={true}>
16-
<Themes />
17-
<Analyzer />
18-
</PopupMenu>
19-
);
10+
const memo = useMemo(() => {
11+
return (
12+
<PopupMenu name='display' Icon={TVIcon} keepOpenOnSelect={true}>
13+
<Themes />
14+
<Analyzer />
15+
</PopupMenu>
16+
);
17+
}, []);
18+
return memo;
2019
};
2120

2221
const themes = Object.values(THEMES);

‎src/App/Sequencer/MenuBar/MenuItems/FileBtn.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import { SaveIcon } from 'assets/icons';
33
import { useGoTo } from 'hooks/useGoTo';
44
import { MenuItem, PopupMenu } from 'App/shared/PopupMenu/PopupMenu';
55

66
export const FileBtn = () => {
77
const goTo = useGoTo();
8-
return (
9-
<PopupMenu name='File' Icon={SaveIcon}>
10-
<MenuItem item='load' onClick={goTo.load} />
11-
<MenuItem item='save/share' onClick={goTo.save} />
12-
</PopupMenu>
13-
);
8+
const memo = useMemo(() => {
9+
return (
10+
<PopupMenu name='File' Icon={SaveIcon}>
11+
<MenuItem item='load' onClick={goTo.load} />
12+
<MenuItem item='save/share' onClick={goTo.save} />
13+
</PopupMenu>
14+
);
15+
}, [goTo.load, goTo.save]);
16+
return memo;
1417
};

‎src/App/Sequencer/MenuBar/MenuItems/MixerMenu.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,44 @@ import { MODES, setMode } from 'App/reducers/editorSlice';
22
import { MenuItem, PopupMenu } from 'App/shared/PopupMenu/PopupMenu';
33
import { MixerIcon } from 'assets/icons';
44
import { useGoTo, useCurrentPath } from 'hooks/useGoTo';
5+
import { useCallback, useMemo } from 'react';
56
import { useDispatch } from 'react-redux';
67

78
export const MixerMenu = () => {
89
const dispatch = useDispatch();
910
const goTo = useGoTo();
1011
const { mixing } = useCurrentPath();
1112

12-
const activeCB = () => {
13+
const activeCB = useCallback(() => {
1314
goTo.base(() => dispatch(setMode(MODES.INIT)));
14-
};
15+
}, [dispatch, goTo]);
1516

16-
return (
17-
<>
18-
<PopupMenu
19-
addBtnClasses={mixing ? ' mixerBtn active' : 'mixerBtn'}
20-
name='mixer'
21-
Icon={MixerIcon}
22-
active={mixing}
23-
activeCB={activeCB}
24-
>
25-
<MixerMenuItems />
26-
</PopupMenu>
27-
</>
28-
);
17+
const memo = useMemo(() => {
18+
return (
19+
<>
20+
<PopupMenu
21+
addBtnClasses={mixing ? ' mixerBtn active' : 'mixerBtn'}
22+
name='mixer'
23+
Icon={MixerIcon}
24+
active={mixing}
25+
activeCB={activeCB}
26+
>
27+
<MixerMenuItems />
28+
</PopupMenu>
29+
</>
30+
);
31+
}, [activeCB, mixing]);
32+
return memo;
2933
};
3034

3135
export const MixerMenuItems = () => {
3236
const dispatch = useDispatch();
3337
const goTo = useGoTo();
34-
const { mixingGlobal, mixingSamples } = useCurrentPath();
38+
const { mixingMain, mixingSamples } = useCurrentPath();
3539
const openPath = (path) => goTo[path](() => dispatch(setMode(MODES.TAP)));
3640
return (
3741
<>
38-
<MenuItem
39-
item={'Global'}
40-
selected={mixingGlobal}
41-
onClick={() => openPath('globalMixer')}
42-
/>
42+
<MenuItem item={'Main'} selected={mixingMain} onClick={() => openPath('mainMixer')} />
4343
<MenuItem
4444
item={'Samples'}
4545
selected={mixingSamples}

‎src/App/Sequencer/MenuBar/MenuItems/TapMenu.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useCallback, useMemo } from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
33
import { TapIcon } from 'assets/icons';
44
import { MODES, setMode } from 'App/reducers/editorSlice';
@@ -19,22 +19,25 @@ export const TapMenu = () => {
1919
const { selectingKit, mixing } = useCurrentPath();
2020

2121
// allows disable of tap mode while mixer or changeKit open
22-
const activeCB = () => dispatch(setMode(MODES.INIT));
22+
const activeCB = useCallback(() => dispatch(setMode(MODES.INIT)), [dispatch]);
2323

24-
let addBtnClasses = 'tap';
25-
if (tapPlaying) addBtnClasses += ' active';
26-
if (tapRecording) addBtnClasses += ' active record';
27-
return (
28-
<PopupMenu
29-
name='tap'
30-
Icon={TapIcon}
31-
active={selectingKit || mixing}
32-
activeCB={activeCB}
33-
addBtnClasses={addBtnClasses}
34-
>
35-
<TapMenuItems />
36-
</PopupMenu>
37-
);
24+
const memo = useMemo(() => {
25+
let addBtnClasses = 'tap';
26+
if (tapPlaying) addBtnClasses += ' active';
27+
if (tapRecording) addBtnClasses += ' active record';
28+
return (
29+
<PopupMenu
30+
name='tap'
31+
Icon={TapIcon}
32+
active={selectingKit || mixing}
33+
activeCB={activeCB}
34+
addBtnClasses={addBtnClasses}
35+
>
36+
<TapMenuItems />
37+
</PopupMenu>
38+
);
39+
}, [activeCB, mixing, selectingKit, tapPlaying, tapRecording]);
40+
return memo;
3841
};
3942

4043
const modes = [MODES.TAP, MODES.TAP_RECORD];

‎src/App/reducers/sequenceSlice.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ export const sequenceSlice = createSlice({
132132
state.kit = payload.kit;
133133
state.bpm = payload.bpm;
134134
state.length = payload.length;
135+
state.mainMixer = payload.mainMixer;
136+
state.sampleMixer = payload.sampleMixer;
135137
state.pattern = payload.pattern;
136138
state.noteTally = getNoteTally(state.pattern);
137139
state.undoStatus = `load sequence: `;

0 commit comments

Comments
 (0)