@onehat/ui 0.1.2 → 0.2.0

package/src/Components/Hoc/withContextMenu.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, } from 'react';
+import {
+	Box,
+	Column,
+	FlatList,
+	Icon,
+	Modal,
+	Pressable,
+	Row,
+	Spacer,
+	Text,
+} from 'native-base';
+import _ from 'lodash';
+
+export default function withContextMenu(WrappedComponent) {
+	return (props) => {
+		const {
+				// extract and pass
+				disableContextMenu = false,
+				contextMenuItems,
+				...propsToPass
+			} = props,
+			{
+				// for local use
+				selection,
+				setSelection, // in case it's ever needed!
+			} = props,
+			[isReady, setIsReady] = useState(false),
+			[isContextMenuShown, setIsContextMenuShown] = useState(false),
+			[contextMenuX, setContextMenuX] = useState(0),
+			[contextMenuY, setContextMenuY] = useState(0),
+			[contextMenuItemComponents, setContextMenuItemComponents] = useState([]),
+			onContextMenu = (entity, rowIx, e, selection, setSelection) => {
+				if (disableContextMenu) {
+					return;
+				}
+				if (!selection.length && entity) {
+					// No current selections, so select this row so operations apply to it
+					setSelection([entity]);
+				}
+				
+				setIsContextMenuShown(true);
+				setContextMenuX(e.nativeEvent.pageX);
+				setContextMenuY(e.nativeEvent.pageY);
+			};
+
+		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,
+					};
+					icon = React.cloneElement(icon, {...iconProps});
+				}
+				return <Pressable
+							key={ix}
+							onPress={() => {
+								setIsContextMenuShown(false);
+								handler();
+							}}
+							flexDirection="row"
+							borderBottomWidth={1}
+							borderBottomColor="trueGray.200"
+							py={2}
+							px={4}
+							_hover={{
+								bg: '#ffc',
+							}}
+							isDisabled={isDisabled}
+						>
+							{icon}
+							<Text
+								flex={1}
+								color={isDisabled ? 'disabled' : 'trueGray.800'}
+								numberOfLines={1}
+								ellipsizeMode="head"
+							>{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}
+												>id: {selection?.[0]?.id}</Text>);
+			}
+			setContextMenuItemComponents(contextMenuItemComponents);
+			
+			if (!isReady) {
+				setIsReady(true);
+			}
+		}, [contextMenuItems, setIsContextMenuShown]);
+
+		if (!isReady) {
+			return null;
+		}
+
+		return <>
+					<WrappedComponent
+						{...propsToPass}
+						onContextMenu={onContextMenu}
+					/>
+					<Modal
+						isOpen={isContextMenuShown && !disableContextMenu}
+						onClose={() => setIsContextMenuShown(false)}
+					>
+						<Column bg="#fff" w={180} position="absolute" top={contextMenuY} left={contextMenuX}>
+							{contextMenuItemComponents}
+						</Column>
+					</Modal>
+				</>;
+	};
+}

package/src/Components/Hoc/withData.js

@@ -0,0 +1,85 @@
+import { useState, useEffect, } from 'react';
+import oneHatData from '@onehat/data';
+import _ from 'lodash';
+
+// Keeps track of LocalRepository.
+// If a Repository was submitted, this simply passes everything through
+// without changing anything. In that way, a component can have multiple
+// levels of withData() applied, to no ill effect.
+
+// This is the primary link between @onehat/data and the UI components
+
+export default function withData(WrappedComponent) {
+	return (props) => {
+		const
+			{
+				// For @onehat/data repositories
+				Repository,
+				setRepository,
+				uniqueRepository = false,
+				model,
+				autoLoad = false,
+
+				// For plain JS data
+				data,
+				fields = ['id', 'value'],
+				idField = 'id',
+				displayField = 'value',
+				idIx,
+				displayIx,
+			} = props,
+			propsToPass = _.omit(props, ['model']), // passing 'model' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate Repository twice
+			localIdIx = idIx || (fields && idField ? fields.indexOf(idField) : null),
+			localDisplayIx = displayIx || (fields && displayField ? fields?.indexOf(displayField) : null),
+			[LocalRepository, setLocalRepository] = useState(Repository || null), // simply pass on Repository if it's already supplied
+			[isReady, setIsReady] = useState(!!LocalRepository || !!data); // It's already ready if a LocalRepository or data array is already set. Otherwise, we need to create the repository
+
+		// Create LocalRepository
+		// If Repository was submitted to this withData(), the useEffect has no effect.
+		// If it's empty, it tries to create a LocalRepository
+		useEffect(() => {
+			if (!!LocalRepository || !!data) {
+				return () => {};
+			}
+
+			(async () => {
+				let Repository;
+				if (uniqueRepository) {
+					const schema = oneHatData.getSchema(model);
+					Repository = await oneHatData.createRepository({ schema });
+				} else {
+					Repository = oneHatData.getRepository(model);
+				}
+
+
+				if (autoLoad && Repository && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
+					await Repository.load();
+					// TODO: Implement some method by which I can detect if Repository is still loading and wait until it's done!
+				}
+	
+				setLocalRepository(Repository);
+				if (setRepository) { // pass it on up to higher components
+					setRepository(Repository);
+				}
+				setIsReady(true);
+			})();
+
+		}, [LocalRepository]);
+
+		if (!isReady) {
+			return null;
+		}
+
+		return <WrappedComponent
+					{...propsToPass}
+					Repository={LocalRepository}
+					model={model}
+					data={data}
+					fields={fields}
+					idField={idField}
+					displayField={displayField}
+					idIx={localIdIx}
+					displayIx={localDisplayIx}
+				/>;
+	};
+}

