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
|
import React, {useEffect, useRef} from 'react'
import useSettings from 'hooks/useSettings'
import useMediaQuery from 'hooks/useMediaQuery'
import {close, toggleMin, toggleMax, move} 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.name, winRef, setApps)
}, [])
return (
<>
<div
ref={winRef}
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;
|
