-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.js
122 lines (108 loc) · 2.99 KB
/
index.js
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React from 'react'
import { useSpring, animated, config } from 'react-spring'
import { useSystemState, getSystemActions } from 'store'
import { useWindowSize } from 'utils/window'
import { Button, Icon } from 'components'
export const useAppFrame = () => {
const { panelPosition, appFrameSize } = useSystemState()
const { setAppFrameSize } = getSystemActions()
const { width: windowWidth } = useWindowSize()
const normalPreferredWidth = 460
const widePreferredWidth = 768
const threshold = .8
let frameWidth = 0
let frameHeight = '100vh'
let isDisplayingFullscreen = false
if ( 'wide' === appFrameSize ) {
if ( widePreferredWidth > ( windowWidth * threshold ) ) {
frameWidth = windowWidth
isDisplayingFullscreen = true
} else {
frameWidth = widePreferredWidth
}
} else if ( 'full' === appFrameSize ) {
frameWidth = windowWidth
isDisplayingFullscreen = true
} else {
if ( normalPreferredWidth > ( windowWidth * threshold ) ) {
frameWidth = windowWidth
isDisplayingFullscreen = true
} else {
frameWidth = normalPreferredWidth
}
}
return {
appFrame: {
width: frameWidth,
height: frameHeight,
sizeName: appFrameSize,
alignment: panelPosition,
isDisplayingFullscreen,
},
setAppFrameSize,
}
}
export const AppFrame = ( { children } ) => {
const { isShowingUI, shouldReduceMotion } = useSystemState()
const { appFrame: { width, height, alignment } } = useAppFrame()
const { clientWidth: bodyWidth } = useWindowSize()
const transform = () => {
if ( isShowingUI ) {
return 'translateX( 0% )'
} else {
if ( 'end' === alignment ) {
return 'translateX( 100% )'
} else {
return 'translateX( -100% )'
}
}
}
const springConfig = {
...config.default,
tension: 400,
friction: 33,
clamp: true,
}
const springProps = useSpring( {
width: width + 1/* account for inside edge border */,
height,
right: 'end' === alignment ? 0 : bodyWidth - width,
transform: transform(),
immediate: shouldReduceMotion,
config: springConfig,
} )
const insideBorder = '1px solid var(--fl-line-color)'
const insideEdge = 'end' === alignment ? 'borderLeft' : 'borderRight'
const outsideBorder = 'none'
const outsideEdge = 'end' === alignment ? 'borderRight' : 'borderLeft'
const styles = {
position: 'fixed',
top: 0,
zIndex: 999999,
boxShadow: '0px 0px 40px rgba(0, 0, 0, 0.1)',
[insideEdge]: insideBorder,
[outsideEdge]: outsideBorder,
...springProps
}
return (
<animated.nav
style={styles}
role="navigation"
aria-hidden={ ! isShowingUI ? 'true' : 'false' }
>{children}</animated.nav>
)
}
export const FrameSizeButton = () => {
const { appFrameSize } = useSystemState()
const { setAppFrameSize } = getSystemActions()
const toggleSize = () => {
const sizes = [ 'normal', 'wide', 'full' ]
const nextSize = sizes[ ( sizes.indexOf( appFrameSize ) + 1 ) % sizes.length ]
setAppFrameSize( nextSize )
}
return (
<Button appearance="icon" onClick={toggleSize}>
<Icon name={`expand-${appFrameSize}`} />
</Button>
)
}