@onehat/ui 0.2.57 → 0.2.59

package/src/Components/Tree/TreeNode.js

@@ -0,0 +1,94 @@
+import { useState, useMemo, } from 'react';
+import {
+	Box,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import UiGlobals from '../../UiGlobals.js';
+import withDraggable from '../Hoc/withDraggable.js';
+import IconButton from '../Buttons/IconButton.js';
+import _ from 'lodash';
+
+// This was broken out from Tree simply so we can memoize it
+
+export default function TreeNode(props) {
+	const {
+			nodeProps,
+			bg,
+			datum,
+			onToggle,
+		} = props,
+		styles = UiGlobals.styles,
+		item = datum.item,
+		isPhantom = item.isPhantom,
+		isExpanded = datum.isExpanded,
+		hasChildren = datum.hasChildren,
+		depth = datum.depth,
+		text = datum.text,
+		iconCollapsed = datum.iconCollapsed,
+		iconExpanded = datum.iconExpanded,
+		iconLeaf = datum.iconLeaf,
+		hash = item?.hash || item;
+
+	const icon = hasChildren ? (isExpanded ? iconCollapsed : iconExpanded) : iconLeaf;
+
+	return useMemo(() => {
+		
+		return <Row
+					alignItems="center"
+					flexGrow={1}
+					{...nodeProps}
+					bg={bg}
+					key={hash}
+					pl={(depth * 10) + 'px'}
+				>
+					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
+					
+					<IconButton
+						icon={icon}
+						onPress={onToggle}
+					/>
+
+					<Text
+						key={key}
+						overflow="hidden"
+						textOverflow="ellipsis"
+						alignSelf="center"
+						style={{ userSelect: 'none', }}
+						fontSize={styles.TREE_NODE_FONTSIZE}
+						px={styles.TREE_NODE_PX}
+						py={styles.TREE_NODE_PY}
+						numberOfLines={1}
+						ellipsizeMode="head"
+						{...propsToPass}
+					>{text}</Text>
+
+				</Row>;
+	}, [
+		nodeProps,
+		bg,
+		item,
+		isPhantom,
+		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+		isExpanded,
+		hasChildren,
+		depth,
+		text,
+		icon,
+		onToggle,
+	]);
+}
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					mode={VERTICAL}
+					{...props}
+				/>;
+	};
+}
+
+export const ReorderableTreeNode = withAdditionalProps(withDraggable(TreeNode));

package/src/Constants/Styles.js

@@ -52,8 +52,12 @@ const defaults = {
 	GRID_HEADER_BG: '#eee',
 	GRID_HEADER_HOVER_BG: '#ddd',
 	GRID_HEADER_FONTSIZE: DEFAULT_FONTSIZE,
+	GRID_HEADER_CELL_PX: 2,
+	GRID_HEADER_CELL_PY: 3,
 	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_HOVER_BG: 'hover',
 	GRID_ROW_SELECTED_BG: 'selected',
@@ -85,6 +89,16 @@ const defaults = {
 	TAB_COLOR: WHITE,
 	TAB_FONTSIZE: DEFAULT_FONTSIZE,
 	TEXT_FONTSIZE: DEFAULT_FONTSIZE,
+	TREE_NODE_FONTSIZE: DEFAULT_FONTSIZE,
+	TREE_NODE_PX: 2,
+	TREE_NODE_PY: 3,
+	TREE_NODE_BG: WHITE,
+	TREE_NODE_HOVER_BG: 'hover',
+	TREE_NODE_SELECTED_BG: 'selected',
+	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
+	TREE_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
+	TREE_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
+	TREE_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
 };
 
 export default defaults;

package/src/Functions/BankersRound.js

@@ -1,4 +1,4 @@
-import round from 'locutus/php/math/round'; // Port of PHP functions to JS
+import round from 'locutus/php/math/round.js'; // Port of PHP functions to JS
 
 // Rounds to the nearest EVEN integer. This means it is unbiased (doesn't always round up, doesn't always round down)
 export function BankersRound($x) {