@onehat/ui 0.3.179 → 0.3.183

package/package.json

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

package/src/Components/Buttons/IconButton.js

@@ -6,7 +6,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
-import styles from '../../Constants/Styles.js';
+import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 const
@@ -19,7 +19,8 @@ const
 				tooltip,
 				tooltipPlacement = 'bottom',
 				self,
-			} = props;
+			} = props,
+			styles = UiGlobals.styles;
 		let ref = props.outerRef;
 
 		if (!ref) {
@@ -49,7 +50,8 @@ const
 								flexDirection="row"
 								justifyContent="center"
 								alignItems="center"
-								p={2}
+								px={styles.ICON_BUTTON_PX}
+								py={styles.ICON_BUTTON_PY}
 								// bg={styles.ICON_BUTTON_BG}
 								_hover={{
 									bg: styles.ICON_BUTTON_BG_HOVER,

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

@@ -686,6 +686,7 @@ export function ComboComponent(props) {
 					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
 					newEntityDisplayValue={newEntityDisplayValue}
 					disablePresetButtons={!isEditor}
+					alternateRowBackgrounds={false}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {
@@ -931,7 +932,7 @@ export function ComboComponent(props) {
 		// be responsive for small screen sizes and bump additionalButtons to the next line
 		assembledComponents = 
 			<Column>
-				<Row {...refProps} justifyContent="center" alignItems="center" flex={1}>
+				<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
 					{xButton}
 					{eyeButton}
 					{inputAndTrigger}
@@ -943,7 +944,7 @@ export function ComboComponent(props) {
 			</Column>;
 	} else {
 		assembledComponents = 
-			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} onLayout={onLayout}>
+			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}
@@ -994,7 +995,7 @@ export function ComboComponent(props) {
 	}
 	
 	if (tooltip) {
-		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement} h="100%">
 								{assembledComponents}
 							</Tooltip>;
 	}

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

@@ -35,11 +35,9 @@ function NumberElement(props) {
 		const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
 		switch(key) {
 			case 'ArrowDown':
-			case 'ArrowLeft':
 				onDecrement();
 				break;
 			case 'ArrowUp':
-			case 'ArrowRight':
 				onIncrement();
 				break;
 			case 'Tab':

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

@@ -13,6 +13,7 @@ import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
 import ValueBox from './ValueBox.js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
+import UiGlobals from '../../../../UiGlobals.js';
 import _ from 'lodash';
 
 
@@ -41,6 +42,7 @@ function TagComponent(props) {
 			setValue,
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
+		styles = UiGlobals.styles,
 		valueRef = useRef(value),
 		ignoreNextComboValueChangeRef = useRef(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
@@ -247,9 +249,9 @@ function TagComponent(props) {
 						borderColor="trueGray.300"
 						borderRadius="md"
 						bg="trueGray.100"
-						p={1}
-						mb={1}
-						minHeight={10}
+						p={styles.FORM_TAG_PADDING}
+						mb={styles.FORM_TAG_MB}
+						minHeight={styles.FORM_TAG_MIN_HEIGHT}
 						flexWrap="wrap"
 					>{valueBoxes}</Row>
 					{!isViewOnly && <WhichCombo

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

@@ -5,6 +5,7 @@ import {
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
 import Xmark from '../../../Icons/Xmark.js';
+import UiGlobals from '../../../../UiGlobals.js';
 import _ from 'lodash';
 
 export default function ValueBox(props) {
@@ -12,7 +13,8 @@ export default function ValueBox(props) {
 			text,
 			onView,
 			onDelete,
-		} = props;
+		} = props,
+		styles = UiGlobals.styles;
 	return <Row
 				borderWidth={1}
 				borderColor="trueGray.400"
@@ -25,18 +27,22 @@ export default function ValueBox(props) {
 					_icon={{
 						as: Eye,
 						color: 'trueGray.600',
-						size: 'sm',
+						size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
 					}}
 					onPress={onView}
 					h="100%"
 				/>
-				<Text color="trueGray.600" mr={onDelete ? 0 : 2}>{text}</Text>
+				<Text
+					color="trueGray.600"
+					mr={onDelete ? 0 : 2}
+					fontSize={styles.FORM_TAG_VALUEBOX_FONTSIZE}
+				>{text}</Text>
 				{onDelete &&
 					<IconButton
 						_icon={{
 							as: Xmark,
 							color: 'trueGray.600',
-							size: 'sm',
+							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
 						}}
 						onPress={onDelete}
 						h="100%"

package/src/Components/Grid/Grid.js

@@ -121,6 +121,8 @@ function GridComponent(props) {
 			flex,
 			bg = '#fff',
 			verifyCanEdit,
+			alternateRowBackgrounds = true,
+			alternatingInterval = 2,
 
 			// withComponent
 			self,
@@ -409,6 +411,8 @@ function GridComponent(props) {
 								}
 							} else if (showHovers && isHovered) {
 								mixWith = styles.GRID_ROW_HOVER_BG;
+							} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
+								mixWith = styles.GRID_ROW_ALTERNATE_BG;
 							}
 							if (mixWith) {
 								const

package/src/Components/Grid/GridHeaderRow.js

@@ -396,7 +396,16 @@ export default function GridHeaderRow(props) {
 									{...textProps}
 								>{header}</Text>
 								
-								{isSorter && <Icon key="Icon" as={isSortDirectionAsc ? SortUp : SortDown} textAlign="center" size="sm" mt={3} mr={2} color="trueGray.500" />}
+								{isSorter && 
+									<Icon 
+										key="Icon" 
+										as={isSortDirectionAsc ? SortUp : SortDown} 
+										textAlign="center" 
+										size={styles.GRID_HEADER_ICON_SIZE}
+										mt={styles.GRID_HEADER_ICON_MT} 
+										mr={styles.GRID_HEADER_ICON_MR} 
+										color="trueGray.500"
+									/>}
 								
 								{isResizable && showDragHandles && 
 										<HeaderResizeHandle

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -138,7 +138,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = SecondaryRepository.sorters[0];
-					if (currentSorter.name !== SecondaryRepository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+					if (currentSorter.name.match(/__sort_order$/)) { // when it's using a sort column, keep using it
+						if (currentSorter.direction !== 'DESC') {
+							SecondaryRepository.pauseEvents();
+							SecondaryRepository.sort(currentSorter.name, 'DESC');
+							SecondaryRepository.setPage(1);
+							SecondaryRepository.resumeEvents();
+							await SecondaryRepository.reload();
+						}
+					} else if (currentSorter.name !== SecondaryRepository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
 						SecondaryRepository.pauseEvents();
 						SecondaryRepository.sort(SecondaryRepository.schema.model.idProperty, 'DESC');
 						SecondaryRepository.setPage(1);

package/src/Components/Hoc/withEditor.js

@@ -135,7 +135,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = Repository.sorters[0];
-					if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+					if (currentSorter.name.match(/__sort_order$/)) { // when it's using a sort column, keep using it
+						if (currentSorter.direction !== 'DESC') {
+							Repository.pauseEvents();
+							Repository.sort(currentSorter.name, 'DESC');
+							Repository.setPage(1);
+							Repository.resumeEvents();
+							await Repository.reload();
+						}
+					} else if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
 						Repository.pauseEvents();
 						Repository.sort(Repository.schema.model.idProperty, 'DESC');
 						Repository.setPage(1);

package/src/Components/Hoc/withFilters.js

@@ -313,7 +313,7 @@ export default function withFilters(WrappedComponent) {
 												{...elementProps}
 											/>;
 						if (showLabels && field !== 'q') {
-							filterElement = <Row key={'label-' + ix} alignItems="center">
+							filterElement = <Row key={'label-' + ix} alignItems="center" h="100%">
 												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{title}</Text>
 												{filterElement}
 											</Row>;

package/src/Components/Toolbar/Toolbar.js

@@ -1,15 +1,18 @@
 import {
 	Row,
 } from 'native-base';
+import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
+	const styles = UiGlobals.styles;
 	return <Row
 				w="100%"
 				justifyContent="flex-start"
 				bg="trueGray.200"
 				borderBottomWidth={1}
 				borderBottomColor="trueGray.400"
-				p={2}
+				px={styles.TOOLBAR_PX}
+				py={styles.TOOLBAR_PY}
 				overflow="auto"
 				{...props}
 			>

package/src/Constants/Styles.js

@@ -42,6 +42,11 @@ const defaults = {
 	FORM_LABEL_WIDTH: '30%',
 	FORM_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_NUMBER_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TAG_MB: 1,
+	FORM_TAG_MIN_HEIGHT: 10,
+	FORM_TAG_PADDING: 1,
+	FORM_TAG_VALUEBOX_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TAG_VALUEBOX_ICON_SIZE: 'sm',
 	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXTAREA_BG: WHITE,
 	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
@@ -59,11 +64,15 @@ const defaults = {
 	GRID_HEADER_FONTSIZE: DEFAULT_FONTSIZE,
 	GRID_HEADER_CELL_PX: 2,
 	GRID_HEADER_CELL_PY: 3,
+	GRID_HEADER_ICON_MT: 3,
+	GRID_HEADER_ICON_MR: 2,
+	GRID_HEADER_ICON_SIZE: 'sm',
 	GRID_INLINE_EDITOR_BORDER_COLOR: 'primary.100',
 	GRID_NAV_COLUMN_COLOR: '#aaa',
 	GRID_CELL_PX: 2,
 	GRID_CELL_PY: 3,
 	GRID_ROW_BG: WHITE,
+	GRID_ROW_ALTERNATE_BG: '#e5e5e5',
 	GRID_ROW_HOVER_BG: 'hover',
 	GRID_ROW_SELECTED_BG: 'selected',
 	GRID_ROW_SELECTED_HOVER_BG: 'selectedHover',
@@ -73,6 +82,8 @@ const defaults = {
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
 	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
+	ICON_BUTTON_PX: 2,
+	ICON_BUTTON_PY: 2,
 	INLINE_EDITOR_MIN_WIDTH: 150,
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
@@ -108,6 +119,8 @@ const defaults = {
 	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	TOOLBAR_PX: 2,
+	TOOLBAR_PY: 2,
 	VIEWER_ANCILLARY_FONTSIZE: 22,
 };