@onehat/ui 0.3.31 → 0.3.32

package/src/Components/Hoc/withPresetButtons.js

@@ -54,6 +54,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				disableDuplicate = !isEditor,
 				disablePrint = !isGrid,
 
+				// withComponent
+				self,
+
 				// withEditor
 				userCanEdit = true,
 				userCanView = true,
@@ -123,12 +126,14 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				return isDisabled;
 			},
 			getPresetButtonProps = (type) => {
-				let text,
+				let key,
+					text,
 					handler,
 					icon = null,
 					isDisabled = false;
 				switch(type) {
 					case 'add':
+						key = 'addBtn';
 						text = 'Add';
 						handler = onAdd;
 						icon = <Plus />;
@@ -140,6 +145,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'edit':
+						key = 'editBtn';
 						text = 'Edit';
 						handler = onEdit;
 						icon = <Edit />;
@@ -154,6 +160,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'delete':
+						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
 						icon = <Trash />;
@@ -168,6 +175,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'view':
+						key = 'viewBtn';
 						text = 'View';
 						handler = onView;
 						icon = <Eye />;
@@ -180,6 +188,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'copy':
+						key = 'copyBtn';
 						text = 'Copy to Clipboard';
 						handler = onCopyToClipboard;
 						icon = <Clipboard />;
@@ -192,6 +201,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'duplicate':
+						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = onDuplicate;
 						icon = <Duplicate />;
@@ -214,10 +224,13 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					default:
 				}
 				return {
+					key,
 					text,
 					handler,
 					icon,
 					isDisabled,
+					parent: self,
+					reference: key,
 				};
 			},
 			generatePresetButtons = () => {

package/src/Components/Hoc/withSideEditor.js

@@ -12,6 +12,11 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				Editor,
 				editorProps = {},
 				sideFlex = 100,
+
+				// withComponent
+				self,
+				
+				...propsToPass
 			} = props;
 
 		if (!Editor) {
@@ -25,12 +30,13 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								{...props}
 							/>}
 					east={<Editor
-								{...props}
+								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}
 								borderLeftWidth={1}
 								borderLeftColor="#ccc"
 								{...editorProps}
+								parent={self}
 							/>}
 				/>;
 	});

package/src/Components/Hoc/withWindowedEditor.js

@@ -32,6 +32,11 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown,
 				Editor,
 				editorProps = {},
+
+				// withComponent
+				self,
+				
+				...propsToPass
 			} = props;
 
 		if (!Editor) {
@@ -47,8 +52,9 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 						>
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}
-								{...props}
+								{...propsToPass}
 								{...editorProps}
+								parent={self}
 							/>
 						</Modal>}
 				</>;

package/src/Components/Icons/HighPriority.js

@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 101.44 83.8"
+      {...props}
+    >
+      <Path
+        d="M58.92 4.5L99.9 68.86c4.12 6.47-.53 14.94-8.2 14.94H9.74c-7.67 0-12.32-8.47-8.2-14.94L42.52 4.5c3.82-6 12.58-6 16.4 0zM34.64 72.71c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84zm12.66 13.92c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84zM66.8 72.71c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18H62l1.38 27.18h6.84z"
+        strokeWidth={0}
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/LowPriority.js

@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 101.44 83.8"
+      {...props}
+    >
+      <Path
+        d="M58.92 4.5L99.9 68.86c4.12 6.47-.53 14.94-8.2 14.94H9.74c-7.67 0-12.32-8.47-8.2-14.94L42.52 4.5c3.82-6 12.58-6 16.4 0zm-8.2 68.21c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84z"
+        strokeWidth={0}
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/MedPriority.js

@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 101.44 83.8"
+      {...props}
+    >
+      <Path
+        d="M58.92 4.5L99.9 68.86c4.12 6.47-.53 14.94-8.2 14.94H9.74c-7.67 0-12.32-8.47-8.2-14.94L42.52 4.5c3.82-6 12.58-6 16.4 0zM42.68 72.71c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84zm12.66 13.92c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84z"
+        strokeWidth={0}
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Pdf.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M0 64C0 28.7 28.7 0 64 0h160v128c0 17.7 14.3 32 32 32h128v144H176c-35.3 0-64 28.7-64 64v144H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0l128 128zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56h-16v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-16v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-32c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-16v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16h-32v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16h-32v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V368z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Screens/Manager.js

