@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Hoc/withContextMenu.js

@@ -1,26 +1,18 @@
-import React, { useState, useEffect, } from 'react';
+import { forwardRef, useRef, useState, useEffect, } from 'react';
 import {
-	Box,
-	Column,
-	FlatList,
-	Icon,
-	Modal,
-	Pressable,
-	Row,
-	Spacer,
 	Text,
-} from 'native-base';
-import {
-	UI_MODE_WEB,
-	CURRENT_MODE,
-} from '../../Constants/UiModes.js';
+	VStack,
+} from '../Gluestack';
+import Button from '../Buttons/Button.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
-const CONTEXT_MENU_WIDTH = 180;
+const
+	CONTEXT_MENU_WIDTH = 180,
+	CONTEXT_MENU_ITEM_HEIGHT = 30;
 
 export default function withContextMenu(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const {
 				// extract and pass
 				disableContextMenu = false,
@@ -30,14 +22,18 @@ export default function withContextMenu(WrappedComponent) {
 			{
 				// for local use
 				selection,
-				setSelection, // in case it's ever needed!
+				setSelection,
+
+				// withModal
+				showModal,
+				hideModal,
+				isModalShown,
+				whichModal,
 			} = props,
-			[isReady, setIsReady] = useState(false),
-			[isContextMenuShown, setIsContextMenuShown] = useState(false),
-			[contextMenuX, setContextMenuX] = useState(0),
-			[contextMenuY, setContextMenuY] = useState(0),
-			[contextMenuItemComponents, setContextMenuItemComponents] = useState([]),
-			onContextMenu = (entity, e, selection, setSelection) => {
+			[doShowContextMenu, setDoShowContextMenu] = useState(false),
+			[left, setLeft] = useState(0),
+			[top, setTop] = useState(0),
+			onContextMenu = (entity, e, selection) => {
 				if (disableContextMenu) {
 					return;
 				}
@@ -45,133 +41,129 @@ export default function withContextMenu(WrappedComponent) {
 					// No current selections, so select this row so operations apply to it
 					setSelection([entity]);
 				}
-				
-				setIsContextMenuShown(true);
-				setContextMenuX(e.nativeEvent.pageX);
-				setContextMenuY(e.nativeEvent.pageY);
-			},
-			onLayout = (e) => {
-				if (CURRENT_MODE !== UI_MODE_WEB) {
-					return;
-				}
-
-				const
-					{
-						top,
-						left,
-						// width,
-						height,
-					} = e.nativeEvent.layout,
-					screenWidth = window.innerWidth,
-					screenHeight = window.innerHeight,
-					width = CONTEXT_MENU_WIDTH;
 
-				if (screenWidth - width < left) {
-					setContextMenuX(screenWidth - width);
-				}
-				if (screenHeight - height < top) {
-					setContextMenuY(screenHeight - height);
+				setDoShowContextMenu(true);
+				setLeft(e.nativeEvent.pageX);
+				setTop(e.nativeEvent.pageY);
+			},
+			createContextMenuItemComponents = () => {
+				const contextMenuItemComponents = _.map(contextMenuItems, (config, ix) => {
+					let {
+						text,
+						handler,
+						icon = null,
+						isDisabled = false,
+					} = config;
+	
+					return <Button
+								{...testProps('contextMenuBtn-' + text)}
+								key={ix}
+								onPress={() => {
+									hideModal();
+									handler(selection);
+								}}
+								isDisabled={isDisabled}
+								icon={icon}
+								_icon={{
+									className: `
+										ml-2
+										self-center
+									`,
+								}}
+								text={text}
+								_text={{
+									className: `
+										flex-1
+										select-none
+										text-black
+									`,
+								}}
+								className={`
+									flex-row
+									border-b-2
+									border-b-grey-200
+									py-2
+									px-4
+									select-none
+									rounded-none
+								`}
+								variant="outline"
+								action="secondary"
+							/>;
+				});
+				const showId = true; // TODO: This should only be for local dev
+				if (showId) {
+					contextMenuItemComponents.push(<Text key="idViewer" className="flex-1 py-2 px-4 select-none">id: {selection?.[0]?.id}</Text>);
 				}
+				return contextMenuItemComponents;
 			};
-
+			
 		useEffect(() => {
-			const contextMenuItemComponents = _.map(contextMenuItems, (config, ix) => {
-				let {
-					text,
-					handler,
-					icon = null,
-					isDisabled = false,
-				} = config;
-				
-				if (icon) {
-					const iconProps = {
-						alignSelf: 'center',
-						size: 'sm',
-						color: isDisabled ? 'disabled' : 'trueGray.800',
-						h: 20,
-						w: 20,
-						mr: 2,
-					};
-					if (React.isValidElement(icon)) {
-						icon = React.cloneElement(icon, {...iconProps});
-					} else {
-						icon = <Icon as={icon} {...iconProps} />;
-					}
+			// First time after onContextMenu is called, doShowContextMenu will be true.
+			// Next times, it will be false, whichModal will be 'contextMenu'
+			if (!doShowContextMenu) {
+				if (!isModalShown) {
+					// Do not update if no modal is shown
+					return;
+				}
+				if (whichModal !== 'contextMenu') {
+					// Do not update the contextMenu when other types of modals are shown
+					return;
 				}
+			}
 
-				// <div style={{
-				// 	userSelect: 'none',
-				// }}>
-				// </div>
+			// useEffect() will be called once when doShowContextMenu is set,
+			// (this will show the context menu), and then again if the 
+			// contextMenuItems change. This is necessary because they
+			// may change based on the selection; and this is why we're using 
+			// useEffect to show the context menu instead of onContextMenu.
 
-				return <Pressable
-							{...testProps('contextMenuBtn-' + text)}
-							key={ix}
-							onPress={() => {
-								setIsContextMenuShown(false);
-								handler(selection);
-							}}
-							flexDirection="row"
-							borderBottomWidth={1}
-							borderBottomColor="trueGray.200"
-							py={2}
-							px={4}
-							_hover={{
-								bg: '#ffc',
-							}}
-							isDisabled={isDisabled}
-							style={{
-								userSelect: 'none',
-							}}
-							userSelect="none"
-						>
-							{icon}
-							<Text
-								flex={1}
-								color={isDisabled ? 'disabled' : 'trueGray.800'}
-								numberOfLines={1}
-								ellipsizeMode="head"
-								style={{
-									userSelect: 'none',
-								}}
-								userSelect="none"
-							>{text}</Text>
-						</Pressable>;
-			});
-			const showId = true; // TODO: This should only be for local dev
-			if (showId) {
-				contextMenuItemComponents.push(<Text
-													key="idViewer"
-													flex={1}
-													py={2}
-													px={4}
-													userSelect="none"
-												>id: {selection?.[0]?.id}</Text>);
+			// show context menu
+			const
+				contextMenuItemComponents = createContextMenuItemComponents(),
+				className = `
+					context-menu-container
+					absolute
+					border
+					border-grey-400
+					shadow-lg
+					bg-white
+				`,
+				screenWidth = window.innerWidth,
+				screenHeight = window.innerHeight;
+			let l = left,
+				t = top;
+			if (screenWidth - CONTEXT_MENU_WIDTH < l) {
+				l = screenWidth - CONTEXT_MENU_WIDTH;
 			}
-			setContextMenuItemComponents(contextMenuItemComponents);
-			
-			if (!isReady) {
-				setIsReady(true);
+			if (screenHeight - (contextMenuItemComponents.length * CONTEXT_MENU_ITEM_HEIGHT) < t) {
+				t = screenHeight - (contextMenuItemComponents.length * CONTEXT_MENU_ITEM_HEIGHT);
 			}
-		}, [contextMenuItems, setIsContextMenuShown]);
+			const style = {
+				left: l,
+				top: t,
+				width: CONTEXT_MENU_WIDTH,
+			};
 
-		if (!isReady) {
-			return null;
-		}
+			showModal({
+				body: <VStack
+							className={className}
+							style={style}
+						>{contextMenuItemComponents}</VStack>,
+				onCancel: hideModal,
+				whichModal: 'contextMenu',
+			});
+
+			if (doShowContextMenu) {
+				setDoShowContextMenu(false);
+			}
+		
+		}, [doShowContextMenu, isModalShown, whichModal]); // don't include contextMenuItems, as it will cause infinite loop
 
-		return <>
-					<WrappedComponent
-						{...propsToPass}
-						onContextMenu={onContextMenu}
-					/>
-					<Modal
-						isOpen={isContextMenuShown && !disableContextMenu}
-						onClose={() => setIsContextMenuShown(false)}
-					>
-						<Column bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
-							{contextMenuItemComponents}
-						</Column>
-					</Modal>
-				</>;
-	};
+		return <WrappedComponent
+					{...propsToPass}
+					ref={ref}
+					onContextMenu={onContextMenu}
+				/>;
+	});
 }

package/src/Components/Hoc/withData.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, } from 'react';
+import { forwardRef, useState, useEffect, } from 'react';
 import oneHatData from '@onehat/data';
 import _ from 'lodash';
 
@@ -10,10 +10,10 @@ import _ from 'lodash';
 // This is the primary link between @onehat/data and the UI components
 
 export default function withData(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithData) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 		
 		const
@@ -106,6 +106,7 @@ export default function withData(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					disableWithData={false}
 					Repository={LocalRepository}
 					fields={fields}
@@ -114,5 +115,5 @@ export default function withData(WrappedComponent) {
 					idIx={localIdIx}
 					displayIx={localDisplayIx}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withDnd.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, } from 'react';
+import { forwardRef, useEffect, useRef, } from 'react';
 import { useDrag, useDrop, useDragLayer } from 'react-dnd'; // https://react-dnd.github.io/react-dnd/about don't forget the wrapping <DndProvider /> as shown here: https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
 
 
@@ -9,10 +9,10 @@ import { useDrag, useDrop, useDragLayer } from 'react-dnd'; // https://react-dnd
 // but it will lag behind, compared to what the native drag layer can do
 
 export function withDragSource(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		
 		if (!props.isDragSource) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		if (!props.dragSourceType) {
@@ -105,23 +105,24 @@ export function withDragSource(WrappedComponent) {
 			}, [layer]);
 		}
 
-		return <WrappedComponent 
+		return <WrappedComponent
 					{...props}
+					ref={ref}
 					canDrag={stateCanDrag}
 					isDragging={stateIsDragging}
 					dragSourceRef={dragSourceRef}
 					dragPreviewRef={dragPreviewRef}
 					dragState={dragState}
 				/>;
-	};
+	});
 }
 
 
 export function withDropTarget(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (!props.isDropTarget) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		if (!props.dropTargetAccept) {
@@ -181,13 +182,14 @@ export function withDropTarget(WrappedComponent) {
 			
 		dropTargetRef(localTargetRef); // register DOM node with react-dnd
 
-		return <WrappedComponent 
+		return <WrappedComponent
 					canDrop={stateCanDrop}
+					ref={ref}
 					isOver={isOver}
 					dropTargetRef={localTargetRef}
 					{...props}
 				/>;
-	};
+	});
 }
 
 

