@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Panel/Header.js

@@ -1,11 +1,10 @@
-import React from 'react';
+import { cloneElement } from 'react';
 import {
-	Column,
-	Icon,
+	HStack,
 	Pressable,
-	Row,
-	Text,
-} from 'native-base';
+	TextNative,
+	VStack,
+} from '../Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -13,7 +12,7 @@ import {
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 import Minus from '../Icons/Minus.js';
@@ -22,6 +21,8 @@ import Xmark from '../Icons/Xmark.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import IconButton from '../Buttons/IconButton.js';
 
+const DOUBLE_CLICK = 2;
+
 export default function Header(props) {
 
 	const {
@@ -29,8 +30,9 @@ export default function Header(props) {
 			title = '',
 			onClose,
 			isCollapsible = true,
-			collapseDirection = VERTICAL,
 			isCollapsed = false,
+			isWindow = false,
+			collapseDirection = VERTICAL,
 			onToggleCollapse = emptyFn,
 		} = props,
 		styles = UiGlobals.styles;
@@ -38,25 +40,45 @@ export default function Header(props) {
 	let closeBtn = null,
 		collapseBtn = null;
 	if (onClose) {
+		let closeClassName = `
+			closeBtn
+			self-center
+			border
+			border-grey-400
+			${styles.PANEL_HEADER_BG}
+		`;
+		if (collapseDirection !== HORIZONTAL) {
+			closeClassName += ' mr-3';
+		}
 		closeBtn = <IconButton
-						icon={<Icon as={Xmark} size={styles.PANEL_HEADER_ICON_SIZE} color={styles.PANEL_HEADER_ICON_COLOR} />}
 						onPress={onClose}
-						testID="closeBtn"
-						alignSelf="center"
-						mr={3}
-						borderWidth={1}
-						borderColor="trueGray.400"
+						icon={Xmark}
+						_icon={{
+							size: styles.PANEL_HEADER_ICON_SIZE,
+							className: styles.PANEL_HEADER_ICON_COLOR,
+						}}
+						className={closeClassName}
 					/>;
 	}
 	if (isCollapsible) {
+		let collapseClassName = `
+			collapseBtn
+			self-center
+			border
+			border-grey-400
+			${styles.PANEL_HEADER_BG}
+		`;
+		if (collapseDirection !== HORIZONTAL) {
+			collapseClassName += ' ml-3';
+		}
 		collapseBtn = <IconButton
-						icon={isCollapsed ? <Icon as={Plus} size={styles.PANEL_HEADER_ICON_SIZE} color={styles.PANEL_HEADER_ICON_COLOR} /> : <Icon as={Minus} size={styles.PANEL_HEADER_ICON_SIZE}  color={styles.PANEL_HEADER_ICON_COLOR} />}
 						onPress={onToggleCollapse}
-						testID="collapseBtn"
-						alignSelf="center"
-						ml={1}
-						h="20px"
-						w="30px"
+						icon={isCollapsed ? Plus : Minus}
+						_icon={{
+							size: styles.PANEL_HEADER_ICON_SIZE,
+							className: styles.PANEL_HEADER_ICON_COLOR,
+						}}
+						className={collapseClassName}
 					/>;
 	}
 	
@@ -65,144 +87,160 @@ export default function Header(props) {
 		doubleClickStyle.cursor = 'pointer';
 	}
 
-
+	let panelClassName = `
+		header
+		items-center
+		justify-start
+		py-1
+		border-b-grey-400
+		border-b-1
+		${isWindow ? 'rounded-t-lg' : ''}
+		${styles.PANEL_HEADER_BG}
+	`;
 	if (CURRENT_MODE === UI_MODE_WEB) {
 
 		if (isCollapsed) {
 			if (collapseDirection === HORIZONTAL) {
-				collapseBtn = React.cloneElement(collapseBtn, { my: 2, mr: 1, });
+				// collapseBtn = cloneElement(collapseBtn, { className: 'my-2 mr-1', });
+				panelClassName += ' h-full w-full';
 				return <div
-							className="header"
-							style={{ flex: 1, width: '100%', userSelect: 'none', ...doubleClickStyle, }}
+							className="Header-div"
+							style={{
+								flex: 1,
+								width: '100%',
+								userSelect: 'none',
+								...doubleClickStyle,
+							}}
 							onClick={(e) => {
-								if (isCollapsible && e.detail === 2) { // double-click
+								if (isCollapsible && e.detail === DOUBLE_CLICK) { // double-click
 									onToggleCollapse(e);
 								}
 							}}
 						>
-							 <Column
-							 	alignItems="center"
-								justifyContent="flex-start"
-								h="100%"
-								w="100%"
-								bg={styles.PANEL_HEADER_BG_VERTICAL}
-								borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
-								borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+							<VStack
 								style={{ userSelect: 'none', }}
-								testID={testID}
+								className={panelClassName}
 							>
 								{collapseBtn}
 								<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
-									<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
+									<TextNative
+										numberOfLines={1}
+										ellipsizeMode="head"
+										className={`
+											TextNative
+											flex-1
+											${styles.PANEL_HEADER_TEXT_COLOR}
+											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+										`}>{title}</TextNative>
 								</div>
-							</Column>
+							</VStack>
 						</div>;
 			}
 		}
-	
+		if (closeBtn) {
+			panelClassName += ' pl-[4px] pr-3';
+		} else {
+			panelClassName += ' px-3';
+		}
 		return <div
-					className="header"
-					style={{ width: '100%', userSelect: 'none', ...doubleClickStyle, }}
+					className="Header-div"
+					style={{
+						width: '100%',
+						userSelect: 'none',
+						...doubleClickStyle,
+					}}
 					onClick={(e) => {
-						if (isCollapsible && e.detail === 2) { // double-click
+						if (isCollapsible && e.detail === DOUBLE_CLICK) {
 							onToggleCollapse(e);
 						}
 					}}
 				>
-					<Row
-						alignItems="center"
-						justifyContent="flex-start"
-						px={styles.PANEL_HEADER_PX}
-						py={styles.PANEL_HEADER_PY}
-						bg={styles.PANEL_HEADER_BG}
-						borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
-						borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+					<HStack
 						style={{ userSelect: 'none', }}
-						testID={testID}>
+						className={panelClassName}
+					>
 						{closeBtn}
-						<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
+						<TextNative
+							numberOfLines={1}
+							ellipsizeMode="head"
+							className={`
+								TextNative
+								flex-1
+								${styles.PANEL_HEADER_TEXT_COLOR}
+								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+							`}
+						>{title}</TextNative>
 						{collapseBtn}
-					</Row>
+					</HStack>
 				</div>;
 
-	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+	} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 
 		if (isCollapsed) {
 			if (collapseDirection === HORIZONTAL) {
-				collapseBtn = React.cloneElement(collapseBtn, { my: 2, mr: 1, });
+				// collapseBtn = cloneElement(collapseBtn, { my: 2, mr: 1, });
+				if (closeBtn) {
+					panelClassName += ' pl-[4px] pr-3';
+				} else {
+					panelClassName += ' px-3';
+				}
 				return <Pressable
 							testID={testID}
-							flex={1}
-							w="100%"
 							style={{ userSelect: 'none', ...doubleClickStyle, }}
 							onPress={(e) => {
 								if (isCollapsible) {
 									onToggleCollapse(e);
 								}
 							}}
+							className="flex-1 w-full"
 						>
-							 <Column
-							 	alignItems="center"
-								justifyContent="flex-start"
-								h="100%" 
-								w="100%"
-								bg={styles.PANEL_HEADER_BG_VERTICAL}
-								borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
-								borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+							<VStack
+								className={panelClassName}
 							>
 								{collapseBtn}
-								<Column
-									alignItems="center"
-									justifyContent="center"
-									flex={1} 
-									w="100%"
-								>
-									<Text
-										textAlign="right"
-										fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
-										color={styles.PANEL_HEADER_TEXT_COLOR}
+								<VStack className="items-center justify-center flex-1 w-full">
+									<TextNative
 										numberOfLines={1}
 										ellipsizeMode="head"
-										w={200}
 										style={{ transform: [{ rotate: '-90deg'}] }}
-									>{title}</Text>
-								</Column>
-							</Column>
+										className={`
+											w-[200px]
+											text-right
+											${styles.PANEL_HEADER_TEXT_COLOR}
+											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+										`}
+									>{title}</TextNative>
+								</VStack>
+							</VStack>
 						</Pressable>;
 			}
 		}
-	
+		if (closeBtn) {
+			panelClassName += ' pl-[4px] pr-3';
+		} else {
+			panelClassName += ' px-3';
+		}
 		return <Pressable
 					testID={testID}
-					w="100%"
 					style={{ userSelect: 'none', ...doubleClickStyle, }}
 					onPress={(e) => {
 						if (isCollapsible) {
 							onToggleCollapse(e);
 						}
 					}}
+					className="w-full"
 				>
-					<Row
-						alignItems="center"
-						justifyContent="flex-start"
-						px={styles.PANEL_HEADER_PX}
-						py={styles.PANEL_HEADER_PY}
-						bg={styles.PANEL_HEADER_BG}
-						borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
-						borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+					<HStack
+						className={panelClassName}
 					>
 						{closeBtn}
-						<Text
-							flex={1}
-							fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
-							color={styles.PANEL_HEADER_TEXT_COLOR}
+						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-						>{title}</Text>
+							className={` ${styles.PANEL_HEADER_TEXT_COLOR} ${styles.PANEL_HEADER_TEXT_FONTSIZE} flex-1 `}>{title}</TextNative>
 						{collapseBtn}
-					</Row>
+					</HStack>
 				</Pressable>;
-
 	}
 
 }

package/src/Components/Panel/Mask.js

@@ -1,10 +1,10 @@
 import {
 	Box,
-} from 'native-base';
+} from '../Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
 
 export default function Mask(props) {
@@ -12,9 +12,9 @@ export default function Mask(props) {
 
 		return <div className="mask"></div>;
 
-	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+	} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 
-		return <Box position="absolute" h="100%" w="100%" bg="trueGray.400:alpha.20" zIndex={100000}></Box>;
+		return <Box className="absolute h-full w-full bg-grey-400:alpha.20 z-100000"></Box>;
 
 	}
 }

package/src/Components/Panel/Panel.js

@@ -1,21 +1,23 @@
 import { useEffect, useState, } from 'react';
 import {
-	Column,
-	Row,
 	ScrollView,
-	Text,
-} from 'native-base';
+	VStack,
+	VStackNative,
+} from '../Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import {
+	hasWidth,
+	hasFlex,
+} from '../../Functions/tailwindFunctions.js';
 import Inflector from 'inflector-js';
 import Header from './Header.js';
 import Mask from './Mask.js';
 import testProps from '../../Functions/testProps.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import withComponent from '../Hoc/withComponent.js';
