@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Grid/GridHeaderRow.js

@@ -1,11 +1,11 @@
 import { useState, useEffect, useMemo, } from 'react';
 import {
 	Box,
+	HStack,
 	Icon,
 	Pressable,
-	Row,
-	Text,
-} from 'native-base';
+	TextNative,
+} from '../Gluestack';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -307,40 +307,38 @@ export default function GridHeaderRow(props) {
 						isSorter = isSortable && canColumnsSort && sortField === fieldName,
 						isReorderable = canColumnsReorder && configIsReorderable,
 						isResizable = canColumnsResize && configIsResizable,
-						propsToPass = {
-							borderRightWidth: 2,
-							borderRightColor: '#fff',
-						};
+						rowClassName = `
+							border-r-2
+							border-r-white
+						`;
 					if (isHidden) {
 						return null;
 					}
 
+					const rowStyle = {};
 					if (all.length === 1) {
-						propsToPass.w = '100%';
+						rowClassName += ' w-full';
 						isReorderable = false;
 						isResizable = false;
 					} else {
 						if (w) {
-							propsToPass.w = w;
+							rowStyle.width = w;
 						} else if (flex) {
-							propsToPass.flex = flex;
-							propsToPass.minWidth = 100;
+							rowStyle.flex = flex;
+							rowClassName += ' min-w-[100px]';
 						} else if (localColumnsConfig.length === 1) {
 							// Only one column and flex is not set
-							propsToPass.flex = 1;
+							rowClassName += ' flex-1';
 							if (!header) {
 							}
 						}
 					}
+					rowStyle.userSelect = 'none';
 
 					if (isInlineEditorShown) {
-						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+						rowClassName = ' ' + styles.INLINE_EDITOR_MIN_WIDTH;
 					}
 
-					const textProps = {};
-					if (UiGlobals.mode === UI_MODE_WEB) {
-						textProps.textOverflow = 'ellipsis';
-					}
 					return <Pressable
 								{...testProps('Header-' + fieldName)}
 								key={ix}
@@ -355,17 +353,17 @@ export default function GridHeaderRow(props) {
 										onSort(config, e);
 									}
 								}}
-								flexDirection="row"
-								h="100%"
-								bg={styles.GRID_HEADER_BG}
-								_hover={{
-									bg: styles.GRID_HEADER_HOVER_BG,
-								}}
-								p={0}
-								style={{ userSelect: 'none', }}
 								onMouseEnter={(e) => onHeaderMouseEnter(e, ix)}
 								onMouseLeave={(e) => onHeaderMouseLeave(e, ix)}
-								{...propsToPass}
+								className={`
+									h-full
+									flex-row
+									p-0
+									${rowClassName}
+									${styles.GRID_HEADER_BG}
+									${styles.GRID_HEADER_BG_HOVER}
+								`}
+								style={rowStyle}
 							>
 								{isReorderable && isOver && 
 										<HeaderReorderHandle
@@ -390,31 +388,33 @@ export default function GridHeaderRow(props) {
 													return proxy;
 												}}
 											/>}
-								<Text
+								<TextNative
 									key="Text"
-									fontSize={styles.GRID_HEADER_FONTSIZE}
-									overflow="hidden"
-									flex={1}
-									h="100%"
-									px={styles.GRID_HEADER_CELL_PX}
-									py={styles.GRID_HEADER_CELL_PY}
-									alignItems="center"
-									justifyContent="center"
 									numberOfLines={1}
-									ellipsizeMode="head"
-									{...textProps}
-								>{header}</Text>
+									className={`
+										h-full
+										flex-1
+										items-center
+										justify-center
+										overflow-hidden
+										text-ellipsis
+										${styles.GRID_HEADER_FONTSIZE}
+										${styles.GRID_HEADER_CELL_PX}
+										${styles.GRID_HEADER_CELL_PY}
+									`}
+								>{header}</TextNative>
 								
 								{isSorter && 
-									<Icon 
-										key="Icon" 
-										as={isSortDirectionAsc ? SortUp : SortDown} 
-										textAlign="center" 
+									<Icon
+										key="Icon"
+										as={isSortDirectionAsc ? SortUp : SortDown}
 										size={styles.GRID_HEADER_ICON_SIZE}
-										mt={styles.GRID_HEADER_ICON_MT} 
-										mr={styles.GRID_HEADER_ICON_MR} 
-										color="trueGray.500"
-									/>}
+										className={`
+											text-center
+											text-grey-500
+											${styles.GRID_HEADER_ICON_MT}
+											${styles.GRID_HEADER_ICON_MR}
+										`} />}
 								
 								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
 										<HeaderColumnSelectorHandle
