-
Notifications
You must be signed in to change notification settings - Fork 11
/
ModeSelector.tsx
93 lines (83 loc) · 2.4 KB
/
ModeSelector.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { Colors } from '../constants/Colors';
import { Icons } from '../icons/Icons';
import { Metrics } from '../constants/Metrics';
import { useDispatch, useSelector } from '../states/store';
import React, { useCallback } from 'react';
import styled from 'styled-components';
// == styles =======================================================================================
const Button = styled.img<{ active?: boolean }>`
width: calc( ${ Metrics.modeSelectorWidth }px );
height: calc( ${ Metrics.modeSelectorWidth }px );
padding: 6px;
margin: 2px 0;
fill: ${ ( { active } ) => active ? Colors.accent : Colors.fore };
cursor: pointer;
&:hover {
fill: ${ ( { active } ) => active ? Colors.accentdark : Colors.foredark };
}
`;
const Root = styled.div`
display: flex;
flex-direction: column;
align-items: center;
background: ${ Colors.back3 };
`;
// == component ====================================================================================
const ModeSelector = ( props: {
className?: string;
} ): JSX.Element => {
const { className } = props;
const dispatch = useDispatch();
const { mode } = useSelector( ( state ) => ( {
mode: state.workspace.mode
} ) );
const handleClickDopeSheet = useCallback(
() => {
dispatch( {
type: 'Workspace/ChangeMode',
mode: 'dope'
} );
},
[ dispatch ]
);
const handleClickChannel = useCallback(
() => {
dispatch( {
type: 'Workspace/ChangeMode',
mode: 'channel'
} );
dispatch( {
type: 'Timeline/UnselectItemsOfOtherChannels',
mode: 'channel'
} );
},
[ dispatch ]
);
const handleClickCurve = useCallback(
() => {
dispatch( {
type: 'Workspace/ChangeMode',
mode: 'curve'
} );
},
[ dispatch ]
);
return <Root className={ className }>
<Button as={ Icons.DopeSheet }
onClick={ handleClickDopeSheet }
active={ ( mode === 'dope' ? 1 : 0 ) as any as boolean }
data-stalker={ 'Dope Sheet' }
/>
<Button as={ Icons.Channel }
onClick={ handleClickChannel }
active={ ( mode === 'channel' ? 1 : 0 ) as any as boolean }
data-stalker={ 'Channel Editor' }
/>
<Button as={ Icons.Curve }
onClick={ handleClickCurve }
active={ ( mode === 'curve' ? 1 : 0 ) as any as boolean }
data-stalker={ 'Curve Editor' }
/>
</Root>;
};
export { ModeSelector };