@@ -4,6 +4,7 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import withComponent from '../Hoc/withComponent.js';
 import IconButton from '../Buttons/IconButton';
 import FullWidth from '../Icons/FullWidth';
 import SideBySide from '../Icons/SideBySide';
@@ -15,7 +16,7 @@ const
 	MODE_FULL = 'MODE_FULL',
 	MODE_SIDE = 'MODE_SIDE';
 
-export default function ManagerScreen(props) {
+function ManagerScreen(props) {
 	const {
 			title,
 			sideModeComponent,
@@ -93,4 +94,6 @@ export default function ManagerScreen(props) {
 				{whichComponent}
 
 			</Column>;
-}
+}
+
+export default withComponent(ManagerScreen);

package/src/Components/Tab/TabBar.js

@@ -11,6 +11,7 @@ import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
 import IconButton from '../Buttons/IconButton.js';
 import Minimize from '../Icons/Minimize.js';
 import Maximize from '../Icons/Maximize.js';
@@ -19,7 +20,7 @@ import setSaved from '../../Functions/setSaved.js';
 import _ from 'lodash';
 
 
-export default function TabBar(props) {
+function TabBar(props) {
 	const {
 			tabs = [], // { _icon, title, content, path, items, }
 			content, // e.g. Expo Router slot
@@ -386,4 +387,6 @@ export default function TabBar(props) {
 						{renderedCurrentTabContent}
 					</Column>}
 			</Column>;
-}
+}
+
+export default withComponent(TabBar);

package/src/Components/Toolbar/Pagination.js

@@ -79,7 +79,8 @@ export default function Pagination(props) {
 						>
 							<Text mr={2}>Page</Text>
 							<Input
-								value={page}
+								keyboardType="numeric"
+								value={page?.toString()}
 								onChangeValue={(value) => Repository.setPage(value)}
 								maxValue={totalPages}
 								isDisabled={totalPages === 1}

package/src/Components/Tree/Tree.js

@@ -25,6 +25,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
+import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
@@ -1181,60 +1182,66 @@ function TreeComponent(props) {
 
 }
 
-export const Tree = withAlert(
-						withEvents(
-							withData(
-								// withMultiSelection(
-									withSelection(
-										withFilters(
-											withContextMenu(
-												TreeComponent
+export const Tree = withComponent(
+						withAlert(
+							withEvents(
+								withData(
+									// withMultiSelection(
+										withSelection(
+											withFilters(
+												withContextMenu(
+													TreeComponent
+												)
 											)
 										)
-									)
-								// )
+									// )
+								)
 							)
 						)
 					);
 
-export const SideTreeEditor = withAlert(
-									withEvents(
-										withData(
-											// withMultiSelection(
-												withSelection(
-													withSideEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	TreeComponent
+export const SideTreeEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												// withMultiSelection(
+													withSelection(
+														withSideEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		TreeComponent
+																	)
 																)
-															)
-														),
-														true // isTree
+															),
+															true // isTree
+														)
 													)
-												)
-											// )
+												// )
+											)
 										)
 									)
 								);
 
-export const WindowedTreeEditor = withAlert(
-									withEvents(
-										withData(
-											// withMultiSelection(
-												withSelection(
-													withWindowedEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	TreeComponent
+export const WindowedTreeEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												// withMultiSelection(
+													withSelection(
+														withWindowedEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		TreeComponent
+																	)
 																)
-															)
-														),
-														true // isTree
+															),
+															true // isTree
+														)
 													)
-												)
-											// )
+												// )
+											)
 										)
 									)
 								);

package/src/Components/Viewer/TagViewer.js