@@ -460,31 +460,23 @@ export default function GridHeaderRow(props) {
 				if (areRowsDragSource) {
 					headerColumns.unshift(<Box
 						key="spacer"
-						w={3}
+						className="w-[3px]"
 					/>);
 				}
 				if (!hideNavColumn) {
-					headerColumns.push(<AngleRight
-											key="AngleRight"
-											color="#aaa"
-											variant="ghost"
-											w={30}
-											alignSelf="center"
-											ml={3}
-										/>);
+					headerColumns.push(<Icon as={AngleRight} className={`AngleRight text-[#aaa] w-[30px] self-center ml-3`} />);
 				}
 				return headerColumns;
 			};
 
-		return <Row
-					w="100%"
-					bg="trueGray.200"
+		return <HStack
 					style={{
 						scrollbarWidth: 'none',
 					}}
+					className="w-full bg-grey-200"
 				> 
 					{renderHeaders()}
-				</Row>;
+				</HStack>;
 
 	}, [
 		Repository,

package/src/Components/Grid/GridRow.js

@@ -1,16 +1,19 @@
-import { useEffect, useMemo, useRef, } from 'react';
+import { useMemo, } from 'react';
 import {
 	Box,
-	Row,
-	Text,
-} from 'native-base';
+	HStack,
+	HStackNative,
+	Icon,
+	TextNative,
+} from '../Gluestack';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
+import * as colourMixer from '@k-renwick/colour-mixer';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
-import testProps from '../../Functions/testProps.js';
+import testProps from '../..Ffunctions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
 import _ from 'lodash';
@@ -25,12 +28,17 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			isSelected,
+			isHovered,
 			bg,
+			showHovers,
+			index,
+			alternatingInterval,
+			alternateRowBackgrounds,
 			item,
 			isInlineEditorShown,
 			isDraggable = false, // withDraggable
 			isDragSource = false, // withDnd
-			isOver = false,
+			isOver = false, // drop target
 			dragSourceRef,
 			dropTargetRef,
 		} = props,