package/src/Components/Hoc/withDraggable.js

@@ -0,0 +1,259 @@
+import { useState, } from 'react';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../Constants/UiModes';
+import UiConfig from '../../UiConfig';
+import Draggable from 'react-draggable'; // https://github.com/react-grid-layout/react-draggable
+import useBlocking from '../../Hooks/useBlocking';
+import {
+	v4 as uuid,
+} from 'uuid';
+
+// Note on modes:
+// HORIZONTAL means the component moves along the X axis.
+// VERTICAL means the component moves along the Y axis.
+
+export default function withDraggable(WrappedComponent) {
+	return (props) => {
+
+		if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+			throw new Error('Not yet implemented for RN.');
+		}
+		const {
+				// extract and pass
+				onDragStart,
+				onDrag,
+				onDragStop,
+				onChangeIsDragging,
+				getParentNode = (node) => node.parentElement.parentElement,
+				getProxy,
+				proxyParent,
+				proxyPositionRelativeToParent = false,
+				handle,
+				...propsToPass
+			} = props,
+			{
+				// for local use
+				mode = HORIZONTAL, // HORIZONTAL, VERTICAL
+			} = props,
+			[isDragging, setIsDraggingRaw] = useState(false),
+			[node, setNode] = useState(false),
+			[bounds, setBounds] = useState(null),
+			{ block } = useBlocking(),
+			setIsDragging = (value) => {
+				setIsDraggingRaw(value);
+				if (onChangeIsDragging) {
+					onChangeIsDragging(value);
+				}
+			},
+			handleStart = (e, info) => {
+				if (isDragging) {
+					return;
+				}
+				
+				const
+					node = info.node,
+					parentContainer = getParentNode && getParentNode(node);
+
+				setNode(node);
+
+				if (parentContainer && !parentContainer.id) {
+					parentContainer.id = 'a' + uuid().replace(/-/g, '');
+					setBounds(parentContainer.getBoundingClientRect());
+				}
+
+				// clone node for proxy, append to DOM
+				let proxy;
+				if (getProxy) {
+					proxy = getProxy(node);
+				} else {
+					proxy = node.cloneNode(true);
+					const nodeRect = node.getBoundingClientRect();
+					proxy.style.top = nodeRect.top + 'px';
+					proxy.style.left = nodeRect.left + 'px';
+					proxy.style.height = nodeRect.height + 'px';
+					proxy.style.width = nodeRect.width + 'px';
+				}
+				proxy = proxyParent ? proxyParent.appendChild(proxy) : document.body.appendChild(proxy);
+				proxy.style.zIndex = 10000;
+				proxy.style.position = 'absolute';
+				proxy.style.visibility = 'visible';
+				proxy.style.backgroundColor = '#fff';
+				proxy.id = 'dragproxy';
+				proxy.className = '';
+				
+				node.style.visibility = 'hidden';
+
+				setIsDragging(true);
+
+				if (onDragStart) {
+					onDragStart(info, e, proxy, node)
+				}
+			},
+			isWithinBounds = ({ pageX, pageY }) => {
+				if (!bounds) {
+					return true;
+				}
+				const {
+					left,
+					right,
+					top,
+					bottom,
+				} = bounds;
+				
+				if (mode === HORIZONTAL) {
+					return pageX >= left && pageX <= right;
+				} else if (mode === VERTICAL) {
+					return pageY <= bottom && pageX >= top;
+				} else {
+					return pageX >= left && pageX <= right && pageY <= bottom && pageX >= top;
+				}
+			},
+			handleDrag = (e, info) => {
+				// Move proxy to new page coords
+				if (!isWithinBounds(e)) {
+					return;
+				}
+
+				const {
+					deltaX,
+					deltaY,
+				} = info;
+
+				// Move the proxy to where it should be
+				const
+					proxy = document.getElementById('dragproxy'),
+					currentLeft = parseInt(proxy.style.left),
+					currentTop = parseInt(proxy.style.top);
+				if (mode === HORIZONTAL) {
+					const left = proxyPositionRelativeToParent ? e.pageX - proxyParent.getBoundingClientRect().left : e.pageX;
+					proxy.style.left = left + 'px';
+				} else if (mode === VERTICAL) {
+					const top = proxyPositionRelativeToParent ? e.pageY - proxyParent.getBoundingClientRect().top : e.pageY;
+					proxy.style.top = top + 'px';
+				} else {
+					proxy.style.left = currentLeft + deltaX + 'px';
+					proxy.style.top = currentTop + deltaY + 'px';
+				}
+				if (onDrag) {
+					onDrag(info, e, proxy, node);
+				}
+
+			},
+			handleStop = (e, info) => {
+				if (!isDragging) {
+					return;
+				}
+
+				// console.log('end', info);
+				// remove proxy
+				const proxy = document.getElementById('dragproxy');
+				proxy.remove();
+
+				// constrain node to bounds
+				if (!isWithinBounds(e)) {
+					const {
+						left,
+						right,
+						top,
+						bottom,
+					} = bounds,
+					{ pageX, pageY } = e;
+					let newX = pageX,
+						newY = pageY;
+
+
+					if (mode === HORIZONTAL) {
+						if (left > pageX) {
+							newX = left;
+						} else if (pageX > right) {
+							newX = right;
+						}
+						node.style.left = newX + 'px';
+					} else if (mode === VERTICAL) {
+						if (top > pageY) {
+							newX = top;
+						} else if (pageY > bottom) {
+							newX = bottom;
+						}
+						node.style.top = newY + 'px';
+					} else {
+						if (left > pageX) {
+							newX = left;
+						} else if (pageX > right) {
+							newX = right;
+						}
+						node.style.left = newX + 'px';
+
+						if (top > pageY) {
+							newX = top;
+						} else if (pageY > bottom) {
+							newX = bottom;
+						}
+						node.style.top = newY + 'px';
+					}
+				}
+
+				// show original node
+				node.style.visibility = 'visible';
+
+				block();
+				if (onDragStop) {
+					if (mode === HORIZONTAL) {
+						onDragStop(info.x, e, node);
+					} else if (mode === VERTICAL) {
+						onDragStop(info.y, e, node);
+					} else {
+						onDragStop(info, e, node);
+					}
+				}
+				setIsDragging(false);
+			};
+		propsToPass.isDragging = isDragging;
+
+		if (mode === VERTICAL) {
+			return <Draggable
+						axis="x"
+						onStart={handleStart}
+						onDrag={handleDrag}
+						onStop={handleStop}
+						position={{ x: 0, y: 0, /* reset to dropped position */ }}
+						// bounds={bounds}
+					>
+						<div className="nsResize" style={{ width: '100%', }}>
+							<WrappedComponent {...propsToPass} />
+						</div>
+					</Draggable>;
+		} else if (mode === HORIZONTAL) {
+			return <Draggable
+						axis="y"
+						onStart={handleStart}
+						onDrag={handleDrag}
+						onStop={handleStop}
+						position={{ x: 0, y: 0, /* reset to dropped position */ }}
+						// bounds={bounds}
+					>
+						<div className="ewResize" style={{ height: '100%', }}>
+							<WrappedComponent {...propsToPass} />
+						</div>
+					</Draggable>;
+		}
+
+		// can drag in all directions
+		return <Draggable
+					axis="both"
+					onStart={handleStart}
+					onDrag={handleDrag}
+					onStop={handleStop}
+					// position={{ x: 0, y: 0, /* reset to dropped position */ }}
+					handle={handle}
+				>
+					<WrappedComponent {...propsToPass} />
+				</Draggable>;
+	};
+}

