@onehat/ui 0.4.60 → 0.4.61

package/package.json

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

package/src/Components/Buttons/DynamicFab.js

@@ -0,0 +1,98 @@
+import { useCallback } from 'react';
+import {
+	Fab, FabIcon, FabLabel,
+	ScrollView,
+	VStack,
+} from '@project-components/Gluestack';
+import Animated, {
+	useSharedValue,
+	useAnimatedStyle,
+	withTiming,
+	interpolate,
+} from 'react-native-reanimated';
+import EllipsisVertical from '../Icons/EllipsisVertical.js';
+import Xmark from '../Icons/Xmark.js';
+
+// This component creates a floating action button (FAB)
+// that can expand and collapse to show multiple FABs beneath it.
+
+export default function DynamicFab(props) {
+	const {
+			fabs,
+			icon = null,
+			label = null,
+			collapseOnPress = true,
+		} = props,
+		isExpanded = useSharedValue(0),
+		toggleFab = useCallback(() => {
+			isExpanded.value = isExpanded.value ? 0 : 1;
+		}, []),
+		fabSpacing = 50,
+		verticalOffset = 15; // to shift the entire expanded group up
+
+	let className = `
+		DynamicFab
+		fixed
+		pb-[20px]
+		bottom-4
+		right-4
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+
+	return <VStack className={className}>
+					{fabs
+						.slice() // clone, so we don't mutate the original array
+						.reverse() // so fabs appear in the correct order
+						.map((fab, index) => {
+							const {
+									icon,
+									label,
+									onPress,
+								} = fab,
+								animatedStyle = useAnimatedStyle(() => {
+									const translateY = interpolate(
+										isExpanded.value,
+										[0, 1],
+										[0, -(fabSpacing * (index + 1)) - verticalOffset]
+									);
+									return {
+										transform: [{ translateY }],
+										opacity: withTiming(isExpanded.value, { duration: 200 }),
+									};
+								});
+
+							return <Animated.View
+										key={index}
+										style={animatedStyle}
+										className="absolute bottom-0 right-0"
+									>
+										<Fab
+											size="md"
+											className="bg-primary-600"
+											onPress={() => {
+												onPress();
+												if (collapseOnPress) {
+													isExpanded.value = 0;
+												}
+											}}
+											style={{
+												shadowColor: 'transparent', // otherwise, on collapse a bunch of shadows build up for a moment!
+											}}
+										>
+											<FabIcon as={icon} />
+											{label && <FabLabel>{label}</FabLabel>}
+										</Fab>
+									</Animated.View>;
+						})}
+				<Fab
+					size="lg"
+					onPress={toggleFab}
+					className="z-100 bg-primary-600"
+				>
+					<FabIcon as={isExpanded.value ? Xmark : icon || EllipsisVertical} />
+					{label && <FabLabel>{label}</FabLabel>}
+				</Fab>
+			</VStack>;
+};

package/src/Components/Form/Form.js

@@ -40,6 +40,7 @@ import testProps from '../../Functions/testProps.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
+import DynamicFab from '../Buttons/DynamicFab.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
 import Rotate from '../Icons/Rotate.js';
@@ -47,9 +48,9 @@ import Pencil from '../Icons/Pencil.js';
 import Plus from '../Icons/Plus.js';
 import FloppyDiskRegular from '../Icons/FloppyDiskRegular.js';
 import Trash from '../Icons/Trash.js';
+import ArrowUp from '../Icons/ArrowUp.js';
 import Xmark from '../Icons/Xmark.js';
 import Check from '../Icons/Check.js';
-
 import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
 import _ from 'lodash';
@@ -138,6 +139,8 @@ function Form(props) {
 			
 		} = props,
 		formRef = useRef(),
+		ancillaryItemsRef = useRef({}),
+		ancillaryFabs = useRef([]),
 		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record;
 
@@ -899,12 +902,21 @@ function Form(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
+			ancillaryFabs.current = [];
 			if (ancillaryItems.length) {
+
+				// add the "scroll to top" button
+				ancillaryFabs.current.push({
+					icon: ArrowUp,
+					onPress: () => scrollToAncillaryItem(0),
+				});
+
 				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
 						description = null,
+						icon,
 						selectorId,
 						selectorSelectedField,
 						...itemPropsToPass
@@ -912,6 +924,14 @@ function Form(props) {
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
+					if (icon) {
+						// TODO: this assumes that if one Ancillary item has an icon, they all do.
+						// If they don't, the ix will be wrong.
+						ancillaryFabs.current.push({
+							icon,
+							onPress: () => scrollToAncillaryItem(ix +1), // offset for the "scroll to top" button
+						});
+					}
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
 						itemPropsToPass.h = 400;
 					}
@@ -938,6 +958,9 @@ function Form(props) {
 										${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
 									`}
 								>{title}</Text>;
