@onehat/ui 0.4.27 → 0.4.30

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -126,7 +126,10 @@ export default function Accordion(props) {
 	return <ScrollView
 				ref={scrollViewRef}
 				keyboardShouldPersistTaps="always"
-				className="flex-1 w-full"
+				className="Accordion-ScrollView flex-1 w-full"
+				contentContainerStyle={{
+					height: '100%',
+				}}
 			>
 				<VStackNative
 					{...propsToPass}

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

@@ -182,6 +182,7 @@ export function ColorElement(props) {
 					border-bottom-right-radius-6
 					${styles.FORM_COLOR_INPUT_CLASSNAME}
 				`}
+				textAlignIsCenter={true}
 				onLayout={(e) => {
 					// On web, this is not needed, but on RN it might be, so leave it in for now
 					const {

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

@@ -577,6 +577,7 @@ export function ComboComponent(props) {
 		input = disableDirectEntry ?
 					<Pressable
 						{...testProps('toggleMenuBtn')}
+						ref={inputRef}
 						onPress={toggleMenu}
 						className={`
 							Combo-toggleMenuBtn
@@ -587,7 +588,8 @@ export function ComboComponent(props) {
 							justify-center
 							items-center
 							m-0
-							p-1
+							p-2
+							bg-white
 							border
 							border-grey-400
 							rounded-r-none
@@ -596,13 +598,10 @@ export function ComboComponent(props) {
 					>
 						{inputIconElement}
 						<TextNative
-							ref={inputRef}
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
 								Combo-TextNative
-								h-auto
-								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
 								${styles.FORM_COMBO_INPUT_CLASSNAME}
@@ -878,6 +877,7 @@ export function ComboComponent(props) {
 										dropdownMenu-Box
 										flex-1
 										overflow-auto
+										bg-white
 										p-0
 										rounded-none
 										border

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

@@ -378,6 +378,7 @@ export const DateElement = forwardRef((props, ref) => {
 				`}
 				autoSubmitDelay={1000}
 				placeholder={placeholder}
+				textAlignIsCenter={true}
 				{..._input}
 			/>;
 	}

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

@@ -29,7 +29,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
-			textAlignIsCenter = true,
+			textAlignIsCenter = false,
 			className,
 			...propsToPass
 		} = props,

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

@@ -171,6 +171,7 @@ function NumberElement(props) {
 						text-center
 						rounded-none
 					`}
+					textAlignIsCenter={true}
 					style={{
 						flex: 3
 					}}

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

@@ -182,6 +182,7 @@ const
 						isDisabled={isDisabled}
 						disableAutoFlex={true}
 						className={inputClassName}
+						textAlignIsCenter={true}
 						{...props._input}
 					/>
 					<HStack className="flex-1">

package/src/Components/Form/Form.js

@@ -1350,12 +1350,15 @@ function Form(props) {
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView
 							className={`
-								ScrollView
+								Form-ScrollView
 								w-full
 								flex-1
 								pb-1
 								web:min-h-[${minHeight}px]
 							`}
+							contentContainerStyle={{
+								// height: '100%',
+							}}
 						>
 							{modeHeader}
 							{formHeader}

package/src/Components/Hoc/withFilters.js

@@ -6,6 +6,7 @@ import {
 } from '@project-components/Gluestack';
 import {
 	ScrollView,
+	Platform,
 } from 'react-native'
 import {
 	EDITOR_TYPE__PLAIN,
@@ -35,6 +36,8 @@ import _ from 'lodash';
 // 
 // Model defaultFilters should adjust to this new arrangement
 
+const isWindows = Platform.OS === 'windows';
+
 export default function withFilters(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
@@ -140,9 +143,11 @@ export default function withFilters(WrappedComponent) {
 
 		const
 			filterCallbackRef = useRef(),
+			scrollViewRef = useRef(),
 			[filters, setFiltersRaw] = useState(formattedStartingFilters), // array of formatted filters
 			[slots, setSlots] = useState(startingSlots), // array of field names user is currently filtering on; blank slots have a null entry in array
 			[previousFilterNames, setPreviousFilterNames] = useState([]), // names of filters the repository used last query
+			[isHorizontalScrollbarShown, setIsHorizontalScrollbarShown] = useState(false),
 			setFilters = (filters, doSetSlots = true, save = true) => {
 				setFiltersRaw(filters);
 
@@ -349,6 +354,16 @@ export default function withFilters(WrappedComponent) {
 					w: 500,
 				});
 			},
+			onContentSizeChange = (contentWidth, contentHeight) => {
+				if (!isWindows) {
+					return;
+				}
+				if (scrollViewRef.current) {
+					scrollViewRef.current.measure((x, y, width, height, pageX, pageY) => {
+						setIsHorizontalScrollbarShown(contentWidth > width);
+					});
+				}
+			},
 			buildModalBody = (modalFilters, modalSlots) => {
 
 				const
@@ -603,6 +618,25 @@ export default function withFilters(WrappedComponent) {
 			})();
 		}, [filters]);
 
+		useEffect(() => {
+			if (!isWindows) {
+				return;
+			}
+
+			// NOTE: On Windows machines, I was getting horizontal scrollbars when the ScrollView 
+			// was not wide enough to contain all the filters. This workaround adds pb-5 to the ScrollView
+			// when the scrollbar is shown.
+
+			if (scrollViewRef.current) {
+				scrollViewRef.current.addEventListener('contentSizeChange', onContentSizeChange);
+			}
+			return () => {
+				if (scrollViewRef.current) {
+					scrollViewRef.current.removeEventListener('contentSizeChange', onContentSizeChange);
+				}
+			};
+		}, []);
+		
 		if (!isReady) {
 			return null;
 		}
@@ -615,9 +649,16 @@ export default function withFilters(WrappedComponent) {
 		const
 			renderedFilters = renderFilters(),
 			hasFilters = !!renderedFilters.length,
+			scrollViewClass = isWindows && isHorizontalScrollbarShown ? 'pb-5' : '',
 			toolbar = <Toolbar>
 						<HStack className="withFilters-scrollViewContainer flex-1 items-center">
-							<ScrollView className="ScrollView" horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
+							<ScrollView
+								ref={scrollViewRef}
+								className={`withFilters-ScrollView ${scrollViewClass}`}
+								horizontal={true}
+								contentContainerStyle={{ alignItems: 'center' }}
+								onContentSizeChange={onContentSizeChange}
+							>
 								<Text
 									className={`
 										withFilters-filtersLabel

package/src/Components/Icons/ClipboardCheck.js

@@ -4,8 +4,8 @@ import { Path, Svg } from 'react-native-svg';
 
 const SvgComponent = createIcon({
 	Root: Svg,
-	viewBox: '0 0 9.51 12.68',
-	path: <Path d="M4.76 0C3.72 0 2.84.66 2.52 1.59h-.93C.72 1.59 0 2.3 0 3.18v7.93c0 .87.71 1.59 1.59 1.59h6.34c.87 0 1.59-.71 1.59-1.59V3.17c0-.87-.71-1.59-1.59-1.59H7A2.384 2.384 0 004.76-.01zm0 1.59c.44 0 .79.35.79.79s-.35.79-.79.79-.79-.35-.79-.79.35-.79.79-.79zm2.8 5.18L4.39 9.94c-.23.23-.61.23-.84 0L1.96 8.35c-.23-.23-.23-.61 0-.84s.61-.23.84 0l1.16 1.16 2.75-2.75c.23-.23.61-.23.84 0s.23.61 0 .84z" />
+	viewBox: '0 0 384 512',
+	path: <Path d="M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
 });
 
 export default SvgComponent

package/src/Components/Layout/CenterBox.js

@@ -1,4 +1,6 @@
-import { Box } from "../Gluestack";
+import {
+	Box
+} from '@project-components/Gluestack';
 
 export default function CenterBox(props) {
 	let className = `

package/src/Components/Layout/ScreenHeader.js

@@ -0,0 +1,73 @@
+import {
+	HStack,
+	Icon,
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import {
+	SCREEN_MODES__FULL,
+	SCREEN_MODES__SIDE,
+} from '../../Constants/ScreenModes.js'
+import FullWidth from '../Icons/FullWidth';
+import SideBySide from '../Icons/SideBySide';
+import UiGlobals from '../../UiGlobals.js';
+import IconButton from '../Buttons/IconButton';
+import testProps from '../../Functions/testProps.js';
+import _ from 'lodash';
+
+export default function ScreenHeader(props) {
+	const {
+			title,
+			icon,
+			useModeIcons = false,
+			allowSideBySide = false,
+			actualMode,
+			onFullWidth,
+			onSideBySide,
+		} = props,
+		textProps = {},
+		styles = UiGlobals.styles;
+	if (styles.MANAGER_SCREEN_TITLE) {
+		textProps.style = {
+			fontFamily: styles.MANAGER_SCREEN_TITLE,
+		};
+	}
+	return <HStack className="ScreenHeader-HStack h-[80px] items-center border-b-[2px] border-b-[#ccc]">
+				{icon &&
+					<Icon
+						as={icon}
+						className={`
+							ml-5
+							text-black
+						`}
+						size="xl"
+					/>}
+				<Text {...textProps} className="ScreenHeader-Text pl-4 text-[26px] font-[700]">{title}</Text>
+				{useModeIcons && allowSideBySide &&
+					<>
+						<IconButton
+							{...testProps('fullModeBtn')}
+							icon={FullWidth}
+							_icon={{
+								size: 'xl',
+								className: 'text-black',
+							}}
+							isDisabled={actualMode === SCREEN_MODES__FULL}
+							onPress={onFullWidth}
+							tooltip="To full width"
+							className="ml-5"
+						/>
+						<IconButton
+							{...testProps('sideModeBtn')}
+							icon={SideBySide}
+							_icon={{
+								size: 'xl',
+								className: 'text-black',
+							}}
+							isDisabled={actualMode === SCREEN_MODES__SIDE}
+							onPress={onSideBySide}
+							tooltip="To side editor"
+						/>
+					</>}
+			</HStack>;
+}

package/src/Components/Layout/TextWithTooltip.js

@@ -0,0 +1,22 @@
+import {
+	TextNative,
+	Tooltip, TooltipContent, TooltipText,
+} from '@project-components/Gluestack';
+
+export default function TextWithTooltip(props) {
+	const {
+			tooltip,
+			children,
+			...propsToPass
+		} = props;
+	return <Tooltip
+				placement="bottom"
+				trigger={(triggerProps) => {
+					return <TextNative {...triggerProps} {...propsToPass}>{children}</TextNative>
+				}}
+			>
+				<TooltipContent>
+					<TooltipText>{tooltip}</TooltipText>
+				</TooltipContent>
+			</Tooltip>;
+}

package/src/Components/Panel/Header.js

@@ -15,6 +15,7 @@ import {
 	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
+import testProps from '../../Functions/testProps.js';
 import Minus from '../Icons/Minus.js';
 import Plus from '../Icons/Plus.js';
 import Xmark from '../Icons/Xmark.js';
@@ -55,6 +56,7 @@ export default function Header(props) {
 			closeClassName += ' mb-1';
 		}
 		closeBtn = <IconButton
+						{...testProps('closeBtn')}
 						onPress={onClose}
 						icon={Xmark}
 						_icon={{

package/src/Components/Panel/Panel.js

@@ -120,7 +120,7 @@ function Panel(props) {
 	}
 
 	// frame
-	className += ' border-primary-600' + (isWindow ? ' rounded-lg shadow-lg ' : '') + (frame ? ' border-2' : ' border-none');
+	className += ' border-grey-300' + (isWindow ? ' rounded-lg shadow-lg ' : '') + (frame ? ' border-2' : ' border-none');
 
 	if (props.className) {
 		className += ' ' + props.className;
@@ -143,8 +143,13 @@ function Panel(props) {
 							overflow-hidden
 						`}
 					>
-						{isScrollable ? 
-							<ScrollView className="Panel-ScrollView">
+						{isScrollable ?
+							<ScrollView
+								className="Panel-ScrollView"
+								contentContainerStyle={{
+									height: '100%',
+								}}
+							>
 								{children}
 							</ScrollView> : 
 							children}

package/src/Components/Screens/Manager.js

@@ -1,27 +1,22 @@
 import {
-	HStack,
-	Icon,
-	Text,
 	VStackNative,
 } from '@project-components/Gluestack';
 import React, { useState, useEffect, } from 'react';
+import {
+	SCREEN_MODES__FULL,
+	SCREEN_MODES__SIDE,
+} from '../../Constants/ScreenModes.js'
 import withComponent from '../Hoc/withComponent.js';
 import testProps from '../../Functions/testProps.js';
-import UiGlobals from '../../UiGlobals.js';
-import IconButton from '../Buttons/IconButton';
-import FullWidth from '../Icons/FullWidth';
-import SideBySide from '../Icons/SideBySide';
+import ScreenHeader from '../Layout/ScreenHeader';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import _ from 'lodash';
 
-const
-	MODE_FULL = 'MODE_FULL',
-	MODE_SIDE = 'MODE_SIDE';
-
 function ManagerScreen(props) {
 	const {
 			title,
+			icon,
 			sideModeComponent,
 			fullModeComponent,
 			onChangeMode,
@@ -29,15 +24,14 @@ function ManagerScreen(props) {
 			// withComponent
 			self,
 		} = 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),
-		actualMode = (!allowSideBySide || mode === MODE_FULL) ? MODE_FULL : MODE_SIDE,
+		[mode, setModeRaw] = useState(SCREEN_MODES__FULL),
+		actualMode = (!allowSideBySide || mode === SCREEN_MODES__FULL) ? SCREEN_MODES__FULL : SCREEN_MODES__SIDE,
 		setMode = (newMode) => {
-			if (!allowSideBySide && newMode === MODE_SIDE) {
+			if (!allowSideBySide && newMode === SCREEN_MODES__SIDE) {
 				return;
 			}
 			if (newMode === mode) {
@@ -84,58 +78,22 @@ function ManagerScreen(props) {
 		self.mode = actualMode;
 	}
 
-	const
-		whichComponent = actualMode === MODE_FULL ? fullModeComponent : sideModeComponent,
-		textProps = {};
-	if (styles.MANAGER_SCREEN_TITLE) {
-		textProps.style = {
-			fontFamily: styles.MANAGER_SCREEN_TITLE,
-		};
-	}
+	const whichComponent = actualMode === SCREEN_MODES__FULL ? fullModeComponent : sideModeComponent;
 
 	return <VStackNative
 				{...testProps(self)}
 				onLayout={onLayout}
 				className="max-h-screen overflow-hidden flex-1 w-full"
 			>
-				<HStack className="h-[80px] items-center border-b-[2px] border-b-[#ccc]">
-					{props.icon ? 
-						<Icon
-							as={props.icon}
-							className={`
-								ml-5
-							`}
-							size="xl"
-							color="#000"
-						/> : null}
-					<Text {...textProps} className="pl-4 text-[26px] font-[700]">{title}</Text>
-					{allowSideBySide &&
-						<>
-							<IconButton
-								{...testProps('fullModeBtn')}
-								icon={FullWidth}
-								_icon={{
-									size: 'xl',
-									className: 'text-black',
-								}}
-								isDisabled={actualMode === MODE_FULL}
-								onPress={() => setMode(MODE_FULL)}
-								tooltip="To full width"
-								className="ml-5"
-							/>
-							<IconButton
-								{...testProps('sideModeBtn')}
-								icon={SideBySide}
-								_icon={{
-									size: 'xl',
-									className: 'text-black',
-								}}
-								isDisabled={actualMode === MODE_SIDE}
-								onPress={() => setMode(MODE_SIDE)}
-								tooltip="To side editor"
-							/>
-						</>}
-				</HStack>
+				<ScreenHeader
+					title={title}
+					icon={icon}
+					useModeIcons={true}
+					actualMode={actualMode}
+					allowSideBySide={allowSideBySide}
+					onFullWidth={() => setMode(SCREEN_MODES__FULL)}
+					onSideBySide={() => setMode(SCREEN_MODES__SIDE)}
+				/>
 				{isRendered && isModeSet && whichComponent}
 			</VStackNative>;
 }

package/src/Components/Screens/ReportsManager.js

@@ -0,0 +1,62 @@
+import { useState, } from 'react';
+import {
+	HStack,
+	ScrollView,
+	VStack,
+	VStackNative,
+} from '@project-components/Gluestack';
+import ChartPie from '../Icons/ChartPie.js';
+import ScreenHeader from '../Layout/ScreenHeader.js';
+
+const CONTAINER_THRESHOLD = 1100;
+
+export default function ReportsManager(props) {
+	const {
+			reports = [],
+			isActive = false,
+		} = props,
+		[containerWidth, setContainerWidth] = useState(),
+		onLayout = (e) => {
+			setContainerWidth(e.nativeEvent.layout.width);
+		};
+
+	if (!isActive) {
+		return null;
+	}
+
+	let reportElements = [];
+	if (containerWidth) {
+		if (containerWidth >= CONTAINER_THRESHOLD) {
+			// two column layout
+			const
+				reportsPerColumn = Math.ceil(reports.length / 2),
+				col1Reports = reports.slice(0, reportsPerColumn),
+				col2Reports = reports.slice(reportsPerColumn);
+			reportElements = <HStack className="gap-3">
+								<VStack className="flex-1">
+									{col1Reports}
+								</VStack>
+								<VStack className="flex-1">
+									{col2Reports}
+								</VStack>
+							</HStack>;
+		} else {
+			// one column layout
+			reportElements = reports;
+		}
+	}
+	
+	return <VStack
+				className="overflow-hidden flex-1 w-full"
+			>
+				<ScreenHeader
+					title="Reports"
+					icon={ChartPie}
+				/>
+				<ScrollView className="flex-1 w-full">
+					<VStackNative className="w-full p-4" onLayout={onLayout}>
+						{containerWidth && reportElements}
+					</VStackNative>
+				</ScrollView>
+			</VStack>;
+}

package/src/Components/Toolbar/Pagination.js

@@ -126,6 +126,7 @@ export default function Pagination(props) {
 							text-center
 							bg-grey-100
 						`}
+						textAlignIsCenter={true}
 						tooltip="Set Page"
 					/>);
 					items.push(<Text

package/src/Components/Tree/Tree.js

@@ -1396,7 +1396,13 @@ function TreeComponent(props) {
 					}}
 					className="Tree-deselector w-full flex-1 p-1 bg-white"
 				>
-					<ScrollView {...testProps('ScrollView')} className="ScrollView flex-1 w-full">
+					<ScrollView
+						{...testProps('ScrollView')}
+						className="Tree-ScrollView flex-1 w-full"
+						contentContainerStyle={{
+							height: '100%',
+						}}
+					>
 						{!treeNodes?.length ? 
 						<CenterBox>
 							{Repository.isLoading ? <Loading /> : <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />}

package/src/Components/Tree/TreeNode.js

@@ -109,7 +109,9 @@ export default function TreeNode(props) {
 									text-ellipsis
 									${styles.TREE_NODE_CLASSNAME}
 								`}
-								style={{ userSelect: 'none', }}
+								style={{
+									// userSelect: 'none',
+								}}
 							>{text}</TextNative> : null}
 
 					{content}

package/src/Constants/ScreenModes.js

@@ -0,0 +1,2 @@
+export const SCREEN_MODES__FULL = 'SCREEN_MODES__FULL';
+export const SCREEN_MODES__SIDE = 'SCREEN_MODES__SIDE';