@onehat/ui 0.3.30 → 0.3.32

package/src/Components/Hoc/withPdfButton.js

@@ -9,6 +9,7 @@ import Inflector from 'inflector-js';
 import qs from 'qs';
 import FormPanel from '../Panel/FormPanel.js';
 import inArray from '../../Functions/inArray.js';
+import Pdf from '../Icons/Pdf.js';
 import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import { EDITOR_TYPE__PLAIN } from '@onehat/ui/src/Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -46,27 +47,34 @@ export default function withPdfButton(WrappedComponent) {
 				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
 
 				if (!_.isEmpty(ancillaryItems)) {
+					const
+						ancillaryItemsClone = _.cloneDeep(ancillaryItems),
+						items = [];
+					_.each(ancillaryItemsClone, (ancillaryItem) => { // clone, as we don't want to alter the item by reference
+						let name;
+						if (ancillaryItem.model) {
+							name = Inflector.underscore(ancillaryItem.model);
+						} else {
+							name = ancillaryItem.title;
+						}
+						if (!inArray(name, ['Photos', 'Videos', 'Files'])) {
+							return;
+						}
+						name = 'ancillary___' + name;
+						items.push({
+							title: ancillaryItem.title,
+							label: ancillaryItem.title,
+							name,
+							type: 'Checkbox',
+						});
+					});
 					modalItems.push({
 						type: 'FieldSet',
 						title: 'Ancillary Items',
 						defaults: {
 							labelWidth: '90%',
 						},
-						items: _.map(_.cloneDeep(ancillaryItems), (ancillaryItem) => { // clone, as we don't want to alter the item by reference
-							let name;
-							if (ancillaryItem.model) {
-								name = Inflector.underscore(ancillaryItem.model);
-							} else {
-								name = ancillaryItem.title;
-							}
-							name = 'ancillary___' + name;
-							return {
-								title: ancillaryItem.title,
-								label: ancillaryItem.title,
-								name,
-								type: 'Checkbox',
-							};
-						}),
+						items,
 						showToggleAllCheckbox: true,
 						isCollapsible: false,
 					});
@@ -142,19 +150,17 @@ export default function withPdfButton(WrappedComponent) {
 				window.open(url + queryString, '_blank');
 			};
 
-		const button = <Button
-							key="viewPdfBtn"
-							borderRadius="md"
-							colorScheme="primary"
-							flexDirection="row"
-							justifyContent="center"
-							alignItems="center"
-							px={4}
-							onPress={(e) => setIsModalShown(true)}
-						>View PDF</Button>;
-		additionalEditButtons.unshift(button);
+		const button = {
+			key: 'viewPdfBtn',
+			text: 'View PDF',
+			icon: Pdf,
+			handler: () => {
+				setIsModalShown(true);
+			},
+		};
+		additionalEditButtons.push(button);
 		if (additionalEditButtons !== additionalViewButtons) { // Ensure they're NOT the same object, otherwise this would be adding it twice!
-			additionalViewButtons.unshift(button);
+			additionalViewButtons.push(button);
 		}
 	
 		let modal = null;
@@ -195,7 +201,7 @@ export default function withPdfButton(WrappedComponent) {
 					{...props}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
-				/>;
+				/>
 				{modal}
 			</>;
 	};

package/src/Components/Hoc/withPresetButtons.js

@@ -35,6 +35,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				contextMenuItems,
 				additionalToolbarButtons,
 				onChangeColumnsConfig,
+				verifyCanEdit,
+				verifyCanDelete,
+				verifyCanDuplicate,
 				...propsToPass
 			} = props,
 			{
@@ -51,6 +54,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				disableDuplicate = !isEditor,
 				disablePrint = !isGrid,
 
+				// withComponent
+				self,
+
 				// withEditor
 				userCanEdit = true,
 				userCanView = true,
@@ -120,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 />;
@@ -137,6 +145,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'edit':
+						key = 'editBtn';
 						text = 'Edit';
 						handler = onEdit;
 						icon = <Edit />;
@@ -146,8 +155,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
+						if (verifyCanEdit && !verifyCanEdit(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'delete':
+						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
 						icon = <Trash />;
@@ -157,8 +170,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
+						if (verifyCanDelete && !verifyCanDelete(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'view':
+						key = 'viewBtn';
 						text = 'View';
 						handler = onView;
 						icon = <Eye />;
@@ -171,6 +188,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'copy':
+						key = 'copyBtn';
 						text = 'Copy to Clipboard';
 						handler = onCopyToClipboard;
 						icon = <Clipboard />;
@@ -183,6 +201,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'duplicate':
+						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = onDuplicate;
 						icon = <Duplicate />;
@@ -193,6 +212,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || selection.length > 1) {
 							isDisabled = true;
 						}
+						if (verifyCanDuplicate && !verifyCanDuplicate(selection)) {
+							isDisabled = true;
+						}
 						break;
 					// case 'print':
 					// 	text = 'Print';
@@ -202,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,
@@ -109,7 +113,11 @@ function Viewer(props) {
 			
 			let element = <Element
 								value={value}
+								isEditable={false}
+								parent={self}
+								reference={name}
 								{...propsToPass}
+								{...editorTypeProps}
 							/>;
 			if (label) {
 				const labelProps = {};
@@ -145,6 +153,7 @@ function Viewer(props) {
 										h={350}
 										canEditorViewOnly={true}
 										uniqueRepository={true}
+										parent={self}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -157,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 }}>
@@ -175,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()}
@@ -200,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));