@onehat/ui 0.3.31 → 0.3.33

package/src/Components/Hoc/withEditor.js

@@ -22,6 +22,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableDelete = false,
 				disableDuplicate = false,
 				disableView = false,
+				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -30,6 +31,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				record,
 
+				// withComponent
+				self,
+
 				// parent container
 				selectorId,
 				selectorSelected,
@@ -199,7 +203,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					cb();
 				}
 			},
-			viewRecord = async () => {
+			onView = async () => {
 				if (!userCanView) {
 					return;
 				}
@@ -214,13 +218,16 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onAfterView(entity);
 				}
 			},
-			duplicateRecord = async () => {
+			onDuplicate = async () => {
 				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
 				if (selection.length !== 1) {
 					return;
 				}
+				if (useRemoteDuplicate) {
+					return onRemoteDuplicate();
+				}
 				const
 					entity = selection[0],
 					idProperty = Repository.getSchema().model.idProperty,
@@ -230,6 +237,40 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
+			onRemoteDuplicate = async () => {
+
+				// Call /duplicate on server
+				const 
+					Model = Repository.getSchema().name,
+					entity = selection[0],
+					id = entity.id;
+				const result = await Repository._send('POST', Model + '/duplicate', { id });
+				const {
+					root,
+					success,
+					total,
+					message
+				} = Repository._processServerResponse(result);
+
+				if (!success) {
+					throw Error(message);
+				}
+
+				const duplicateId = root.id;
+
+				// Filter the grid with only the duplicate's ID, and open it for editing.
+				self.filterById(duplicateId, () => { // because of the way useFilters is made, we have to use a callback, not await a Promise.
+
+					// Select the only node
+					const duplicateEntity = Repository.getById(duplicateId);
+					self.setSelection([duplicateEntity]);
+
+					// edit it
+					onEdit();
+
+				});
+
+			},
 			onEditorSave = async (data, e) => {
 				const
 					what = record || selection,
@@ -339,6 +380,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			setLastSelection(selection);
 		}, [selection]);
 
+		if (self) {
+			self.add = onAdd;
+			self.edit = onEdit;
+			self.delete = onDelete;
+			self.moveChildren = onMoveChildren;
+			self.deleteChildren = onDeleteChildren;
+			self.duplicate = onDuplicate;
+		}
+
 		if (lastSelection !== selection) {
 			// NOTE: If I don't calculate this on the fly for selection changes,
 			// we see a flash of the previous state, since useEffect hasn't yet run.
@@ -361,8 +411,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
 					onDelete={(!userCanEdit || disableDelete) ? null : onDelete}
-					onView={viewRecord}
-					onDuplicate={duplicateRecord}
+					onView={onView}
+					onDuplicate={onDuplicate}
 					onEditorSave={onEditorSave}
 					onEditorCancel={onEditorCancel}
 					onEditorDelete={(!userCanEdit || disableDelete) ? null : onEditorDelete}

package/src/Components/Hoc/withFilters.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useId, } from 'react';
+import { useState, useEffect, useId, useRef, } from 'react';
 import {
 	Column,
 	Modal,
@@ -46,6 +46,9 @@ export default function withFilters(WrappedComponent) {
 
 				// withData
 				Repository,
+
+				// withComponent
+				self,
 			} = props;
 
 		let modal = null,
@@ -59,7 +62,7 @@ export default function withFilters(WrappedComponent) {
 					defaultFilters: modelDefaultFilters,
 					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
-				id = props.id || useId(),
+				id = props.id || props.reference || useId(),
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
@@ -124,6 +127,7 @@ export default function withFilters(WrappedComponent) {
 			}
 
 			const
+				filterCallbackRef = useRef(),
 				[filters, setFiltersRaw] = useState(formattedStartingFilters), // array of formatted filters
 				[slots, setSlots] = useState(startingSlots), // array of field names user is currently filtering on; blank slots have a null entry in array
 				[modalFilters, setModalFilters] = useState([]),
@@ -230,6 +234,21 @@ export default function withFilters(WrappedComponent) {
 					}
 					return inArray(filterType, ['NumberRange', 'DateRange']);
 				},
+				filterById = (id, cb) => {
+					onClearFilters();
+					filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
+					const newFilters = _.clone(filters);
+					_.remove(newFilters, (filter) => {
+						return filter.field === 'q';
+					});
+					newFilters.unshift({
+						field: 'q',
+						title: 'Search all text fields',
+						type: 'Input',
+						value: 'id:' + id,
+					});
+					setFilters(newFilters, false, false);
+				},
 				renderFilters = () => {
 					const
 						filterProps = {
@@ -347,7 +366,7 @@ export default function withFilters(WrappedComponent) {
 							} else {
 								const
 									isAncillary = type === FILTER_TYPE_ANCILLARY,
-									filterName =  (isAncillary ? 'ancillary___' : '') + field;
+									filterName = (isAncillary ? 'ancillary___' : '') + field;
 								newFilterNames.push(filterName);
 								newRepoFilters.push({ name: filterName, value, });
 							}
@@ -362,12 +381,17 @@ export default function withFilters(WrappedComponent) {
 						setPreviousFilterNames(newFilterNames);
 					}
 
-					Repository.filter(newRepoFilters, null, false); // false so other filters remain
-
 					if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
 						Repository.setBaseParam('searchAncillary', true);
 					}
 
+					await Repository.filter(newRepoFilters, null, false); // false so other filters remain
+
+					if (filterCallbackRef.current) {
+						filterCallbackRef.current(); // call the callback
+						filterCallbackRef.current = null; // clear the callback
+					}
+
 					if (!isReady) {
 						setIsReady(true);
 					}
@@ -378,6 +402,11 @@ export default function withFilters(WrappedComponent) {
 				return null;
 			}
 
+			if (self) {
+				self.filterById = filterById;
+				self.setFilters = setFilters;
+			}
+
 			const
 				renderedFilters = renderFilters(),
 				hasFilters = !!renderedFilters.length;
@@ -499,6 +528,7 @@ export default function withFilters(WrappedComponent) {
 									editorType={EDITOR_TYPE__PLAIN}
 									flex={1}
 									startingValues={formStartingValues}
+									minHeight={minHeight}
 									items={[
 										{
 											type: 'Column',

package/src/Components/Hoc/withInlineEditor.js

@@ -30,6 +30,9 @@ export default function withInlineEditor(WrappedComponent) {
 				onEditorClose,
 				editorStateRef,
 
+				// withComponent
+				self,
+
 				// withSelection
 				selection,
 
@@ -102,6 +105,7 @@ export default function withInlineEditor(WrappedComponent) {
 									zIndex={10}
 								>
 									{isEditorShown && <Form
+															parent={self}
 															editorType={EDITOR_TYPE__INLINE}
 															editorStateRef={editorStateRef}
 															record={selection[0]}

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';
@@ -149,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;
@@ -202,7 +201,7 @@ export default function withPdfButton(WrappedComponent) {
 					{...props}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
-				/>;
+				/>
 				{modal}
 			</>;
 	};

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/withSelection.js

@@ -27,6 +27,9 @@ export default function withSelection(WrappedComponent) {
 				autoSelectFirstItem = false,
 				fireEvent,
 
+				// withComponent
+				self,
+
 				// withValue
 				value,
 				setValue,
@@ -309,6 +312,19 @@ export default function withSelection(WrappedComponent) {
 
 		}, []);
 
+		if (self) {
+			self.setSelection = setSelection;
+			self.selectNext = selectNext;
+			self.selectPrev = selectPrev;
+			self.addToSelection = addToSelection;
+			self.removeFromSelection = removeFromSelection;
+			self.deselectAll = deselectAll;
+			self.selectRangeTo = selectRangeTo;
+			self.isInSelection = isInSelection;
+			self.getIdsFromLocalSelection = getIdsFromLocalSelection;
+			self.getDisplayValuesFromSelection = getDisplayValuesFromLocalSelection;
+		}
+
 		if (usesWithValue) {
 			useEffect(() => {
 				if (!isReady) {

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}