@onehat/ui 0.3.215 → 0.3.216

package/package.json

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

package/src/Components/Buttons/ExpandButton.js

@@ -0,0 +1,17 @@
+import IconButton from './IconButton.js';
+import Plus from '../Icons/Plus.js';
+import Minus from '../Icons/Minus.js';
+import _ from 'lodash';
+
+export default function ExpandButton(props) {
+	const {
+			isExpanded = false,
+			onToggle,
+		} = props;
+
+	return <IconButton
+				icon={isExpanded ? Minus : Plus}
+				onPress={onToggle}
+				{...props}
+			/>;
+};

package/src/Components/Grid/Grid.js

@@ -53,6 +53,7 @@ import Loading from '../Messages/Loading.js';
 import GridHeaderRow from './GridHeaderRow.js';
 import GridRow from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
+import ExpandButton from '../Buttons/ExpandButton.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from './NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
@@ -97,16 +98,15 @@ function GridComponent(props) {
 			},
 			flatListProps = {},
 			onRowPress,
-			// enableEditors = false,
+			onRender,
 			forceLoadOnRender = false,
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
 			autoAdjustPageSizeToHeight = true,
-			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
-			rowExpanderTpl = '',
+			getExpandedRowContent,
 			showHeaders = true,
 			showHovers = true,
 			canColumnsSort = true,
