-
Notifications
You must be signed in to change notification settings - Fork 72
/
controlPane.tsx
55 lines (52 loc) · 1.23 KB
/
controlPane.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
import classNames from 'classnames';
import React from 'react';
import styles from './controlPane.module.scss';
type Position = 'right' | 'bottom';
const getPosition = (position: Position) => {
return {
[styles.right]: position === 'right',
[styles.bottom]: position === 'bottom',
}
}
export default function ControlPane({
children,
open,
position,
height,
mobile,
fullHeight,
assumeHeight,
minHeight,
}: {
children: JSX.Element;
open: boolean;
position: Position,
height?: number;
mobile?: boolean;
fullHeight?: boolean;
assumeHeight?: boolean;
minHeight?: number,
}) {
return (
<div
id={styles.controlPane}
className={classNames({
...getPosition(position),
[styles.open]: open,
[styles.mobile]: mobile,
[styles.fullHeight]: fullHeight,
[styles.assumeHeight]: assumeHeight,
})}
style={{
width: height ? (open ? `calc(100% - 200px)` : `calc(100%)`) : undefined,
minHeight,
}}
>
<div id={styles.controlPaneInner} className={classNames({ [styles.open]: open, ...getPosition(position) })} style={{
marginBottom: open || !height ? 0 : height * -1,
}}>
{children}
</div>
</div>
);
}