@onehat/ui 0.3.122 → 0.3.124

package/package.json

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

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

@@ -24,6 +24,7 @@ import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
 import Check from '../../../Icons/Check.js';
 import Xmark from '../../../Icons/Xmark.js';
+import Eye from '../../../Icons/Eye.js';
 import _ from 'lodash';
 
 const FILTER_NAME = 'q';
@@ -38,6 +39,7 @@ export function ComboComponent(props) {
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
 			showXButton = false,
+			showEyeButton = false,
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
@@ -69,6 +71,8 @@ export function ComboComponent(props) {
 		displayValueRef = useRef(),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
+		[isViewerShown, setIsViewerShown] = useState(false),
+		[viewerSelection, setViewerSelection] = useState([]),
 		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isSearchMode, setIsSearchMode] = useState(false),
@@ -292,6 +296,27 @@ export function ComboComponent(props) {
 			clearGridFilters();
 			clearGridSelection();
 		},
+		onEyeButtonPress = async () => {
+			const id = value;
+			if (!Repository.isLoaded) {
+				await Repository.load();
+			}
+			if (Repository.isLoading) {
+				await Repository.waitUntilDoneLoading();
+			}
+			let record = Repository.getById(id); // first try to get from entities in memory
+			if (!record && Repository.getSingleEntityFromServer) {
+				record = await Repository.getSingleEntityFromServer(id);
+			}
+
+			if (!record) {
+				alert('Record could not be found!');
+				return;
+			}
+
+			setViewerSelection([record]);
+			setIsViewerShown(true);
+		},
 		onCheckButtonPress = () => {
 			hideMenu();
 		},
@@ -433,6 +458,7 @@ export function ComboComponent(props) {
 
 	const inputIconElement = icon ? <Icon as={icon} color="trueGray.300" size="md" ml={2} mr={3} /> : null;
 	let xButton = null,
+		eyeButton = null,
 		inputAndTrigger = null,
 		checkButton = null,
 		grid = null,
@@ -453,6 +479,24 @@ export function ComboComponent(props) {
 						_hover={{
 							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
 						}}
+						mr={1}
+					/>;
+	}
+	if (showEyeButton && !_.isNil(value)) {
+		eyeButton = <IconButton
+						_icon={{
+							as: Eye,
+							color: 'trueGray.600',
+							size: 'sm',
+						}}
+						isDisabled={isDisabled}
+						onPress={onEyeButtonPress}
+						h="100%"
+						bg={styles.FORM_COMBO_TRIGGER_BG}
+						_hover={{
+							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+						}}
+						mr={1}
 					/>;
 	}
 
@@ -760,6 +804,7 @@ export function ComboComponent(props) {
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
 				<Row h={10}>
 					{xButton}
+					{eyeButton}
 					{disableDirectEntry ?
 						<Text
 							ref={inputRef}
@@ -847,6 +892,7 @@ export function ComboComponent(props) {
 	}
 	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 							{xButton}
+							{eyeButton}
 							{inputAndTrigger}
 							{additionalButtons}
 							{dropdownMenu}

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

@@ -42,7 +42,7 @@ function TagComponent(props) {
 		} = props,
 		ignoreNextComboValueChangeRef = useRef(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
-		[viewerSelection, setViewerSelection] = useState(false),
+		[viewerSelection, setViewerSelection] = useState([]),
 		getIgnoreNextComboValueChange = () => {
 			return ignoreNextComboValueChangeRef.current;
 		},

package/src/Components/Form/Form.js

@@ -345,8 +345,11 @@ function Form(props) {
 					editorTypeProps.autoLoad = true;
 				}
 			}
-			if (isCombo && _.isNil(propsToPass.showXButton)) {
-				editorTypeProps.showXButton = true;
+			if (isCombo) {
+				editorTypeProps.showEyeButton = true;
+				if (_.isNil(propsToPass.showXButton)) {
+					editorTypeProps.showXButton = true;
+				}
 			}
 			const Element = getComponentFromType(type);
 			let children;

package/src/Components/Hoc/withFilters.js

@@ -342,7 +342,10 @@ export default function withFilters(WrappedComponent) {
 					if (isUsingCustomFilters) {
 						_.each(filtersToUse, ({ field, value, getRepoFilters }) => {
 							if (getRepoFilters) {
-								const repoFiltersFromFilter = getRepoFilters(value);
+								let repoFiltersFromFilter = getRepoFilters(value) || [];
+								if (!_.isArray(repoFiltersFromFilter)) {
+									repoFiltersFromFilter = [repoFiltersFromFilter];
+								}
 								_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
 									newRepoFilters.push(repoFilter);
 								});