@@ -115,6 +115,9 @@ function GridComponent(props) {
 			canRowsReorder = false,
 			areRowsDragSource = false,
 			rowDragSourceType,
+			areRowsDropTarget = false,
+			dropTargetAccept,
+			onRowDrop,
 			allowToggleSelection = false, // i.e. single click with no shift key toggles the selection of the item clicked on
 			disableBottomToolbar = false,
 			disablePagination = false,
@@ -137,8 +140,6 @@ function GridComponent(props) {
 			onEdit,
 			onDelete,
 			onView,
-			onDuplicate,
-			onReset,
 			onContextMenu,
 			isAdding,
 
@@ -201,6 +202,7 @@ function GridComponent(props) {
 		gridRef = useRef(),
 		gridContainerRef = useRef(),
 		isAddingRef = useRef(),
+		expandedRowsRef = useRef({}),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -208,6 +210,13 @@ function GridComponent(props) {
 		[isDragMode, setIsDragMode] = useState(false),
 		[dragRowSlot, setDragRowSlot] = useState(null),
 		[dragRowIx, setDragRowIx] = useState(),
+		getIsExpanded = (index) => {
+			return !!expandedRowsRef.current[index];
+		},
+		setIsExpanded = (index, isExpanded) => {
+			expandedRowsRef.current[index] = isExpanded;
+			forceUpdate();
+		},
 		setLocalColumnsConfig = (config) => {
 			if (localColumnsConfigKey && !hasFunctionColumn) {
 				setSaved(localColumnsConfigKey, config);
@@ -322,7 +331,7 @@ function GridComponent(props) {
 				rowProps = getRowProps && !isHeaderRow ? getRowProps(item) : {},
 				isSelected = !isHeaderRow && !disableWithSelection && isInSelection(item);
 
-			return <Pressable
+			let rowComponent = <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
@@ -435,23 +444,28 @@ function GridComponent(props) {
 								rowReorderProps = {},
 								rowDragProps = {};
 							if (canRowsReorder && isDragMode) {
-								rowReorderProps = {
-									isDraggable: true,
-									mode: VERTICAL,
-									onDragStart: onRowReorderDragStart,
-									onDrag: onRowReorderDrag,
-									onDragStop: onRowReorderDragStop,
-									proxyParent: gridRef.current?.getScrollableNode().children[0],
-									proxyPositionRelativeToParent: true,
-									getParentNode: (node) => node.parentElement.parentElement.parentElement,
-									getProxy: getReorderProxy,
-								};
+								rowReorderProps.isDraggable = true;
+								rowReorderProps.mode = VERTICAL;
+								rowReorderProps.onDragStart = onRowReorderDragStart;
+								rowReorderProps.onDrag = onRowReorderDrag;
+								rowReorderProps.onDragStop = onRowReorderDragStop;
+								rowReorderProps.proxyParent = gridRef.current?.getScrollableNode().children[0];
+								rowReorderProps.proxyPositionRelativeToParent = true;
+								rowReorderProps.getParentNode = (node) => node.parentElement.parentElement.parentElement;
+								rowReorderProps.getProxy = getReorderProxy;
 							}
 							if (areRowsDragSource) {
 								rowDragProps.isDragSource = true;
 								rowDragProps.dragSourceType = rowDragSourceType;
 								rowDragProps.dragSourceItem = { id: item.id };
 							}
+							if (areRowsDropTarget) {
+								rowDragProps.isDropTarget = true;
+								rowDragProps.dropTargetAccept = dropTargetAccept;
+								rowDragProps.onDrop = (droppedItem) => {
+									onRowDrop(item, droppedItem);
+								};
+							}
 							return <GridRow
 										columnsConfig={localColumnsConfig}
 										columnProps={columnProps}
@@ -466,6 +480,25 @@ function GridComponent(props) {
 									/>;
 						}}
 					</Pressable>;
+
+			if (showRowExpander && !isHeaderRow) {
+				const isExpanded = getIsExpanded(index);
+				rowComponent = <Column>
+									<Row>
+										<ExpandButton
+											isExpanded={isExpanded}
+											onToggle={() => setIsExpanded(index, !isExpanded)}
+											_icon={{
+												size: 'sm',
+											}}
+											py={0}
+										/>
+										{rowComponent}
+									</Row>
+									{isExpanded ? getExpandedRowContent(row) : null}
+								</Column>
+			}
+			return rowComponent;
 		},
 		getReorderProxy = (node) => {
 			const
@@ -766,6 +799,9 @@ function GridComponent(props) {
 				}
 				Repository.pauseEvents();
 			}
+			if (onRender) {
+				onRender(self)
+			}
 			return () => {};
 		}
 
@@ -873,6 +909,11 @@ function GridComponent(props) {
 				if (!Repository.isAutoLoad) {
 					Repository.reload();
 				}
+			},
+			onChangePage = () => {
+				if (showRowExpander) {
+					expandedRowsRef.current = {}; // clear expanded rows
+				}
 			};
 
 		Repository.on('beforeLoad', setTrue);
@@ -883,7 +924,7 @@ function GridComponent(props) {
 		Repository.ons(['changeData', 'change'], forceUpdate);
 		Repository.on('changeFilters', onChangeFilters);
 		Repository.on('changeSorters', onChangeSorters);
-
+		Repository.on('changePage', onChangePage);
 
 		applySelectorSelected();
 		Repository.resumeEvents();
@@ -901,6 +942,7 @@ function GridComponent(props) {
 			Repository.offs(['changeData', 'change'], forceUpdate);
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
+			Repository.off('changePage', onChangePage);
 		};
 	}, [isInited]);
 
@@ -1055,7 +1097,6 @@ function GridComponent(props) {
 					{...sizeProps}
 				>{grid}</Box>
 	}
-
 	return grid;
 
 }

package/src/Components/Grid/GridRow.js

@@ -9,9 +9,10 @@ import {
 } from '../../Constants/UiModes.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
-import { withDragSource } from '../Hoc/withDnd.js';
+import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import AngleRight from '../Icons/AngleRight.js';
+import RowDragHandle from './RowDragHandle.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it
@@ -26,6 +27,8 @@ function GridRow(props) {
 			bg,
 			item,
 			isInlineEditorShown,
+			isDragSource = false,
+			isOver = false,
 		} = props,
 		styles = UiGlobals.styles;
 
@@ -40,7 +43,9 @@ function GridRow(props) {
 	if (props.dragSourceRef) {
 		rowProps.ref = props.dragSourceRef;
 	}
-
+	if (props.dropTargetRef) {
+		rowProps.ref = props.dropTargetRef;
+	}
 	return useMemo(() => {
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
@@ -176,6 +181,13 @@ function GridRow(props) {
 				throw new Error('Non-array columnsConfig not yet supported');
 			}
 		};
+		if (isOver) {
+			rowProps.borderWidth = 4;
+			rowProps.borderColor = '#0ff';
+		} else {
+			rowProps.borderWidth = 0;
+			rowProps.borderColor = null;
+		}
 		return <Row
 					alignItems="center"
 					flexGrow={1}
@@ -183,6 +195,7 @@ function GridRow(props) {
 					bg={bg}
 					key={hash}
 				>
+					{isDragSource && <RowDragHandle />}
 					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
 					
 					{renderColumns(item)}
@@ -206,7 +219,8 @@ function GridRow(props) {
 		isPhantom,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
 		isInlineEditorShown,
+		isOver,
 	]);
 }
 
-export default withDraggable(withDragSource(GridRow));
+export default withDraggable(withDragSource(withDropTarget(GridRow)));

package/src/Components/Grid/RowDragHandle.js

@@ -0,0 +1,24 @@
+import {
+	Column,
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import styles from '../../Styles/StyleSheets.js';
+import GripVertical from '../Icons/GripVertical.js';
+
+function RowDragHandle(props) {
+	return <Column
+				testID="HeaderReorderHandle"
+				bg="trueGray.100"
+				h="100%"
+				w={3}
+				alignItems="center"
+				justifyContent="center"
+				style={styles.ewResize}
+			>
+				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
+			</Column>;
+}
+
+export default RowDragHandle;

package/src/Components/index.js

@@ -203,6 +203,7 @@ import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
+import ExpandButton from './Buttons/ExpandButton.js';
 import FieldSet from './Form/FieldSet.js';
 import FiltersForm from './Form/FiltersForm.js';
 // import FiltersToolbar from '../Components/Toolbar/FiltersToolbar.js';
@@ -436,6 +437,7 @@ const components = {
 	Date,
 	DateRange,
 	DisplayField,
+	ExpandButton,
 	FieldSet,
 	FiltersForm,
 	// FiltersToolbar,