@onehat/ui 0.3.57 → 0.3.59

package/src/Components/Hoc/withEditor.js

@@ -35,6 +35,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				record,
 				onChange,
+				onSave,
+				newEntityDisplayValue,
 
 				// withComponent
 				self,
@@ -57,6 +59,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			} = props,
 			listeners = useRef({}),
 			editorStateRef = useRef(),
+			newEntityDisplayValueRef = useRef(),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
@@ -81,6 +84,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				listeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
 			},
+			getNewEntityDisplayValue = () => {
+				return newEntityDisplayValueRef.current;
+			},
 			onAdd = async () => {
 				const defaultValues = Repository.getSchema().getDefaultValues();
 				let addValues = _.clone(defaultValues);
@@ -89,6 +95,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					addValues[selectorId] = selectorSelected.id;
 				}
 
+				if (getNewEntityDisplayValue()) {
+					const displayPropertyName = Repository.getSchema().model.displayProperty;
+					addValues[displayPropertyName] = getNewEntityDisplayValue();
+				}
+
 				if (getListeners().onBeforeAdd) {
 					const listenerResult = await getListeners().onBeforeAdd();
 					if (listenerResult === false) {
@@ -116,6 +127,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// Unmap the values, so we can input true originalData
 				addValues = Repository.unmapData(addValues);
 
+
 				setIsAdding(true);
 				setIsSaving(true);
 				const entity = await Repository.add(addValues, false, true);
@@ -260,6 +272,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					entity = selection[0],
 					id = entity.id;
 				const result = await Repository._send('POST', Model + '/duplicate', { id });
+				if (!result) {
+					return;
+				}
 				const {
 					root,
 					success,
@@ -273,15 +288,22 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				const duplicateId = root.id;
 
+				// TODO: I don't like this.
+				// Currently, we filter the repository by only the new Entity, then select the entity for editing.
+				// There is a 2-second delay between filtering and being able to select, and this is unacceptable.
+				// Why do we filter for just the new entity? Because it's not guaranteed to show up in the grid based on sorting.
+				// Can't we just manually add this record to the repository at the top and then edit it?
+
 				// 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]);
+					setTimeout(() => {
+						setSelection([duplicateEntity]);
 
-					// edit it
-					onEdit();
+						onEdit();
+					}, 2000); // we need this delay!
 
 				});
 
@@ -326,6 +348,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (onChange) {
 					onChange();
 				}
+				if (onSave) {
+					onSave(what);
+				}
 
 				return true;
 			},
@@ -339,7 +364,6 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					}
 					
 					setIsAdding(false);
-					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
 				}
 				const formState = editorStateRef.current;
@@ -350,6 +374,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			onEditorClose = () => {
+				if (isAdding) {
+					onEditorCancel();
+				}
 				setIsEditorShown(false);
 			},
 			onEditorDelete = async () => {
@@ -406,6 +433,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			self.deleteChildren = onDeleteChildren;
 			self.duplicate = onDuplicate;
 		}
