@onehat/ui 0.4.70 → 0.4.72

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	Pressable,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 
@@ -13,14 +14,14 @@ export default function HeaderColumnSelectorHandle(props) {
 				_hover={{ bg: 'grey-200' }}
 				_pressed={{ bg: 'grey-300' }}
 				onPress={showColumnsSelector}
-				className={`
-					HeaderColumnSelectorHandle
-					bg-grey-100
-					h-full
-					w-3
-					items-center
-					justify-center
-				`}
+				className={clsx(
+					'HeaderColumnSelectorHandle',
+					'bg-grey-100',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+				)}
 			>
 				<Icon
 					as={Gear}

package/src/Components/Grid/HeaderReorderHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';
@@ -13,14 +14,14 @@ function HeaderReorderHandle(props) {
 
 	return <VStack
 				style={styles.ewResize}
-				className={`
-					HeaderReorderHandle
-					h-full
-					w-3
-					items-center
-					justify-center
-					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
-				`}
+				className={clsx(
+					'HeaderReorderHandle',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+					isDragging ? 'bg-grey-300' : 'bg-grey-100',
+				)}
 			>
 				<Icon
 					as={GripVertical}

package/src/Components/Grid/HeaderResizeHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';
@@ -13,14 +14,14 @@ function HeaderResizeHandle(props) {
 
 	return <VStack
 				style={styles.ewResize}
-				className={`
-					HeaderResizeHandle
-					h-full
-					w-3
-					items-center
-					justify-center
-					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
-				`}
+				className={clsx(
+					'HeaderResizeHandle',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+					isDragging ? 'bg-grey-300' : 'bg-grey-100',
+				)}
 			>
 				<Icon
 					as={GripLinesVertical}

package/src/Components/Grid/NoRecordsFound.js

@@ -3,6 +3,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
@@ -23,9 +24,9 @@ export default function NoRecordsFound(props) {
 							icon={Rotate}
 							_icon={{
 								size: 'md',
-								className: `
-									text-grey-400
-								`,
+								className: clsx(
+									'text-grey-400',
+								),
 							}}
 							onPress={onRefresh}
 							variant="outline"

package/src/Components/Grid/RowDragHandle.js

@@ -1,19 +1,35 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function RowDragHandle(props) {	return <VStack
-			style={styles.ewResize}
-			className="RowDragHandle bg-grey-100 w-[7px] items-center justify-center select-none"
-		>
-				<Icon
-					as={GripVertical}
-					size="xs"
-					className="handle w-full h-full text-[#ccc]" />
-			</VStack>;
-}
+const RowDragHandle = forwardRef(function(props, ref) {
+	let className = clsx(
+		'RowDragHandle',
+		'bg-grey-100',
+		'w-[17px]',
+		'items-center',
+		'justify-center',
+		'select-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <VStack
+				{...props}
+				ref={ref}
+				style={styles.ewResize}
+				className={className}
+			>
+					<Icon
+						as={GripVertical}
+						size="xs"
+						className="handle w-full h-full text-[#ccc]" />
+				</VStack>;
+});
 
 export default RowDragHandle;

package/src/Components/Grid/RowHandle.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
+import clsx from 'clsx';
+import Arcs from '../Icons/Arcs.js';
+
+const RowHandle = forwardRef(function RowHandle(props, ref) {
+	const {
+			isDragSource,
+			isDraggable
+		} = props;
+	let className = clsx(
+		'RowHandle',
+		'h-full',
+		'w-[40px]',
+		'px-2',
+		'items-center',
+		'justify-center',
+		'select-none',
+		'cursor-pointer'
+	);
+	return <VStack
+				ref={isDragSource || isDraggable ? ref : undefined}
+				className={className}
+			>
+				<Icon as={Arcs} size="xs" className="w-full h-full text-[#ddd]" />
+			</VStack>;
+});
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		const {
+				showSelectHandle,
+				isDragSource,
+				isDraggable
+			} = props;
+		let tooltipParts = [];
+		if (showSelectHandle) {
+			tooltipParts.push('Select');
+		}
+		if (isDragSource || isDraggable) {
+			tooltipParts.push('Drag');
+		}
+		const tooltip = tooltipParts.length === 2 ? tooltipParts.join(' or ') : tooltipParts[0];
+		return <WrappedComponent
+					tooltip={tooltip}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withTooltip(RowHandle));

package/src/Components/Grid/RowSelectHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Arcs from '../Icons/Arcs.js';
 
 function RowSelectHandle(props) {

package/src/{Hooks → Components/Grid}/useAsyncRenderers.js

@@ -7,7 +7,7 @@ export default function useAsyncRenderers(columnsConfig, item) {
 
 	useEffect(() => {
 		const asyncConfigs = columnsConfig.filter(config => 
-			config.renderer && typeof config.renderer === 'function'
+			config.isAsync && config.renderer && typeof config.renderer === 'function'
 		);
 
 		if (asyncConfigs.length === 0) {

package/src/Components/Hoc/Secondary/withSecondaryData.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 export default function withSecondaryData(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithData) {
+		if (props.secondaryDisableWithData || props.secondaryAlreadyHasWithData) {
 			return <WrappedComponent {...props} />;
 		}
 		
@@ -104,6 +104,7 @@ export default function withSecondaryData(WrappedComponent) {
 		return <WrappedComponent
 					{...propsToPass}
 					secondaryDisableWithData={false}
+					secondaryAlreadyHasWithData={true}
 					SecondaryRepository={LocalSecondaryRepository}
 					secondaryModel={secondaryModel}
 					secondaryData={secondaryData}

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -24,7 +24,7 @@ import _ from 'lodash';
 export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithEditor) {
+		if (props.secondaryDisableWithEditor || props.secondaryAlreadyHasWithEditor) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
@@ -169,7 +169,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryDefaultValues) {
 						_.merge(defaultValuesToUse, secondaryDefaultValues);
 					}
-					addValues = [...defaultValuesToUse];
+					addValues = {...defaultValuesToUse};
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {
@@ -643,8 +643,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithEditor={false}
+					secondaryAlreadyHasWithEditor={true}
+					ref={ref}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
 					secondaryIsEditorShown={secondaryIsEditorShown}

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -14,7 +14,7 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithSelection) {
+		if (props.secondaryDisableWithSelection || props.secondaryAlreadyHasWithSelection) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -414,8 +414,9 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithSelection={false}
+					secondaryAlreadyHasWithSelection={true}
+					ref={ref}
 					secondarySelection={secondaryGetSelection()}
 					secondaryGetSelection={secondaryGetSelection}
 					secondarySetSelection={secondarySetSelection}

package/src/Components/Hoc/Secondary/withSecondaryValue.js

@@ -10,7 +10,7 @@ import _ from 'lodash';
 export default function withSecondaryValue(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithValue) {
+		if (props.secondaryDisableWithValue || props.secondaryAlreadyHasWithValue) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -146,6 +146,7 @@ export default function withSecondaryValue(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					secondaryDisableWithValue={false}
+					secondaryAlreadyHasWithValue={true}
 					secondaryValue={convertedValue}
 					secondarySetValue={secondarySetValue}
 					secondaryOnChangeSelection={secondaryOnChangeSelection}

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.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';
@@ -82,11 +83,11 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 								{...secondaryEditorProps}
 								parent={self}
 								reference="secondaryEditor"
-								className={`
-									bg-white
-									shadow-lg
-									rounded-lg
-								`}
+								className={clsx(
+									'bg-white',
+									'shadow-lg',
+									'rounded-lg',
+								)}
 							/>
 						</Modal>}
 				</>;

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';
@@ -18,7 +19,7 @@ import _ from 'lodash';
 function withAlert(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithAlert || props.alert) {
+		if (props.disableWithAlert || props.alreadyHasWithAlert) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -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>;
 			},
@@ -169,6 +170,8 @@ function withAlert(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					ref={ref}
+					disableWithAlert={false}
+					alreadyHasWithAlert={true}
 					alert={onAlert}
 					confirm={onConfirm}
 					hideAlert={hideModal}

package/src/Components/Hoc/withCollapsible.js

@@ -2,8 +2,12 @@ import { forwardRef, useState } from 'react';
 
 export default function withCollapsible(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		const
-			{
+
+		if (props.alreadyHasWithCollapsible) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
+		const {
 				isCollapsed = false,
 				startsCollapsed = false,
 				setIsCollapsed,
@@ -12,10 +16,11 @@ export default function withCollapsible(WrappedComponent) {
 			[localIsCollapsed, setLocalIsCollapsed] = useState(startsCollapsed);
 
 		return <WrappedComponent
-					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
-					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 					{...props}
+					alreadyHasWithCollapsible={true}
 					ref={ref}
+					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
+					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 				/>;
 	});
 }

package/src/Components/Hoc/withComponent.js

@@ -14,6 +14,10 @@ import _ from 'lodash';
 export default function withComponent(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
+		// if (props.disableWithComponent || props.alreadyHasWithComponent) {
+		// 	return <WrappedComponent {...props} ref={ref} />;
+		// }
+
 		props = _.clone(props); // without cloning, I couldn't write to props
 
 		// translate h, w, and flex tokens to styles
@@ -90,6 +94,8 @@ export default function withComponent(WrappedComponent) {
 					self={selfRef.current}
 					{...propsToPass}
 					ref={ref}
+					disableWithComponent={false}
+					// alreadyHasWithComponent={true}
 				/>;
 	});
 }

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';
@@ -10,6 +11,11 @@ import _ from 'lodash';
 
 export default function withContextMenu(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithContextMenu) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				// extract and pass
 				disableContextMenu = false,
@@ -63,28 +69,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 +125,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,
@@ -160,6 +166,7 @@ export default function withContextMenu(WrappedComponent) {
 
 		return <WrappedComponent
 					{...propsToPass}
+					alreadyHasWithContextMenu={true}
 					ref={ref}
 					onContextMenu={onContextMenu}
 				/>;

package/src/Components/Hoc/withData.js

@@ -12,7 +12,7 @@ import _ from 'lodash';
 export default function withData(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithData) {
+		if (props.disableWithData || props.alreadyHasWithData) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 		
@@ -121,8 +121,9 @@ export default function withData(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					disableWithData={false}
+					alreadyHasWithData={true}
+					ref={ref}
 					Repository={LocalRepository}
 					fields={fields}
 					idField={idField}