@onehat/ui 0.3.30 → 0.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.30",
+	"version": "0.3.32",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Buttons/Button.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef, } from 'react';
+import {
+	Button,
+} from 'native-base';
+import withComponent from '../Hoc/withComponent.js';
+
+const ButtonComponent = function(props) {
+	const {
+			self,
+		} = props,
+		buttonRef = useRef();
+	
+	useEffect(() => {
+		self.ref = buttonRef.current;
+	}, []);
+
+	return <Button ref={buttonRef} {...props} />;
+}
+
+export default withComponent(ButtonComponent);

package/src/Components/Buttons/IconButton.js

@@ -1,62 +1,79 @@
-import React from 'react';
+import React, { useEffect, useRef, } from 'react';
 import {
 	Icon,
 	Pressable,
 	Spinner,
 	Tooltip,
 } from 'native-base';
+import withComponent from '../Hoc/withComponent.js';
 import styles from '../../Constants/Styles.js';
 import _ from 'lodash';
 
-const IconButton = React.forwardRef((props, ref) => {
-	const {
-			// _icon, // props for the icon component
-			// icon, // The actual icon component to use
-			_spinner,
-			isLoading = false,
-			tooltip,
-			tooltipPlacement = 'bottom',
-		} = props;
-	const propsIcon = props._icon || {};
-	let icon = props.icon,
-		ret;
-	if (isLoading) {
-		icon = <Spinner {..._spinner} />;
-	}
-	if (React.isValidElement(icon)) {
-		if (!_.isEmpty(propsIcon)) {
-			icon = React.cloneElement(icon, {...propsIcon});
+const
+	IconButton = (props) => {
+		const {
+				// _icon, // props for the icon component
+				// icon, // The actual icon component to use
+				_spinner,
+				isLoading = false,
+				tooltip,
+				tooltipPlacement = 'bottom',
+				self,
+			} = props;
+		let ref = props.outerRef;
+
+		if (!ref) {
+			ref = useRef();
 		}
-	} else {
-		icon = <Icon as={icon} {...propsIcon} />;
-	}
-	const pressable = <Pressable
-							ref={ref}
-							borderRadius="md"
-							colorScheme="primary"
-							flexDirection="row"
-							justifyContent="center"
-							alignItems="center"
-							p={2}
-							// bg={styles.ICON_BUTTON_BG}
-							_hover={{
-								bg: styles.ICON_BUTTON_BG_HOVER,
-							}}
-							_disabled={{
-								bg: styles.ICON_BUTTON_BG_DISABLED,
-							}}
-							_pressed={{
-								bg: styles.ICON_BUTTON_BG_PRESSED,
-							}}
-							{...props}
-						>
-						{icon}
-						</Pressable>;
-	ret = pressable;
-	if (tooltip) {
-		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
-	}
-	return ret;
-});
 
-export default IconButton;
+		useEffect(() => {
+			self.ref = ref.current;
+		}, []);
+
+		const propsIcon = props._icon || {};
+		let icon = props.icon,
+			ret;
+		if (isLoading) {
+			icon = <Spinner {..._spinner} />;
+		}
+		if (React.isValidElement(icon)) {
+			if (!_.isEmpty(propsIcon)) {
+				icon = React.cloneElement(icon, {...propsIcon});
+			}
+		} else {
+			icon = <Icon as={icon} {...propsIcon} />;
+		}
+		const pressable = <Pressable
+								ref={ref}
+								borderRadius="md"
+								colorScheme="primary"
+								flexDirection="row"
+								justifyContent="center"
+								alignItems="center"
+								p={2}
+								// bg={styles.ICON_BUTTON_BG}
+								_hover={{
+									bg: styles.ICON_BUTTON_BG_HOVER,
+								}}
+								_disabled={{
+									bg: styles.ICON_BUTTON_BG_DISABLED,
+								}}
+								_pressed={{
+									bg: styles.ICON_BUTTON_BG_PRESSED,
+								}}
+								{...props}
+							>
+							{icon}
+							</Pressable>;
+		ret = pressable;
+		if (tooltip) {
+			ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
+		}
+		return ret;
+	},
+	IconButtonComponent = withComponent(IconButton);
+
+// withComponent needs us to forwardRef
+export default React.forwardRef((props, ref) => {
+	return <IconButtonComponent {...props} outerRef={ref} />;
+});

package/src/Components/Buttons/SquareButton.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+	Icon,
+	Pressable,
+	Text,
+} from 'native-base';
+import UiGlobals from '../../UiGlobals.js';
+
+export default function SquareButton(props) {
+	const {
+			text,
+			isActive = false,
+			activeColor,
+			invertColorWhenActive = false,
+			disableInteractions = false,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		color = invertColorWhenActive && isActive ? '#fff' : '#000';
+	const propsIcon = props._icon || {};
+	let icon = props.icon;
+	if (!icon) {
+		throw Error('icon missing');
+	}
+	if (!text) {
+		throw Error('text missing');
+	}
+	
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
+
+	const
+		hoverProps = {},
+		pressedProps = {};
+	if (!disableInteractions) {
+		hoverProps.bg = styles.ICON_BUTTON_BG_HOVER;
+		pressedProps.bg = styles.ICON_BUTTON_BG_PRESSED;
+	}
+	
+	return <Pressable
+				borderRadius="md"
+				flexDirection="column"
+				justifyContent="center"
+				alignItems="center"
+				p={2}
+				{...propsToPass}
+				bg={isActive ? activeColor || '#56a6f8' : '#fff'}
+				// _hover={hoverProps}
+				// _pressed={pressedProps}
+			>
+				<Icon as={icon} color={color} size="xl" />
+				<Text fontSize={20} color={color}>{text}</Text>
+			</Pressable>;
+}
+

package/src/Components/Container/Container.js

@@ -12,12 +12,13 @@ import {
 	UI_MODE_REACT_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
+import withComponent from '../Hoc/withComponent.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
 import _ from 'lodash';
 
-export default function Container(props) {
+function Container(props) {
 	const {
 			center,
 			north,
@@ -281,3 +282,5 @@ export default function Container(props) {
 				{southComponent}
 			</Column>;
 }
+
+export default withComponent(Container);

package/src/Components/Container/ScreenContainer.js

@@ -8,10 +8,11 @@ import {
 	ScrollView,
 	KeyboardAvoidingView,
 } from 'native-base';
+import withComponent from '../Hoc/withComponent.js';
 // import { useHeaderHeight } from '@react-navigation/elements';
 // import testProps from '../OneHat/functions/testProps';
 
-export default function ScreenContainer(props) {
+function ScreenContainer(props) {
 	const {
 			screenName = 'ScreenContainer',
 			p = 0,
@@ -79,3 +80,5 @@ export default function ScreenContainer(props) {
 	}
 	return column;
 }
+
+export default withComponent(ScreenContainer);

package/src/Components/Editor/Editor.js

@@ -1,11 +1,12 @@
 import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
+import withComponent from '../Hoc/withComponent.js';
 import Form from '../Form/Form.js';
 import Viewer from '../Viewer/Viewer.js';
 import _ from 'lodash';
 
-export default function Editor(props) {
+function Editor(props) {
 	const {
 			isEditorViewOnly,
 			onEditorCancel: onCancel,
@@ -14,6 +15,11 @@ export default function Editor(props) {
 			onEditorDelete: onDelete,
 			editorMode,
 			onEditMode,
+			_viewer = {},
+			_form = {},
+
+			// withComponent
+			self,
 
 			// withSelection
 			selection,
@@ -36,6 +42,9 @@ export default function Editor(props) {
 					onEditMode={isEditorViewOnly ? null : onEditMode}
 					onClose={onClose}
 					onDelete={onDelete}
+					parent={self}
+					reference="viewer"
+					{..._viewer}
 				/>;
 	}
 
@@ -46,5 +55,10 @@ export default function Editor(props) {
 				onSave={onSave}
 				onClose={onClose}
 				onDelete={onDelete}
+				parent={self}
+				reference="form"
+				{..._form}
 			/>;
 }
+
+export default withComponent(Editor);

package/src/Components/Form/Field/CKEditor/CKEditor.js

@@ -8,6 +8,7 @@ import {
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';
 import Editor from '../../../../../ckeditor5/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
+import withComponent from '../../../Hoc/withComponent.js';
 import withValue from '../../../Hoc/withValue.js';
 import withTooltip from '../../../Hoc/withTooltip.js';
 import _ from 'lodash';
@@ -53,7 +54,7 @@ const
 					/>
 				</Row>;
 	},
-	CKEditorField = withValue(CKEditorElement);
+	CKEditorField = withComponent(withValue(CKEditorElement));
 	
 
 export default CKEditorField;

package/src/Components/Form/Field/Checkbox/Checkbox.js

@@ -1,4 +1,5 @@
 import CheckboxButton from '../../../Buttons/CheckboxButton.js';
+import withComponent from '../../../Hoc/withComponent.js';
 import withValue from '../../../Hoc/withValue.js';
 import _ from 'lodash';
 
@@ -21,6 +22,6 @@ const
 				/>;
 	
 	},
-	CheckboxEField = withValue(CheckboxElement);
+	CheckboxEField = withComponent(withValue(CheckboxElement));
 
 export default CheckboxEField;

package/src/Components/Form/Field/Color.js

@@ -12,6 +12,7 @@ import {
 } from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
 import Input from '../Field/Input.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import _ from 'lodash';
@@ -223,4 +224,4 @@ export function ColorElement(props) {
 	
 }
 
-export default withValue(ColorElement);
+export default withComponent(withValue(ColorElement));

package/src/Components/Form/Field/Combo/Combo.js

@@ -12,6 +12,7 @@ import {
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
+import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withSelection from '../../../Hoc/withSelection.js';
 import withValue from '../../../Hoc/withValue.js';
@@ -540,10 +541,12 @@ export function ComboComponent(props) {
 	return comboComponent;
 }
 
-export const Combo = withData(
-						withValue(
-							withSelection(
-								ComboComponent
+export const Combo = withComponent(
+						withData(
+							withValue(
+								withSelection(
+									ComboComponent
+								)
 							)
 						)
 					);

package/src/Components/Form/Field/Date.js

@@ -20,6 +20,7 @@ import Formatters from '@onehat/data/src/Util/Formatters.js';
 import Parsers from '@onehat/data/src/Util/Parsers.js';
 import Input from '../Field/Input.js';
 import IconButton from '../../Buttons/IconButton.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import Calendar from '../../Icons/Calendar.js';
@@ -365,4 +366,4 @@ export function DateElement(props) {
 	// 		</Box>;
 };
 
-export default withValue(DateElement);
+export default withComponent(withValue(DateElement));

package/src/Components/Form/Field/DisplayField.js

@@ -3,6 +3,7 @@ import {
 	Text,
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 
@@ -21,7 +22,7 @@ const
 					{...props}
 				>{text}</Text>;
 	},
-	DisplayField = withValue(DisplayElement);
+	DisplayField = withComponent(withValue(DisplayElement));
 
 // Tooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {

package/src/Components/Form/Field/File.js

@@ -17,6 +17,7 @@ import {
 	FILE_MODE_FILE,
 } from '../../../Constants/File.js';
 import IconButton from '../../Buttons/IconButton.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import File from '../../Icons/File.js';
 import Trash from '../../Icons/Trash.js';
@@ -219,4 +220,4 @@ function FileElement(props) {
 			</div>;
 }
 
-export default withValue(FileElement);
+export default withComponent(withValue(FileElement));

package/src/Components/Form/Field/Input.js

@@ -7,6 +7,7 @@ import {
 	AUTO_SUBMIT_DELAY,
 } from '../../../Constants/Input.js';
 import UiGlobals from '../../../UiGlobals.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
@@ -89,7 +90,7 @@ function InputElement(props) {
 }
 
 const
-	InputField = withValue(InputElement),
+	InputField = withComponent(withValue(InputElement)),
 	InputForwardRef = React.forwardRef((props, ref) => {
 		return <InputField {...props} outerRef={ref} component="Input" />;
 	});

package/src/Components/Form/Field/Number.js

@@ -10,6 +10,7 @@ import {
 } from '../../../Constants/Input.js';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import Plus from '../../Icons/Plus.js';
@@ -165,4 +166,4 @@ function NumberElement(props) {
 			</Row>;
 }
 
-export default withValue(NumberElement);
+export default withComponent(withValue(NumberElement));

package/src/Components/Form/Field/RadioGroup/RadioGroup.js

@@ -4,6 +4,7 @@ import {
 	Radio,
 	Row,
 } from 'native-base';
+import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
 import withTooltip from '../../../Hoc/withTooltip.js';
@@ -55,7 +56,7 @@ const
 					{radios}
 				</Radio.Group>;
 	},
-	RadioGroupField = withValue(withData(RadioGroupElement));
+	RadioGroupField = withComponent(withValue(withData(RadioGroupElement)));
 
 // Tooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {

package/src/Components/Form/Field/Text.js

@@ -3,6 +3,7 @@ import {
 	Text,
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 
 const
@@ -20,7 +21,7 @@ const
 					{...props}
 				>{props.value}</Text>;
 	},
-	TextField = TextElement; // NOT using withValue on Text element, as this element is simply for display purposes!
+	TextField = withComponent(TextElement); // NOT using withValue on Text element, as this element is simply for display purposes!
 
 // Tooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {

package/src/Components/Form/Field/TextArea.js

@@ -3,6 +3,7 @@ import {
 	TextArea,
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
@@ -23,9 +24,9 @@ const
 					value={value}
 				/>;
 	},
-	TextAreaField = withValue(TextAreaElement);
+	TextAreaField = withComponent(withValue(TextAreaElement));
 
-// Tooltip needs us to forwardRef
+// withTooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {
 	return <TextAreaField {...props} outerRef={ref} />;
 }));

package/src/Components/Form/Field/Toggle.js

@@ -9,6 +9,7 @@ import {
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
+import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
@@ -72,7 +73,7 @@ const
 					</Pressable>
 				</Row>;
 	},
-	ToggleField = withValue(ToggleElement);
+	ToggleField = withComponent(withValue(ToggleElement));
 
 // Tooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {