@onehat/ui 0.4.70 → 0.4.72

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,
@@ -17,8 +18,8 @@ import {
 
 export function withDragSource(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		
-		if (!props.isDragSource) {
+
+		if (!props.isDragSource || props.alreadyHasDragSource) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -36,6 +37,7 @@ export function withDragSource(WrappedComponent) {
 				dragOptions = null,
 				dropEffect = null,
 				// onDrag,
+				onDragStart = null,
 				onDragEnd = null,
 				canDrag = null,
 				isDragging = null,
@@ -62,10 +64,15 @@ export function withDragSource(WrappedComponent) {
 
 				return {
 					type: dragSourceType, // Required. This must be either a string or a symbol. Only the drop targets registered for the same type will react to this item.
-					item: {
-						...dragSourceItem,
-						getDragProxy,
-					}, // Required (object or function).
+					item: () => { // Required (object or function). If a function, it runs only once at the start of a drag.
+						if (dragSourceItem.onDragStart) {
+							dragSourceItem.onDragStart();
+						}
+						return {
+							...dragSourceItem,
+							getDragProxy,
+						};
+					},
 						// When an object, it is a plain JavaScript object describing the data being dragged. This is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know. You may be tempted to put a complex reference here, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to use something like { id }.
 						// When a function, it is fired at the beginning of the drag operation and returns an object representing the drag operation (see first bullet). If null is returned, the drag operation is cancelled.
 					previewOptions: dragPreviewOptions, // Optional. A plain JavaScript object describing drag preview options.
@@ -118,6 +125,7 @@ export function withDragSource(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
+					alreadyHasDragSource={true}
 					ref={ref}
 					canDrag={stateCanDrag}
 					isDragging={stateIsDragging}
@@ -132,7 +140,7 @@ export function withDragSource(WrappedComponent) {
 export function withDropTarget(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.isDropTarget) {
+		if (!props.isDropTarget || props.alreadyHasDropTarget) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -196,8 +204,9 @@ export function withDropTarget(WrappedComponent) {
 		dropTargetRef(localTargetRef); // register DOM node with react-dnd
 
 		return <WrappedComponent
-					canDrop={stateCanDrop}
+					alreadyHasDropTarget={true}
 					ref={ref}
+					canDrop={stateCanDrop}
 					isOver={isOver}
 					dropTargetRef={localTargetRef}
 					draggedItem={draggedItem} // Pass the dragged item

package/src/Components/Hoc/withDraggable.js

@@ -23,7 +23,7 @@ import getComponentFromType from '../../Functions/getComponentFromType.js';
 export default function withDraggable(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.isDraggable) {
+		if (!props.isDraggable || props.alreadyHasDraggable) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -237,7 +237,11 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div ref={nodeRef} className="nsResize">
-								<WrappedComponent {...propsToPass} ref={ref} />
+								<WrappedComponent
+									{...propsToPass}
+									alreadyHasDraggable={true}
+									ref={ref}
+								/>
 							</div>
 						</Draggable>;
 			} else if (mode === HORIZONTAL) {
@@ -252,7 +256,11 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div ref={nodeRef} className="ewResize" style={{ height: '100%', }}>
-								<WrappedComponent {...propsToPass} ref={ref} />
+								<WrappedComponent
+									{...propsToPass}
+									alreadyHasDraggable={true}
+									ref={ref}
+								/>
 							</div>
 						</Draggable>;
 			}
@@ -268,14 +276,22 @@ export default function withDraggable(WrappedComponent) {
 						nodeRef={nodeRef}
 						{...draggableProps}
 					>
-						<WrappedComponent {...propsToPass} ref={nodeRef} />
+						<WrappedComponent
+							{...propsToPass}
+							alreadyHasDraggable={true}
+							ref={nodeRef}
+						/>
 					</Draggable>;
 		} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 
 			// NOT YET IMPLEMENTED
 			// Really need to replace most of this, as much of it is web-centric.
 
-			return <WrappedComponent {...propsToPass} ref={ref} />; // TEMP
+			return <WrappedComponent
+						{...propsToPass}
+						alreadyHasDraggable={true}
+						ref={ref}
+					/>;
 
 		}
 	});

package/src/Components/Hoc/withEditor.js

@@ -21,7 +21,7 @@ import _ from 'lodash';
 export default function withEditor(WrappedComponent, isTree = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithEditor) {
+		if (props.disableWithEditor || props.alreadyHasWithEditor) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
@@ -179,7 +179,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (defaultValues) {
 						_.merge(defaultValuesToUse, defaultValues);
 					}
-					addValues = [...defaultValuesToUse];
+					addValues = {...defaultValuesToUse};
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {
@@ -702,6 +702,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					{...props}
 					ref={ref}
 					disableWithEditor={false}
+					alreadyHasWithEditor={true}
 					currentRecord={currentRecord}
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}

package/src/Components/Hoc/withEvents.js

@@ -2,9 +2,19 @@ import { forwardRef } from 'react';
 
 export default function withEvents(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithEvents) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				onEvent,
 			} = props;
-		return <WrappedComponent fireEvent={onEvent} {...props} ref={ref} />;
+		return <WrappedComponent
+					{...props}
+					alreadyHasWithEvents={true}
+					ref={ref}
+					fireEvent={onEvent}
+				/>;
 	});
 }

package/src/Components/Hoc/withFilters.js

@@ -4,6 +4,7 @@ import {
 	// ScrollView,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	ScrollView,
 	Platform,
@@ -41,7 +42,7 @@ const isWindows = Platform.OS === 'windows';
 export default function withFilters(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.useFilters) {
+		if (!props.useFilters || props.alreadyHasWithFilters) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -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>
@@ -694,7 +695,12 @@ export default function withFilters(WrappedComponent) {
 							</HStack>}
 					</Toolbar>;
 		
-		return <WrappedComponent {...props} topToolbar={toolbar} ref={ref} />;
+		return <WrappedComponent
+					{...props}
+					ref={ref}
+					alreadyHasWithFilters={true}
+					topToolbar={toolbar}
+				/>;
 
 	});
 }

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';
@@ -18,7 +19,7 @@ import _ from 'lodash';
 export default function withModal(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithModal || props.showModal) {
+		if (props.disableWithModal || props.alreadyHasWithModal) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -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 =
@@ -179,12 +180,13 @@ export default function withModal(WrappedComponent) {
 					<WrappedComponent
 						{...props}
 						disableWithModal={false}
+						alreadyHasWithModal={true}
+						ref={ref}
 						showModal={showModal}
 						hideModal={onCancel || hideModal}
 						updateModalBody={updateModalBody}
 						isModalShown={isModalShown}
 						whichModal={whichModal}
-						ref={ref}
 					/>
 					{isModalShown && 
 						<Modal

package/src/Components/Hoc/withPdfButtons.js

@@ -22,7 +22,7 @@ export default function withPdfButtons(WrappedComponent) {
 		if (props.canUser && !props.canUser(VIEW)) { // permissions
 			showButtons = false;
 		}
-		if (!showButtons) {
+		if (!showButtons || props.alreadyHasWithPdfButtons) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
@@ -384,9 +384,10 @@ export default function withPdfButtons(WrappedComponent) {
 	
 		return <WrappedComponent
 					{...props}
+					ref={ref}
+					alreadyHasWithPdfButtons={true}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
-					ref={ref}
 				/>;
 	}));
 }

package/src/Components/Hoc/withPermissions.js

@@ -97,7 +97,7 @@ export function canUser(permission, modelToCheck = null) {
 export default function withPermissions(WrappedComponent, forceUsePermissions = false) {
 	return forwardRef((props, ref) => {
 
-		if (!props.usePermissions && !forceUsePermissions) {
+		if ((!props.usePermissions && !forceUsePermissions) || props.alreadyHasWithPermissions) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -126,9 +126,10 @@ export default function withPermissions(WrappedComponent, forceUsePermissions =
 
 		return <WrappedComponent
 					{...props}
+					alreadyHasWithPermissions={true}
+					ref={ref}
 					canUser={canUserDecorator}
 					showPermissionsError={showPermissionsError}
-					ref={ref}
 				/>;
 	});
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -41,7 +41,7 @@ const presetButtons = [
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.disablePresetButtons) {
+		if (props.disablePresetButtons || props.alreadyHasWithPresetButtons) {
 			// bypass everything
 			return <WrappedComponent {...props} ref={ref} />;
 		}
@@ -433,8 +433,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 
 		return <WrappedComponent
 					{...propsToPass}
-					ref={ref}
 					disablePresetButtons={false}
+					alreadyHasWithPresetButtons={true}
+					ref={ref}
 					contextMenuItems={[
 						...localContextMenuItems,
 						...contextMenuItems,

package/src/Components/Hoc/withSelection.js

@@ -12,14 +12,7 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithSelection) {
-			return <WrappedComponent {...props} ref={ref} />;
-		}
-
-		if (props.setSelection) {
-			// bypass everything, since we're already using withSelection() in hierarchy.
-			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
-			// but we only need it defined once for the whole thing.
+		if (props.disableWithSelection || props.alreadyHasWithSelection) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -427,6 +420,7 @@ export default function withSelection(WrappedComponent) {
 					{...props}
 					ref={ref}
 					disableWithSelection={false}
+					alreadyHasWithSelection={true}
 					selection={getSelection()}
 					getSelection={getSelection}
 					setSelection={setSelection}

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.
@@ -12,7 +13,7 @@ import _ from 'lodash';
 export default function withToast(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithToast || props.showToast) {
+		if (props.disableWithToast || props.alreadyHasWithToast) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -79,8 +80,10 @@ export default function withToast(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
-					showToast={showToast}
+					alreadyHasWithToast={true}
+					disableWithToast={false}
 					ref={ref}
+					showToast={showToast}
 				/>;
 	});
 }

package/src/Components/Hoc/withTooltip.js

@@ -7,6 +7,11 @@ import _ from 'lodash';
 
 export default function withTooltip(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithTooltip) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				tooltip,
 				tooltipPlacement = 'bottom',
@@ -16,7 +21,11 @@ export default function withTooltip(WrappedComponent) {
 				...propsToPass
 			} = props;
 		
-		let component = <WrappedComponent {...propsToPass} ref={ref} />;
+		let component = <WrappedComponent
+							{...propsToPass}
+							alreadyHasWithTooltip={true}
+							ref={ref}
+						/>;
 
 		if (tooltip || !_.isEmpty(_tooltip)) {
 			component = <Tooltip

package/src/Components/Hoc/withValue.js

@@ -9,14 +9,7 @@ import _ from 'lodash';
 export default function withValue(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithValue) {
-			return <WrappedComponent {...props} ref={ref} />;
-		}
-
-		if (props.setValue) {
-			// bypass everything, since we're already using withValue() in hierarchy.
-			// For example, Combo has withValue(), and intenally it uses Input which also has withValue(),
-			// but we only need it defined once for the whole thing.
+		if (props.disableWithValue || props.alreadyHasWithValue) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -143,8 +136,9 @@ export default function withValue(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					disableWithValue={false}
+					alreadyHasWithValue={true}
+					ref={ref}
 					value={convertedValue}
 					setValue={setValueRef.current}
 					onChangeSelection={onChangeSelection}

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>