-import emptyFn from '../../Functions/emptyFn.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
@@ -29,12 +31,10 @@ function Panel(props) {
 			isDisabled = false,
 			frame = false,
 			isScrollable = false,
-			h,
+			isWindow = false,
 			maxHeight,
-			w,
 			maxWidth,
-			flex,
-			onLayout = null,
+			disableAutoFlex = false,
 			
 			// Header
 			title = props.model ? UiGlobals.customInflect(Inflector.camel2words(Inflector.underscore(props.model))) : '',
@@ -55,6 +55,7 @@ function Panel(props) {
 
 			...propsToPass
 		} = props,
+		self = props.self,
 		[titleSuffix, setTitleSuffix] = useState(''),
 		onToggleCollapse = () => {
 			setIsCollapsed(!isCollapsed);
@@ -83,7 +84,7 @@ function Panel(props) {
 			return null;
 		}
 	}
-
+	
 	let headerComponent = header;
 	if (showHeader && title) {
 		headerComponent = <Header
@@ -91,84 +92,66 @@ function Panel(props) {
 								onClose={onClose}
 								isCollapsible={isCollapsible}
 								isCollapsed={isCollapsed}
+								isWindow={isWindow}
 								collapseDirection={collapseDirection}
 								onToggleCollapse={onToggleCollapse}
 							/>;
 	}
 
-	const sizeProps = {};
-	if (!flex && !h && !w) {
-		sizeProps.flex = 1;
-	} else {
-		if (h) {
-			sizeProps.h = h;
-		}
-		if (w) {
-			sizeProps.w = w;
-		}
-		if (flex) {
-			sizeProps.flex = flex;
-		}
+	let className = 'Panel';
+	const style = props.style || {};
+	if (!hasWidth(props) && !hasFlex(props) && !disableAutoFlex) {
+		style.flex = 1;
 	}
 	if (maxWidth) {
-		sizeProps.maxWidth = maxWidth;
+		style.maxWidth = maxWidth;
 	}
 	if (maxHeight) {
-		sizeProps.maxHeight = maxHeight;
-	}
-	// if (propsToPass.h && isCollapsed) {
-	// 	delete propsToPass.h;
-	// }
-
-	const
-		borderProps = {
-			borderTopColor: 'primary.600',
-			borderBottomColor: 'primary.600',
-			borderLeftColor: 'primary.600',
-			borderRightColor: 'primary.600',
-		},
-		nonFrameProps = {
-			...borderProps,
-			borderTopWidth: 0,
-			borderBottomWidth: 0,
-			borderLeftWidth: 0,
-			borderRightWidth: 0,
-		},
-		frameProps = {
-			...borderProps,
-			borderTopWidth: 2,
-			borderBottomWidth: 2,
-			borderLeftWidth: 2,
-			borderRightWidth: 2,
-		};
-	let framePropsToUse = nonFrameProps;
-	if (frame) {
-		framePropsToUse = frameProps;
+		style.maxHeight = maxHeight;
 	}
-
-	const self = props.self;
 	if (isCollapsed) {
 		if (collapseDirection === HORIZONTAL) {
-			return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
-						{isDisabled && <Mask />}
-						{headerComponent}
-					</Column>;
+			className += ' w-[33px]';
+		} else {
+			className += ' h-[33px]';
 		}
-		return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
-					{isDisabled && <Mask />}
-					{headerComponent}
-				</Column>;
 	}
-	return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
+
+	// frame
+	className += ' border-primary-600' + (isWindow ? ' rounded-lg shadow-lg ' : '') + (frame ? ' border-2' : ' border-none');
+
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+
+	return <VStackNative
+				{...testProps(self?.reference)}
+				className={className}
+				style={style}
+			>
 				{isDisabled && <Mask />}
 				{headerComponent}
-				{topToolbar}
-				<Column flex={1} w="100%" overflow="hidden">
-					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
-				</Column>
-				{bottomToolbar}
-				{footer}
-			</Column>;
+				{!isCollapsed && <>
+					{topToolbar}
+					<VStack
+						className={`
+							Panel-VSstack
+							flex-1
+							flex
+							w-full
+							overflow-hidden
+						`}
+					>
+						{isScrollable ? 
+							<ScrollView className="ScrollView">
+								{children}
+							</ScrollView> : 
+							children}
+					</VStack>
+					{bottomToolbar}
+					{footer}
+				</>}
+			</VStackNative>;
 
 }
 

package/src/Components/Panel/TabPanel.js

@@ -3,7 +3,7 @@ import Panel from './Panel.js';
 
 
 export default function TabPanel(props) {
-	return <Panel flex={1} w="100%" {...props._panel}>
+	return <Panel className="w-full flex" {...props._panel}>
 				<TabBar {...props} />
 			</Panel>;
 }

package/src/Components/Picker/Picker.js

@@ -1,9 +1,10 @@
 import {
+	HStack,
+	HStackNative,
 	Icon,
-	Row,
-	Select,
+	Select, SelectItem,
 	Tooltip,
-} from 'native-base';
+} from '../Gluestack';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
@@ -29,11 +30,11 @@ export default function Picker(props) {
 		if (label.length > cutoff) {
 			label = label.substring(0, 25) + '...';
 		}
-		items.push(<Select.Item key={entity.id} label={label} value={entity.id} {...testProps('PickerItem-' + entity.id)} />);
+		items.push(<SelectItem key={entity.id} label={label} value={entity.id} {...testProps('PickerItem-' + entity.id)} />);
 	});
 
 	if (allowNull) {
-		items.unshift(<Select.Item key="null" label={nullLabel} value={null} {...testProps('PickerItem-null')} />);
+		items.unshift(<SelectItem key="null" label={nullLabel} value={null} {...testProps('PickerItem-null')} />);
 	}
 
 	if (!items.length) {
@@ -50,15 +51,15 @@ export default function Picker(props) {
 	let select = <Select
 						placeholder={placeholder}
 						isDisabled={false}
-						dropdownIcon={<Icon as={CaretDown} size="sm" mr={3} color="trueGray.800" />}
+						dropdownIcon={<Icon as={CaretDown} size="sm" className="mr-2 text-grey-800" />}
 						{..._select}
 					>{items}</Select>;
 	if (tooltip) {
 		//TODO: This doesn't yet work, but doesn't do anything harmful either!
-		select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
+		// select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
 	}
-	return <Row {...props}>
+	return <HStackNative {...props}>
 				{select}
-			</Row>;
+			</HStackNative>;
 }
 

package/src/Components/Report/Report.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-	Column,
+	HStack,
 	Icon,
-	Row,
 	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,
@@ -60,7 +60,7 @@ function Report(props) {
 			...testProps('excelBtn'),
 			key: 'excelBtn',
 			text: 'Download Excel',
-			leftIcon: <Icon as={Excel} size="md" color="#fff" />,
+			leftIcon: <Icon as={Excel} size="md" className="text-white" />,
 			onPress: (data) => getReport({
 				reportId,
 				data,
@@ -75,7 +75,7 @@ function Report(props) {
 			...testProps('pdfBtn'),
 			key: 'pdfBtn',
 			text: 'Download PDF',
-			leftIcon: <Icon as={Pdf} size="md" color="#fff" />,
+			leftIcon: <Icon as={Pdf} size="md" className="text-white" />,
 			onPress: (data) => getReport({
 				reportId,
 				data,
@@ -85,20 +85,23 @@ function Report(props) {
 			ml: 1,
 		});
 	}
-	return <Column {...testProps('Report-' + reportId)} w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
-				<Row>
-					{icon && <Column>{icon}</Column>}
-					<Column flex={1}>
-						<Text fontSize="2xl" maxWidth="100%">{title}</Text>
-						<Text fontSize="sm">{description}</Text>
-					</Column>
-				</Row>
+	return <VStack
+				{...testProps('Report-' + reportId)}
+				className="w-full border border-primary-300 pt-4 mb-3"
+			>
+				<HStack>
+					{icon && <VStack>{icon}</VStack>}
+					<VStack className="flex-1">
+						<Text className="text-2xl max-w-full">{title}</Text>
+						<Text className="text-sm">{description}</Text>
+					</VStack>
+				</HStack>
 				<Form
 					type={EDITOR_TYPE__PLAIN}
 					additionalFooterButtons={buttons}
 					{...props._form}
 				/>
-			</Column>;
+			</VStack>;
 }
 
 export default withComponent(Report);