@@ -43,8 +51,32 @@ function GridRow(props) {
 	const
 		isPhantom = item.isPhantom,
 		hash = item?.hash || item;
-
 	return useMemo(() => {
+
+		let bg = props.bg || styles.GRID_ROW_BG,
+			mixWith;
+		if (isSelected) {
+			if (showHovers && isHovered) {
+				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
+			} else {
+				mixWith = styles.GRID_ROW_SELECTED_BG;
+			}
+		} else if (showHovers && isHovered) {
+			mixWith = styles.GRID_ROW_BG_HOVER;
+		} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
+			mixWith = styles.GRID_ROW_ALTERNATE_BG;
+		}
+		if (mixWith) {
+			// const
+			// 	mixWithObj = gsToHex(mixWith),
+			// 	ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+			// bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+			bg = colourMixer.blend(bg, 0.5, mixWith);
+		}
+		const
+			visibleColumns = _.filter(columnsConfig, (config) => !config.isHidden),
+			isOnlyOneVisibleColumn = visibleColumns.length === 1;
+
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
 				return _.map(columnsConfig, (config, key, all) => {
@@ -52,23 +84,29 @@ function GridRow(props) {
 						return null;
 					}
 					const propsToPass = columnProps[key] || {};
-					if (all.length === 1) {
-						propsToPass.w = '100%';
+					const colStyle = {};
+					let colClassName = `
+						GridRow-column
+						p-1
+						justify-center
+						border-r-black-100
+						mr-1
+					`;
+					if (isOnlyOneVisibleColumn) {
+						colClassName = ' w-full';
 					} else {
 						if (config.w) {
-							propsToPass.w = config.w;
+							colStyle.width = config.w;
 						} else if (config.flex) {
-							propsToPass.flex = config.flex;
-							propsToPass.minWidth = 100;
+							colStyle.flex = config.flex;
+							colClassName = ' min-w-[100px]';
 						} else {
-							propsToPass.flex = 1;
+							colClassName = ' flex-1';
 						}
 					}
-					propsToPass.p = 1;
-					propsToPass.justifyContent = 'center';
 
 					if (isInlineEditorShown) {
-						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+						colClassName += ' ' + styles.INLINE_EDITOR_MIN_WIDTH;
 					}
 
 					let value;
@@ -103,14 +141,17 @@ function GridRow(props) {
 								userSelect: 'none',
 							};
 
-							return <Row
+							return <HStackNative
 										key={key}
 										{...testProps('rendererCol-' + key)}
+										className={colClassName}
 										{...propsToPass}
 										{...extraProps}
-									>{config.renderer(item)}</Row>;
+										style={colStyle}
+									>{config.renderer(item)}</HStackNative>;
 						}
 						if (config.fieldName) {
+
 							if (item?.properties && item.properties[config.fieldName]) {
 								const property = item.properties[config.fieldName];
 								value = property.displayValue;
@@ -119,9 +160,6 @@ function GridRow(props) {
 								if (type) {
 									const Element = getComponentFromType(type);
 									const elementProps = {};
-									if (UiGlobals.mode === UI_MODE_WEB) {
-										elementProps.textOverflow = 'ellipsis';
-									}
 									if (type.match(/(Tag|TagEditor|Json)$/)) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
@@ -133,13 +171,20 @@ function GridRow(props) {
 												value={value}
 												key={key}
 												overflow="hidden"
-												alignSelf="center"
 												style={{
 													userSelect: 'none',
+													...colStyle,
 												}}
-												fontSize={styles.GRID_CELL_FONTSIZE}
-												px={styles.GRID_CELL_PX}
-												py={styles.GRID_CELL_PY}
+												minimizeForRow={true}
+												className={`
+													GridRow-Element
+													self-center
+													text-ellipsis
+													${colClassName}
+													${styles.GRID_CELL_FONTSIZE}
+													${styles.GRID_CELL_PX}
+													${styles.GRID_CELL_PY}
+												`}
 												numberOfLines={1}
 												ellipsizeMode="head"
 												{...propsToPass}
@@ -166,72 +211,119 @@ function GridRow(props) {
 						return value(key);
 					}
 					const elementProps = {};
-					if (UiGlobals.mode === UI_MODE_WEB) {
-						elementProps.textOverflow = 'ellipsis';
-					}
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
-					return <Text
+					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
-								overflow="hidden"
-								alignSelf="center"
 								style={{
 									userSelect: 'none',
+									...colStyle,
 								}}
-								fontSize={styles.GRID_CELL_FONTSIZE}
-								px={styles.GRID_CELL_PX}
-								py={styles.GRID_CELL_PY}
 								numberOfLines={1}
 								ellipsizeMode="head"
+								className={`
+									GridRow-TextNative
+									self-center
+									overflow-hidden
+									text-ellipsis
+									${colClassName}
+									${styles.GRID_CELL_FONTSIZE} 
+									${styles.GRID_CELL_PX} 
+									${styles.GRID_CELL_PY} 
+								`}
 								{...elementProps}
 								{...propsToPass}
-							>{value}</Text>;
+							>{value}</TextNative>;
 				});
 			} else {
 				// TODO: if 'columnsConfig' is an object, parse its contents
 				throw new Error('Non-array columnsConfig not yet supported');
 			}
 		};
-		if (isOver) {
-			rowProps.borderWidth = 4;
-			rowProps.borderColor = '#0ff';
-		} else {
-			rowProps.borderWidth = 0;
-			rowProps.borderColor = null;
-		}
 
 		let rowContents = <>
 							{(isDragSource || isDraggable) && <RowDragHandle />}
-							{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
+							{isPhantom && 
+								<Box
+									className={`
+										GridRow-phantom
+										absolute
+										h-[2px]
+										w-[2px]
+										top-0
+										left-0
+										bg-[#f00]
+									`}
+								/>}
 							
 							{renderColumns(item)}
 
-							{!hideNavColumn && <AngleRight
-													color={styles.GRID_NAV_COLUMN_COLOR}
-													variant="ghost"
-													w={30}
-													alignSelf="center"
-													mx={3}
-												/>}
+							{!hideNavColumn &&
+								<Icon
+									as={AngleRight}
+									variant="outline"
+									className={`
+										GridRow-Icon
+										w-30
+										self-center
+										mx-3
+										${styles.GRID_NAV_COLUMN_COLOR}
+									`}
+								/>}
 						</>;
 
 		if (dragSourceRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dragSourceRef}>{rowContents}</Row>;
+			rowContents = <HStack
+								ref={dragSourceRef}
+								className={`
+									dragSourceRef
+									w-full
+									flex-1
+									grow-1
+								`}
+								style={{
+									backgroundColor: bg,
+								}}
+							>{rowContents}</HStack>;
 		}
 		if (dropTargetRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dropTargetRef}>{rowContents}</Row>;
+			rowContents = <HStack
+								ref={dropTargetRef}
+								className={`
+									dropTargetRef
+									w-full
+									flex-1
+									grow-1
+								`}
+								style={{
+									backgroundColor: bg,
+								}}
+							>{rowContents}</HStack>;
 		}
 
-		return <Row
+		let rowClassName = `
+			GridRow-HStackNative
+			items-center
+		`;
+		if (isOnlyOneVisibleColumn) {
+			rowClassName += ' w-full';
+		}
+		if (isOver) {
+			rowClassName += ' border-4 border-[#0ff]';
+		} else {
+			rowClassName += ' border-b border-b-grey-100';
+		}
+		return <HStackNative
 					{...testProps('row' + (isSelected ? '-selected' : ''))}
-					alignItems="center"
-					flexGrow={1}
 					{...rowProps}
-					bg={bg}
 					key={hash}
-				>{rowContents}</Row>;
+					className={rowClassName}
+					style={{
+						backgroundColor: bg,
+					}}
+				>{rowContents}</HStackNative>;
 	}, [
 		columnsConfig,
 		columnProps,
@@ -243,7 +335,9 @@ 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,
+		isSelected,
+		isHovered,
+		index,
 		dragSourceRef,
 		dropTargetRef,
 	]);

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	Pressable,
-} from 'native-base';
+} from '../Gluestack';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 
@@ -10,16 +10,22 @@ export default function HeaderColumnSelectorHandle(props) {
 			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"
+				_hover={{ bg: 'grey-200' }}
+				_pressed={{ bg: 'grey-300' }}
 				onPress={showColumnsSelector}
+				className={`
+					HeaderColumnSelectorHandle
+					bg-grey-100
+					h-full
+					w-3
+					items-center
+					justify-center
+				`}
 			>
-				<Icon as={Gear} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
+				<Icon
+					as={Gear}
+					size="xs"
+					className="handle w-full h-full text-[#ccc]"
+				/>
 			</Pressable>;
 }

