@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Viewer/Viewer.js

@@ -1,20 +1,25 @@
-import { useEffect, useRef, useState, } from 'react';
+import { useEffect, useRef, useState, isValidElement, } from 'react';
 import {
-	Column,
-	Icon,
+	HStack,
 	ScrollView,
-	Row,
 	Text,
-} from 'native-base';
+	VStack,
+	VStackNative,
+} from '../Gluestack';
 import {
 	EDIT,
 } from '../../Constants/Commands.js';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
+import {
+	extractCssPropertyFromClassName,
+	hasHeight,
+	hasWidth,
+	hasFlex,
+} from '../../Functions/tailwindFunctions.js';
 import UiGlobals from '../../UiGlobals.js';
 import withComponent from '../Hoc/withComponent.js';
-import withPdfButtons from '../Hoc/withPdfButtons.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
@@ -26,8 +31,6 @@ import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
 import _ from 'lodash';
 
-const CONTAINER_THRESHOLD = 900;
-
 function Viewer(props) {
 	const {
 			viewerCanDelete = false,
@@ -38,6 +41,7 @@ function Viewer(props) {
 			additionalViewButtons,
 			canRecordBeEdited,
 			viewerSetup, // this fn will be executed after the viewer setup is complete
+			disableLabels = false,
 		
 			// withComponent
 			self,
@@ -73,19 +77,22 @@ function Viewer(props) {
 			if (!item) {
 				return null;
 			}
+			if (isValidElement(item)) {
+				return item;
+			}
 			let {
 					type,
 					title,
 					name,
 					label,
 					items,
-					// onChange: onEditorChange,
 					useSelectorId = false,
 					isHidden = false,
 					isHiddenInViewMode = false,
-					...propsToPass
+					getDynamicProps,
+					...itemPropsToPass
 				} = item,
-				editorTypeProps = {};
+				viewerTypeProps = {};
 
 			if (isHidden) {
 				return null;
@@ -93,6 +100,9 @@ function Viewer(props) {
 			if (isHiddenInViewMode) {
 				return null;
 			}
+			if (!itemPropsToPass.className) {
+				itemPropsToPass.className = '';
+			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
 				if (propertyDef?.viewerType?.type) {
@@ -101,48 +111,110 @@ function Viewer(props) {
 							type: t,
 							...p
 						} = propertyDef.viewerType;
-					type = t
+					type = t;
+					viewerTypeProps = p;
 				} else {
 					type = 'Text';
 				}
 			}
-			if (type?.match && type.match(/Combo$/) && Repository?.isRemote && !Repository?.isLoaded) {
-				editorTypeProps.autoLoad = true;
+			const isCombo = type?.match && type.match(/Combo/);
+			if (item.hasOwnProperty('autoLoad')) {
+				viewerTypeProps.autoLoad = item.autoLoad;
+			} else {
+				if (isCombo && Repository?.isRemote && !Repository?.isLoaded) {
+					viewerTypeProps.autoLoad = true;
+				}
 			}
 			if (type?.match(/(Tag|TagEditor)$/)) {
-				editorTypeProps.isViewOnly = true;
+				viewerTypeProps.isViewOnly = true;
 			}
 			const Element = getComponentFromType(type);
-			let children;
 
-			if (inArray(type, ['Column', 'FieldSet'])) {
+			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
+				let children;
+				const style = {};
 				if (type === 'Column') {
-					if (containerWidth < CONTAINER_THRESHOLD) {
-						// everything is in one column
-						if (propsToPass.hasOwnProperty('flex')) {
-							delete propsToPass.flex;
-						}
-						if (propsToPass.hasOwnProperty('width')) {
-							delete propsToPass.width;
+					const isEverythingInOneColumn = containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD;
+					if (itemPropsToPass.hasOwnProperty('flex')) {
+						if (!isEverythingInOneColumn) {
+							style.flex = itemPropsToPass.flex;
 						}
-						if (propsToPass.hasOwnProperty('w')) {
-							delete propsToPass.w;
+						delete itemPropsToPass.flex;
+					}
+					if (itemPropsToPass.hasOwnProperty('w')) {
+						if (!isEverythingInOneColumn) {
+							style.width = itemPropsToPass.w;
 						}
-						propsToPass.w = '100%';
-						propsToPass.mb = 1;
+						delete itemPropsToPass.w;
+					}
+					if (!style.flex && !style.width) {
+						style.flex = 1;
 					}
-					propsToPass.pl = 3;
-				} else if (type === 'FieldSet' && item.showToggleAllCheckbox) {
-					propsToPass.showToggleAllCheckbox = false; // don't allow it in view mode
+					itemPropsToPass.className += ' Column';
+					// if (containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD) {
+					// 	// everything is in one column
+					// 	if (hasFlex(itemPropsToPass)) {
+					// 		itemPropsToPass.className = extractCssPropertyFromClassName(itemPropsToPass.className, 'flex').className;
+					// 		if (itemPropsToPass.style?.flex) {
+					// 			delete itemPropsToPass.style.flex;
+					// 		}
+					// 	}
+					// 	if (hasWidth(itemPropsToPass)) {
+					// 		itemPropsToPass.className = extractCssPropertyFromClassName(itemPropsToPass.className, 'width').className;
+					// 		if (itemPropsToPass.style?.width) {
+					// 			delete itemPropsToPass.style.width;
+					// 		}
+					// 	}
+					// 	itemPropsToPass.className += ' w-full mb-1';
+					// }
+				}
+				if (type === 'Row') {
+					itemPropsToPass.className += ' Row w-full';
+				}
+				if (type === 'FieldSet' && item.showToggleAllCheckbox) {
+					itemPropsToPass.showToggleAllCheckbox = false; // don't allow it in view mode
 				}
 				const itemDefaults = item.defaults || {};
 				children = _.map(items, (item, ix) => {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
-				return <Element key={ix} title={title} {...defaults} {...itemDefaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
+
+				let elementClassName = '';
+				const defaultsClassName = defaults.className;
+				if (defaultsClassName) {
+					elementClassName += ' ' + defaultsClassName;
+				}
+				const itemDefaultsClassName = itemDefaults.className;
+				if (itemDefaultsClassName) {
+					elementClassName += ' ' + itemDefaultsClassName;
+				}
+				const itemPropsToPassClassName = itemPropsToPass.className;
+				if (itemPropsToPassClassName) {
+					elementClassName += ' ' + itemPropsToPassClassName;
+				}
+				const editorTypeClassName = viewerTypeProps.className;
+				if (editorTypeClassName) {
+					elementClassName += ' ' + editorTypeClassName;
+				}
+				let defaultsToPass = {},
+					itemDefaultsToPass = {};
+				if (type === 'FieldSet') { // don't pass for Row and Column, as they use regular <div>s for web
+					defaultsToPass = defaults;
+					itemDefaultsToPass = itemDefaults;
+				}
+				return <Element
+							key={ix}
+							title={title}
+							{...defaultsToPass}
+							{...itemDefaultsToPass}
+							{...itemPropsToPass}
+							{...viewerTypeProps}
+							className={elementClassName}
+							style={style}
+						>{children}</Element>;
 			}
 
 			if (!label && Repository && propertyDef?.title) {
@@ -160,6 +232,20 @@ function Viewer(props) {
 					value = record.properties[fkDisplayField].displayValue;
 				}
 			}
+
+			let elementClassName = 'field-' + name;
+			const defaultsClassName = defaults.className;
+			if (defaultsClassName) {
+				elementClassName += ' ' + defaultsClassName;
+			}
+			const itemPropsToPassClassName = itemPropsToPass.className;
+			if (itemPropsToPassClassName) {
+				elementClassName += ' ' + itemPropsToPassClassName;
+			}
+			const viewerTypeClassName = viewerTypeProps.className;
+			if (viewerTypeClassName) {
+				elementClassName += ' ' + viewerTypeClassName;
+			}
 			
 			let element = <Element
 								{...testProps('field-' + name)}
@@ -167,25 +253,39 @@ function Viewer(props) {
 								isEditable={false}
 								parent={self}
 								reference={name}
-								{...propsToPass}
-								{...editorTypeProps}
+								{...itemPropsToPass}
+								{...viewerTypeProps}
+								className={elementClassName}
 							/>;
 
 			if (item.additionalViewButtons) {
-				element = <Row flexWrap="wrap">
+				element = <HStack className="flex-wrap">
 								{element}
 								{buildAdditionalButtons(item.additionalViewButtons, self)}
-							</Row>;
+							</HStack>;
 			}
 
-			if (label) {
-				const labelProps = {};
+			if (!disableLabels && label) {
+				const style = {};
 				if (defaults?.labelWidth) {
-					labelProps.w = defaults.labelWidth;
+					style.width = defaults.labelWidth;
+				}
+				if (!style.width) {
+					style.width = '50px';
+				}
+				if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
+					element = <HStack className="HStackA py-1">
+									<Label style={style}>{label}</Label>
+									{element}
+								</HStack>;
+				} else {
+					element = <VStack className="HStackA w-full py-1 mt-3">
+									<Label style={style}>{label}</Label>
+									{element}
+								</VStack>;
 				}
-				element = <><Label {...labelProps}>{label}</Label>{element}</>;
 			}
-			return <Row key={ix}>{element}</Row>;
+			return <HStack key={ix} className="HStackB px-2 pb-1">{element}</HStack>;
 		},
 		buildAncillary = () => {
 			const components = [];
@@ -195,39 +295,35 @@ function Viewer(props) {
 						type,
 						title = null,
 						selectorId = null,
-						...propsToPass
+						...itemPropsToPass
 					} = item;
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
-					if (!propsToPass.h) {
-						propsToPass.h = 400;
+					if (type.match(/Grid/) && !itemPropsToPass.h) {
+						itemPropsToPass.h = 400;
 					}
+
 					const
 						Element = getComponentFromType(type),
 						element = <Element
 										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
-										flex={1}
-										h={350}
 										canEditorViewOnly={true}
 										canCrud={false}
 										uniqueRepository={true}
 										parent={self}
-										{...propsToPass}
+										{...itemPropsToPass}
 										canRowsReorder={false}
 									/>;
 					if (title) {
 						if (record?.displayValue) {
 							title += ' for ' + record.displayValue;
 						}
-						title = <Text
-									fontSize={styles.VIEWER_ANCILLARY_FONTSIZE}
-									fontWeight="bold"
-								>{title}</Text>;
+						title = <Text className={`${styles.VIEWER_ANCILLARY_FONTSIZE} font-bold`}>{title}</Text>;
 					}
-					components.push(<Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>);
+					components.push(<VStack key={'ancillary-' + ix} className="my-3">{title}{element}</VStack>);
 				});
 			}
 			return components;
@@ -264,60 +360,87 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
-	return <Column flex={flex} {...testProps(self)} {...props} onLayout={onLayout}>
+	let className = 'Viewer-VStackNative';
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+
+	return <VStackNative
+				{...testProps(self)}
+				{...props}
+				className={className}
+				onLayout={onLayout}
+			>
 				{containerWidth && <>
 
-					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
+					<ScrollView
+						_web={{ height: 1 }}
+						ref={scrollViewRef}
+						className={`
+							ScrollView
+							w-full
+							pb-1
+						`}
+					>
 						{canEdit && onEditMode &&
-							<Toolbar justifyContent="flex-end">
-								<Row flex={1} alignItems="center">
-									<Text fontSize={20} ml={2} color="trueGray.500">View Mode</Text>
-								</Row>
+							<Toolbar className="justify-end">
+								<HStack className="flex-1 items-center">
+									<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
+								</HStack>
 								{(!canUser || canUser(EDIT)) &&
 									<Button
 										{...testProps('toEditBtn')}
 										key="editBtn"
 										onPress={onEditMode}
-										leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
-										color="#fff"
-									>To Edit</Button>}
+										icon={Pencil}
+										_icon={{ 
+											size: 'sm',
+											className: 'text-white'
+										}}
+										className="text-white"
+										text="To Edit"
+										tooltip="Switch to Edit Mode"
+									/>}
 							</Toolbar>}
+						
 						{!_.isEmpty(additionalButtons) && 
-							<Toolbar justifyContent="flex-end" flexWrap="wrap">
+							<Toolbar className="justify-end flex-wrap">
 								{additionalButtons}
 							</Toolbar>}
-						<Column>
-							{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{viewerComponents}</Row> : null}
-							{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{viewerComponents}</Column> : null}
-							<Column m={2} pt={4}>{ancillaryComponents}</Column>
-						</Column>
+						
+						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Viewer-formComponents-HStack p-4 gap-4 justify-center">{viewerComponents}</HStack> : null}
+						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Viewer-formComponents-VStack p-4">{viewerComponents}</VStack> : null}
+						<VStack className="Viewer-AncillaryComponents m-2 pt-4 px-2">{ancillaryComponents}</VStack>
 					</ScrollView>
+
 					{(showDeleteBtn || showCloseBtn) && 
-						<Footer justifyContent="flex-end">
+						<Footer className="justify-end">
 							{showDeleteBtn && 
-								<Row flex={1} justifyContent="flex-start">
+								<HStack className="flex-1 justify-start">
 									<Button
 										{...testProps('deleteBtn')}
 										key="deleteBtn"
 										onPress={onDelete}
-										bg="warning"
-										_hover={{
-											bg: 'warningHover',
-										}}
-										color="#fff"
-									>Delete</Button>
-								</Row>}
+										className={`
+											text-white
+											bg-warning-500
+											hover:bg-warning-600
+										`}
+										text="Delete"
+									/>
+								</HStack>}
 							{onClose && showCloseBtn &&
 								<Button
 									{...testProps('closeBtn')}
 									key="closeBtn"
 									onPress={onClose}
-									color="#fff"
-								>Close</Button>}
+									className="text-white"
+									text="Close"
+								/>}
 						</Footer>}
 
 				</>}
-			</Column>;
+			</VStackNative>;
 }
 
-export default withComponent(withPdfButtons(Viewer));
+export default withComponent(Viewer);

package/src/Components/Window/Editor.js

@@ -1,8 +1,3 @@
-import {
-	Box,
-	Column,
-	Row,
-} from 'native-base';
 import Container from '../Container/Container.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -5,9 +5,6 @@
  * "LICENSE.txt" file, which is part of this source code package.
  */
 import { useState, } from 'react';
-import {
-	Icon,
-} from 'native-base';
 import Excel from '../Icons/Excel';
 import Panel from '../Panel/Panel.js';
 import Form from '../Form/Form.js';
@@ -15,6 +12,8 @@ import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import downloadWithFetch from '../../Functions/downloadWithFetch.js';
 import withAlert from '../Hoc/withAlert.js';
 import withComponent from '../Hoc/withComponent.js';
+import Download from '../Icons/Download';
+import Upload from '../Icons/Upload';
 import Cookies from 'js-cookie';
 import _ from 'lodash';
 
@@ -133,15 +132,21 @@ function UploadsDownloadsWindow(props) {
 				reference="UploadsDownloadsWindow"
 				isCollapsible={false}
 				title="Uploads & Downloads"
-				bg="#fff"
-				w={width}
-				h={height}
-				flex={null}
+				className={`
+					flex-none
+					bg-white
+					shadow-lg
+				`}
+				style={{
+					height,
+					width,
+				}}
 			>
 				<Form
 					{...props}
 					parent={self}
 					reference="form"
+					hideResetButton={true}
 					items={[
 						{
 							"type": "Column",
@@ -156,13 +161,16 @@ function UploadsDownloadsWindow(props) {
 									type: 'Button',
 									text: 'Download',
 									isEditable: false,
-									leftIcon: <Icon as={Excel} />,
+									icon: Excel,
+									_icon: {
+										size: 'md',
+									},
 									onPress: () => onDownload(),
+									className: 'mb-5',
 								},
 								{
 									type: 'DisplayField',
 									text: 'Upload an Excel file to the current grid.',
-									mt: 10,
 								},
 								{
 									type: 'File',
@@ -171,19 +179,29 @@ function UploadsDownloadsWindow(props) {
 									accept: '.xlsx',
 								},
 								{
-									type: 'Button',
-									text: 'Upload',
-									isEditable: false,
-									leftIcon: <Icon as={Excel} />,
-									isDisabled: !importFile,
-									onPress: onUpload,
-								},
-								{
-									type: 'Button',
-									text: 'Get Template',
-									isEditable: false,
-									onPress: onDownloadTemplate,
-									variant: 'ghost',
+									type: 'Row',
+									className: 'mt-2',
+									items: [
+										{
+											type: 'Button',
+											text: 'Upload',
+											isEditable: false,
+											icon: Upload,
+											_icon: {
+												size: 'md',
+											},
+											isDisabled: !importFile,
+											onPress: onUpload,
+										},
+										{
+											type: 'Button',
+											text: 'Get Template',
+											icon: Download,
+											isEditable: false,
+											onPress: onDownloadTemplate,
+										},
+
+									],
 								},
 							]
 						},

package/src/Components/index.js

@@ -1,7 +1,7 @@
 import {
-	Column,
-	Row,
-} from 'native-base';
+	HStackNative,
+	VStackNative,
+} from './Gluestack';
 import AddressBook from './Icons/AddressBook.js';
 import Alt from './Icons/Alt.js';
 import AngleLeft from './Icons/AngleLeft.js';
@@ -58,6 +58,7 @@ import Comments from './Icons/Comments.js';
 import CommentsRegular from './Icons/CommentsRegular.js';
 import Copyright from './Icons/Copyright.js';
 import Dot from './Icons/Dot.js';
+import Download from './Icons/Download.js';
 import Duplicate from './Icons/Duplicate.js';
 import Edit from './Icons/Edit.js';
 import EllipsisHorizontal from './Icons/EllipsisHorizontal.js';
@@ -69,7 +70,7 @@ import Exclamation from './Icons/Exclamation.js';
 import Expand from './Icons/Expand.js';
 import Eye from './Icons/Eye.js';
 import EyeSlash from './Icons/EyeSlash.js';
-import File from './Icons/File.js';
+import FileIcon from './Icons/File.js'; // note name change, since we have a File component
 import FloppyDiskRegular from './Icons/FloppyDiskRegular.js';
 import Folder from './Icons/Folder.js';
 import FolderClosed from './Icons/FolderClosed.js';
@@ -175,6 +176,7 @@ import TrashCan from './Icons/TrashCan.js';
 import TriangleExclamation from './Icons/TriangleExclamation.js';
 import Truck from './Icons/Truck.js';
 import TruckFast from './Icons/TruckFast.js';
+import Upload from './Icons/Upload.js';
 import UploadDownload from './Icons/UploadDownload.js';
 import User from './Icons/User.js';
 import UserGroup from './Icons/UserGroup.js';
@@ -238,6 +240,8 @@ import YearsCombo from './Form/Field/Combo/YearsCombo.js';
 import _ from 'lodash';
 
 const components = {
+	Column: VStackNative,
+	Row: HStackNative,
 	AddressBook,
 	Alt,
 	AngleLeft,
@@ -294,6 +298,7 @@ const components = {
 	CommentsRegular,
 	Copyright,
 	Dot,
+	Download,
 	Duplicate,
 	Edit,
 	EllipsisHorizontal,
@@ -305,7 +310,7 @@ const components = {
 	Expand,
 	Eye,
 	EyeSlash,
-	File,
+	FileIcon,
 	FloppyDiskRegular,
 	Folder,
 	FolderClosed,
@@ -411,6 +416,7 @@ const components = {
 	TriangleExclamation,
 	Truck,
 	TruckFast,
+	Upload,
 	UploadDownload,
 	User,
 	UserGroup,
@@ -433,7 +439,6 @@ const components = {
 	CheckboxGroup,
 	// CKEditor,
 	Color,
-	Column,
 	Combo,
 	// ComboEditor,
 	Container,
@@ -461,7 +466,6 @@ const components = {
 	PlusMinusButton,
 	RadioGroup,
 	Slider,
-	Row,
 	SquareButton,
 	TabPanel,
 	Tag,
@@ -474,5 +478,4 @@ const components = {
 	TreeNode,
 	YearsCombo,
 };
-
 export default components;

package/src/Constants/Colors.js

@@ -0,0 +1,13 @@
+export const BACKGROUND_COLOR__ORDER_STATUS__RECEIVED = '#feffb3';
+export const BACKGROUND_COLOR__ORDER_STATUS__ASSIGNED = '#c0ffb3';
+export const BACKGROUND_COLOR__ORDER_STATUS__IN_PROCESS = '#66ffeb';
+export const BACKGROUND_COLOR__ORDER_STATUS__ON_ITS_WAY = '#6bd5ff';
+export const BACKGROUND_COLOR__ORDER_STATUS__PARTIALLY_COMPLETED = '#0b82de';
+export const BACKGROUND_COLOR__ORDER_STATUS__COMPLETED = '#0cb51f';
+
+export const FOREGROUND_COLOR__ORDER_STATUS__RECEIVED = '#c76805';
+export const FOREGROUND_COLOR__ORDER_STATUS__ASSIGNED = '#000';
+export const FOREGROUND_COLOR__ORDER_STATUS__IN_PROCESS = '#000';
+export const FOREGROUND_COLOR__ORDER_STATUS__ON_ITS_WAY = '#000';
+export const FOREGROUND_COLOR__ORDER_STATUS__PARTIALLY_COMPLETED = '#fff';
+export const FOREGROUND_COLOR__ORDER_STATUS__COMPLETED = '#fff';