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
|
import { useEffect, useRef } from 'react'
import useSettings from 'hooks/useSettings'
import useMediaQuery from 'hooks/useMediaQuery'
import { close, toggleMin, toggleMax, move, focus } from 'helpers/windowActions'
import { faArrowUp, faExpandAlt, faTimes, faCompressAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const App = ({ children, app, setApps }) => {
const { t } = useSettings()
const winRef = useRef(null)
const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`)
useEffect(() => {
move(app, winRef, setApps)
}, [app, setApps])
return (
<div
ref={winRef}
onClick={() => { focus(app.name, setApps) }}
className={
'window' +
(app.min ? ' hidden' : '') +
(app.max || forceMax ? ' maximized' : '')
}
style={{
height: app.height,
width: app.width,
...app.pos.length
? { top: app.pos[1], left: app.pos[0] }
: {
top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
left: `calc(( 100vw - ${app.width} ) / 2)`
}
}}
>
<h2 className='window__title'>{t(app.name)}</h2>
<div className='window__content'>{children}</div>
<div className='window__title-buttons'>
{app.buttons.includes('min') && (
<span onClick={() => toggleMin(app.name, setApps)}>
<FontAwesomeIcon icon={faArrowUp} />
</span>
)}
{app.buttons.includes('max') && !forceMax && (
<span onClick={() => toggleMax(app.name, setApps)}>
<FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
</span>
)}
{app.buttons.includes('close') && (
<span onClick={() => close(app.name, setApps)}>
<FontAwesomeIcon icon={faTimes} />
</span>
)}
</div>
</div>
)
}
export default App
|