@@ -2,6 +2,7 @@ import {
 	Text,
 } from 'native-base';
 import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
 import _ from 'lodash';
 
 function TagViewer(props) {
@@ -25,4 +26,5 @@ function TagViewer(props) {
 				{...props}
 			>{values}</Text>;
 }
-export default TagViewer;
+
+export default withComponent(TagViewer);

package/src/Components/Viewer/Viewer.js

@@ -1,5 +1,4 @@
 import {
-	Button,
 	Column,
 	Icon,
 	ScrollView,
@@ -10,9 +9,11 @@ import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
 import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
@@ -25,7 +26,10 @@ function Viewer(props) {
 			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
 			columnDefaults = {}, // defaults for each Column defined in items (above)
 			record,
-			additionalViewButtons = [],
+			additionalViewButtons,
+
+			// withComponent
+			self,
 
 			// withData
 			Repository,
@@ -110,7 +114,10 @@ function Viewer(props) {
 			let element = <Element
 								value={value}
 								isEditable={false}
+								parent={self}
+								reference={name}
 								{...propsToPass}
+								{...editorTypeProps}
 							/>;
 			if (label) {
 				const labelProps = {};
@@ -146,6 +153,7 @@ function Viewer(props) {
 										h={350}
 										canEditorViewOnly={true}
 										uniqueRepository={true}
+										parent={self}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -158,11 +166,49 @@ function Viewer(props) {
 				});
 			}
 			return components;
+		},
+		buildAdditionalButtons = (configs) => {
+			const additionalButtons = [];
+			_.each(additionalViewButtons, (config) => {
+				const {
+						key,
+						text,
+						handler,
+						icon,
+						isDisabled,
+						color = '#fff',
+					} = config,
+					buttonProps = {};
+				if (key) {
+					buttonProps.key = key;
+					buttonProps.reference = key;
+				}
+				if (handler) {
+					buttonProps.onPress = handler;
+				}
+				if (icon) {
+					buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
+				}
+				if (isDisabled) {
+					buttonProps.isDisabled = isDisabled;
+				}
+				
+				const button = <Button
+									color={color}
+									ml={2}
+									parent={self}
+									reference={key}
+									{...buttonProps}
+								>{text}</Button>;
+				additionalButtons.push(button);
+			});
+			return additionalButtons;
 		};
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor;
+		showCloseBtn = !isSideEditor,
+		additionalButtons = buildAdditionalButtons();
 
 	return <Column flex={flex} {...props}>
 				<ScrollView width="100%" _web={{ height: 1 }}>
@@ -176,9 +222,9 @@ function Viewer(props) {
 											>To Edit</Button>
 										</Row>}
 						
-						{!_.isEmpty(additionalViewButtons) && 
+						{!_.isEmpty(additionalButtons) && 
 							<Row p={2} alignItems="center" justifyContent="flex-end">
-								{additionalViewButtons}
+								{additionalButtons}
 							</Row>}
 
 						{buildFromItems()}
@@ -201,16 +247,13 @@ function Viewer(props) {
 									color="#fff"
 								>Delete</Button>
 							</Row>}
-						{showCloseBtn && 
-							<Button.Group space={2}>
-								<Button
-									key="closeBtn"
-									onPress={onClose}
-									color="#fff"
-								>Close</Button>
-							</Button.Group>}
+						{showCloseBtn && <Button
+											key="closeBtn"
+											onPress={onClose}
+											color="#fff"
+										>Close</Button>}
 					</Footer>}
 			</Column>;
 }
 
-export default withPdfButton(Viewer);
+export default withComponent(withPdfButton(Viewer));

package/src/Components/index.js

@@ -8,6 +8,7 @@ import ArrayRadioGroup from './Form/Field/RadioGroup/ArrayRadioGroup.js';
 // import BackButton from '../Components/Buttons/BackButton.js';
 import Blank from './Blank.js';
 import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
+import Button from '../Components/Buttons/Button.js';
 // import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
 // import CKEditor from './Form/Field/CKEditor/CKEditor.js'; // web only
 import Checkbox from './Form/Field/Checkbox/Checkbox.js';
@@ -59,6 +60,7 @@ const components = {
 	// BackButton,
 	Blank,
 	BooleanCombo,
+	Button,
 	// CartButtonWithBadge,
 	Checkbox,
 	CheckboxGroup,

package/src/Functions/getIconButtonFromConfig.js

@@ -1,7 +1,7 @@
 import IconButton from '../Components/Buttons/IconButton.js';
 import UiGlobals from '../UiGlobals.js';
 
-export default function getIconButtonFromConfig(config, ix) {
+export default function getIconButtonFromConfig(config, ix, parent) {
 	const
 		{
 			key,
@@ -27,6 +27,8 @@ export default function getIconButtonFromConfig(config, ix) {
 		};
 	return <IconButton
 				key={key || ix}
+				parent={parent}
+				reference={key || ix}
 				onPress={handler}
 				icon={icon}
 				_icon={_icon}

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

@@ -1,14 +0,0 @@
-import {
-	Box,
-} from 'native-base';
-import _ from 'lodash';
-
-export default function Blank(props) {
-	const {
-			children,
-			...propsToPass
-		} = props;
-	return <Box {...propsToPass}>
-				{children}
-			</Box>;
-}