@onehat/ui 0.3.243 → 0.3.246

package/package.json

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

package/src/Components/Container/Container.js

@@ -204,7 +204,7 @@ function Container(props) {
 			componentProps.setIsCollapsed = setIsNorthCollapsed || setLocalIsNorthCollapsed;
 			componentProps.onLayout = (e) => {
 				const height = parseFloat(e.nativeEvent.layout.height);
-				if (height !== northHeight) {
+				if (height && height !== northHeight) {
 					setNorthHeight(height);
 				}
 			};
@@ -228,7 +228,7 @@ function Container(props) {
 			componentProps.setIsCollapsed = setIsSouthCollapsed || setLocalIsSouthCollapsed;
 			componentProps.onLayout = (e) => {
 				const height = parseFloat(e.nativeEvent.layout.height);
-				if (height !== southHeight) {
+				if (height && height !== southHeight) {
 					setSouthHeight(height);
 				}
 			};
@@ -252,7 +252,7 @@ function Container(props) {
 			componentProps.setIsCollapsed = setIsEastCollapsed || setLocalIsEastCollapsed;
 			componentProps.onLayout = (e) => {
 				const width = parseFloat(e.nativeEvent.layout.width);
-				if (width !== eastWidth) {
+				if (width && width !== eastWidth) {
 					setEastWidth(width);
 				}
 			};
@@ -276,7 +276,7 @@ function Container(props) {
 			componentProps.setIsCollapsed = setIsWestCollapsed || setLocalIsWestCollapsed;
 			componentProps.onLayout = (e) => {
 				const width = parseFloat(e.nativeEvent.layout.width);
-				if (width !== westWidth) {
+				if (width && width !== westWidth) {
 					setWestWidth(width);
 				}
 			};

package/src/Components/Form/Field/Combo/Combo.js

@@ -38,7 +38,7 @@ export function ComboComponent(props) {
 			autoFocus = false,
 			tooltipRef = null,
 			tooltip = null,
-			menuMinWidth = 150,
+			menuMinWidth,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
 			showXButton = false,
@@ -126,8 +126,14 @@ export function ComboComponent(props) {
 				if (rect.left !== left) {
 					setLeft(rect.left);
 				}
-				if (rect.width !== width) {
-					setWidth(rect.width);
+
+				let widthToSet = rect.width,
+					minWidthToUse = menuMinWidth || styles.FORM_COMBO_MENU_MIN_WIDTH;
+				if (widthToSet < minWidthToUse) {
+					widthToSet = minWidthToUse;
+				}
+				if (widthToSet !== width) {
+					setWidth(widthToSet);
 				}
 			}
 			if (Repository && !Repository.isLoaded) {
@@ -807,7 +813,6 @@ export function ComboComponent(props) {
 									top={top + 'px'}
 									left={left + 'px'}
 									w={width + 'px'}
-									minWidth={menuMinWidth}
 									overflow="auto"
 									bg="#fff"
 								>

package/src/Components/Form/Form.js

@@ -136,7 +136,7 @@ function Form(props) {
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
-		initialValues =  _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
+		initialValues = _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
 		validatorToUse = validator || (isMultiple ? disableRequiredYupFields(Repository?.schema?.model?.validator) : Repository?.schema?.model?.validator) || yup.object(),
 		{
@@ -198,12 +198,16 @@ function Form(props) {
 						useSelectorId = false,
 						getDynamicProps,
 						getIsRequired,
+						isHidden = false,
 						...propsToPass
 					} = config,
 					type,
 					editorTypeProps = {},
 					viewerTypeProps = {};
 				
+				if (isHidden) {
+					return;
+				}
 				if (editField) {
 					// Sometimes, columns will be configured to display one field
 					// and edit a different field

package/src/Components/Grid/ColumnSelectorWindow.js

@@ -0,0 +1,123 @@
+import { useRef, } from 'react';
+import Button from '../Buttons/Button.js';
+import CheckboxButton from '../Buttons/CheckboxButton.js';
+import Grid from './Grid.js';
+import Panel from '../Panel/Panel.js';
+import Toolbar from '../Toolbar/Toolbar.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import _ from 'lodash';
+
+// helper for Grid
+
+export default function ColumnSelectorWindow(props) {
+	const
+		{
+			onClose,
+			columnsConfig,
+			setColumnsConfig,
+		} = props,
+		forceUpdate = useForceUpdate(),
+		localColumnsConfig = useRef(columnsConfig),
+		[width, height] = useAdjustedWindowSize(300, 500),
+		onSave = () => {
+			const newColumnsConfig = _.cloneDeep(localColumnsConfig.current);
+			setColumnsConfig(newColumnsConfig);
+			onClose();
+		},
+		onShowColumn = (ix) => {
+			const newColumnsConfig = _.cloneDeep(localColumnsConfig.current);
+			newColumnsConfig[ix].isHidden = false;
+			localColumnsConfig.current = newColumnsConfig;
+			forceUpdate();
+		},
+		onHideColumn = (ix) => {
+			const newColumnsConfig = _.cloneDeep(localColumnsConfig.current);
+			newColumnsConfig[ix].isHidden = true;
+			localColumnsConfig.current = newColumnsConfig;
+			forceUpdate();
+		},
+		columnData = _.map(localColumnsConfig.current, (config, ix) => {
+			const {
+				fieldName,
+				header = _.upperFirst(fieldName),
+			} = config;
+			return [
+				ix,
+				header,
+			];
+		});
+	return <Panel
+				{...props}
+				title="Column Selector"
+				reference="columnSelectorWindow"
+				isCollapsible={false}
+				bg="#fff"
+				w={width}
+				h={height}
+				flex={null}
+			>
+				<Grid
+					showHeaders={false}
+					showHovers={false}
+					shadow={1}
+					autoAdjustPageSizeToHeight={false}
+					disableWithSelection={true}
+					data={columnData}
+					flex={1}
+					alternateRowBackgrounds={false}
+					columnsConfig={[
+						{
+							header: 'Show',
+							fieldName: 'is_shown',
+							sortable: false,
+							isEditable: false,
+							reorderable: false,
+							resizable: false,
+							w: '50px',
+							renderer: (datum) => {
+								const
+									[ix, header] = datum,
+									columnConfig = localColumnsConfig.current[ix],
+									isHidden = columnConfig.isHidden;
+								return <CheckboxButton
+											isChecked={!isHidden}
+											onPress={() => {
+												if (isHidden) {
+													onShowColumn(ix);
+												} else {
+													onHideColumn(ix);
+												}
+											}}
+										/>;
+							}
+						},
+						{
+							header: 'Column',
+							fieldName: 1, // ix
+							sortable: false,
+							isEditable: false,
+							reorderable: false,
+							resizable: false,
+							flex: 3,
+						}
+					]}
+				/>
+				<Toolbar 
+				justifyContent="flex-end">
+					<Button
+						key="cancelBtn"
+						variant="ghost"
+						onPress={onClose}
+						color="#fff"
+						mr={2}
+					>Cancel</Button>
+					<Button
+						key="saveBtn"
+						onPress={onSave}
+						color="#fff"
+					>Save</Button>
+				</Toolbar>
+			</Panel>;
+}
+

package/src/Components/Grid/Grid.js

@@ -3,6 +3,7 @@ import {
 	Box,
 	Column,
 	FlatList,
+	Modal,
 	Pressable,
 	Icon,
 	Row,
@@ -16,9 +17,6 @@ import {
 import {
 	v4 as uuid,
 } from 'uuid';
-import {
-	VERTICAL,
-} from '../../Constants/Directions.js';
 import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
@@ -44,22 +42,22 @@ 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 withInlineSideEditor from '../Hoc/withInlineSideEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import Loading from '../Messages/Loading.js';
-import GridHeaderRow from '../Grid/GridHeaderRow.js';
+import GridHeaderRow from './GridHeaderRow.js';
 import GridRow, { DragSourceDropTargetGridRow, DragSourceGridRow, DropTargetGridRow } from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
 import ExpandButton from '../Buttons/ExpandButton.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
-import NoRecordsFound from '../Grid/NoRecordsFound.js';
+import NoRecordsFound from './NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
+import ColumnSelectorWindow from './ColumnSelectorWindow.js';
 import _ from 'lodash';
 
 
@@ -213,6 +211,7 @@ function GridComponent(props) {
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
 		[isDragMode, setIsDragMode] = useState(false),
 		[dragRow, setDragRow] = useState(),
+		[isColumnSelectorShown, setIsColumnSelectorShown] = useState(false),
 		getIsExpanded = (index) => {
 			return !!expandedRowsRef.current[index];
 		},
@@ -422,6 +421,7 @@ function GridComponent(props) {
 										isHovered={isHovered}
 										isInlineEditorShown={isInlineEditorShown}
 										areRowsDragSource={areRowsDragSource}
+										showColumnsSelector={() => setIsColumnSelectorShown(true)}
 									/>;
 						}
 
@@ -524,6 +524,7 @@ function GridComponent(props) {
 												size: 'sm',
 											}}
 											py={0}
+											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
 									</Row>
@@ -784,7 +785,7 @@ function GridComponent(props) {
 								sortable = true,
 								w,
 								flex,
-								...propsToPass
+								isHidden = false,
 							} = columnConfig,
 
 							config = {
@@ -801,8 +802,8 @@ function GridComponent(props) {
 								sortable,
 								w,
 								flex,
-								showDragHandles: false,
-								...propsToPass,
+								isHidden,
+								isOver: false,
 							};
 
 						if (!(config.w || config.width) && !config.flex) {
@@ -1013,6 +1014,23 @@ function GridComponent(props) {
 		gridContainerBorderProps.borderTopColor = 'trueGray.300';
 	}
 
+	let columnSelector = null;
+	if (isColumnSelectorShown) {
+		const onCloseColumnSelector = () => {
+			setIsColumnSelectorShown(false);
+		};
+		columnSelector = <Modal
+							isOpen={true}
+							onClose={onCloseColumnSelector}
+						>
+							<ColumnSelectorWindow
+								onClose={onCloseColumnSelector}
+								columnsConfig={localColumnsConfig}
+								setColumnsConfig={setLocalColumnsConfig}
+							/>
+						</Modal>;
+	}
+
 	grid = <Column
 				{...testProps('Grid')}
 				testID="outerContainer"
@@ -1034,7 +1052,7 @@ function GridComponent(props) {
 					minHeight={40}
 					{...gridContainerBorderProps}
 					onClick={() => {
-						if (!isDragMode && !isInlineEditorShown) {
+						if (!isDragMode && !isInlineEditorShown && deselectAll) {
 							deselectAll();
 						}
 					}}
@@ -1044,6 +1062,8 @@ function GridComponent(props) {
 
 				{listFooterComponent}
 
+				{columnSelector}
+
 			</Column>
 
 	if (isDropTarget) {

package/src/Components/Grid/GridHeaderRow.js

@@ -21,6 +21,7 @@ import useBlocking from '../../Hooks/useBlocking.js';
 import AngleRight from '../Icons/AngleRight.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
 import HeaderResizeHandle from './HeaderResizeHandle.js';
+import HeaderColumnSelectorHandle from './HeaderColumnSelectorHandle.js';
 import SortDown from '../Icons/SortDown.js';
 import SortUp from '../Icons/SortUp.js';
 import _ from 'lodash';
@@ -43,6 +44,7 @@ export default function GridHeaderRow(props) {
 			isHovered,
 			isInlineEditorShown,
 			areRowsDragSource,
+			showColumnsSelector,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -82,7 +84,7 @@ export default function GridHeaderRow(props) {
 				return;
 			}
 			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
-			columnsConfig[ix].showDragHandles = true;
+			columnsConfig[ix].isOver = true;
 			setLocalColumnsConfig(columnsConfig);
 		},
 		onHeaderMouseLeave = (e, ix) => {
@@ -90,7 +92,7 @@ export default function GridHeaderRow(props) {
 				return;
 			}
 			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
-			columnsConfig[ix].showDragHandles = false;
+			columnsConfig[ix].isOver = false;
 			setLocalColumnsConfig(columnsConfig);
 		},
 		onColumnReorderDragStart = (info, e, proxy, node) => {
@@ -246,7 +248,7 @@ export default function GridHeaderRow(props) {
 			setColumnsConfig(columnsConfig);
 
 			if (dragColumnSlot) {
-				dragColumnSlot.marker.remove();
+				dragColumnSlot.marker?.remove();
 			}
 			setDragColumnSlot(null);
 		},
@@ -299,7 +301,8 @@ export default function GridHeaderRow(props) {
 							sortable,
 							w,
 							flex,
-							showDragHandles,
+							isOver = false,
+							isHidden = false,
 						} = config,
 						isSorter = sortable && canColumnsSort && sortField === fieldName,
 						isReorderable = canColumnsReorder && reorderable,
@@ -308,6 +311,9 @@ export default function GridHeaderRow(props) {
 							borderRightWidth: 2,
 							borderRightColor: '#fff',
 						};
+					if (isHidden) {
+						return null;
+					}
 
 					if (all.length === 1) {
 						propsToPass.w = '100%';
@@ -360,7 +366,7 @@ export default function GridHeaderRow(props) {
 								onMouseLeave={(e) => onHeaderMouseLeave(e, ix)}
 								{...propsToPass}
 							>
-								{isReorderable && showDragHandles && 
+								{isReorderable && isOver && 
 										<HeaderReorderHandle
 												key="HeaderReorderHandle"
 												mode={HORIZONTAL}
@@ -409,7 +415,13 @@ export default function GridHeaderRow(props) {
 										color="trueGray.500"
 									/>}
 								
-								{isResizable && showDragHandles && 
+								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
+										<HeaderColumnSelectorHandle
+											key="HeaderColumnSelectorHandle"
+											showColumnsSelector={showColumnsSelector}
+										/>}
+								
+								{isResizable && isOver && 
 										<HeaderResizeHandle
 											key="HeaderResizeHandle"
 											mode={HORIZONTAL}

package/src/Components/Grid/GridRow.js

@@ -46,6 +46,9 @@ function GridRow(props) {
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
 				return _.map(columnsConfig, (config, key, all) => {
+					if (config.isHidden) {
+						return null;
+					}
 					const propsToPass = columnProps[key] || {};
 					if (all.length === 1) {
 						propsToPass.w = '100%';
@@ -86,7 +89,7 @@ function GridRow(props) {
 								'sortable',
 								'w',
 								'flex',
-								'showDragHandles',
+								'isOver',
 							]);
 
 							if (!extraProps._web) {

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -0,0 +1,25 @@
+import {
+	Icon,
+	Pressable,
+} from 'native-base';
+import Gear from '../Icons/Gear.js';
+import _ from 'lodash';
+
+export default function HeaderColumnSelectorHandle(props) {
+	const {
+			showColumnsSelector,
+		} = props;
+	return <Pressable
+				testID="HeaderColumnSelectorHandle"
+				bg="trueGray.100"
+				_hover={{ bg: 'trueGray.200' }}
+				_pressed={{ bg: 'trueGray.300' }}
+				h="100%"
+				w={3}
+				alignItems="center"
+				justifyContent="center"
+				onPress={showColumnsSelector}
+			>
+				<Icon as={Gear} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
+			</Pressable>;
+}

package/src/Components/Hoc/withComponent.js

@@ -48,7 +48,7 @@ export default function withComponent(WrappedComponent) {
 			});
 
 		useEffect(() => {
-			if (parent && !parent.hasChild(selfRef.current)) {
+			if (parent && !parent?.hasChild(selfRef.current)) {
 				parent.registerChild(selfRef.current);
 			}
 			return () => {

package/src/Components/Hoc/withSideEditor.js

@@ -25,6 +25,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				Editor,
 				editorProps = {},
 				sideFlex = 100,
+				isResizable = false,
 
 				// withComponent
 				self,
@@ -40,7 +41,16 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 			throw Error('Editor is not defined');
 		}
 
+		if (isResizable) {
+			editorProps.w = 500;
+			editorProps.isResizable = true;
+		} else {
+			editorProps.flex = sideFlex;
+		}
+
 		return <Container
+					parent={self}
+					reference="SideEditor"
 					center={<WrappedComponent
 								isTree={isTree}
 								isSideEditor={true}
@@ -49,7 +59,6 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 					east={<Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
-								flex={sideFlex}
 								borderLeftWidth={1}
 								borderLeftColor="#ccc"
 								{...editorProps}

package/src/Components/Screens/Manager.js

@@ -26,6 +26,7 @@ function ManagerScreen(props) {
 		styles = UiGlobals.styles,
 		id = props.id || props.self?.path,
 		[isRendered, setIsRendered] = useState(false),
+		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
 		[mode, setModeRaw] = useState(MODE_FULL),
 		setMode = (newMode) => {
@@ -63,6 +64,7 @@ function ManagerScreen(props) {
 					setMode(val);
 				}
 			}
+			setIsModeSet(true);
 		})();
 	}, [isRendered]);
 
@@ -81,7 +83,7 @@ function ManagerScreen(props) {
 	}
 
 	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
-				{isRendered && 
+				{isRendered && isModeSet &&
 					<>
 						<Row
 							h="80px"

package/src/Components/Tab/TabBar.js

@@ -70,6 +70,9 @@ function TabBar(props) {
 				}
 				return; // no change
 			}
+			if (tabs[currentTabIx].content) {
+				tabs[currentTabIx].content = null; // free up memory by clearing rendered content
+			}
 			if (useLocal) {
 				setCurrentTabIxLocal(ix);
 

package/src/Constants/Styles.js

@@ -20,6 +20,7 @@ const defaults = {
 	FORM_COMBO_INPUT_BG: WHITE,
 	FORM_COMBO_INPUT_FOCUS_BG: FOCUS,
 	FORM_COMBO_MENU_HEIGHT: 250,
+	FORM_COMBO_MENU_MIN_WIDTH: 250,
 	FORM_COMBO_TRIGGER_BG: WHITE,
 	FORM_COMBO_TRIGGER_HOVER_BG: 'trueGray.300',
 	FORM_DATE_ICON_BG: 'primary.200',

package/src/Functions/registerComponents.js

@@ -2,5 +2,5 @@ import UiGlobals from '../UiGlobals.js';
 import _ from 'lodash';
 
 export default function registerComponents(newComponents) {
-	_.merge(UiGlobals.components, newComponents);
+	_.assign(UiGlobals.components, newComponents); // use assign instead of merge, so that it overwrites existing properties; however this does not work recursively
 }