@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Toolbar/Pagination.js

@@ -1,21 +1,20 @@
 import { useEffect, useMemo, } from 'react';
 import {
-	Icon,
-	Row,
+	HStack,
+	HStackNative,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
-import ReloadPageButton from '../Buttons/ReloadPageButton.js';
+import ReloadButton from '../Buttons/ReloadButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import AnglesLeft from '../Icons/AnglesLeft.js';
 import AngleRight from '../Icons/AngleRight.js';
 import AnglesRight from '../Icons/AnglesRight.js';
-import Rotate from '../Icons/Rotate.js';
 import Input from '../Form/Field/Input.js';
-import PageSizeCombo from '../Form/Field/Combo/PageSizeCombo.js';
+import PageSizeSelect from '../Form/Field/Select/PageSizeSelect.js';
 
 export default function Pagination(props) {
 	const {
@@ -49,17 +48,10 @@ export default function Pagination(props) {
 
 	return useMemo(() => {
 		const
-			iconButtonProps = {
-				// mx: 1,
-			},
 			iconProps = {
-				// position: 'absolute',
-				alignSelf: 'center',
 				size: 'sm',
-				color: 'trueGray.500',
-				h: 20,
-				w: 20,
 			};
+
 		let items = [],
 			isDisabled = false;
 		if (showMoreOnly) {
@@ -72,11 +64,16 @@ export default function Pagination(props) {
 								parent={self}
 								onPress={() => Repository.showMore()}
 								isDisabled={isDisabled}
-								tooltip="Show More"
-							>Show More</Button>);
+								text="Show More"
+							/>);
 			}
 			if (!Repository.isLocal) {
-				items.push(<ReloadPageButton key="reloadPageBtn" {...iconButtonProps} iconProps={iconProps} Repository={Repository} self={self} />);
+				items.push(<ReloadButton
+					key="reloadPageBtn"
+					_icon={iconProps}
+					Repository={Repository}
+					self={self}
+				/>);
 			}
 		} else {
 			isDisabled = page === 1;
@@ -86,9 +83,9 @@ export default function Pagination(props) {
 								key="firstPageBtn"
 								reference="firstPageBtn"
 								parent={self}
-								{...iconButtonProps}
 								isDisabled={isDisabled}
-								icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+								icon={AnglesLeft}
+								_icon={iconProps}
 								onPress={() => Repository.setPage(1)}
 								tooltip="First Page"
 							/>);
@@ -97,20 +94,24 @@ export default function Pagination(props) {
 								key="prevPageBtn"
 								reference="prevPageBtn"
 								parent={self}
-								{...iconButtonProps}
 								isDisabled={isDisabled}
-								icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+								icon={AngleLeft}
+								_icon={iconProps}
 								onPress={() => Repository.prevPage()}
 								tooltip="Previous Page"
 							/>);
 				if (!minimize) {
-					items.push(<Row
+					items.push(<HStack
 									key="pageSelector"
-									mx={3}
-									justifyContent="center"
-									alignItems="center"
-								>
-									<Text mr={2}>Page</Text>
+									className={`
+										pageSelector
+										w-[100px]
+										mx-2
+										justify-center
+										items-center
+										bg-[#f00]
+									`}>
+									{/* <Text className="page mr-1">Page</Text>
 									<Input
 										{...testProps('pageInput')}
 										reference="pageInput"
@@ -120,11 +121,11 @@ export default function Pagination(props) {
 										onChangeValue={(value) => Repository.setPage(value)}
 										maxValue={totalPages}
 										isDisabled={totalPages === 1}
-										w={10}
+										className="pageInput w-[30px] text-center bg-grey-100"
 										tooltip="Set Page"
 									/>
-									<Text ml={2}>of {totalPages}</Text>
-								</Row>);
+									<Text className="of ml-1">of {totalPages}</Text> */}
+								</HStack>);
 				}
 
 				isDisabled = page === totalPages || totalPages <= 1;
@@ -133,9 +134,9 @@ export default function Pagination(props) {
 								key="nextPageBtn"
 								reference="nextPageBtn"
 								parent={self}
-								{...iconButtonProps}
 								isDisabled={isDisabled}
-								icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+								icon={AngleRight}
+								_icon={iconProps}
 								onPress={() => Repository.nextPage()}
 								tooltip="Next Page"
 							/>);
@@ -144,19 +145,24 @@ export default function Pagination(props) {
 								key="lastPageBtn"
 								reference="lastPageBtn"
 								parent={self}
-								{...iconButtonProps}
 								isDisabled={isDisabled}
-								icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+								icon={AnglesRight}
+								_icon={iconProps}
 								onPress={() => Repository.setPage(totalPages)}
 								tooltip="Last Page"
 							/>);
 			}
 
 			if (!Repository.isLocal) {
-				items.push(<ReloadPageButton key="reloadPageBtn" {...iconButtonProps} iconProps={iconProps} Repository={Repository} self={self} />);
+				items.push(<ReloadButton
+					key="reloadPageBtn"
+					_icon={iconProps}
+					Repository={Repository}
+					self={self}
+				/>);
 			}
 			if (showPagination && !minimize && !disablePageSize) {
-				items.push(<PageSizeCombo
+				items.push(<PageSizeSelect
 								{...testProps('pageSize')}
 								key="pageSize"
 								reference="pageSize"
@@ -170,19 +176,18 @@ export default function Pagination(props) {
 				if (pageStart === pageEnd) {
 					pageSpan = pageStart;
 				}
-				items.push(<Text key="pageDisplay" ml={3}>Displaying {pageSpan} of {total}</Text>);
+				items.push(<Text
+								key="pageDisplay"
+								className="pageDisplay ml-3 min-w-[200px]"
+							>Displaying {pageSpan} of {total}</Text>);
 			}
 		}
-		
-		return <Row
-					justifyContent="flex-start"
-					alignItems="center"
-					px={2}
+		return <HStack
 					style={{ userSelect: 'none', }}
-					{...props}
+					className="Pagination justify-start items-center px-2 "
 				>
 					{items}
-				</Row>;
+				</HStack>;
 	}, [
 		Repository?.hash,
 		showPagination,
@@ -193,5 +198,5 @@ export default function Pagination(props) {
 		pageStart,
 		pageEnd,
 		minimize,
-	])
-};
+	]);
+}

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '../Gluestack';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
@@ -13,7 +13,7 @@ export default function PaginationToolbar(props) {
 		} = props,
 		[minimize, setMinimize] = useState(false),
 		propsToPass = _.omit(props, 'toolbarItems'),
-		showPagination = props.Repository?.totalPages > 1,
+		showPagination = true,//props.Repository?.totalPages > 1,
 		onLayout = (e) => {
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
@@ -32,24 +32,30 @@ export default function PaginationToolbar(props) {
 			}
 		};
 
-	let toolbarProps = {};
-	if (showPagination) {
-		toolbarProps = {
-			borderLeftWidth: 1,
-			borderLeftColor: 'trueGray.400',
-			pl: 3,
-			ml: 3,
-		};
-	}
-
 	return <Toolbar
-				bg="trueGray.200"
-				borderTopWidth={1}
-				borderTopColor="trueGray.400"
-				w="100%"
+				className={`
+					border-t
+					border-t-grey-400
+					w-full
+				`}
 				onLayout={(e) => onLayout(e)}
 			>
-				<Pagination {...propsToPass} showPagination={showPagination} w={toolbarItems.length ? null : '100%'} minimize={minimize} disablePageSize={disablePageSize} />
-				{toolbarItems.length ? <Row flex={1} {...toolbarProps}>{toolbarItems}</Row> : null}
+				<Pagination
+					{...propsToPass}
+					showPagination={showPagination}
+					w={toolbarItems.length ? null : '100%'}
+					minimize={minimize}
+					disablePageSize={disablePageSize}
+				/>
+				{toolbarItems.length &&
+					<HStack className={`
+						flex-1
+						space-x-1
+						border-l
+						border-l-grey-400
+						ml-3
+						pl-3
+					`}
+					>{toolbarItems}</HStack>}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Toolbar.js

@@ -1,21 +1,34 @@
 import {
-	Row,
-} from 'native-base';
+	HStackNative,
+} from '../Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
+	
 	const styles = UiGlobals.styles;
-	return <Row
-				w="100%"
-				justifyContent="flex-start"
-				bg="trueGray.200"
-				borderBottomWidth={1}
-				borderBottomColor="trueGray.400"
-				px={styles.TOOLBAR_PX}
-				py={styles.TOOLBAR_PY}
-				overflow="auto"
-				{...props}
+	
+	let className = `
+		Toolbar
+		flex
+		w-full
+		justify-start
+		items-center
+		overflow-auto
+		space-x-2
+		px-2
+		py-2
+		border-b
+		border-solid
+		border-b-grey-400
+		${styles.TOOLBAR_BG}
+	`;
+	if (props.className) {
+		className += ' ' + props.className
+	}
+	return <HStackNative
+				className={className}
+				style={props.style || {}}
 			>
 				{props.children}
-			</Row>;
+			</HStackNative>;
 };

package/src/Components/Tooltip/Tooltip.js

@@ -0,0 +1,35 @@
+import { forwardRef, cloneElement } from 'react';
+import { Tooltip, TooltipContent, TooltipText } from "../Gluestack/tooltip";
+
+const TooltipElement = forwardRef((props, ref) => {
+	const {
+			label,
+			placement,
+			elements,
+			children,
+		} = props;
+	let className = 'rounded-md';
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	
+	return <Tooltip
+				placement={placement}
+				trigger={(triggerProps) => {
+					const propsToPass = {
+						...triggerProps,
+						...children.props,
+					};
+					if (ref) {
+						propsToPass.ref = ref;
+					}
+					return cloneElement(children, propsToPass);
+				}}
+			>
+				<TooltipContent className={className}>
+					{label && <TooltipText>{label}</TooltipText>}
+					{elements && elements}
+				</TooltipContent>
+			</Tooltip>;
+});
+export default TooltipElement;