@onehat/ui 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.7",
+	"version": "0.3.9",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,14 +25,17 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.19.0",
+		"@gluestack-style/react": "^0.2.38",
+		"@gluestack-ui/themed": "^0.1.21",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
+		"@onehat/data": "^1.19.0",
 		"@reduxjs/toolkit": "^1.9.5",
-		"js-cookie": "^3.0.5",
 		"inflector-js": "^1.0.1",
+		"js-cookie": "^3.0.5",
 		"native-base": "^3.4.28",
 		"react-hook-form": "^7.45.0",
+		"react-native-svg": "^13.13.0",
 		"react-redux": "^8.1.2",
 		"yup": "^1.2.0"
 	},
@@ -42,10 +45,10 @@
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",
-		"react-draggable": "^4.4.5",
-		"react-native-draggable": "^3.3.0",
 		"react-dom": "*",
-		"react-native": "*"
+		"react-draggable": "^4.4.5",
+		"react-native": "*",
+		"react-native-draggable": "^3.3.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.1",

package/src/Components/Editor/Viewer.js

@@ -25,6 +25,9 @@ export default function Viewer(props) {
 			// withData
 			record,
 
+			// parent container
+			selectorSelected,
+
 			// withEditor
 			onEditMode,
 			onClose,
@@ -39,7 +42,7 @@ export default function Viewer(props) {
 					let {
 						type,
 						title = null,
-						selectorId,
+						selectorId = null,
 						...propsToPass
 					} = item;
 					const

package/src/Components/Form/Form.js

@@ -89,7 +89,7 @@ function Form(props) {
 			onDelete,
 			editorStateRef,
 
-			// DataMgt
+			// parent container
 			selectorId,
 			selectorSelected,
 
@@ -115,10 +115,10 @@ function Form(props) {
 			// resetField,
 			// setError,
 			// clearErrors,
-			// setValue,
+			setValue: formSetValue,
 			// setFocus,
-			getValues,
-			getFieldState,
+			getValues: formGetValues,
+			// getFieldState,
 			// trigger,
 		} = useForm({
 			mode: 'onChange', // onChange | onBlur | onSubmit | onTouched | all
@@ -204,6 +204,7 @@ function Form(props) {
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
+															onChange: onEditorChange,
 															...p
 														} = editor;
 													editorProps = p;
@@ -217,6 +218,9 @@ function Form(props) {
 																value={value}
 																setValue={(newValue) => {
 																	onChange(newValue);
+																	if (onEditorChange) {
+																		onEditorChange(newValue, formSetValue, formGetValues, formState);
+																	}
 																}}
 																onBlur={onBlur}
 																selectorId={selectorId}
@@ -256,6 +260,7 @@ function Form(props) {
 					isEditable = true,
 					label,
 					items,
+					onChange: onEditorChange,
 					...propsToPass
 				} = item;
 			let editorTypeProps = {};
@@ -363,10 +368,10 @@ function Form(props) {
 							let element = <Element
 												name={name}
 												value={value}
-												onChangeValue={(value) => {
-													onChange(value); // form onChange handler
-													if (propsToPass.onChange) {
-														propsToPass.onChange(value); // item onChange handler
+												onChangeValue={(newValue) => {
+													onChange(newValue);
+													if (onEditorChange) {
+														onEditorChange(newValue, formSetValue, formGetValues, formState);
 													}
 												}}
 												onBlur={onBlur}
@@ -419,7 +424,7 @@ function Form(props) {
 						Element = getComponentFromType(type),
 						element = <Element
 										selectorId={selectorId}
-										selectorSelected={selectorId ? record : selectorSelected}
+										selectorSelected={selectorSelected || record}
 										flex={1}
 										{...propsToPass}
 									/>;

package/src/Components/Hoc/withEditor.js

@@ -30,7 +30,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				record,
 
-				// DataMgt
+				// parent container
 				selectorId,
 				selectorSelected,
 

package/src/Components/Hoc/withPresetButtons.js

@@ -63,7 +63,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				selection,
 				setSelection,
 
-				// DataMgt
+				// parent container
 				selectorId,
 				selectorSelected,
 			} = props,

package/src/Constants/Styles.js

@@ -6,6 +6,7 @@ const
 	FOCUS = '#ffd';
 
 const defaults = {
+	ATTACHMENTS_MAX_FILESIZE: 1024 * 1024 * 5, // 5MB
 	FILTER_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_ANCILLARY_TITLE_FONTSIZE: 22,
 	FORM_COLOR_READOUT_FONTSIZE: DEFAULT_FONTSIZE,

package/src/PlatformImports/Web/Attachments.js

@@ -1,25 +1,31 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { useState, useEffect, } from 'react';
 import {
 	Box,
-	Icon,
+	Button,
+	Column,
 	Row,
-	Text,
-	Tooltip,
 } from 'native-base';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../../Constants/UiModes.js';
-import UiGlobals from '../../../UiGlobals.js';
+} from '../../Constants/UiModes.js';
+import UiGlobals from '../../UiGlobals.js';
 import {
 	FILE_MODE_IMAGE,
 	FILE_MODE_FILE,
-} from '../../../Constants/File.js';
+} from '../../Constants/File.js';
 import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
 import withData from '../../Components/Hoc/withData.js';
 import _ from 'lodash';
 
+const
+	EXPANDED_MAX = 100,
+	COLLAPSED_MAX = 2;
+
+// Note this component uploads only one file per server request---
+// it doesn't upload multiple files simultaneously.
+
 function AttachmentsElement(props) {
 
 	if (CURRENT_MODE !== UI_MODE_WEB) {
@@ -30,93 +36,217 @@ function AttachmentsElement(props) {
 			canCrud = true,
 			_dropZone = {},
 			_fileMosaic = {},
-			accept = '*', // 'image/*'
+			accept, // 'image/*'
 			maxFiles = null,
-			maxFileSize = 28 * 1024,
 			disabled = false,
 			clickable = true,
-			isImageOnly = false,
+
+			// parentContainer
+			selectorSelected,
 
 			// withData
 			Repository,
 
 		} = props,
 		styles = UiGlobals.styles,
-		WhichFile = isImageOnly ? Avatar : FileMosaic,
-		onDelete = (a,b,c,d,e) => {
+		model = selectorSelected?.repository.name,
+		modelid = selectorSelected?.id,
+		[isReady, setIsReady] = useState(false),
+		[isUploading, setIsUploading] = useState(false),
+		[showAll, setShowAll] = useState(false),
+		[files, setFiles] = useState([]),
+		buildFiles = () => {
+			const files = _.map(Repository.entities, (entity) => {
+				return {
+					id: entity.id, //	string | number	The identifier of the file
+					// file: null, //	File	The file object obtained from client drop or selection
+					name: entity.attachments__filename, // string	The name of the file
+					type: entity.attachments__mimetype, // string	The file mime type.
+					size: entity.attachments__size, //	number	The size of the file in bytes.
+					// valid: null, //	boolean	If present, it will show a valid or rejected message ("valid", "denied"). By default valid is undefined.
+					// errors: null, //	string[]	The list of errors according to the validation criteria or the result of the given custom validation function.
+					// uploadStatus: null, //	UPLOADSTATUS	The current upload status. (e.g. "uploading").
+					// uploadMessage: null, //	string	A message that shows the result of the upload process.
+					imageUrl: entity.attachments__uri, //	string	A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file.
+					downloadUrl: entity.attachments__uri, //	string	The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown.
+					// progress: null, //	number	The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component.
+					// extraUploadData: null, //	Record<string, any>	The additional data that will be sent to the server when files are uploaded individually
+					// extraData: null, //	Object	Any kind of extra data that could be needed.
+					// serverResponse: null, //	ServerResponse	The upload response from server.
+					// xhr: null, //	XMLHttpRequest	A reference to the XHR object that allows the upload, progress and abort events.
+				};
+			});
+			setFiles(files);
+		},
+		toggleShowAll = () => {
+			setShowAll(!showAll);
+		},
+		onDropzoneChange = (files) => {
+			setFiles(files);
+			_.each(files, (file) => {
+				file.extraUploadData = {
+					model,
+					modelid,
+				};
+			});
+		},
+		onUploadStart = (files) => {
+			setIsUploading(true);
+		},
+		onUploadFinish = (files) => {
+			let isDoneUploading = true;
+
+			_.each(files, (file) => {
+				if (!file.xhr || file.xhr.status !== 200) {
+					isDoneUploading = false;
+					return false; // break
+				}
+			});
+
+			if (isDoneUploading) {
+				setIsUploading(false);
+				Repository.reload();
+			}
+		},
+		onFileDelete = (id) => {
+			Repository.deleteById(id);
+		};
+
+	useEffect(() => {
+
+		if (!model) {
+			return () => {};
+		}
+
+		(async () => {
 
+			// Load Repository
+			const filters = [
+				{
+					name: 'model',
+					value: model,
+				},
+				{
+					name: 'modelid',
+					value: modelid,
+				},
+			];
+			if (accept) {
+				let name,
+					mimetypes;
+				if (_.isString(accept)) {
+					name = 'mimetype LIKE';
+					mimetypes = accept.replace('*', '%');
+				} else if (_.isArray(accept)) {
+					name = 'mimetype IN';
+					mimetypes = accept;
+				}
+				filters.push({
+					name,
+					value: mimetypes,
+				});
+			}
+			Repository.filter(filters);
+			Repository.setPageSize(showAll ? EXPANDED_MAX : COLLAPSED_MAX);
+			await Repository.load();
+
+			buildFiles();
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+			
+		})();
+
+		Repository.on('load', buildFiles);
+		return () => {
+			Repository.off('load', buildFiles);
 		};
+	}, [model, modelid, showAll]);
+
+	if (!isReady) {
+		return null;
+	}
+	
 
 	if (canCrud) {
-		return <Dropzone
-					value={files}
-					onChange={updateFiles}
-					accept={accept}
-					maxFiles={maxFiles}
-					maxFileSize={maxFileSize}
-					validator={() => {}}
-					autoClean={true}
-					uploadConfig={{
-						url: Repository.api.baseURL + Repository.name + '/uploadAttachments',
-						method: 'POST',
-						headers: Repository.headers,
-						autoUpload: true,
-					}}
-				    onUploadFinish={handleFinishUpload}
-					background={styles.ATTACHMENTS_BG}
-					color={styles.ATTACHMENTS_COLOR}
-					minHeight={150}
-					clickable={clickable}
-					{..._dropZone}
-				>
-					{files.map((file) => {
-						// const ExtFile = {
-						// 	id	string | number	The identifier of the file
-						// 	file	File	The file object obtained from client drop or selection
-						// 	name	string	The name of the file
-						// 	type	string	The file mime type.
-						// 	size	number	The size of the file in bytes.
-						// 	valid	boolean	If present, it will show a valid or rejected message ("valid", "denied"). By default valid is undefined.
-						// 	errors	string[]	The list of errors according to the validation criteria or the result of the given custom validation function.
-						// 	uploadStatus	UPLOADSTATUS	The current upload status. (e.g. "uploading").
-						// 	uploadMessage	string	A message that shows the result of the upload process.
-						// 	imageUrl	string	A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file.
-						// 	downloadUrl	string	The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown.
-						// 	progress	number	The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component.
-						// 	extraUploadData	Record<string, any>	The additional data that will be sent to the server when files are uploaded individually
-						// 	extraData	Object	Any kind of extra data that could be needed.
-						// 	serverResponse	ServerResponse	The upload response from server.
-						// 	xhr	XMLHttpRequest	A reference to the XHR object that allows the upload, progress and abort events.
-						// };
-						return <WhichFile
-									key={file.id}
-									{...file}
-									backgroundBlurImage={false}
-									onDelete={onDelete}
-									info
-									{..._fileMosaic}
-								/>;
-					})}
-				</Dropzone>;
+		_fileMosaic.onDelete = onFileDelete;
+	}
+	let content = <Column
+						w="100%"
+						// minHeight={50}
+						p={2}
+						background={styles.ATTACHMENTS_BG}
+					>
+						<Row flexWrap="wrap">
+							{files.map((file) => {
+								return <Box
+											key={file.id}
+											marginRight={4}
+										>
+											<FileMosaic
+												{...file}
+												backgroundBlurImage={false}
+												{..._fileMosaic}
+											/>
+										</Box>;
+							})}
+						</Row>
+						{Repository.total <= COLLAPSED_MAX ? null :
+							<Button
+								onPress={toggleShowAll}
+								marginTop={4}
+								_text={{
+									color: 'trueGray.600',
+									fontStyle: 'italic',
+									textAlign: 'left',
+									width: '100%',
+								}}
+								variant="ghost"
+							>{'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}</Button>}
+					</Column>;
+	
+	if (canCrud) {
+		content = <Dropzone
+						value={files}
+						onChange={onDropzoneChange}
+						accept={accept}
+						maxFiles={maxFiles}
+						maxFileSize={styles.ATTACHMENTS_MAX_FILESIZE}
+						autoClean={true}
+						uploadConfig={{
+							url: Repository.api.baseURL + Repository.name + '/uploadAttachment',
+							method: 'POST',
+							headers: Repository.headers,
+							autoUpload: true,
+						}}
+						headerConfig={{
+							deleteFiles: false,
+						}}
+						onUploadStart={onUploadStart}
+						onUploadFinish={onUploadFinish}
+						background={styles.ATTACHMENTS_BG}
+						color={styles.ATTACHMENTS_COLOR}
+						minHeight={150}
+						footer={false}
+						clickable={clickable}
+						{..._dropZone}
+					>
+						{content}
+					</Dropzone>;
 
 	}
-		
-	return <Row
-				flex={1}
-				minHeight={150}
-				background={styles.ATTACHMENTS_BG}
-				color={styles.ATTACHMENTS_COLOR}
-			>
-				{files.map((file) => {
-					return <WhichFile
-								key={file.id}
-								{...file}
-								onDelete={removeFile}
-								info
-								{..._fileMosaic}
-							/>;
-				})}
-			</Row>;
+	return content;
+}
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					model="Attachments"
+					uniqueRepository={true}
+					{...props}
+				/>;
+	};
 }
 
-export default withData(AttachmentsElement);
+export default withAdditionalProps(withData(AttachmentsElement));