@onehat/ui 0.4.70 → 0.4.71

package/src/Components/Hoc/withAlert.js

@@ -5,6 +5,7 @@ import {
 	Icon,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import withModal from './withModal.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import CircleQuestion from '../Icons/CircleQuestion.js';
@@ -33,41 +34,41 @@ function withAlert(WrappedComponent) {
 					color = 'black',
 				} = args;
 				return <HStack className="withAlert-HStack flex-1 w-full">
-							<Box className={`
-								withAlert-Box1
-								h-full
-								w-[100px]
-								flex
-								items-end
-								justify-center 
-								pr-3
-							`}>
-								<Icon as={icon} className={`
-									withAlert-Icon
-									h-[40px]
-									w-[40px]
-									text-${color}
-								`} />
+							<Box className={clsx(
+								'withAlert-Box1',
+								'h-full',
+								'w-[100px]',
+								'flex',
+								'items-end',
+								'justify-center',
+								'pr-3',
+							)}>
+								<Icon as={icon} className={clsx(
+									'withAlert-Icon',
+									'h-[40px]',
+									'w-[40px]',
+									`text-${color}`,
+								)} />
 							</Box>
-							<Box className={`
-								withAlert-Box2
-								h-full
-								flex
-								flex-1
-								items-start
-								justify-center
-							`}>
-								<Text className={`
-									withAlert-Text
-									text-${color}
-									text-[18px]
-									flex-none
-									mr-2
-									w-full
-									break-words
-									whitespace-normal
-									overflow-wrap-anywhere
-								`}>{message}</Text>
+							<Box className={clsx(
+								'withAlert-Box2',
+								'h-full',
+								'flex',
+								'flex-1',
+								'items-start',
+								'justify-center',
+							)}>
+								<Text className={clsx(
+									'withAlert-Text',
+									`text-${color}`,
+									'text-[18px]',
+									'flex-none',
+									'mr-2',
+									'w-full',
+									'break-words',
+									'whitespace-normal',
+									'overflow-wrap-anywhere',
+								)}>{message}</Text>
 							</Box>
 						</HStack>;
 			},

package/src/Components/Hoc/withContextMenu.js

@@ -3,6 +3,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../UiGlobals.js';
 import Button from '../Buttons/Button.js';
 import testProps from '../../Functions/testProps.js';
