@onehat/ui 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.4",
+	"version": "0.3.5",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -44,7 +44,8 @@
 		"react-draggable": "^4.4.5",
 		"react-native-draggable": "^3.3.0",
 		"react-dom": "*",
-		"react-native": "*"
+		"react-native": "*",
+		"react-uploader": "^3.41.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.1",

package/src/Components/Form/Field/File.js

@@ -35,6 +35,9 @@ import _ from 'lodash';
 // 
 
 function FileElement(props) {
+
+	throw new Error('Deprecated. Use platform-specific File component instead.');
+
 	const {
 			name,
 			value = {

package/src/Components/index.js

@@ -20,7 +20,6 @@ import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
 import FieldSet from './Form/FieldSet.js';
-// import File from './Form/Field/File.js'; // web only
 import FiltersForm from './Form/FiltersForm.js';
 // import FiltersToolbar from '../Components/Toolbar/FiltersToolbar.js';
 import Form from './Form/Form.js';
@@ -70,7 +69,6 @@ const components = {
 	DateRange,
 	DisplayField,
 	FieldSet,
-	// File,
 	FiltersForm,
 	// FiltersToolbar,
 	Form,

package/src/Functions/registerWebComponents.js

@@ -2,7 +2,7 @@ import UiGlobals from '../UiGlobals.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 '../Components/Form/Field/File.js';
+import File from '../PlatformImports/Web/File.js';
 import _ from 'lodash';
 
 export default function registerWebComponents() {

package/src/PlatformImports/Web/FIle.js

@@ -0,0 +1,137 @@
+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);