+						if (icon) {
+							title = <HStack className="items-center"><Icon as={icon} size="lg" className="mr-2" />{title}</HStack>
+						}
 					}
 					if (description) {
 						description = <Text
@@ -949,6 +972,7 @@ function Form(props) {
 									>{description}</Text>;
 					}
 					components.push(<VStack
+										ref={(el) => (ancillaryItemsRef.current[ix +1 /* offset for "scroll to top" */] = el)}
 										key={'ancillary-' + ix}
 										className={`
 											Form-VStack12
@@ -964,6 +988,12 @@ function Form(props) {
 			}
 			return components;
 		},
+		scrollToAncillaryItem = (ix) => {
+			ancillaryItemsRef.current[ix]?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			});
+		},
 		onSubmitError = (errors, e) => {
 			if (editorType === EDITOR_TYPE__INLINE) {
 				alert(errors.message);
@@ -1088,6 +1118,7 @@ function Form(props) {
 		formComponents,
 		editor,
 		additionalButtons,
+		fab = null,
 		isSaveDisabled = false,
 		isSubmitDisabled = false,
 		showDeleteBtn = false,
@@ -1101,13 +1132,13 @@ function Form(props) {
 		// create editor
 		if (editorType === EDITOR_TYPE__INLINE) {
 			editor = buildFromColumnsConfig();
-		// } else if (editorType === EDITOR_TYPE__PLAIN) {
-		// 	formComponents = buildFromItems();
-		// 	const formAncillaryComponents = buildAncillary();
-		// 	editor = <>
-		// 				<VStack className="p-4">{formComponents}</VStack>
-		// 				<VStack className="pt-4">{formAncillaryComponents}</VStack>
-		// 			</>;
+			// } else if (editorType === EDITOR_TYPE__PLAIN) {
+			// 	formComponents = buildFromItems();
+			// 	const formAncillaryComponents = buildAncillary();
+			// 	editor = <>
+			// 				<VStack className="p-4">{formComponents}</VStack>
+			// 				<VStack className="pt-4">{formAncillaryComponents}</VStack>
+			// 			</>;
 		} else {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
@@ -1161,10 +1192,15 @@ function Form(props) {
 									{additionalButtons}
 								</Toolbar>)
 			}
+			if (!_.isEmpty(ancillaryFabs.current)) {
+				fab = <DynamicFab
+							fabs={ancillaryFabs.current}
+							collapseOnPress={false}
+							className="bottom-[55px]"
+						/>;
+			}
 		}
 
-
-
 		// create footer
 		if (!formState.isValid) {
 			isSaveDisabled = true;
@@ -1356,6 +1392,7 @@ function Form(props) {
 	
 	let className = props.className || '';
 	className += ' Form-VStackNative';
+	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
 	return <VStackNative
 				ref={formRef}
 				{...testProps(self)}
@@ -1379,6 +1416,7 @@ function Form(props) {
 								// height: '100%',
 							}}
 						>
+							{scrollToTopAnchor}
 							{modeHeader}
 							{formHeader}
 							{formButtons}
@@ -1386,6 +1424,7 @@ function Form(props) {
 						</ScrollView>}
 
 					{footer}
+					{fab}
 
 				</>}
 			</VStackNative>;

package/src/Components/Icons/ArrowUp.js

@@ -0,0 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 384 512',
+	path: <Path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />,
+});
+
+export default SvgComponent

package/src/Components/Viewer/Viewer.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState, isValidElement, } from 'react';
 import {
+	Box,
 	HStack,
+	Icon,
 	ScrollView,
 	Text,
 	VStack,
@@ -24,7 +26,9 @@ import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import testProps from '../../Functions/testProps.js';
+import DynamicFab from '../Buttons/DynamicFab.js';
 import Toolbar from '../Toolbar/Toolbar.js';
+import ArrowUp from '../Icons/ArrowUp.js';
 import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
@@ -66,6 +70,8 @@ function Viewer(props) {
 
 		} = props,
 		scrollViewRef = useRef(),
+		ancillaryItemsRef = useRef({}),
+		ancillaryFabs = useRef([]),
 		isMultiple = _.isArray(record),
 		[containerWidth, setContainerWidth] = useState(),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
@@ -295,17 +301,34 @@ function Viewer(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
+			ancillaryFabs.current = [];
 			if (ancillaryItems.length) {
+
+				// add the "scroll to top" button
+				ancillaryFabs.current.push({
+					icon: ArrowUp,
+					onPress: () => scrollToAncillaryItem(0),
+				});
+
 				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
+						icon,
 						selectorId = null,
 						...itemPropsToPass
 					} = item;
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
+					if (icon) {
+						// NOTE: this assumes that if one Ancillary item has an icon, they all do.
+						// If they don't, the ix will be wrong.
+						ancillaryFabs.current.push({
+							icon,
+							onPress: () => scrollToAncillaryItem(ix +1), // offset for the "scroll to top" button
+						});
+					}
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
 						itemPropsToPass.h = 400;
 					}
@@ -334,12 +357,28 @@ function Viewer(props) {
 							title += ' for ' + record.displayValue;
 						}
 						title = <Text className={`${styles.VIEWER_ANCILLARY_FONTSIZE} font-bold`}>{title}</Text>;
+						if (icon) {
+							title = <HStack className="items-center"><Icon as={icon} size="lg" className="mr-2" />{title}</HStack>
+						}
 					}
-					components.push(<VStack key={'ancillary-' + ix} className="my-3">{title}{element}</VStack>);
+					components.push(<VStack
+										ref={(el) => (ancillaryItemsRef.current[ix +1 /* offset for "scroll to top" */] = el)}
+										key={'ancillary-' + ix}
+										className="my-3"
+									>
+										{title}
+										{element}
+									</VStack>);
 				});
 			}
 			return components;
 		},
+		scrollToAncillaryItem = (ix) => {
+			ancillaryItemsRef.current[ix]?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			});
+		},
 		onLayout = (e) => {
 			setContainerWidth(e.nativeEvent.layout.width);
 		};
@@ -356,15 +395,25 @@ function Viewer(props) {
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor;
+		showCloseBtn = !isSideEditor,
+		showFooter = (showDeleteBtn || showCloseBtn);
 	let additionalButtons = null,
 		viewerComponents = null,
-		ancillaryComponents = null;
+		ancillaryComponents = null,
+		fab = null;
 	
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 		additionalButtons = buildAdditionalButtons(additionalViewButtons);
 		viewerComponents = buildFromItems();
 		ancillaryComponents = buildAncillary();
+
+		if (!_.isEmpty(ancillaryFabs.current)) {
+			fab = <DynamicFab
+						fabs={ancillaryFabs.current}
+						collapseOnPress={false}
+						verticalOffset={showFooter ? 15 : 0}
+					/>;
+		}
 	}
 
 	let canEdit = true;
@@ -385,6 +434,33 @@ function Viewer(props) {
 		className += ' ' + props.className;
 	}
 
+	const footer = showFooter ? 
+			<Footer className="justify-end">
+				{showDeleteBtn && 
+					<HStack className="flex-1 justify-start">
+						<Button
+							{...testProps('deleteBtn')}
+							key="deleteBtn"
+							onPress={onDelete}
+							className={`
+								text-white
+								bg-warning-500
+								hover:bg-warning-600
+							`}
+							text="Delete"
+						/>
+					</HStack>}
+				{onClose && showCloseBtn &&
+					<Button
+						{...testProps('closeBtn')}
+						key="closeBtn"
+						onPress={onClose}
+						className="text-white"
+						text="Close"
+					/>}
+			</Footer> : null;
+
+	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
 	return <VStackNative
 				{...testProps(self)}
 				style={style}
@@ -403,6 +479,7 @@ function Viewer(props) {
 							flex-1
 						`}
 					>
+						{scrollToTopAnchor}
 						{canEdit && onEditMode &&
 							<Toolbar className="justify-end">
 								<HStack className="flex-1 items-center">
@@ -434,31 +511,8 @@ function Viewer(props) {
 						<VStack className="Viewer-AncillaryComponents m-2 pt-4 px-2">{ancillaryComponents}</VStack>
 					</ScrollView>
 
-					{(showDeleteBtn || showCloseBtn) && 
-						<Footer className="justify-end">
-							{showDeleteBtn && 
-								<HStack className="flex-1 justify-start">
-									<Button
-										{...testProps('deleteBtn')}
-										key="deleteBtn"
-										onPress={onDelete}
-										className={`
-											text-white
-											bg-warning-500
-											hover:bg-warning-600
-										`}
-										text="Delete"
-									/>
-								</HStack>}
-							{onClose && showCloseBtn &&
-								<Button
-									{...testProps('closeBtn')}
-									key="closeBtn"
-									onPress={onClose}
-									className="text-white"
-									text="Close"
-								/>}
-						</Footer>}
+					{footer}
+					{fab}
 
 				</>}
 			</VStackNative>;

package/src/Components/index.js

@@ -9,6 +9,7 @@ import AngleRight from './Icons/AngleRight.js';
 import AnglesLeft from './Icons/AnglesLeft.js';
 import AnglesRight from './Icons/AnglesRight.js';
 import Asterisk from './Icons/Asterisk.js';
+import ArrowUp from './Icons/ArrowUp.js';
 import Ban from './Icons/Ban.js';
 import Bars from './Icons/Bars.js';
 import BarsStaggered from './Icons/BarsStaggered.js';
@@ -253,6 +254,7 @@ const components = {
 	AnglesLeft,
 	AnglesRight,
 	Asterisk,
+	ArrowUp,
 	Ban,
 	Bars,
 	BarsStaggered,