@onehat/ui 0.4.70 → 0.4.71

package/src/Components/Panel/Header.js

@@ -5,6 +5,7 @@ import {
 	TextNative,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -41,17 +42,17 @@ export default function Header(props) {
 	let closeBtn = null,
 		collapseBtn = null;
 	if (onClose) {
-		let closeClassName = `
-			Header-closeBtn
-			self-center
-			border
-			border-grey-400
-			h-[20px]
-			w-[20px]
-			px-[2px]
-			py-[2px]
-			${styles.PANEL_HEADER_BG}
-		`;
+		let closeClassName = clsx(
+			'Header-closeBtn',
+			'self-center',
+			'border',
+			'border-grey-400',
+			'h-[20px]',
+			'w-[20px]',
+			'px-[2px]',
+			'py-[2px]',
+			styles.PANEL_HEADER_BG,
+		);
 		if (collapseDirection === HORIZONTAL && isCollapsed) {
 			closeClassName += ' mb-1';
 		}
@@ -67,17 +68,17 @@ export default function Header(props) {
 					/>;
 	}
 	if (isCollapsible) {
-		let collapseClassName = `
-			Header-collapseBtn
-			self-center
-			border
-			border-grey-400
-			h-[20px]
-			w-[20px]
-			px-[2px]
-			py-[2px]
-			${styles.PANEL_HEADER_BG}
-		`;
+		let collapseClassName = clsx(
+			'Header-collapseBtn',
+			'self-center',
+			'border',
+			'border-grey-400',
+			'h-[20px]',
+			'w-[20px]',
+			'px-[2px]',
+			'py-[2px]',
+			styles.PANEL_HEADER_BG,
+		);
 		if (collapseDirection === HORIZONTAL && isCollapsed) {
 			collapseClassName += ' mb-1';
 		}
@@ -97,17 +98,17 @@ export default function Header(props) {
 		doubleClickStyle.cursor = 'pointer';
 	}
 
-	let panelClassName = `
-		Header
-		bg-grey-300
-		items-center
-		justify-start
-		py-1
-		border-b-grey-400
-		border-b-1
-		${isWindow ? 'rounded-t-lg' : ''}
-		${styles.PANEL_HEADER_BG}
-	`;
+	let panelClassName = clsx(
+		'Header',
+		'bg-grey-300',
+		'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) {
@@ -137,12 +138,12 @@ export default function Header(props) {
 									<TextNative
 										numberOfLines={1}
 										ellipsizeMode="head"
-										className={`
-											Header-TextNative1
-											flex-1
-											font-bold
-											${styles.PANEL_HEADER_TEXT_CLASSNAME}
-										`}>{title}</TextNative>
+										className={clsx(
+											'Header-TextNative1',
+											'flex-1',
+											'font-bold',
+											styles.PANEL_HEADER_TEXT_CLASSNAME,
+										)}>{title}</TextNative>
 								</div>
 							</VStack>
 						</div>;
@@ -175,12 +176,12 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								Header-TextNative2
-								flex-1
-								font-bold
-								${styles.PANEL_HEADER_TEXT_CLASSNAME}
-							`}
+							className={clsx(
+								'Header-TextNative2',
+								'flex-1',
+								'font-bold',
+								styles.PANEL_HEADER_TEXT_CLASSNAME,
+							)}
 						>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
@@ -215,13 +216,13 @@ export default function Header(props) {
 										numberOfLines={1}
 										ellipsizeMode="head"
 										style={{ transform: [{ rotate: '-90deg'}] }}
-										className={`
-											Header-TextNative3
-											font-bold
-											w-[200px]
-											text-right
-											${styles.PANEL_HEADER_TEXT_CLASSNAME}
-										`}
+										className={clsx(
+											'Header-TextNative3',
+											'font-bold',
+											'w-[200px]',
+											'text-right',
+											styles.PANEL_HEADER_TEXT_CLASSNAME,
+										)}
 									>{title}</TextNative>
 								</VStack>
 							</VStack>
@@ -251,12 +252,12 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								Header-TextNative4
-								font-bold
-								flex-1
-								${styles.PANEL_HEADER_TEXT_CLASSNAME}
-							`}>{title}</TextNative>
+							className={clsx(
+								'Header-TextNative4',
+								'font-bold',
+								'flex-1',
+								styles.PANEL_HEADER_TEXT_CLASSNAME,
+							)}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
 				</Pressable>;

package/src/Components/Panel/Mask.js

@@ -1,6 +1,7 @@
 import {
 	Box,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -4,6 +4,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -136,12 +137,12 @@ function Panel(props) {
 				{!isCollapsed && <>
 					{topToolbar}
 					<VStack
-						className={`
-							Panel-VSstack
-							flex-1
-							w-full
-							overflow-hidden
-						`}
+						className={clsx(
+							'Panel-VSstack',
+							'flex-1',
+							'w-full',
+							'overflow-hidden',
+						)}
 					>
 						{isScrollable ?
 							<ScrollView

package/src/Components/Picker/Picker.js

@@ -5,6 +5,7 @@ import {
 	Select, SelectItem,
 	Tooltip,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Report/Report.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,
@@ -72,11 +73,11 @@ function Report(props) {
 	}
 
 	if (isQuickReport) {
-		let className = `
-			Report
-			max-w-[100px]
-			m-2
-		`;
+		let className = clsx(
+			'Report',
+			'max-w-[100px]',
+			'm-2',
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}
@@ -86,28 +87,28 @@ function Report(props) {
 				>
 					<Pressable
 						onPress={onPressQuickReport}
-						className={`
-							flex-1
-							items-center
-							justify-center
-							flex-col
-							bg-white
-							p-3
-							rounded-lg
-							border
-							border-primary-300
-							hover:bg-primary-300
-						`}
+						className={clsx(
+							'flex-1',
+							'items-center',
+							'justify-center',
+							'flex-col',
+							'bg-white',
+							'p-3',
+							'rounded-lg',
+							'border',
+							'border-primary-300',
+							'hover:bg-primary-300',
+						)}
 					>
 						{icon}
 						<Text
-							className={`
-								text-black
-								text-center
-								text-[17px]
-								leading-tight
-								mt-2
-							`}
+							className={clsx(
+								'text-black',
+								'text-center',
+								'text-[17px]',
+								'leading-tight',
+								'mt-2',
+							)}
 						>{title}</Text>
 					</Pressable>
 				</VStackNative>;
@@ -145,16 +146,16 @@ function Report(props) {
 	}
 	return <VStackNative
 				{...testProps('Report-' + reportId)}
-				className={`
-					w-full
-					border
-					border-primary-300
-					p-4
-					mb-3
-					bg-white
-					rounded-lg
-					shadow-sm
-				`}
+				className={clsx(
+					'w-full',
+					'border',
+					'border-primary-300',
+					'p-4',
+					'mb-3',
+					'bg-white',
+					'rounded-lg',
+					'shadow-sm',
+				)}
 			>
 				<HStack>
 					<Box className="w-[50px] mr-4">

package/src/Components/Screens/Manager.js

@@ -1,6 +1,7 @@
 import {
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import React, { useState, useEffect, } from 'react';
 import {
 	SCREEN_MODES__FULL,

package/src/Components/Screens/ReportsManager.js

@@ -5,6 +5,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import ChartPie from '../Icons/ChartPie.js';
 import ScreenHeader from '../Layout/ScreenHeader.js';
 

package/src/Components/Tab/Tab.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Icon,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Tab/TabBar.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -130,11 +131,11 @@ function TabBar(props) {
 							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
 						/>;
 			} else {
-				tabClassName += `
-					${direction === VERTICAL ? 'w-[200px]' : ''}
-					pr-0
-					mr-0
-				`;
+				tabClassName += clsx(
+					direction === VERTICAL ? 'w-[200px]' : '',
+					'pr-0',
+					'mr-0',
+				);
 				_icon.as = Minimize;
 				button = <Button
 							{...testProps('toggleBtn')}
@@ -158,59 +159,59 @@ function TabBar(props) {
 		getTabProps = () => {
 			const
 				tabProps = {
-					className: `
-						${styles.TAB_BG}
-						${isCollapsed ? 'justify-center' : 'justify-start'}
-					`,
+					className: clsx(
+						styles.TAB_BG,
+						isCollapsed ? 'justify-center' : 'justify-start',
+					),
 				},
 				textProps = {
 					// numberOfLines: 1,
 					// ellipsizeMode: 'head',
-					className: `
-						${styles.TAB_FONTSIZE}
-						${styles.TAB_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_FONTSIZE,
+						styles.TAB_COLOR,
+					),
 				},
 				iconProps = {
 					// size: 'md',
-					className: `
-						${styles.TAB_ICON_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_ICON_COLOR,
+					),
 				};
 			switch(direction) {
 				case VERTICAL:
-					tabProps.className += `
-						rounded-l-lg
-						rounded-r-none
-						w-full
-						ml-2
-						mr-0
-						mb-1
-						px-4
-					`;
-					textProps.className += `
-						w-full
-						mr-0
-						mb-1
-						py-0
-						pl-3
-						pr-0
-						flex-1
-						text-left
-					`;
+					tabProps.className += clsx(
+						'rounded-l-lg',
+						'rounded-r-none',
+						'w-full',
+						'ml-2',
+						'mr-0',
+						'mb-1',
+						'px-4',
+					);
+					textProps.className += clsx(
+						'w-full',
+						'mr-0',
+						'mb-1',
+						'py-0',
+						'pl-3',
+						'pr-0',
+						'flex-1',
+						'text-left',
+					);
 					break;
 				case HORIZONTAL:
-					tabProps.className += `
-						rounded-t
-						rounded-b-none
-						mr-1
-						py-1
-					`;
-					textProps.className += `
-						px-1
-						py-0
-						mr-1
-					`;
+					tabProps.className += clsx(
+						'rounded-t',
+						'rounded-b-none',
+						'mr-1',
+						'py-1',
+					);
+					textProps.className += clsx(
+						'px-1',
+						'py-0',
+						'mr-1',
+					);
 					break;
 				default:
 			}
@@ -459,16 +460,16 @@ function TabBar(props) {
 		tabBar = <VStackNative
 					{...testProps('TabBar')}
 					{...propsToPass}
-					className={`
-						${isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]'}
-						${isCollapsed ? 'pl-1' : 'pl-4'}
-						items-center
-						justify-start
-						py-2
-						overflow-x-hidden
-						overflow-y-auto
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]',
+						isCollapsed ? 'pl-1' : 'pl-4',
+						'items-center',
+						'justify-start',
+						'py-2',
+						'overflow-x-hidden',
+						'overflow-y-auto',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					{renderedTabs}
 					{canToggleCollapse ? 
@@ -488,16 +489,16 @@ function TabBar(props) {
 	if (direction === HORIZONTAL) {
 		tabBar = <HStackNative
 					{...testProps('TabBar')}
-					className={`
-						${'h-[' + tabHeight + 'px]'}
-						items-center
-						justify-start
-						overflow-x-auto
-						overflow-y-hidden
-						p-1
-						pb-0
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						'h-[' + tabHeight + 'px]',
+						'items-center',
+						'justify-start',
+						'overflow-x-auto',
+						'overflow-y-hidden',
+						'p-1',
+						'pb-0',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					<ScrollView
 						horizontal={true}

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,7 @@
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
@@ -8,17 +9,19 @@ export default function FilterToolbar(props) {
 	const {
 			toolbarItems = [],
 		} = props;
-	return <Toolbar className={`
-				bg-grey-200
-				border-t
-				border-t-grey-400
-				w-full
-			`} >
+	return <Toolbar
+				className={clsx(
+					'bg-grey-200',
+					'border-t',
+					'border-t-grey-400',
+					'w-full',
+				)}
+			>
 				{toolbarItems.length && 
-					<HStack className={`
-						flex-1
-						border
-						border-l-grey-100
-					`}>{toolbarItems}</HStack>}
+					<HStack className={clsx(
+						'flex-1',
+						'border',
+						'border-l-grey-100',
+					)}>{toolbarItems}</HStack>}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Pagination.js

@@ -4,6 +4,7 @@ import {
 	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
@@ -154,25 +155,25 @@ export default function Pagination(props) {
 									onChangeValue={(value) => Repository.setPage(value)}
 									maxValue={totalPages}
 									isDisabled={totalPages === 1}
-									className={`
-										Pagination-pageInput
-										min-w-[40px]
-										w-[40px]
-										text-center
-										bg-grey-100
-									`}
+									className={clsx(
+										'Pagination-pageInput',
+										'min-w-[40px]',
+										'w-[40px]',
+										'text-center',
+										'bg-grey-100',
+									)}
 									textAlignIsCenter={true}
 									tooltip="Set Page"
 									tooltipClassName="w-[40px]"
 								/>);
 					items.push(<Text
 									key="totalPages"
-									className={`
-										Pagination-totalPages
-										whitespace-nowrap
-										inline-flex
-										mx-1
-									`}
+									className={clsx(
+										'Pagination-totalPages',
+										'whitespace-nowrap',
+										'inline-flex',
+										'mx-1',
+									)}
 								>{`of ${totalPages}`}</Text>);
 				}
 			}
@@ -194,12 +195,12 @@ export default function Pagination(props) {
 				}
 				items.push(<Text
 								key="pageDisplay"
-								className={`
-									Pagination-pageDisplay
-									whitespace-nowrap
-									inline-flex
-									mx-1
-								`}
+								className={clsx(
+									'Pagination-pageDisplay',
+									'whitespace-nowrap',
+									'inline-flex',
+									'mx-1',
+								)}
 							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
@@ -207,12 +208,12 @@ export default function Pagination(props) {
 					style={{
 						userSelect: 'none',
 					}}
-					className={`
-						Pagination
-						items-center
-						shrink-0
-						gap-2
-					`}
+					className={clsx(
+						'Pagination',
+						'items-center',
+						'shrink-0',
+						'gap-2',
+					)}
 				>
 					{items}
 				</HStack>;