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 useApps from 'hooks/useApps'
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 }) => {
const { apps, setApps } = useApps()
const { t } = useSettings()
const winRef = useRef(null)
const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`)
useEffect(() => { move(app, winRef, 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 > 1
? { top: app.pos[1], left: app.pos[0] }
: {
top: `calc((( 100vh - ${app.height} ) / 2) + (2 * ${app.pos}rem))`,
left: `calc((( 100vw - ${app.width} ) / 2) + (2 * ${app.pos}rem) - 2rem)`
}
}}
>
<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={e => { e.preventDefault(); e.stopPropagation(); toggleMin(app.name, apps, setApps) }}>
<FontAwesomeIcon icon={faArrowUp} />
</span>
)}
{app.buttons.includes('max') && !forceMax && (
<span onClick={e => { e.preventDefault(); e.stopPropagation(); toggleMax(app.name, setApps) }}>
<FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
</span>
)}
{app.buttons.includes('close') && (
<span onClick={e => { e.preventDefault(); e.stopPropagation(); close(app.name, setApps) }}>
<FontAwesomeIcon icon={faTimes} />
</span>
)}
</div>
</div>
)
}
export default App
|
