@onehat/ui 0.3.132 → 0.3.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Hoc/withContextMenu.js +30 -1
  3. package/src/Components/Screens/Manager.js +54 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onehat/ui",
3
- "version": "0.3.132",
3
+ "version": "0.3.133",
4
4
  "description": "Base UI for OneHat apps",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/Components/Hoc/withContextMenu.js CHANGED
@@ -10,8 +10,14 @@ import {
10
10
  Spacer,
11
11
  Text,
12
12
  } from 'native-base';
13
+ import {
14
+ UI_MODE_WEB,
15
+ CURRENT_MODE,
16
+ } from '../../Constants/UiModes.js';
13
17
  import _ from 'lodash';
14
18
 
19
+ const CONTEXT_MENU_WIDTH = 180;
20
+
15
21
  export default function withContextMenu(WrappedComponent) {
16
22
  return (props) => {
17
23
  const {
@@ -42,6 +48,29 @@ export default function withContextMenu(WrappedComponent) {
42
48
  setIsContextMenuShown(true);
43
49
  setContextMenuX(e.nativeEvent.pageX);
44
50
  setContextMenuY(e.nativeEvent.pageY);
51
+ },
52
+ onLayout = (e) => {
53
+ if (CURRENT_MODE !== UI_MODE_WEB) {
54
+ return;
55
+ }
56
+
57
+ const
58
+ {
59
+ top,
60
+ left,
61
+ // width,
62
+ height,
63
+ } = e.nativeEvent.layout,
64
+ screenWidth = window.innerWidth,
65
+ screenHeight = window.innerHeight,
66
+ width = CONTEXT_MENU_WIDTH;
67
+
68
+ if (screenWidth - width < left) {
69
+ setContextMenuX(screenWidth - width);
70
+ }
71
+ if (screenHeight - height < top) {
72
+ setContextMenuY(screenHeight - height);
73
+ }
45
74
  };
46
75
 
47
76
  useEffect(() => {
@@ -133,7 +162,7 @@ export default function withContextMenu(WrappedComponent) {
133
162
  isOpen={isContextMenuShown && !disableContextMenu}
134
163
  onClose={() => setIsContextMenuShown(false)}
135
164
  >
136
- <Column bg="#fff" w={180} position="absolute" top={contextMenuY} left={contextMenuX}>
165
+ <Column bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
137
166
  {contextMenuItemComponents}
138
167
  </Column>
139
168
  </Modal>
package/src/Components/Screens/Manager.js CHANGED
@@ -25,9 +25,13 @@ function ManagerScreen(props) {
25
25
  } = props,
26
26
  styles = UiGlobals.styles,
27
27
  id = props.id || props.self?.path,
28
- [isReady, setIsReady] = useState(false),
28
+ [isRendered, setIsRendered] = useState(false),
29
+ [allowSideBySide, setAllowSideBySide] = useState(false),
29
30
  [mode, setModeRaw] = useState(MODE_FULL),
30
31
  setMode = (newMode) => {
32
+ if (!allowSideBySide && newMode === MODE_SIDE) {
33
+ return;
34
+ }
31
35
  if (newMode === mode) {
32
36
  return; // no change
33
37
  }
@@ -35,12 +39,22 @@ function ManagerScreen(props) {
35
39
  if (id) {
36
40
  setSaved(id + '-mode', newMode);
37
41
  }
42
+ },
43
+ onLayout = (e) => {
44
+ const
45
+ containerWidth = e.nativeEvent.layout.width,
46
+ allowSideBySide = containerWidth > 600;
47
+ setAllowSideBySide(allowSideBySide);
48
+ setIsRendered(true);
38
49
  };
39
50
 
40
51
  useEffect(() => {
52
+ if (!isRendered) {
53
+ return;
54
+ }
55
+
41
56
  // Restore saved settings
42
57
  (async () => {
43
-
44
58
  if (id) {
45
59
  const
46
60
  key = id + '-mode',
@@ -49,19 +63,11 @@ function ManagerScreen(props) {
49
63
  setMode(val);
50
64
  }
51
65
  }
52
-
53
- if (!isReady) {
54
- setIsReady(true);
55
- }
56
66
  })();
57
- }, []);
58
-
59
- if (!isReady) {
60
- return null;
61
- }
67
+ }, [isRendered]);
62
68
 
63
69
  let whichComponent;
64
- if (mode === MODE_FULL) {
70
+ if (!allowSideBySide || mode === MODE_FULL) {
65
71
  whichComponent = fullModeComponent;
66
72
  } else if (mode === MODE_SIDE) {
67
73
  whichComponent = sideModeComponent;
@@ -74,38 +80,42 @@ function ManagerScreen(props) {
74
80
  };
75
81
  }
76
82
 
77
- return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%">
78
- <Row
79
- h="80px"
80
- py={2}
81
- borderBottomWidth={2}
82
- borderBottomColor="#ccc"
83
- >
84
- <Text p={4} fontSize="26" fontWeight={700} {...textProps}>{title}</Text>
85
- <IconButton
86
- icon={FullWidth}
87
- _icon={{
88
- size: '25px',
89
- color: mode === MODE_FULL ? 'primary.100' : '#000',
90
- }}
91
- disabled={mode === MODE_FULL}
92
- onPress={() => setMode(MODE_FULL)}
93
- tooltip="Full Width"
94
- />
95
- <IconButton
96
- icon={SideBySide}
97
- _icon={{
98
- size: '25px',
99
- color: mode === MODE_SIDE ? 'primary.100' : '#000',
100
- }}
101
- disabled={mode === MODE_SIDE}
102
- onPress={() => setMode(MODE_SIDE)}
103
- tooltip="Side Editor"
104
- />
105
- </Row>
106
-
107
- {whichComponent}
108
-
83
+ return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
84
+ {isRendered &&
85
+ <>
86
+ <Row
87
+ h="80px"
88
+ py={2}
89
+ borderBottomWidth={2}
90
+ borderBottomColor="#ccc"
91
+ >
92
+ <Text p={4} fontSize="26" fontWeight={700} {...textProps}>{title}</Text>
93
+ {allowSideBySide &&
94
+ <>
95
+ <IconButton
96
+ icon={FullWidth}
97
+ _icon={{
98
+ size: '25px',
99
+ color: mode === MODE_FULL ? 'primary.100' : '#000',
100
+ }}
101
+ disabled={mode === MODE_FULL}
102
+ onPress={() => setMode(MODE_FULL)}
103
+ tooltip="Full Width"
104
+ />
105
+ <IconButton
106
+ icon={SideBySide}
107
+ _icon={{
108
+ size: '25px',
109
+ color: mode === MODE_SIDE ? 'primary.100' : '#000',
110
+ }}
111
+ disabled={mode === MODE_SIDE}
112
+ onPress={() => setMode(MODE_SIDE)}
113
+ tooltip="Side Editor"
114
+ />
115
+ </>}
116
+ </Row>
117
+ {whichComponent}
118
+ </>}
109
119
  </Column>;
110
120
  }
111
121