@onehat/ui 0.2.48 → 0.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.48",
+	"version": "0.2.49",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

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

@@ -54,6 +54,11 @@ function NumberElement(props) {
 		}
 	},
 	onChangeText = (value) => {
+		if (value.match(/\.$/)) { // if value ends with a decimal point
+			setLocalValue(value);
+			return;
+		}
+
 		if (value === '') {
 			value = null; // empty string makes value null
 		} else {

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

@@ -67,7 +67,9 @@ const
 							{...propsToPass}
 						/>
 					</Pressable>
-					<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
+					<Pressable onPress={onToggle}>
+						<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
+					</Pressable>
 				</Row>;
 	},
 	ToggleField = withValue(ToggleElement);

package/src/Components/Form/Form.js

@@ -28,6 +28,7 @@ import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
+import Eye from '../Icons/Eye.js';
 import Rotate from '../Icons/Rotate.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Panel/Footer.js';
@@ -61,7 +62,9 @@ function Form(props) {
 			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
-			onBack,
+			onBack,	
+			onViewMode,
+			additionalButtons = [],
 			ancillaryComponents = [],
 			
 			// sizing of outer container
@@ -476,7 +479,8 @@ function Form(props) {
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
-				<Row p={2} alignItems="center">
+				<Row p={2} alignItems="center" justifyContent="flex-end">
+					{/* <Text mr={2} fontSize={18}>{editorModeF} Mode</Text> */}
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 						<Button
 							key="backBtn"
@@ -484,8 +488,18 @@ function Form(props) {
 							leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
 							color="#fff"
 						>Back</Button>}
-					<Text ml={2} fontSize={18}>{editorModeF} Mode</Text>
+					{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
+						<Button
+							key="viewBtn"
+							onPress={onViewMode}
+							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
+							color="#fff"
+						>View</Button>}
 				</Row>
+				{!_.isEmpty(additionalButtons) && 
+					<Row p={2} alignItems="center" justifyContent="flex-end">
+						{additionalButtons}
+					</Row>}
 				
 				{editor}
 

package/src/Components/Hoc/withFilters.js

@@ -234,25 +234,6 @@ export default function withFilters(WrappedComponent) {
 					if (filter5Field) {
 						addFilter(filter5Field, 4);
 					}
-					
-					filterElements.push(<IconButton
-											key="clear"
-											_icon={{
-												as: Ban,
-											}}
-											ml={1}
-											onPress={onClearFilters}
-											tooltip="Clear all filters"
-										/>);
-					filterElements.push(<IconButton
-											key="gear"
-											_icon={{
-												as: Gear,
-											}}
-											ml={1}
-											onPress={() => setIsFilterSelectorShown(true)}
-											tooltip="Swap filters"
-										/>);
 		
 					return filterElements;
 				},
@@ -351,7 +332,33 @@ export default function withFilters(WrappedComponent) {
 						filterComboProps.data.push([fieldName, title]);
 					}
 				});
-				topToolbar = <Toolbar justifyContent="space-between"><Text pt={2} pr={2} userSelect="none">Filters:</Text>{renderFilters()}</Toolbar>;
+				const
+					renderedFilters = renderFilters(),
+					hasFilters = !!renderedFilters.length;
+				topToolbar = <Toolbar justifyContent="space-between" alignItems="center">
+								<Text pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
+								{renderedFilters}
+								<Row flex={hasFilters ? null : 1} justifyContent="flex-end">
+									<IconButton
+										key="clear"
+										_icon={{
+											as: Ban,
+										}}
+										ml={1}
+										onPress={onClearFilters}
+										tooltip="Clear all filters"
+									/>
+									<IconButton
+										key="gear"
+										_icon={{
+											as: Gear,
+										}}
+										ml={1}
+										onPress={() => setIsFilterSelectorShown(true)}
+										tooltip="Swap filters"
+									/>
+								</Row>
+							</Toolbar>;
 			}
 
 			if (isFilterSelectorShown) {

package/src/Components/Toolbar/Pagination.js

@@ -16,6 +16,8 @@ import PageSizeCombo from '../Form/Field/Combo/PageSizeCombo.js';
 
 export default function Pagination(props) {
 	const {
+			minimize = false,
+	
 			// withData
 			Repository,
 		} = props,
@@ -70,23 +72,25 @@ export default function Pagination(props) {
 						onPress={() => Repository.prevPage()}
 						tooltip="Previous Page"
 					/>);
-		items.push(<Row
-						key="pageSelector"
-						mx={3}
-						justifyContent="center"
-						alignItems="center"
-					>
-						<Text mr={2}>Page</Text>
-						<Input
-							value={page}
-							onChangeValue={(value) => Repository.setPage(value)}
-							maxValue={totalPages}
-							isDisabled={totalPages === 1}
-							w={10}
-							tooltip="Set Page"
-						/>
-						<Text ml={2}>of {totalPages}</Text>
-					</Row>);
+		if (!minimize) {
+			items.push(<Row
+							key="pageSelector"
+							mx={3}
+							justifyContent="center"
+							alignItems="center"
+						>
+							<Text mr={2}>Page</Text>
+							<Input
+								value={page}
+								onChangeValue={(value) => Repository.setPage(value)}
+								maxValue={totalPages}
+								isDisabled={totalPages === 1}
+								w={10}
+								tooltip="Set Page"
+							/>
+							<Text ml={2}>of {totalPages}</Text>
+						</Row>);
+		}
 
 		isDisabled = page === totalPages || totalPages <= 1;
 		items.push(<IconButton
@@ -115,7 +119,9 @@ export default function Pagination(props) {
 						/>);
 		}
 
-		items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+		if (!minimize) {
+			items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+		}
 
 		let pageSpan = `${pageStart} – ${pageEnd}`;
 		if (pageStart === pageEnd) {
@@ -130,7 +136,7 @@ export default function Pagination(props) {
 					{...props}
 				>
 					{items}
-					<Text ml={3}>Displaying {pageSpan} of {total}</Text>
+					{!minimize && <Text ml={3}>Displaying {pageSpan} of {total}</Text>}
 				</Row>;
 	}, [
 		// Repository,
@@ -140,6 +146,7 @@ export default function Pagination(props) {
 		totalPages,
 		pageStart,
 		pageEnd,
+		minimize,
 	])
 
 

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
 	Row,
 } from 'native-base';
@@ -9,14 +10,34 @@ export default function PaginationToolbar(props) {
 	const {
 			toolbarItems = [],
 		} = props,
-		propsToPass = _.omit(props, 'toolbarItems');
+		[minimize, setMinimize] = useState(false),
+		propsToPass = _.omit(props, 'toolbarItems'),
+		onLayout = (e) => {
+			// Note to future self: this is using hard-coded values.
+			// Eventually might want to make it responsive to actual sizes
+
+			// Also, eventually might useMediaQuery from NativeBase, but ReactNative is not yet supported,
+			// so have to do things the long way. 
+			const
+				width = e.nativeEvent.layout.width,
+				pagingToolbarMinwidth = 576,
+				toolbarItemsMinwidth = 45 * toolbarItems.length,
+				threshold = pagingToolbarMinwidth + toolbarItemsMinwidth,
+				shouldMinimize = width < threshold;
+
+			if (shouldMinimize !== minimize) {
+				setMinimize(shouldMinimize);
+			}
+		};
+
 	return <Toolbar
 				bg="trueGray.200"
 				borderTopWidth={1}
 				borderTopColor="trueGray.400"
 				w="100%"
+				onLayout={(e) => onLayout(e)}
 			>
-				<Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} />
+				<Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} minimize={minimize} />
 				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.400" pl={3} ml={3}>{toolbarItems}</Row> : null}
 			</Toolbar>;
 };