@onehat/ui 0.2.58 → 0.2.59

package/src/Components/Tree/TreeNode.js

@@ -10,9 +10,6 @@ import {
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
-import FolderClosed from '../Icons/FolderClosed.js';
-import FolderOpen from '../Icons/FolderOpen.js';
-import File from '../Icons/File.js';
 import _ from 'lodash';
 
 // This was broken out from Tree simply so we can memoize it
@@ -21,66 +18,68 @@ export default function TreeNode(props) {
 	const {
 			nodeProps,
 			bg,
-			itemData,
+			datum,
 			onToggle,
 		} = props,
 		styles = UiGlobals.styles,
-		item = itemData.item,
+		item = datum.item,
 		isPhantom = item.isPhantom,
-		isExpanded = itemData.isExpanded,
-		hasChildren = itemData.hasChildren,
-		depth = itemData.depth,
-		text = itemData.text,
+		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 = props.icon || (hasChildren ? (isExpanded ? <FolderOpen /> : <FolderClosed />) : <File />);
+	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}
-						/>
+	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>
+					<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,
-			isVisible,
-			hasChildren,
-			depth,
-			text,
-			// props.icon,
-			onToggle,
-		]);
+				</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) {

package/src/Constants/Styles.js

@@ -89,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;