package/src/Components/Hoc/withDraggable.js

@@ -1,11 +1,11 @@
-import { useState, } from 'react';
+import { forwardRef, useState, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
 import useBlocking from '../../Hooks/useBlocking.js';
@@ -21,10 +21,10 @@ import getComponentFromType from '../../Functions/getComponentFromType.js';
 // VERTICAL means the component moves along the Y axis.
 
 export default function withDraggable(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (!props.isDraggable) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const {
@@ -235,7 +235,7 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div className="nsResize">
-								<WrappedComponent {...propsToPass} />
+								<WrappedComponent {...propsToPass} ref={ref} />
 							</div>
 						</Draggable>;
 			} else if (mode === HORIZONTAL) {
@@ -249,7 +249,7 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div className="ewResize" style={{ height: '100%', }}>
-								<WrappedComponent {...propsToPass} />
+								<WrappedComponent {...propsToPass} ref={ref} />
 							</div>
 						</Draggable>;
 			}
@@ -264,15 +264,15 @@ export default function withDraggable(WrappedComponent) {
 						handle={handle}
 						{...draggableProps}
 					>
-						<WrappedComponent {...propsToPass} />
+						<WrappedComponent {...propsToPass} ref={ref} />
 					</Draggable>;
-		} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+		} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 
 			// NOT YET IMPLEMENTED
 			// Really need to replace most of this, as much of it is web-centric.
 
-			return <WrappedComponent {...propsToPass} />; // TEMP
+			return <WrappedComponent {...propsToPass} ref={ref} />; // TEMP
 
 		}
