@onehat/ui 0.2.72 → 0.2.74

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.72",
+	"version": "0.2.74",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Grid/Grid.js

@@ -35,6 +35,7 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
+import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import GridHeaderRow from './GridHeaderRow.js';
@@ -52,7 +53,7 @@ import _ from 'lodash';
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
 
-export function GridComponent(props) {
+function GridComponent(props) {
 	const {
 
 			columnsConfig = [], // json configurations for each column
@@ -217,42 +218,8 @@ export function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const
-				iconButtonProps = {
-					_hover: {
-						bg: 'trueGray.400',
-					},
-					mx: 1,
-					px: 3,
-				},
-				iconProps = {
-					alignSelf: 'center',
-					size: styles.GRID_TOOLBAR_ITEMS_ICON_SIZE,
-					h: 20,
-					w: 20,
-				},
-				items = _.map(additionalToolbarButtons, (config, ix) => {
-					let {
-							text,
-							handler,
-							icon = null,
-							isDisabled = false,
-						} = config;
-					if (icon) {
-						const thisIconProps = {
-							color: isDisabled ? styles.GRID_TOOLBAR_ITEMS_DISABLED_COLOR : styles.GRID_TOOLBAR_ITEMS_COLOR,
-						};
-						icon = React.cloneElement(icon, {...iconProps, ...thisIconProps});
-					}
-					return <IconButton
-								key={ix}
-								{...iconButtonProps}
-								onPress={handler}
-								icon={icon}
-								isDisabled={isDisabled}
-								tooltip={text}
-							/>;
-				});
+			const items = _.map(additionalToolbarButtons, getIconButtonFromConfig);
+
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
@@ -851,21 +818,19 @@ export function GridComponent(props) {
 
 }
 
-const Grid = withAlert(
+export const Grid = withAlert(
 				withEvents(
 					withData(
 						withMultiSelection(
 							withSelection(
-								// withSideEditor(
-									withFilters(
-										withPresetButtons(
-											withContextMenu(
-												GridComponent
-											),
-											true // isGrid
-										)
+								withFilters(
+									withPresetButtons(
+										withContextMenu(
+											GridComponent
+										),
+										true // isGrid
 									)
-								// )
+								)
 							)
 						)
 					)
@@ -920,13 +885,13 @@ export const InlineGridEditor = withAlert(
 											withMultiSelection(
 												withSelection(
 													withInlineEditor(
-														withPresetButtons(
-															withContextMenu(
-																withFilters(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
 																	GridComponent
-																),
-																true // isGrid
-															)
+																)
+															),
+															true // isGrid
 														)
 													)
 												)

package/src/Components/Hoc/withEditor.js

@@ -1,4 +1,9 @@
 import { useEffect, useState, } from 'react';
+import {
+	Column,
+	Modal,
+	Text,
+} from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,
@@ -19,6 +24,7 @@ export default function withEditor(WrappedComponent) {
 				disableDelete = false,
 				disableDuplicate = false,
 				disableView = false,
+				isTree = false,
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -44,6 +50,7 @@ export default function withEditor(WrappedComponent) {
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
+			[isModalShown, setIsModalShown] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
 			onAdd = async () => {
 				const defaultValues = Repository.getSchema().model.defaultValues;
@@ -53,6 +60,13 @@ export default function withEditor(WrappedComponent) {
 					addValues[selectorId] = selectorSelected.id;
 				}
 
+				if (isTree) {
+					if (!selection[0]) {
+						throw Error('Must select a parent node.');
+					}
+					addValues.parentId = selection[0].id;
+				}
+
 				// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 				const currentSorter = Repository.sorters[0];
 				if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
@@ -195,33 +209,42 @@ export default function withEditor(WrappedComponent) {
 			editorMode = calculateEditorMode();
 		}
 
-		return <WrappedComponent
-					{...props}
-					currentRecord={currentRecord}
-					setCurrentRecord={setCurrentRecord}
-					isEditorShown={isEditorShown}
-					isEditorViewOnly={isEditorViewOnly}
-					editorMode={editorMode}
-					setEditorMode={setEditorMode}
-					setIsEditorShown={setIsEditorShown}
-					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
-					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
-					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
-					onView={viewRecord}
-					onDuplicate={duplicateRecord}
-					onEditorSave={onEditorSave}
-					onEditorCancel={onEditorCancel}
-					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
-					onEditorClose={onEditorClose}
-					isEditor={true}
-					useEditor={useEditor}
-					userCanEdit={userCanEdit}
-					userCanView={userCanView}
-					disableAdd={disableAdd}
-					disableEdit={disableEdit}
-					disableDelete={disableDelete}
-					disableDuplicate={disableDuplicate}
-					disableView ={disableView}
-				/>;
+		return <>
+					<WrappedComponent
+						{...props}
+						currentRecord={currentRecord}
+						setCurrentRecord={setCurrentRecord}
+						isEditorShown={isEditorShown}
+						isEditorViewOnly={isEditorViewOnly}
+						editorMode={editorMode}
+						setEditorMode={setEditorMode}
+						setIsEditorShown={setIsEditorShown}
+						onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
+						onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
+						onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
+						onView={viewRecord}
+						onDuplicate={duplicateRecord}
+						onEditorSave={onEditorSave}
+						onEditorCancel={onEditorCancel}
+						onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
+						onEditorClose={onEditorClose}
+						isEditor={true}
+						useEditor={useEditor}
+						userCanEdit={userCanEdit}
+						userCanView={userCanView}
+						disableAdd={disableAdd}
+						disableEdit={disableEdit}
+						disableDelete={disableDelete}
+						disableDuplicate={disableDuplicate}
+						disableView ={disableView}
+					/>
+					{isTree && isModalShown && 
+						<Modal
+							isOpen={true}
+							onClose={() => setIsModalShown(false)}
+						>
+
+						</Modal>}
+				</>;
 	};
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -34,6 +34,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			{
 				// for local use
 				isEditor = false,
+				isTree = false,
 				useEditor = true,
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
@@ -125,6 +126,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
+						if (isTree && _.isEmpty(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'edit':
 						text = 'Edit';

package/src/Components/Hoc/withSideEditor.js

@@ -6,7 +6,7 @@ import withEditor from './withEditor.js';
 import _ from 'lodash';
 
 
-export default function withSideEditor(WrappedComponent) {
+export default function withSideEditor(WrappedComponent, isTree = false) {
 	return withEditor((props) => {
 		const {
 				Editor,
@@ -19,7 +19,7 @@ export default function withSideEditor(WrappedComponent) {
 		}
 
 		return <Container
-					center={<WrappedComponent {...props} />}
+					center={<WrappedComponent isTree={isTree} {...props} />}
 					east={<Editor
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}

package/src/Components/Hoc/withWindowedEditor.js

@@ -25,7 +25,7 @@ import _ from 'lodash';
 // then switch position to absolute, draggable area would be header of panel
 // const DraggableColumn = withAdditionalProps(withDraggable(Column));
 
-export default function withWindowedEditor(WrappedComponent) {
+export default function withWindowedEditor(WrappedComponent, isTree = false) {
 	return withEditor((props) => {
 		const {
 				useEditor = false,
@@ -40,7 +40,7 @@ export default function withWindowedEditor(WrappedComponent) {
 		}
 
 		return <>
-					<WrappedComponent {...props} />
+					<WrappedComponent isTree={isTree} {...props} />
 					{useEditor && isEditorShown && 
 						<Modal
 							isOpen={true}

package/src/Components/Panel/TreePanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { Tree, } from '../Tree/Tree.js';
+import _ from 'lodash';
+
+export function TreePanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<Tree {...props} />
+			</Panel>;
+}
+
+export default TreePanel;

package/src/Components/Tree/Tree.js

@@ -32,6 +32,7 @@ import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
+import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import TreeNode, { ReorderableTreeNode } from './TreeNode.js';
@@ -63,7 +64,7 @@ import _ from 'lodash';
 //////////////////////
 
 
-export function TreeComponent(props) {
+function TreeComponent(props) {
 	const {
 			areRootsVisible = true,
 			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
@@ -251,7 +252,7 @@ export function TreeComponent(props) {
 					isDisabled: false,
 				});
 			}
-			const items = _.map(buttons, getIconFromConfig);
+			const items = _.map(buttons, getIconButtonFromConfig);
 
 			items.unshift(<Input // Add text input to beginning of header items
 				key="searchNodes"
@@ -270,40 +271,7 @@ export function TreeComponent(props) {
 			return items;
 		},
 		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, getIconFromConfig);
-		},
-		getIconFromConfig = (config, ix) => {
-			const
-				iconButtonProps = {
-					_hover: {
-						bg: 'trueGray.400',
-					},
-					mx: 1,
-					px: 3,
-				},
-				_icon = {
-					alignSelf: 'center',
-					size: styles.TREE_TOOLBAR_ITEMS_ICON_SIZE,
-					h: 20,
-					w: 20,
-					color: isDisabled ? styles.TREE_TOOLBAR_ITEMS_DISABLED_COLOR : styles.TREE_TOOLBAR_ITEMS_COLOR,
-				};
-			let {
-					key,
-					text,
-					handler,
-					icon = null,
-					isDisabled = false,
-				} = config;
-			return <IconButton
-						key={key || ix}
-						onPress={handler}
-						icon={icon}
-						_icon={_icon}
-						isDisabled={isDisabled}
-						tooltip={text}
-						{...iconButtonProps}
-					/>;
+			return _.map(additionalToolbarButtons, getIconButtonFromConfig);
 		},
 		buildTreeNodeDatum = (treeNode) => {
 			// Build the data-representation of one node and its children,
@@ -1114,25 +1082,21 @@ export function TreeComponent(props) {
 
 }
 
-const Tree = withAlert(
-				withEvents(
-					withData(
-						// withMultiSelection(
-							withSelection(
-								// withSideEditor(
-									withFilters(
-										// withPresetButtons(
+export const Tree = withAlert(
+						withEvents(
+							withData(
+								// withMultiSelection(
+									withSelection(
+										withFilters(
 											withContextMenu(
 												TreeComponent
 											)
-										// )
+										)
 									)
 								// )
 							)
-						// )
-					)
-				)
-			);
+						)
+					);
 
 export const SideTreeEditor = withAlert(
 									withEvents(
@@ -1146,7 +1110,8 @@ export const SideTreeEditor = withAlert(
 																	TreeComponent
 																)
 															)
-														)
+														),
+														true // isTree
 													)
 												)
 											// )
@@ -1166,7 +1131,8 @@ export const WindowedTreeEditor = withAlert(
 																	TreeComponent
 																)
 															)
-														)
+														),
+														true // isTree
 													)
 												)
 											// )

package/src/Constants/Styles.js

@@ -63,9 +63,6 @@ const defaults = {
 	GRID_ROW_HOVER_BG: 'hover',
 	GRID_ROW_SELECTED_BG: 'selected',
 	GRID_ROW_SELECTED_HOVER_BG: 'selectedHover',
-	GRID_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
-	GRID_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
-	GRID_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
 	ICON_BUTTON_BG: 'trueGray.200:alpha.0',
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
@@ -97,9 +94,9 @@ const defaults = {
 	TREE_NODE_HOVER_BG: 'hover',
 	TREE_NODE_SELECTED_BG: 'selected',
 	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
-	TREE_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
-	TREE_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
-	TREE_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
+	TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
+	TOOLBAR_ITEMS_ICON_SIZE: 'sm',
 	VIEWER_ANCILLARY_FONTSIZE: 22,
 };
 

package/src/Functions/getIconButtonFromConfig.js

@@ -0,0 +1,38 @@
+import IconButton from '../Components/Buttons/IconButton.js';
+import UiGlobals from '../UiGlobals.js';
+
+
+export default function getIconButtonFromConfig($config, ix) {
+	const
+		styles = UiGlobals.styles,
+		iconButtonProps = {
+			_hover: {
+				bg: 'trueGray.400',
+			},
+			mx: 1,
+			px: 3,
+		},
+		_icon = {
+			alignSelf: 'center',
+			size: styles.TOOLBAR_ITEMS_ICON_SIZE,
+			h: 20,
+			w: 20,
+			color: isDisabled ? styles.TOOLBAR_ITEMS_DISABLED_COLOR : styles.TOOLBAR_ITEMS_COLOR,
+		};
+	let {
+			key,
+			text,
+			handler,
+			icon = null,
+			isDisabled = false,
+		} = config;
+	return <IconButton
+				key={key || ix}
+				onPress={handler}
+				icon={icon}
+				_icon={_icon}
+				isDisabled={isDisabled}
+				tooltip={text}
+				{...iconButtonProps}
+			/>;
+}