@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Grid/Grid.js

@@ -1,15 +1,16 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
 	Box,
-	Column,
 	FlatList,
-	Modal,
+	HStack,
 	Pressable,
-	Icon,
-	Row,
+	// ScrollView,
+	VStack,
+	VStackNative,
+} from '../Gluestack';
+import {
 	ScrollView,
-	Text,
-} from 'native-base';
+} from 'react-native';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -24,10 +25,17 @@ import {
 } from '../../Constants/Grid.js';
 import {
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import * as colourMixer from '@k-renwick/colour-mixer';
+import {
+	hasHeight,
+	hasWidth,
+	hasFlex,
+} from '../../Functions/tailwindFunctions.js';
+import * as yup from 'yup'; // https://github.com/jquense/yup#string
+import Inflector from 'inflector-js';
+import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
@@ -44,52 +52,59 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
+import Form from '../Form/Form.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 gsToHex from '../../Functions/gsToHex.js';
 import Loading from '../Messages/Loading.js';
 import isSerializable from '../../Functions/isSerializable.js';
 import inArray from '../../Functions/inArray.js';
-import ReloadPageButton from '../Buttons/ReloadPageButton.js';
+import ReloadButton from '../Buttons/ReloadButton.js';
+import CheckboxButton from '../Buttons/CheckboxButton.js';
 import GridHeaderRow from './GridHeaderRow.js';
 import GridRow, { DragSourceDropTargetGridRow, DragSourceGridRow, DropTargetGridRow } from './GridRow.js';
-import IconButton from '../Buttons/IconButton.js';
+import Button from '../Buttons/Button.js';
 import ExpandButton from '../Buttons/ExpandButton.js';
+import IconButton from '../Buttons/IconButton.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.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 Unauthorized from '../Messages/Unauthorized.js';
 import _ from 'lodash';
 
 
 // This fn gets called many times per component
 // First call
-	// !isInited
-	// render a placeholder, to get container dimensions
-	// onInitialLayout()
-		// set initial pageSize
-		// setIsInited(true)
+// !isInited
+// render a placeholder, to get container dimensions
+// onInitialLayout()
+// set initial pageSize
+// setIsInited(true)
 // Second call
-	// !isReady
-	// set selectorSelected
-	// load Repo
+// !isReady
+// set selectorSelected
+// load Repo
 // Third call
-	// isReady
-	// render Grid,
+// isReady
+// render Grid,
 // subsequent calls due to changes of selectorSelected
-	// re-apply selectorSelected
+// re-apply selectorSelected
 // subsequent calls due to changes changes in onLayout
-	// adjust pageSize if needed
+// adjust pageSize if needed
 
 // TODO: account for various environments (mainly for optimization):
 // RN vs web
 // Repository vs data
 
+const
+	SINGLE_CLICK = 1,
+	DOUBLE_CLICK = 2,
+	TRIPLE_CLICK = 3;
+
 function GridComponent(props) {
 	const {
 
@@ -98,8 +113,10 @@ function GridComponent(props) {
 			defaultHiddenColumns = [],
 			getRowProps = (item) => {
 				return {
-					borderBottomWidth: 1,
-					borderBottomColor: 'trueGray.500',
+					className: `
+						border-bottom-1
+						border-bottom-grey-500
+					`,
 				};
 			},
 			flatListProps = {},
@@ -132,8 +149,6 @@ function GridComponent(props) {
 			bottomToolbar = 'pagination',
 			topToolbar = null,
 			additionalToolbarButtons = [],
-			h,
-			flex,
 			bg = '#fff',
 			canRecordBeEdited,
 			alternateRowBackgrounds = true,
@@ -143,6 +158,10 @@ function GridComponent(props) {
 			// withComponent
 			self,
 
+			// withModal
+			showModal,
+			hideModal,
+
 			// withEditor
 			onAdd,
 			onEdit,
@@ -217,7 +236,6 @@ function GridComponent(props) {
 		[isLoading, setIsLoading] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
 		[isReorderMode, setIsReorderMode] = useState(false),
-		[isColumnSelectorShown, setIsColumnSelectorShown] = useState(false),
 		getIsExpanded = (index) => {
 			return !!expandedRowsRef.current[index];
 		},
@@ -334,7 +352,10 @@ function GridComponent(props) {
 					parent={self}
 					reference="reorderBtn"
 					onPress={() => setIsReorderMode(!isReorderMode)}
-					icon={<Icon as={isReorderMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
+					icon={isReorderMode ? NoReorderRows : ReorderRows}
+					_icon={{
+						className: styles.GRID_TOOLBAR_ITEMS_COLOR,
+					}}
 					tooltip="Reorder Rows"
 				/>);
 			}
@@ -368,13 +389,13 @@ function GridComponent(props) {
 						}
 						if (CURRENT_MODE === UI_MODE_WEB) {
 							switch (e.detail) {
-								case 1: // single click
+								case SINGLE_CLICK:
 									onRowClick(item, e); // sets selection
 									if (onEditorRowClick) {
 										onEditorRowClick(item, index, e);
 									}
 									break;
-								case 2: // double click
+								case DOUBLE_CLICK:
 									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
 										onRowClick(item, e); // so reselect it
 									}
@@ -403,11 +424,11 @@ function GridComponent(props) {
 										}
 									}
 									break;
-								case 3: // triple click
+								case TRIPLE_CLICK:
 									break;
 								default:
 							}
-						} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+						} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 							onRowClick(item, e); // sets selection
 							if (onEditorRowClick) {
 								onEditorRowClick(item, index, e);
@@ -431,16 +452,14 @@ function GridComponent(props) {
 							onEditorRowClick(item, index, e);
 						}
 						if (onContextMenu) {
-							onContextMenu(item, e, selection, setSelection);
+							onContextMenu(item, e, selection);
 						}
 					}}
-					flexDirection="row"
-					flexGrow={1}
-				>
+					className="flex-row grow-1">
 					{({
-						isHovered,
-						isFocused,
-						isPressed,
+						hovered,
+						focused,
+						pressed,
 					}) => {
 						if (isHeaderRow) {
 							return <GridHeaderRow
@@ -453,32 +472,13 @@ function GridComponent(props) {
 										canColumnsResize={canColumnsResize}
 										setSelection={setSelection}
 										gridRef={gridRef}
-										isHovered={isHovered}
+										isHovered={hovered}
 										isInlineEditorShown={isInlineEditorShown}
 										areRowsDragSource={areRowsDragSource}
-										showColumnsSelector={() => setIsColumnSelectorShown(true)}
+										showColumnsSelector={showColumnsSelector}
 									/>;
 						}
 
-						let bg = rowProps.bg || styles.GRID_ROW_BG,
-							mixWith;
-						if (isSelected) {
-							if (showHovers && isHovered) {
-								mixWith = styles.GRID_ROW_SELECTED_HOVER_BG;
-							} else {
-								mixWith = styles.GRID_ROW_SELECTED_BG;
-							}
-						} else if (showHovers && isHovered) {
-							mixWith = styles.GRID_ROW_HOVER_BG;
-						} 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 = nbToRgb(mixWith),
-								ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
-							bg = colourMixer.blend(bg, ratio, mixWithObj.color);
-						}
 						const
 							rowReorderProps = {},
 							rowDragProps = {};
@@ -543,6 +543,11 @@ function GridComponent(props) {
 									rowProps={rowProps}
 									hideNavColumn={hideNavColumn}
 									isSelected={isSelected}
+									isHovered={hovered}
+									showHovers={showHovers}
+									index={index}
+									alternatingInterval={alternatingInterval}
+									alternateRowBackgrounds={alternateRowBackgrounds}
 									bg={bg}
 									item={item}
 									isInlineEditorShown={isInlineEditorShown}
@@ -556,21 +561,21 @@ function GridComponent(props) {
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
-				rowComponent = <Column>
-									<Row>
+				rowComponent = <VStack>
+									<HStack>
 										<ExpandButton
 											isExpanded={isExpanded}
 											onToggle={() => setIsExpanded(index, !isExpanded)}
 											_icon={{
 												size: 'sm',
 											}}
-											py={0}
+											className="py-0"
 											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
-									</Row>
+									</HStack>
 									{isExpanded ? getExpandedRowContent(row) : null}
-								</Column>
+								</VStack>
 			}
 			return rowComponent;
 		},
@@ -805,6 +810,68 @@ function GridComponent(props) {
 						break;
 				}
 			}
+		},
+		showColumnsSelector = () => {
+			const
+				modalItems = _.map(localColumnsConfig, (config, ix) => {
+					return {
+						name: config.id,
+						label: config.header,
+						type: config.isHidable ? 'Checkbox' : 'Text',
+						isEditable: config.isHidable ?? false,
+					};
+				}),
+				startingValues = (() => {
+					const startingValues = {};
+					_.each(localColumnsConfig, (config) => {
+						const value = !config.isHidden; // checkbox implies to show it, so flip the polarity
+						startingValues[config.id] = config.isHidable ? value : 'Always shown';
+					});
+					return startingValues;
+				})();
+			
+			showModal({
+				title: 'Column Selector',
+				includeReset: true,
+				includeCancel: true,
+				h: 800,
+				w: styles.FORM_STACK_ROW_THRESHOLD + 10,
+				body: <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							columnDefaults={{
+								labelWidth: '250px',
+							}}
+							items={[
+								{
+									name: 'instructions',
+									type: 'DisplayField',
+									text: 'Please select which columns to show in the grid.',
+									className: 'mb-3',
+								},
+								{
+									type: 'FieldSet',
+									title: 'Columns',
+									reference: 'columns',
+									showToggleAllCheckbox: true,
+									items: [
+										...modalItems,
+									],
+								}
+							]}
+							startingValues={startingValues}
+							onSave={(values)=> {
+								hideModal();
+
+								const newColumnsConfig = _.cloneDeep(localColumnsConfig);
+								_.each(newColumnsConfig, (config, ix) => {
+									if (config.isHidable) {
+										newColumnsConfig[ix].isHidden = !values[config.id]; // checkbox implies to show it, so flip the polarity
+									}
+								});
+								setLocalColumnsConfig(newColumnsConfig);
+							}}
+						/>,
+			});
 		};
 
 	if (forceLoadOnRender && disableLoadOnRender) {
@@ -985,13 +1052,12 @@ function GridComponent(props) {
 
 	if (!isInited) {
 		// first time through, render a placeholder so we can get container dimensions
-		return <Column
-					flex={1}
-					w="100%"
+		return <VStackNative
 					onLayout={(e) => {
 						adjustPageSizeToHeight(e);
 						setIsInited(true);
 					}}
+					className="w-full flex-1"
 				/>;
 	}
 	if (!isReady) {
@@ -1031,7 +1097,7 @@ function GridComponent(props) {
 									/>;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>
-										<ReloadPageButton Repository={Repository} self={self} />
+										<ReloadButton Repository={Repository} self={self} />
 										{footerToolbarItemComponents}
 									</Toolbar>;
 		}
@@ -1062,15 +1128,21 @@ function GridComponent(props) {
 					initialNumToRender={initialNumToRender}
 					initialScrollIndex={0}
 					renderItem={renderRow}
-					bg="trueGray.100"
+					className="FlatList bg-grey-100"
 					{...flatListProps}
-				/>
+				/>;
 	
 	if (CURRENT_MODE === UI_MODE_WEB) {
-		grid = <ScrollView horizontal={false} testID="ScrollView">{grid}</ScrollView>; // fix scrolling bug on nested FlatLists
+		grid = <ScrollView
+					horizontal={false}
+					className="ScrollView"
+					contentContainerStyle={{
+						height: '100%',
+					}}
+				>{grid}</ScrollView>; // fix scrolling bug on nested FlatLists
 	} else
-	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
-		grid = <ScrollView flex={1} w="100%">{grid}</ScrollView>
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
+		grid = <ScrollView className="flex-1 w-full">{grid}</ScrollView>
 	}
 
 	// placeholders in case no entities yet
@@ -1078,103 +1150,88 @@ function GridComponent(props) {
 		if (Repository?.isLoading) {
 			grid = <Loading isScreen={true} />;
 		} else {
-			grid = <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} testID="NoRecordsFound" />;
+			grid = <NoRecordsFound 
+						text={noneFoundText}
+						onRefresh={onRefresh}
+					/>;
 		}
 	}
 
-	const gridContainerBorderProps = {};
+	let gridContainerBorderClassName = '';
 	if (isReorderMode) {
-		gridContainerBorderProps.borderWidth = styles.REORDER_BORDER_WIDTH;
-		gridContainerBorderProps.borderColor = styles.REORDER_BORDER_COLOR;
-		gridContainerBorderProps.borderStyle = styles.REORDER_BORDER_STYLE;
-		gridContainerBorderProps.borderTopWidth = null;
-		if (isLoading) {
-			gridContainerBorderProps.borderTopColor = '#f00';
-		} else {
-			gridContainerBorderProps.borderTopColor = null;
-		}
+		gridContainerBorderClassName += ' ' + styles.GRID_REORDER_BORDER_WIDTH;
+		gridContainerBorderClassName += ' ' + styles.GRID_REORDER_BORDER_COLOR;
+		gridContainerBorderClassName += ' ' + styles.GRID_REORDER_BORDER_STYLE;
 	} else if (isLoading) {
-		gridContainerBorderProps.borderTopWidth = 4;
-		gridContainerBorderProps.borderTopColor = '#f00';
+		gridContainerBorderClassName += ' border-t-4';
+		gridContainerBorderClassName += ' border-t-[#f00]';
 	} else {
-		gridContainerBorderProps.borderTopWidth = 1;
-		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>;
+		gridContainerBorderClassName += ' border-t-0';
 	}
 	
-	const sizeProps = {};
-	if (!_.isNil(h)) {
-		sizeProps.h = h;
-	} else {
-		sizeProps.flex = flex ?? 1;
+	const style = props.style || {};
+	style.backgroundColor = bg;
+	if (!hasHeight(props) && !hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
+	}
+	let className = `
+		Grid-VStackNative
+		w-full
+		border
+		border-grey-300
+	`;
+	if (props.className) {
+		className += props.className;
 	}
 
-	grid = <Column
+	grid = <VStackNative
 				{...testProps(self)}
 				ref={containerRef}
 				tabIndex={0}
 				onKeyDown={onGridKeyDown}
-				w="100%"
-				bg={bg}
-				borderWidth={styles.GRID_BORDER_WIDTH}
-				borderColor={styles.GRID_BORDER_COLOR}
 				onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
-				{...sizeProps}
+				className={className}
+				style={style}
 			>
 				{topToolbar}
 
-				<Column
-					testID="gridContainer"
+				<VStack
 					ref={gridContainerRef}
-					w="100%"
-					flex={1}
-					minHeight={40}
-					{...gridContainerBorderProps}
 					onClick={() => {
 						if (!isReorderMode && !isInlineEditorShown && deselectAll) {
 							deselectAll();
 						}
 					}}
+					className={`
+						gridContainer
+						w-full
+						flex-1
+						min-h-[40px]
+						${gridContainerBorderClassName}
+					`}
 				>
 					{grid}
-				</Column>
+				</VStack>
 
 				{listFooterComponent}
 
-				{columnSelector}
-
-			</Column>
+			</VStackNative>
 
 	if (isDropTarget) {
 		grid = <Box
-					{...testProps('dropTarget')}
 					ref={dropTargetRef}
-					borderWidth={canDrop && isOver ? 4 : 0}
-					borderColor="#0ff"
-					w="100%"
-					{...sizeProps}
+					className={`
+						dropTarget
+						w-full
+						border-[#0ff]
+						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}
+					`}
 				>{grid}</Box>
 	}
 	return grid;
-
 }
 
+
 export const Grid = withComponent(
 						withAlert(
 							withEvents(