@@ -63,28 +64,28 @@ export default function withContextMenu(WrappedComponent) {
 								isDisabled={isDisabled}
 								icon={icon}
 								_icon={{
-									className: `
-										ml-2
-										self-center
-									`,
+									className: clsx(
+										'ml-2',
+										'self-center',
+									),
 								}}
 								text={text}
 								_text={{
-									className: `
-										flex-1
-										select-none
-										text-black
-									`,
+									className: clsx(
+										'flex-1',
+										'select-none',
+										'text-black',
+									),
 								}}
-								className={`
-									flex-row
-									border-b-2
-									border-b-grey-200
-									py-2
-									px-4
-									select-none
-									rounded-none
-								`}
+								className={clsx(
+									'flex-row',
+									'border-b-2',
+									'border-b-grey-200',
+									'py-2',
+									'px-4',
+									'select-none',
+									'rounded-none',
+								)}
 								variant="outline"
 								action="secondary"
 							/>;
@@ -119,14 +120,14 @@ export default function withContextMenu(WrappedComponent) {
 			// show context menu
 			const
 				contextMenuItemComponents = createContextMenuItemComponents(),
-				className = `
-					context-menu-container
-					absolute
-					border
-					border-grey-400
-					shadow-lg
-					bg-white
-				`,
+				className = clsx(
+					'context-menu-container',
+					'absolute',
+					'border',
+					'border-grey-400',
+					'shadow-lg',
+					'bg-white',
+				),
 				screenWidth = window.innerWidth,
 				screenHeight = window.innerHeight;
 			let l = left,

package/src/Components/Hoc/withDnd.js

@@ -3,6 +3,7 @@ import { useDrag, useDrop, useDragLayer } from 'react-dnd'; // https://react-dnd
 import {
 	Box,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_WEB,
 	UI_MODE_NATIVE,

package/src/Components/Hoc/withEditor.js

@@ -179,7 +179,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (defaultValues) {
 						_.merge(defaultValuesToUse, defaultValues);
 					}
-					addValues = [...defaultValuesToUse];
+					addValues = {...defaultValuesToUse};
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {

package/src/Components/Hoc/withFilters.js

@@ -4,6 +4,7 @@ import {
 	// ScrollView,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	ScrollView,
 	Platform,
@@ -327,17 +328,17 @@ export default function withFilters(WrappedComponent) {
 					// add a container for each filter
 					filterElement = <HStack
 										key={'filter-' + ix}
-										className={`
-											Filter-container-HStack
-											h-full
-											px-1
-											mx-1
-											bg-grey-100
-											rounded-[6px]
-											border
-											border-l-white
-											items-center
-										`}
+										className={clsx(
+											'Filter-container-HStack',
+											'h-full',
+											'px-1',
+											'mx-1',
+											'bg-grey-100',
+											'rounded-[6px]',
+											'border',
+											'border-l-white',
+											'items-center',
+										)}
 									>
 										{filterElement}
 									</HStack>;
@@ -660,13 +661,13 @@ export default function withFilters(WrappedComponent) {
 								onContentSizeChange={onContentSizeChange}
 							>
 								<Text
-									className={`
-										withFilters-filtersLabel
-										italic-italic
-										pr-2
-										select-none
-										${hasFilters ? 'flex-1' : 'italic'}
-									`}>{hasFilters ? 'Filters:' : 'No Filters'}</Text>
+									className={clsx(
+										'withFilters-filtersLabel',
+										'italic-italic',
+										'pr-2',
+										'select-none',
+										hasFilters ? 'flex-1' : 'italic',
+									)}>{hasFilters ? 'Filters:' : 'No Filters'}</Text>
 								{renderedFilters}
 							</ScrollView>
 						</HStack>

package/src/Components/Hoc/withModal.js

@@ -5,6 +5,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
 import Footer from '../Layout/Footer.js';
@@ -151,12 +152,12 @@ export default function withModal(WrappedComponent) {
 				let footer = null;
 				if (buttons && buttons.length > 0) {
 					footer = <Footer
-								className={`
-									justify-end
-									py-2
-									pr-4
-									bg-grey-100
-								`}
+								className={clsx(
+									'justify-end',
+									'py-2',
+									'pr-4',
+									'bg-grey-100',
+								)}
 							>{buttons}</Footer>;
 				}
 				modalBody =

package/src/Components/Hoc/withToast.js

@@ -5,6 +5,7 @@ import {
 	ToastDescription,
 	useToast,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import _ from 'lodash';
 
 // This HOC enables showing a toast in the wrapped component.

package/src/Components/Hoc/withWindowedEditor.js

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';
@@ -83,11 +84,11 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 								{..._editor}
 								parent={self}
 								reference="editor"
-								className={`
-									bg-white
-									shadow-lg
-									rounded-lg
-								`}
+								className={clsx(
+									'bg-white',
+									'shadow-lg',
+									'rounded-lg',
+								)}
 							/>
 						</Modal>}
 				</>;

package/src/Components/Layout/AsyncOperation.js

@@ -5,6 +5,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import { useSelector, useDispatch, } from 'react-redux';
 import { PROGRESS_COMPLETED } from '../../Constants/Progress.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';

package/src/Components/Layout/CenterBox.js

@@ -1,16 +1,17 @@
 import {
 	Box
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 export default function CenterBox(props) {
-	let className = `
-		CenterBox
-		w-full
-		flex-1
-		items-center
-		justify-center
-		p-2
-	`;
+	let className = clsx(
+		'CenterBox',
+		'w-full',
+		'flex-1',
+		'items-center',
+		'justify-center',
+		'p-2',
+	);
 	if (props.className) {
 		className += props.className;
 	}

package/src/Components/Layout/Footer.js

@@ -1,20 +1,21 @@
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {
 	const styles = UiGlobals.styles;
-	let className = `
-		Footer
-		w-full
-		items-center
-		justify-center
-		self-end
-		p-2
-		border-t-2
-		${styles.PANEL_FOOTER_CLASSNAME}
-	`;
+	let className = clsx(
+		'Footer',
+		'w-full',
+		'items-center',
+		'justify-center',
+		'self-end',
+		'p-2',
+		'border-t-2',
+		styles.PANEL_FOOTER_CLASSNAME,
+	);
 	if (props.className) {
 		className += ' ' + props.className
 	}

package/src/Components/Layout/ScreenHeader.js

@@ -4,6 +4,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	SCREEN_MODES__FULL,
 	SCREEN_MODES__SIDE,
@@ -36,10 +37,10 @@ export default function ScreenHeader(props) {
 				{icon &&
 					<Icon
 						as={icon}
-						className={`
-							ml-5
-							text-black
-						`}
+						className={clsx(
+							'ml-5',
+							'text-black',
+						)}
 						size="xl"
 					/>}
 				<Text {...textProps} className="ScreenHeader-Text pl-4 text-[26px] font-[700]">{title}</Text>

package/src/Components/Layout/TextWithTooltip.js

@@ -2,6 +2,7 @@ import {
 	TextNative,
 	Tooltip, TooltipContent, TooltipText,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 export default function TextWithTooltip(props) {
 	const {

package/src/Components/Messages/ConfirmationMessage.js

@@ -2,6 +2,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Button from '../Buttons/Button';
 import emptyFn from '../../Functions/emptyFn.js';
 
@@ -17,11 +18,11 @@ export default function ConfirmationMessage(props) {
 				<ModalContent maxWidth="400px">
 					<ModalHeader>Confirm</ModalHeader>
 					<ModalBody
-						className={`
-							p-5
-							pb-0
-							border-t-0
-						`}
+						className={clsx(
+							'p-5',
+							'pb-0',
+							'border-t-0',
+						)}
 					>
 						<Text className="text-black">{textMessage}</Text>
 					</ModalBody>

package/src/Components/Messages/ErrorMessage.js

@@ -5,6 +5,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
@@ -33,12 +34,12 @@ export default function ErrorMessage(props) {
 					disableAutoFlex={true}
 					onClose={onOk}
 					footer={<Footer
-								className={`
-									justify-end
-									py-2
-									px-4
-									bg-grey-100
-								`}
+								className={clsx(
+									'justify-end',
+									'py-2',
+									'px-4',
+									'bg-grey-100',
+								)}
 							>
 								<Button
 									{...testProps('okBtn')}
@@ -50,40 +51,40 @@ export default function ErrorMessage(props) {
 							</Footer>}
 				>
 					<HStack className="ErrorMessage-HStack flex-1 w-full p-4">
-						<Box className={`
-							ErrorMessage-Box1
-							h-full
-							w-[100px]
-							flex
-							items-center
-							justify-center 
-							pr-3
-						`}>
-							<Icon as={TriangleExclamation} className={`
-								ErrorMessage-Icon
-								h-[40px]
-								w-[40px]
-								text-${color}
-							`} />
+						<Box className={clsx(
+							'ErrorMessage-Box1',
+							'h-full',
+							'w-[100px]',
+							'flex',
+							'items-center',
+							'justify-center',
+							'pr-3',
+						)}>
+							<Icon as={TriangleExclamation} className={clsx(
+								'ErrorMessage-Icon',
+								'h-[40px]',
+								'w-[40px]',
+								`text-${color}`,
+							)} />
 						</Box>
-						<Box className={`
-							ErrorMessage-Box2
-							h-full
-							flex
-							flex-1
-							items-start
-							justify-center
-							overflow-hidden
-						`}>
-							<Text className={`
-								ErrorMessage-Text
-								text-${color}
-								text-[18px]
-								break-words
-								whitespace-normal
-								w-full
-								overflow-auto
-							`}>{text}</Text>
+						<Box className={clsx(
+							'ErrorMessage-Box2',
+							'h-full',
+							'flex',
+							'flex-1',
+							'items-start',
+							'justify-center',
+							'overflow-hidden',
+						)}>
+							<Text className={clsx(
+								'ErrorMessage-Text',
+								`text-${color}`,
+								'text-[18px]',
+								'break-words',
+								'whitespace-normal',
+								'w-full',
+								'overflow-auto',
+							)}>{text}</Text>
 						</Box>
 					</HStack>
 				</Panel>

package/src/Components/Messages/Loading.js

@@ -4,6 +4,7 @@ import {
 	Spinner,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {

package/src/Components/Messages/OkMessage.js

@@ -2,6 +2,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {
@@ -14,20 +15,20 @@ export default function OkMessage(props) {
 				<ModalBackdrop />
 				<ModalContent maxWidth="400px">
 					<ModalBody
-						className={`
-							p-5
-							pb-0
-							border-t-0
-						`}
+						className={clsx(
+							'p-5',
+							'pb-0',
+							'border-t-0',
+						)}
 					>
 						<Text className="text-black">{textMessage}</Text>
 					</ModalBody>
 					<ModalFooter
-						className={`
-							p-0
-							pr-4
-							border-t-0
-						`}
+						className={clsx(
+							'p-0',
+							'pr-4',
+							'border-t-0',
+						)}
 					>
 						<Button
 							variant="outline"

package/src/Components/Messages/Unauthorized.js

@@ -2,6 +2,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 export default function Unauthorized(props) {
 	const 

package/src/Components/Messages/WaitMessage.js

@@ -4,6 +4,7 @@ import {
 	Spinner,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {
@@ -22,25 +23,25 @@ export default function WaitMessage(props) {
 			>
 				<ModalBackdrop />
 				<ModalContent
-					className={`
-						ModalContent
-						w-[200px]
-						h-[50px]
-						shadow-lg
-					`}
+					className={clsx(
+						'ModalContent',
+						'w-[200px]',
+						'h-[50px]',
+						'shadow-lg',
+					)}
 				>
 					<HStack
-						className={`
-							HStack
-							items-center
-							justify-center
-						`}
+						className={clsx(
+							'HStack',
+							'items-center',
+							'justify-center',
+						)}
 					>
 						<Spinner
-							className={`
-								mr-2
-								focus:outline-none
-							`}
+							className={clsx(
+								'mr-2',
+								'focus:outline-none',
+							)}
 						/>
 						<Text className="text-black">{text}</Text>
 					</HStack>

package/src/Components/Panel/AccordionGridPanel.js

@@ -3,6 +3,7 @@ import {
 	ScrollView,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
 import Footer from '../Layout/Footer.js';

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,7 @@
 import {
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';