-
Notifications
You must be signed in to change notification settings - Fork 72
/
mobilesidebar.tsx
68 lines (59 loc) · 2.14 KB
/
mobilesidebar.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
import React, { useCallback, useState } from 'react';
import styles from './sidebar.module.scss';
import { Input } from '@site/src/components/input/input';
import { Icon } from '@site/src/components/icon/icon';
import Images, { SelectImage } from './images/images';
import { State } from '../../types';
import ControlPane from '../controlPane/controlPane';
import classNames from 'classnames';
const getStateForMobileSidebar = (state: State, open: boolean) => {
if (open === false) {
return false;
}
if (state === State.UPLOAD) {
return true;
}
return false;
}
export default function MobileSidebar({
state,
selectImage,
open,
}: {
state: State,
selectImage: SelectImage,
open: boolean;
}) {
const [searchValue, setSearchValue] = useState('');
const handleChange = useCallback((value: string) => {
setSearchValue(value);
}, []);
const [expanded, setFullHeight] = useState(false);
const handleFocus = useCallback(() => {
setFullHeight(true);
setTimeout(() => {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}, 100)
}, []);
const handleBlur = useCallback(() => {
setFullHeight(false);
}, []);
return (
<ControlPane mobile open={getStateForMobileSidebar(state, open)} position="bottom" assumeHeight={!expanded} fullHeight={expanded} minHeight={140}>
<div id={styles.mobileSidebar} className={classNames({ [styles.expanded]: expanded })}>
<Icon onClick={handleBlur} id={styles.close} className={classNames({ [styles.visible]: expanded })} name="x-circle" slot="suffix"></Icon>
<p>Alternatively, you can search for sample images to upscale below.</p>
<Input placeholder="Search images" size="small" onSlFocus={handleFocus} onSlInput={event => handleChange((event.target as HTMLInputElement).value)}>
<Icon name="search" slot="suffix"></Icon>
</Input>
{expanded && (
<>
<small className={styles.info}>Images provided from <a target="_blank" href="https://pixabay.com">pixabay</a></small>
<Images searchValue={searchValue} selectImage={selectImage} />
</>
)}
</div>
</ControlPane>
);
}