package/src/Components/Hoc/withEditor.js

@@ -0,0 +1,160 @@
+import { useState, } from 'react';
+import _ from 'lodash';
+
+export default function withEditor(WrappedComponent) {
+	return (props) => {
+		const {
+				useEditor = false,
+				userCanEdit = true,
+				userCanView = true,
+				disableAdd = false,
+				disableEdit = false,
+				disableDelete = false,
+				disableDuplicate = false,
+				disableView = false,
+				getRecordIdentifier = (selection) => {
+					if (selection.length > 1) {
+						return 'records?';
+					}
+					return 'record?';
+				},
+				record,
+
+				// withData
+				Repository,
+
+				// withSelection
+				selection,
+				setSelection,
+
+				// withAlert
+				confirm,
+			} = props,
+			[currentRecord, setCurrentRecord] = useState(null),
+			[isEditorShown, setIsEditorShown] = useState(false),
+			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
+			addRecord = async () => {
+				if (!userCanEdit) {
+					return;
+				}
+				const
+					defaultValues = Repository.getSchema().model.defaultValues,
+					entity = await Repository.add(defaultValues, false, true, true);
+				setSelection([entity]);
+				setIsEditorViewOnly(false);
+				setIsEditorShown(true);
+			},
+			editRecord = () => {
+				if (!userCanEdit) {
+					return;
+				}
+				setIsEditorViewOnly(false);
+				setIsEditorShown(true);
+			},
+			deleteRecord = (e) => {
+				if (!userCanEdit) {
+					return;
+				}
+				const
+					isSingle = selection.length === 1,
+					isPhantom = selection[0] && selection[0].isPhantom;
+
+				if (isSingle && isPhantom) {
+					onDelete();
+				} else {
+					const identifier = getRecordIdentifier(selection);
+					confirm('Are you sure you want to delete the ' + identifier, onDelete);
+				}
+			},
+			onDelete = () => {
+				Repository.delete(selection);
+				if (!Repository.isAutoSave) {
+					Repository.save();
+				}
+			},
+			viewRecord = () => {
+				if (!userCanView) {
+					return;
+				}
+				if (selection.length !== 1) {
+					return;
+				}
+				setIsEditorViewOnly(true);
+				setIsEditorShown(true);
+			},
+			duplicateRecord = async () => {
+				if (!userCanEdit) {
+					return;
+				}
+				if (selection.length !== 1) {
+					return;
+				}
+				const
+					entity = selection[0],
+					idProperty = Repository.getSchema().model.idProperty,
+					rawValues = _.omit(entity.rawValues, idProperty),
+					duplicate = await Repository.add(rawValues, false, true);
+				setSelection([duplicate]);
+				setIsEditorShown(true);
+			},
+			onEditorSave = (data, e) => {
+				const
+					what = record || selection,
+					isSingle = what.length === 1;
+				if (isSingle) {
+					// just update this one entity
+					what[0].setValues(data);
+
+				} else if (selection.length > 1) {
+					// Edit multiple entities
+
+
+					debugger;
+
+
+
+				}
+				if (!Repository.isAutoSave) {
+					Repository.save();
+				}
+				setIsEditorShown(false);
+			},
+			onEditorCancel = () => {
+				const
+					isSingle = selection.length === 1,
+					isPhantom = selection[0] && selection[0].isPhantom;
+				if (isSingle && isPhantom) {
+					onDelete();
+				}
+				setIsEditorShown(false);
+			},
+			onEditorClose = () => {
+				setIsEditorShown(false);
+			};
+
+		return <WrappedComponent
+					{...props}
+					currentRecord={currentRecord}
+					setCurrentRecord={setCurrentRecord}
+					isEditorShown={isEditorShown}
+					isEditorViewOnly={isEditorViewOnly}
+					setIsEditorShown={setIsEditorShown}
+					onAdd={addRecord}
+					onEdit={editRecord}
+					onDelete={deleteRecord}
+					onView={viewRecord}
+					onDuplicate={duplicateRecord}
+					onEditorSave={onEditorSave}
+					onEditorCancel={onEditorCancel}
+					onEditorClose={onEditorClose}
+					useEditor={useEditor}
+					userCanEdit={userCanEdit}
+					userCanView={userCanView}
+					disableAdd={disableAdd}
+					disableEdit={disableEdit}
+					disableDelete={disableDelete}
+					disableDuplicate={disableDuplicate}
+					disableView ={disableView}
+				/>;
+	};
+}

package/src/Components/Hoc/withEvents.js

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