-	};
+	});
 }

package/src/Components/Hoc/withEditor.js

@@ -1,7 +1,4 @@
-import { useEffect, useState, useRef, } from 'react';
-import {
-	Button,
-} from 'native-base';
+import { forwardRef, useEffect, useState, useRef, } from 'react';
 import {
 	ADD,
 	EDIT,
@@ -16,14 +13,15 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
+import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 export default function withEditor(WrappedComponent, isTree = false) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithEditor) {
-			return <WrappedComponent {...props} isTree={isTree} />;
+			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -266,12 +264,18 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						message: 'The node you have selected for deletion has children. ' + 
 								'Should these children be moved up to this node\'s parent, or be deleted?',
 						buttons: [
-							<Button colorScheme="danger" onPress={() => doMoveChildren(cb)} key="moveBtn">
-								Move Children
-							</Button>,
-							<Button colorScheme="danger" onPress={() => doDeleteChildren(cb)} key="deleteBtn">
-								Delete Children
-							</Button>
+							<Button
+								key="moveBtn"
+								colorScheme="danger"
+								onPress={() => doMoveChildren(cb)}
+								text="Move Children"
+							/>,
+							<Button
+								key="deleteBtn"
+								colorScheme="danger"
+								onPress={() => doDeleteChildren(cb)}
+								text="Delete Children"
+							/>
 						],
 						includeCancel: true,
 					});
@@ -598,6 +602,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					disableWithEditor={false}
 					currentRecord={currentRecord}
 					setCurrentRecord={setCurrentRecord}
@@ -631,5 +636,5 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setSelection={setSelectionDecorated}
 					isTree={isTree}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withEvents.js

@@ -1,12 +1,10 @@
-import {
-} from 'native-base';
-import _ from 'lodash';
+import { forwardRef } from 'react';
 
 export default function withEvents(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const {
 				onEvent,
 			} = props;
-		return <WrappedComponent fireEvent={onEvent} {...props} />;
-	};
+		return <WrappedComponent fireEvent={onEvent} {...props} ref={ref} />;
+	});
 }