+		newEntityDisplayValueRef.current = newEntityDisplayValue;
 
 		if (lastSelection !== selection) {
 			// NOTE: If I don't calculate this on the fly for selection changes,

package/src/Components/Hoc/withFilters.js

@@ -536,7 +536,9 @@ export default function withFilters(WrappedComponent) {
 										},
 									]}
 									onCancel={(e) => {
-										// Just close the modal
+										setIsFilterSelectorShown(false);
+									}}
+									onClose={(e) => {
 										setIsFilterSelectorShown(false);
 									}}
 									onSave={(data, e) => {

package/src/Components/Hoc/withSelection.js

@@ -228,6 +228,9 @@ export default function withSelection(WrappedComponent) {
 			conformSelectionToValue = async () => {
 				let newSelection = [];
 				if (Repository) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
 					// Get entity or entities that match value
 					if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
 						if (_.isArray(value)) {
@@ -236,16 +239,16 @@ export default function withSelection(WrappedComponent) {
 							let found = Repository.getById(value);
 							if (found) {
 								newSelection.push(found);
-							} else if (Repository?.isRemote && Repository?.entities.length) {
+							// } else if (Repository?.isRemote && Repository?.entities.length) {
 
-								// Value cannot be found in Repository, but actually exists on server
-								// Try to get this value from the server directly
-								Repository.filter(Repository.schema.model.idProperty, value);
-								await Repository.load();
-								found = Repository.getById(value);
-								if (found) {
-									newSelection.push(found);
-								}
+							// 	// Value cannot be found in Repository, but actually exists on server
+							// 	// Try to get this value from the server directly
+							// 	Repository.filter(Repository.schema.model.idProperty, value);
+							// 	await Repository.load();
+							// 	found = Repository.getById(value);
+							// 	if (found) {
+							// 		newSelection.push(found);
+							// 	}
 
 							}
 						}
@@ -278,9 +281,6 @@ export default function withSelection(WrappedComponent) {
 			};
 
 		useEffect(() => {
-			if (isReady) {
-				return () => {};
-			}
 
 			(async () => {
 
@@ -291,7 +291,7 @@ export default function withSelection(WrappedComponent) {
 					await Repository.load();
 				}
 
-				if (usesWithValue && !_.isNil(value)) {
+				if (!_.isNil(value)) {
 
 					await conformSelectionToValue();
 
@@ -314,7 +314,7 @@ export default function withSelection(WrappedComponent) {
 
 			})();
 
-		}, []);
+		}, [value]);
 
 		if (self) {
 			self.selection = localSelection;

package/src/Components/Hoc/withValue.js

@@ -28,6 +28,9 @@ export default function withValue(WrappedComponent) {
 				isValueAlwaysArray = false,
 				isValueAsStringifiedJson = false,
 
+				// withComponent
+				self,
+
 				// withData
 				Repository,
 				idIx,
@@ -109,7 +112,7 @@ export default function withValue(WrappedComponent) {
 				setLocalValue(value);
 			}
 		}, [value]);
-
+		
 		if (fieldSetRegisterChild) {
 			useEffect(() => {
 				fieldSetRegisterChild({
@@ -120,6 +123,11 @@ export default function withValue(WrappedComponent) {
 			}, []);
 		}
 
+		if (self) {
+			self.setValue = setValue;
+			self.value = getLocalValue();
+		}
+
 		
 		// Convert localValue to normal JS primitives for field components
 		let convertedValue = getLocalValue();

package/src/Components/Icons/Images.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 576 512" {...props}>
+		<Path d="M512 32H160c-35.35 0-64 28.65-64 64v224c0 35.35 28.65 64 64 64h352c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm16 288c0 8.822-7.178 16-16 16h-16L386.7 175.1c-3-4.4-8-7.1-13.4-7.1a15.978 15.978 0 00-13.31 7.125l-62.74 94.11L274.9 238.6c-3-4.2-7.8-6.6-12.9-6.6a16.007 16.007 0 00-12.93 6.574L176 336h-16c-8.822 0-16-7.178-16-16V96c0-8.822 7.178-16 16-16h352c8.822 0 16 7.178 16 16v224zM224 112c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.68 0 32-14.33 32-32s-14.3-32-32-32zm232 368H120C53.83 480 0 426.2 0 360V120c0-13.2 10.75-24 24-24s24 10.8 24 24v240c0 39.7 32.3 72 72 72h336c13.25 0 24 10.75 24 24s-10.7 24-24 24z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Toolbar/Pagination.js

@@ -69,6 +69,18 @@ export default function Pagination(props) {
 							isDisabled={isDisabled}
 							tooltip="Show More"
 						>Show More</Button>);
+			if (!Repository.isLocal) {
+				items.push(<IconButton
+								key="reload"
+								parent={self}
+								reference="reloadPageBtn"
+								{...iconButtonProps}
+								icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+								onPress={() => Repository.reload()}
+								tooltip="Reload"
+								ml={2}
+							/>);
+			}
 		} else {
 			isDisabled = page === 1;
 			items.push(<IconButton

package/src/Components/Viewer/Viewer.js

@@ -183,6 +183,7 @@ function Viewer(props) {
 										flex={1}
 										h={350}
 										canEditorViewOnly={true}
+										canCrud={false}
 										uniqueRepository={true}
 										parent={self}
 										{...propsToPass}

package/src/Components/index.js

@@ -41,7 +41,6 @@ import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Tag/Tag.js';
-import TagViewer from './Viewer/TagViewer.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
@@ -94,7 +93,6 @@ const components = {
 	SquareButton,
 	TabPanel,
 	Tag,
-	TagViewer,
 	Text,
 	TextArea,
 	TimezonesCombo,

package/src/Functions/delay.js

@@ -0,0 +1,3 @@
+export default function delay(ms = 1000) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

package/src/Functions/isVideo.js

@@ -0,0 +1,18 @@
+export default function isVideo(mimetype) {
+	switch(mimetype) {
+		case 'video/quicktime':
+		case 'video/mp4':
+		case 'video/mpeg':
+		case 'video/ogg':
+		case 'video/webm':
+		case 'video/mp2t':
+		case 'video/3gpp':
+		case 'video/3gpp2':
+		case 'video/x-msvideo':
+		case 'video/x-ms-wmv':
+		case 'video/x-flv':
+		case 'application/x-mpegURL':
+			return true;
+	}
+	return false;
+}

package/src/Components/Viewer/TagViewer.js

@@ -1,30 +0,0 @@
-import {
-	Text,
-} from 'native-base';
-import UiGlobals from '../../UiGlobals.js';
-import withComponent from '../Hoc/withComponent.js';
-import _ from 'lodash';
-
-function TagViewer(props) {
-	const {
-			value,
-		} = props,
-		parsedValue = value ? JSON.parse(value) : null,
-		values = parsedValue ? _.map(parsedValue, (val) => {
-			const ret = val?.text;
-			return ret;
-		}).join(', ') : [],
-		styles = UiGlobals.styles;
-
-	return <Text
-				numberOfLines={1}
-				ellipsizeMode="head"
-				fontSize={styles.FORM_TEXT_FONTSIZE}
-				minHeight='40px'
-				px={3}
-				py={2}
-				{...props}
-			>{values}</Text>;
-}
-
-export default withComponent(TagViewer);