package/src/Components/Grid/HeaderReorderHandle.js

@@ -1,9 +1,7 @@
 import {
-	Column,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';
@@ -13,17 +11,23 @@ function HeaderReorderHandle(props) {
 			isDragging,
 		} = props;
 
-	return <Column
-				testID="HeaderReorderHandle"
-				bg={isDragging ? 'trueGray.300' : 'trueGray.100'}
-				h="100%"
-				w={3}
-				alignItems="center"
-				justifyContent="center"
+	return <VStack
 				style={styles.ewResize}
+				className={`
+					HeaderReorderHandle
+					h-full
+					w-3
+					items-center
+					justify-center
+					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
+				`}
 			>
-				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
-			</Column>;
+				<Icon
+					as={GripVertical}
+					size="xs"
+					className="reorderHandle w-full h-full text-grey-300"
+				/>
+			</VStack>;
 }
 
 function withAdditionalProps(WrappedComponent) {

package/src/Components/Grid/HeaderResizeHandle.js

@@ -1,9 +1,7 @@
 import {
-	Column,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';
@@ -13,17 +11,23 @@ function HeaderResizeHandle(props) {
 			isDragging,
 		} = props;
 
-	return <Column
-				testID="HeaderResizeHandle"
-				bg={isDragging ? 'trueGray.300' : 'trueGray.100'}
-				h="100%"
-				w={3}
-				alignItems="center"
-				justifyContent="center"
+	return <VStack
 				style={styles.ewResize}
+				className={`
+					HeaderResizeHandle
+					h-full
+					w-3
+					items-center
+					justify-center
+					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
+				`}
 			>
-				<Icon as={GripLinesVertical} testID="handle" size="sm" color="#ccc" />
-			</Column>;
+				<Icon
+					as={GripLinesVertical}
+					size="sm"
+					className="resizeHandle text-grey-300"
+				/>
+			</VStack>;
 }
 
 function withAdditionalProps(WrappedComponent) {