@onehat/ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.5",
+	"version": "0.3.7",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -37,6 +37,7 @@
 		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
+		"@files-ui/react": "^1.0.8",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"react": "*",
 		"react-color": "^2.19.3",
@@ -44,8 +45,7 @@
 		"react-draggable": "^4.4.5",
 		"react-native-draggable": "^3.3.0",
 		"react-dom": "*",
-		"react-native": "*",
-		"react-uploader": "^3.41.0"
+		"react-native": "*"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.1",

package/src/Functions/registerWebComponents.js

@@ -1,15 +1,17 @@
 import UiGlobals from '../UiGlobals.js';
+import Attachments from '../PlatformImports/Web/Attachments.js';
 // import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
 import Datetime from '../PlatformImports/Web/Datetime.js';
 import Draggable from '../PlatformImports/Web/Draggable.js';
-import File from '../PlatformImports/Web/File.js';
+// import File from '../PlatformImports/Web/Attachments.js';
 import _ from 'lodash';
 
 export default function registerWebComponents() {
 	_.merge(UiGlobals.components, {
+		Attachments,
 		// CKEditor, // The CKEditor was giving me CSS import errors, so had to disable it until I can fix those
 		Datetime,
 		Draggable,
-		File,
+		// File,
 	});
 }

package/src/PlatformImports/Web/Attachments.js

@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Box,
+	Icon,
+	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';
+import {
+	FILE_MODE_IMAGE,
+	FILE_MODE_FILE,
+} from '../../../Constants/File.js';
+import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
+import withData from '../../Components/Hoc/withData.js';
+import _ from 'lodash';
+
+function AttachmentsElement(props) {
+
+	if (CURRENT_MODE !== UI_MODE_WEB) {
+		throw new Error('Not yet implemented except for web.');
+	}
+
+	const {
+			canCrud = true,
+			_dropZone = {},
+			_fileMosaic = {},
+			accept = '*', // 'image/*'
+			maxFiles = null,
+			maxFileSize = 28 * 1024,
+			disabled = false,
+			clickable = true,
+			isImageOnly = false,
+
+			// withData
+			Repository,
+
+		} = props,
+		styles = UiGlobals.styles,
+		WhichFile = isImageOnly ? Avatar : FileMosaic,
+		onDelete = (a,b,c,d,e) => {
+
+		};
+
+	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>;
+
+	}
+		
+	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>;
+}
+
+export default withData(AttachmentsElement);

package/src/PlatformImports/Web/FIle.js

@@ -1,137 +0,0 @@
-import React, { useState, useEffect, useRef, } from 'react';
-import {
-	Box,
-	Icon,
-	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';
-import {
-	FILE_MODE_IMAGE,
-	FILE_MODE_FILE,
-} from '../../../Constants/File.js';
-import { Uploader } from 'uploader'; // Installed by "react-uploader".
-import { UploadButton } from 'react-uploader';
-import IconButton from '../../Buttons/IconButton.js';
-import withValue from '../../Hoc/withValue.js';
-import File from '../../Icons/File.js';
-import Trash from '../../Icons/Trash.js';
-import _ from 'lodash';
-
-function FileElement(props) {
-
-	if (CURRENT_MODE !== UI_MODE_WEB) {
-		throw new Error('Not yet implemented except for web.');
-	}
-
-	const {
-			name,
-			value = {
-				dataUri: null,
-				control: null,
-				filename: null,
-			},
-			setValue,
-
-			mode = FILE_MODE_IMAGE, // FILE_MODE_IMAGE, FILE_MODE_FILE
-			imagePath = '',
-			tooltip = 'Choose or drag a file on top of this control.',
-			tooltipPlacement = 'bottom',
-		} = props,
-		styles = UiGlobals.styles,
-		dragRef = useRef(),
-		fileInputRef = useRef(),
-		[isDropping, setIsDropping] = useState(false),
-		onSelect = () => {
-			fileInputRef.current.click();
-			
-			setValue({
-				dataUri: null,
-				control: null,
-				filename: null,
-				version,
-			});
-		},
-		setBase64 = (file, readerResult) => {
-			const
-				base64 = btoa(readerResult), // 'btoa' is deprecated in Node.js, but not browsers, so use it! // https://developer.mozilla.org/en-US/docs/Web/API/btoa
-				dataUri = `data:${file.type};base64,${base64}`,
-				control = '',
-				filename = file.name;
-
-		},
-		onDrop = (e) => {
-			e.preventDefault();
-			const
-				files = e.dataTransfer && e.dataTransfer.files,
-				file = files[0],
-				reader = new FileReader();
-
-			reader.readAsDataURL(file);
-			reader.onload = (e) => {
-				setBase64(file, e.target.result);
-			};
-			setIsDropping(false);
-		};
-		
-	return <div ref={dragRef} style={{ flex: 1, height: '100%', }} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDragOver={onDragOver} onDrop={onDrop}>
-				<Tooltip label={tooltip} placement={tooltipPlacement}>
-					<Row flex={1} h={10} alignItems="center">
-						{isDropping && <Box position="absolute" borderWidth={isDropping ? 2 : 0} borderColor="primary.800" top={0} left={0} w="100%" h="100%" bg="trueGray.200" zIndex={10000} justifyContent="center" alignItems="center">
-											<Text>Set File</Text>
-										</Box>}
-						<IconButton
-							icon={<Icon as={File} color={styles.FORM_FILE_ICON_COLOR} />}
-							onPress={onSelect}
-							h={10}
-							w={10}
-							bg={styles.FORM_FILE_ICON_BG}
-							_hover={{
-								bg: styles.FORM_FILE_ICON_BG_HOVER,
-							}}
-						/>
-						<IconButton
-							icon={<Icon as={Trash} color={styles.FORM_FILE_ICON_COLOR} />}
-							onPress={onClear}
-							h={10}
-							w={10}
-							ml={1}
-							isDisabled={!value?.dataUri}
-							bg={value?.dataUri ? styles.FORM_FILE_ICON_BG : 'disabled'}
-							_hover={{
-								bg: value?.dataUri ? styles.FORM_FILE_ICON_BG_HOVER : 'disabled',
-							}}
-						/>
-						{mode === FILE_MODE_FILE && <Text
-														flex={1}
-														ml={3}
-														fontSize={styles.FORM_FILE_READOUT_FONTSIZE}
-														fontStyle="italic"
-														numberOfLines={1}
-														ellipsizeMode="head"
-														bg={styles.FORM_FILE_READOUT_BG}
-													>{value.filename || 'No file'}</Text>}
-						{mode === FILE_MODE_IMAGE && <Box
-														flex={1}
-														h="100%"
-														ml={1}
-														bg={styles.FORM_FILE_READOUT_BG}
-														backgroundImage={value?.dataUri ? 'url(' + imagePath + encodeURIComponent(value.dataUri) + ')' : 'none'}
-														backgroundSize="contain"
-														backgroundRepeat="no-repeat"
-														borderRadius={4}
-														borderWidth={1}
-													/>}
-						<input type="file" ref={fileInputRef} name={name} onChange={onChangeFile} style={{ position: 'absolute', opacity: 0, height: 0, width: 0, }} />
-					</Row>
-				</Tooltip>
-			</div>;
-}
-
-export default withValue(FileElement);