@onehat/ui 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.3",
+	"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/Combo/Combo.js

@@ -505,6 +505,8 @@ export function ComboComponent(props) {
 											<WhichGrid
 												showHeaders={false}
 												showHovers={true}
+												pageSize={100}
+												disableAdjustingPageSizeToHeight={true}
 												shadow={1}
 												getRowProps={() => {
 													return {

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

@@ -21,6 +21,11 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Grid.js';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -70,6 +75,7 @@ function GridComponent(props) {
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
+			disableAdjustingPageSizeToHeight = false,
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
@@ -608,6 +614,41 @@ function GridComponent(props) {
 				dragRowSlot.marker.remove();
 			}
 			setDragRowSlot(null);
+		},
+		onLayout = (e) => {
+			if (disableAdjustingPageSizeToHeight || !Repository) {
+				return;
+			}
+			const {
+					nativeEvent: {
+						layout,
+						target,
+					},
+				} = e;
+			let pageSize;
+			if (CURRENT_MODE === UI_MODE_WEB) {
+				const
+					targetBoundingBox = target.getBoundingClientRect(),
+					targetHeight = targetBoundingBox.height,
+					firstRow = target.children[0]?.children[0]?.children[0]?.children[0]?.children[0];
+				if (firstRow) {
+					const
+						rowBoundingBox = firstRow.getBoundingClientRect(),
+						rowHeight = rowBoundingBox.height,
+						rowsPerTarget = Math.floor(targetHeight / rowHeight);
+					pageSize = rowsPerTarget;
+					if (showHeaders) {
+						pageSize--;
+					}
+					if (bottomToolbar) {
+						pageSize--;
+					}
+				}
+			}
+			
+			if (pageSize) {
+				Repository.setPageSize(pageSize);
+			}
 		};
 		
 	useEffect(() => {
@@ -752,7 +793,7 @@ function GridComponent(props) {
 	if (inlineEditor) {
 		rowData.push({ id: 'inlineEditor' }); // make editor the last row so it can scroll with all other rows
 	}
-	const initialNumToRender = rowData.length || 10;
+	const initialNumToRender = rowData?.length || 10;
 
 	// headers & footers
 	let listFooterComponent = null;
@@ -776,6 +817,7 @@ function GridComponent(props) {
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}
 				borderColor={styles.GRID_BORDER_COLOR}
+				onLayout={onLayout}
 				{...sizeProps}
 			>
 				{topToolbar}

package/src/Components/Hoc/withData.js

@@ -19,6 +19,7 @@ export default function withData(WrappedComponent) {
 				uniqueRepository = false,
 				model,
 				autoLoad = false,
+				pageSize,
 
 				// For plain JS data
 				data,
@@ -51,6 +52,10 @@ export default function withData(WrappedComponent) {
 					Repository = oneHatData.getRepository(model);
 				}
 
+				if (pageSize) {
+					Repository.setPageSize(pageSize);
+				}
+
 				if (Repository && (autoLoad || Repository.autoLoad) && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
 					await Repository.load();
 				}

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);