@onehat/ui 0.2.76 → 0.2.78

package/src/Components/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-import { useState, useMemo, } from 'react';
+import { useMemo, } from 'react';
 import {
 	Box,
 	Icon,
@@ -6,9 +6,6 @@ import {
 	Spinner,
 	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';
@@ -22,6 +19,8 @@ export default function TreeNode(props) {
 			bg,
 			datum,
 			onToggle,
+			isDragMode,
+			isHighlighted,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -37,7 +36,9 @@ export default function TreeNode(props) {
 		iconLeaf = datum.iconLeaf,
 		hash = item?.hash || item;
 
-	const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
+	const
+		icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf,
+		adjustedBg = isHighlighted ? styles.TREE_NODE_HIGHLIGHTED_BG : bg;
 
 	return useMemo(() => {
 		
@@ -45,14 +46,14 @@ export default function TreeNode(props) {
 					alignItems="center"
 					flexGrow={1}
 					{...nodeProps}
-					bg={bg}
+					bg={adjustedBg}
 					key={hash}
 				>
 					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
 					
 					{isLoading ? 
 						<Spinner px={2} /> : 
-						(hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
+						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
 
 					<Text
 						overflow="hidden"
@@ -70,7 +71,7 @@ export default function TreeNode(props) {
 				</Row>;
 	}, [
 		nodeProps,
-		bg,
+		adjustedBg,
 		item,
 		isPhantom,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
@@ -81,16 +82,9 @@ export default function TreeNode(props) {
 		icon,
 		onToggle,
 		isLoading,
+		isDragMode,
+		isHighlighted,
 	]);
 }
 
-function withAdditionalProps(WrappedComponent) {
-	return (props) => {
-		return <WrappedComponent
-					mode={VERTICAL}
-					{...props}
-				/>;
-	};
-}
-
-export const ReorderableTreeNode = withAdditionalProps(withDraggable(TreeNode));
+export const DraggableTreeNode = withDraggable(TreeNode);

package/src/Constants/Directions.js

@@ -1,5 +1,6 @@
 export const HORIZONTAL = 'HORIZONTAL';
 export const VERTICAL = 'VERTICAL';
+export const XY = 'XY';
 export const LEFT = 'LEFT';
 export const RIGHT = 'RIGHT';
 export const NORTH = 'NORTH';

package/src/Constants/Styles.js

@@ -67,6 +67,7 @@ const defaults = {
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
 	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
+	INLINE_EDITOR_MIN_WIDTH: 150,
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',
@@ -76,6 +77,9 @@ const defaults = {
 	PANEL_HEADER_TEXT_FONTSIZE: 15,
 	PANEL_HEADER_PX: 3,
 	PANEL_HEADER_PY: 1,
+	REORDER_BORDER_COLOR: '#23d9ea',
+	REORDER_BORDER_WIDTH: 4,
+	REORDER_BORDER_STYLE: 'dashed',
 	TAB_ACTIVE_BG: 'trueGray.200',
 	TAB_ACTIVE_HOVER_BG: 'trueGray.200',
 	TAB_ACTIVE_COLOR: 'primary.800',
@@ -94,6 +98,7 @@ const defaults = {
 	TREE_NODE_HOVER_BG: 'hover',
 	TREE_NODE_SELECTED_BG: 'selected',
 	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
+	TREE_NODE_HIGHLIGHTED_BG: '#ffa',
 	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',

package/src/Constants/Tree.js

@@ -1,4 +1,7 @@
 export const SORT_ASCENDING = 'ASC'; // This is what RestTrait expects
 export const SORT_DESCENDING = 'DESC'; // This is what RestTrait expects
 export const DROP_POSITION_BEFORE = 'before'; // This is what RestTrait expects
-export const DROP_POSITION_AFTER = 'after'; // This is what RestTrait expects
+export const DROP_POSITION_AFTER = 'after'; // This is what RestTrait expects
+export const COLLAPSED = 'COLLAPSED';
+export const EXPANDED = 'EXPANDED';
+export const LEAF = 'LEAF';

package/src/Constants/UiModes.js

@@ -5,8 +5,8 @@ export const UI_MODE_WEB = 'Web';
 export const UI_MODE_REACT_NATIVE = 'ReactNative';
 
 export let CURRENT_MODE;
-if (isReactNative) {
-	CURRENT_MODE = UI_MODE_REACT_NATIVE;
-} else if (isBrowser || isWebWorker) {
+if (isBrowser || isWebWorker) {
 	CURRENT_MODE = UI_MODE_WEB;
+} else if (isReactNative) {
+	CURRENT_MODE = UI_MODE_REACT_NATIVE;
 }