@onehat/ui 0.3.380 → 0.4.0

package/src/Constants/Dates.js

@@ -0,0 +1,16 @@
+import moment from 'moment';
+
+export const TODAY = moment();
+export const TODAY_START = TODAY.format('YYYY-MM-DD') + ' 00:00:00';
+export const TODAY_END = TODAY.format('YYYY-MM-DD') + ' 23:59:59';
+export const TOMORROW = moment().add(1, 'days');
+export const YESTERDAY = moment().add(-1, 'days');
+export const TWO_WEEKS_AGO = moment().add(-2, 'weeks');
+export const ONE_MONTH_AGO = moment().add(-1, 'months');
+export const TWO_MONTHS_AGO = moment().add(-2, 'months');
+export const SIX_MONTHS_AGO = moment().add(-6, 'months');
+export const ONE_MONTH_FROM_NOW = moment().add(1, 'months');
+export const ONE_YEAR_AGO = moment().add(-1, 'years');
+export const MOMENT_DATE_FORMAT_1 = 'YYYY-MM-DD HH:mm:ss';
+export const MOMENT_DATE_FORMAT_2 = 'MMMM Do YYYY, h:mm:ss a';
+export const MOMENT_DATE_FORMAT_3 = 'h:mm A';

package/src/Constants/EditorModes.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
+export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';

package/src/Constants/Input.js

@@ -0,0 +1 @@
+export const AUTO_SUBMIT_DELAY = 500;

package/src/Constants/Styles.js

@@ -1,134 +1,145 @@
 // These are the default styles of the @onehat/ui components.
 // App can override these with Functions/registerStyles()
 const
-	DEFAULT_FONTSIZE = 15,
-	WHITE = '#fff',
-	FOCUS = '#ffd';
+	DEFAULT_FONTSIZE = 'base',
+	BLACK = 'black',
+	WHITE = 'white',
+	FOCUS = 'focus-200',
+	HOVER = 'primary-200';
 
 const defaults = {
 	ATTACHMENTS_MAX_FILESIZE: 1024 * 1024 * 5, // 5MB
 	DEFAULT_WINDOW_WIDTH: 900,
 	DEFAULT_WINDOW_HEIGHT: 800,
-	FILTER_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_ANCILLARY_TITLE_FONTSIZE: 22,
-	FORM_ANCILLARY_DESCRIPTION_FONTSIZE: 16,
-	FORM_COLOR_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_COLOR_INPUT_BG: WHITE,
-	FORM_COLOR_INPUT_FOCUS_BG: FOCUS,
-	FORM_COMBO_HEIGHT: '40px',
-	FORM_COMBO_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_COMBO_INPUT_BG: WHITE,
-	FORM_COMBO_INPUT_FOCUS_BG: FOCUS,
+	FILTER_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_ANCILLARY_TITLE_FONTSIZE: 'text-[22px]',
+	FORM_ANCILLARY_DESCRIPTION_FONTSIZE: 'text-[16px]',
+	FORM_COLOR_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_COLOR_INPUT_BG: 'bg-' + WHITE,
+	FORM_COLOR_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
+	FORM_COMBO_HEIGHT: 'h-[40px]',
+	FORM_COMBO_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_COMBO_INPUT_BG: 'bg-' + WHITE,
+	FORM_COMBO_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
 	FORM_COMBO_MENU_HEIGHT: 250,
 	FORM_COMBO_MENU_MIN_WIDTH: 250,
-	FORM_COMBO_TRIGGER_BG: WHITE,
-	FORM_COMBO_TRIGGER_HOVER_BG: 'trueGray.300',
-	FORM_DATE_ICON_BG: 'primary.200',
-	FORM_DATE_ICON_BG_HOVER: 'primary.400',
-	FORM_DATE_ICON_COLOR: WHITE,
-	FORM_DATE_INPUT_BG: WHITE,
-	FORM_DATE_INPUT_FOCUS_BG: FOCUS,
-	FORM_DATE_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_FIELDSET_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_FIELDSET_BG: '#f6f6f6',
-	FORM_FILE_ICON_BG: 'primary.200',
-	FORM_FILE_ICON_BG_HOVER: 'primary.400',
-	FORM_FILE_ICON_COLOR: WHITE,
-	FORM_FILE_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_FILE_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_FILE_READOUT_BG: WHITE,
-	FORM_INPUT_BG: WHITE,
-	FORM_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_INPUT_FOCUS_BG: FOCUS,
+	FORM_COMBO_TRIGGER_BG: 'bg-' + WHITE,
+	FORM_COMBO_TRIGGER_BG_HOVER: 'hover:bg-grey-300',
+	FORM_DATE_ICON_BG: 'bg-primary-200',
+	FORM_DATE_ICON_BG_HOVER: 'hover:bg-primary-400',
+	FORM_DATE_ICON_COLOR: 'text-' + WHITE,
+	FORM_DATE_INPUT_BG: 'bg-' + WHITE,
+	FORM_DATE_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
+	FORM_DATE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_FIELDSET_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_FIELDSET_BG: 'bg-[#f6f6f6]',
+	FORM_FILE_ICON_BG: 'bg-primary-200',
+	FORM_FILE_ICON_BG_HOVER: 'hover:bg-primary-400',
+	FORM_FILE_ICON_COLOR: 'text-' + WHITE,
+	FORM_FILE_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_FILE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_FILE_READOUT_BG: 'bg-' + WHITE,
+	FORM_INPUT_BG: 'bg-' + WHITE,
+	FORM_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
+	FORM_INPUT_BG_HOVER: 'hover:bg-' + HOVER,
+	FORM_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
 	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_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_NUMBER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_SELECT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_SELECT_BG: 'bg-grey-100',
+	FORM_SELECT_BG_FOCUS: 'focus:bg-' + FOCUS,
+	FORM_SELECT_BG_HOVER: 'hover:bg-' + HOVER,
+	FORM_TAG_MB: 'mb-1',
+	FORM_TAG_MIN_HEIGHT: 'min-h-10',
+	FORM_TAG_PADDING: 'p-1',
+	FORM_TAG_VALUEBOX_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TAG_VALUEBOX_ICON_SIZE: 'sm',
-	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_TEXTAREA_BG: WHITE,
-	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_TEXTAREA_HEIGHT: 130,
+	FORM_TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_TEXTAREA_BG: 'bg-' + WHITE,
+	FORM_TEXTAREA_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	FORM_TEXTAREA_HEIGHT: 'h-[130px]',
 	FORM_TOGGLE_BG: null,
-	FORM_TOGGLE_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TOGGLE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TOGGLE_SIZE: 'md',
 	FORM_TOGGLE_ON_COLOR: '#0b0',
 	FORM_TOGGLE_ON_HOVER_COLOR: '#090',
 	FORM_TOGGLE_OFF_COLOR: '#f00',
 	FORM_TOGGLE_OFF_HOVER_COLOR: '#c00',
-	GRID_CELL_FONTSIZE: DEFAULT_FONTSIZE,
-	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_HEADER_ICON_MT: 3,
-	GRID_HEADER_ICON_MR: 2,
+	FORM_ONE_COLUMN_THRESHOLD: 900, // only allow one column in form unless form is wider than this
+	FORM_STACK_ROW_THRESHOLD: 400, // stack labels & fields if row is less than this width
+	GRID_CELL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	GRID_CELL_PX: 'px-2',
+	GRID_CELL_PY: 'py-3',
+	GRID_HEADER_BG: 'bg-[#eee]',
+	GRID_HEADER_BG_HOVER: 'hover:bg-[#ddd]',
+	GRID_HEADER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	GRID_HEADER_CELL_PX: 'px-2',
+	GRID_HEADER_CELL_PY: 'py-3',
+	GRID_HEADER_ICON_MT: 'mt-3',
+	GRID_HEADER_ICON_MR: 'mt-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',
-	GRID_BORDER_WIDTH: 1,
-	GRID_BORDER_COLOR: 'trueGray.300',
-	ICON_BUTTON_BG: 'trueGray.200:alpha.0',
-	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_BORDER_BOTTOM_COLOR: 'trueGray.400',
-	PANEL_HEADER_BORDER_BOTTOM_WIDTH: 1,
-	PANEL_HEADER_BG: 'primary.100',
-	PANEL_HEADER_BG_VERTICAL: 'primary.100',
-	PANEL_HEADER_ICON_COLOR: WHITE,
-	PANEL_HEADER_ICON_SIZE: 13,
-	PANEL_HEADER_TEXT_COLOR: WHITE,
-	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',
+	GRID_INLINE_EDITOR_BORDER_TOP_COLOR: 'border-t-primary-100',
+	GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR: 'border-b-primary-100',
+	GRID_INLINE_EDITOR_BG: 'bg-primary-700',
+	GRID_NAV_COLUMN_COLOR: 'text-grey-400',
+	GRID_ROW_BG: '#fff', // must be hex
+	GRID_ROW_ALTERNATE_BG: '#ddd', // must be hex
+	GRID_ROW_BG_HOVER: '#ccc', // must be hex
+	GRID_ROW_SELECTED_BG: '#ff0', // must be hex
+	GRID_ROW_SELECTED_BG_HOVER: '#cc0', // must be hex
+	GRID_REORDER_BORDER_COLOR: 'border-[#23d9ea]',
+	GRID_REORDER_BORDER_WIDTH: 'border-4',
+	GRID_REORDER_BORDER_STYLE: 'border-dashed',
+	ICON_BUTTON_BG: 'bg-grey-100',
+	ICON_BUTTON_BG_ACTIVE: 'active:bg-grey-900/50',
+	ICON_BUTTON_BG_DISABLED: 'disabled:bg-grey-200',
+	ICON_BUTTON_BG_HOVER: 'hover:bg-grey-900/20',
+	ICON_BUTTON_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
+	ICON_BUTTON_PX: 'px-[10px]',
+	ICON_BUTTON_PY: 'py-[10px]',
+	INLINE_EDITOR_MIN_WIDTH: 'min-w-[150px]',
+	PANEL_FOOTER_BORDER_TOP_COLOR: 'border-t-primary-300', // :alpha.50
+	PANEL_HEADER_BG: 'bg-primary-500',
+	PANEL_HEADER_ICON_COLOR: 'text-' + WHITE,
+	PANEL_HEADER_ICON_SIZE: 'md',
+	PANEL_HEADER_TEXT_COLOR: 'text-' + WHITE,
+	PANEL_HEADER_TEXT_FONTSIZE: 'text-[18px]',
 	SLIDER_MIN_TRACK_COLOR: '#000',
 	SLIDER_MAX_TRACK_COLOR: '#ccc',
 	SLIDER_THUMB_COLOR: '#000',
-	SLIDER_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
-	TAB_ACTIVE_BG: 'trueGray.200',
-	TAB_ACTIVE_HOVER_BG: 'trueGray.200',
-	TAB_ACTIVE_COLOR: 'primary.800',
-	TAB_ICON_COLOR: WHITE,
-	TAB_ACTIVE_ICON_COLOR: '#000',
-	TAB_BAR_BG: 'primary.700',
-	TAB_BG: 'primary.300',
-	TAB_HOVER_BG: 'primary.500',
-	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_NODE_HIGHLIGHTED_BG: 'highlighted',
-	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
-	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
+	SLIDER_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	TAB_BAR_BG: 'bg-grey-300',
+	TAB_BG: 'bg-grey-300',
+	TAB_BG_ACTIVE: 'active:bg-grey-900/50',
+	TAB_BG_CURRENT: 'bg-grey-0',
+	TAB_BG_DISABLED: 'disabled:bg-grey-200',
+	TAB_BG_HOVER: 'hover:bg-grey-900/30',
+	TAB_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
+	TAB_BG_CURRENT_HOVER: 'hover:bg-grey-900/30',
+	TAB_COLOR: 'text-' + BLACK,
+	TAB_COLOR_ACTIVE: 'active:text-primary-800',
+	TAB_COLOR_CURRENT: 'active:text-primary-800',
+	TAB_ICON_COLOR: 'text-' + BLACK,
+	TAB_ICON_COLOR_ACTIVE: 'text-' + BLACK,
+	TAB_ICON_COLOR_CURRENT: 'text-' + BLACK,
+	TAB_ICON_COLOR_HOVER: 'group-hover/button:text-' + BLACK,
+	TAB_ICON_COLOR_DISABLED: 'group-disabled/button:text-grey-400',
+	TAB_FONTSIZE: 'text-md',
+	TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	TREE_NODE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
+	TREE_NODE_PX: 'px-2',
+	TREE_NODE_PY: 'py-3',
+	TREE_NODE_BG: '#fff', // must be hex
+	TREE_NODE_BG_HOVER: '#cce', // must be hex
+	TREE_NODE_SELECTED_BG: '#ff0', // must be hex
+	TREE_NODE_SELECTED_BG_HOVER: '#cc0', // must be hex
+	TREE_NODE_HIGHLIGHTED_BG: '#0f0', // must be hex
+	TOOLBAR_BG: 'bg-grey-200',
+	TOOLBAR_ITEMS_COLOR: 'text-grey-800',
+	TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled:text-grey-400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',
-	TOOLBAR_PX: 2,
-	TOOLBAR_PY: 2,
-	VIEWER_ANCILLARY_FONTSIZE: 22,
+	VIEWER_ANCILLARY_FONTSIZE: 'text-[22px]',
 };
 
 export default defaults;

package/src/Constants/Tasks.js

@@ -0,0 +1,3 @@
+export const BACKGROUND_NOTIFICATION_TASK = 'BACKGROUND_NOTIFICATION_TASK';
+export const BACKGROUND_LOCATION_TASK = 'BACKGROUND_LOCATION_TASK';
+export const BACKGROUND_FETCH_TASK = 'BACKGROUND_FETCH_TASK';

package/src/Constants/UiModes.js

@@ -1,12 +1,13 @@
-import { isReactNative, isBrowser, isWebWorker, } from '../Functions/PlatformDetector.js';
+import { isReactNative, isBrowser, isWebWorker, } from '../functions/PlatformDetector.js';
 
 
 export const UI_MODE_WEB = 'Web';
-export const UI_MODE_REACT_NATIVE = 'ReactNative';
+export const UI_MODE_NATIVE = 'Native';
+export const UI_MODE_REACT_NATIVE = 'Native'; // for backward compatibility
 
 export let CURRENT_MODE;
 if (isBrowser || isWebWorker) {
 	CURRENT_MODE = UI_MODE_WEB;
 } else if (isReactNative) {
-	CURRENT_MODE = UI_MODE_REACT_NATIVE;
+	CURRENT_MODE = UI_MODE_NATIVE;
 }

package/src/Functions/buildAdditionalButtons.js

@@ -1,6 +1,6 @@
 import {
 	Icon,
-} from 'native-base';
+} from '../Components/Gluestack';
 import Button from '../Components/Buttons/Button.js';
 import testProps from './testProps.js';
 import _ from 'lodash';
@@ -19,12 +19,13 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 			buttonProps = {
 				key,
 				reference: key,
+				className: 'ml-2',
 			};
 		if (handler) {
 			buttonProps.onPress = () => handler(handlerArgs);
 		}
 		if (icon) {
-			buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
+			buttonProps.leftIcon = <Icon as={icon} size="sm" className="text-[#fff]" />;
 		}
 		if (isDisabled) {
 			buttonProps.isDisabled = isDisabled;
@@ -33,12 +34,11 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 		const button = <Button
 							{...testProps('btn-' + key)}
 							color={color}
-							ml={2}
-							// mb={2}
 							parent={self}
 							reference={key}
+							text={text}
 							{...buttonProps}
-						>{text}</Button>;
+						/>;
 		additionalButtons.push(button);
 	});
 	return additionalButtons;

package/src/Functions/colorConversions.js

@@ -0,0 +1,74 @@
+export function hslToRgb(h,s,l) {
+	let a = s * Math.min(l, 1-l);
+	let f = (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);
+	return [f(0),f(8),f(4)];
+}
+
+export function hslaToRgba(h, s, l, a) {
+	return [...hslToRgb(h, s, l), a];
+}
+
+export function rgbToHsl(r, g, b) {
+	(r /= 255), (g /= 255), (b /= 255);
+	const vmax = max(r, g, b), vmin = min(r, g, b);
+	let h, s, l = (vmax + vmin) / 2;
+
+	if (vmax === vmin) {
+		return [0, 0, l]; // achromatic
+	}
+
+	const d = vmax - vmin;
+	s = l > 0.5 ? d / (2 - vmax - vmin) : d / (vmax + vmin);
+	if (vmax === r) h = (g - b) / d + (g < b ? 6 : 0);
+	if (vmax === g) h = (b - r) / d + 2;
+	if (vmax === b) h = (r - g) / d + 4;
+	h /= 6;
+
+	return [h, s, l];
+}
+
+export function rgbToHex(rgb) {
+	let r = rgb[0].toString(16),
+		g = rgb[1].toString(16),
+		b = rgb[2].toString(16);
+	if (r.length === 1) {
+		r = '0' + r;
+	}
+	if (g.length === 1) {
+		g = '0' + g;
+	}
+	if (b.length === 1) {
+		b = '0' + b;
+	}
+	hex = '#' + r + g + b;
+	return hex;
+}
+
+export function rgbaToHex(rgba) {
+	let r = rgba[0].toString(16),
+		g = rgba[1].toString(16),
+		b = rgba[2].toString(16),
+		a = rgba[3].toString(16);
+	if (r.length === 1) {
+		r = '0' + r;
+	}
+	if (g.length === 1) {
+		g = '0' + g;
+	}
+	if (b.length === 1) {
+		b = '0' + b;
+	}
+	if (a.length === 1) {
+		a = '0' + a;
+	}
+	hex = '#' + r + g + b + a;
+	return hex;
+}
+
+export function hslToHex(hsl) {
+	return rgbToHex(hslToRgb(hsl[0], hsl[1], hsl[2]));
+}
+
+export function hslaToHex(hsla) {
+	return rgbaToHex(hslaToRgba(hsla[0], hsla[1], hsla[2], hsla[3]));
+}

package/src/Functions/getIconButtonFromConfig.js

@@ -13,18 +13,14 @@ export default function getIconButtonFromConfig(config, ix, parent) {
 		} = config,
 		styles = UiGlobals.styles,
 		iconButtonProps = {
-			_hover: {
-				bg: 'trueGray.400',
-			},
-			mx: 1,
-			px: 3,
+			className: `
+				mx-1
+				px-3
+				self-center
+			`,
 		},
 		_icon = {
-			alignSelf: 'center',
 			size: styles.TOOLBAR_ITEMS_ICON_SIZE,
-			h: 20,
-			w: 20,
-			color: isDisabled ? styles.TOOLBAR_ITEMS_DISABLED_COLOR : styles.TOOLBAR_ITEMS_COLOR,
 		};
 	return <IconButton
 				{...testProps(key || 'btn-' + ix)}

package/src/Functions/getNodeIcon.js

@@ -0,0 +1,28 @@
+import {
+	COLLAPSED,
+	EXPANDED,
+	LEAF,
+} from '../constants/Tree.js';
+import BigCircle from '../components/Icons/BigCircle.js';
+import FolderClosed from '../components/Icons/ChevronRight.js';
+import FolderOpen from '../components/Icons/ChevronDown.js';
+import Camera from '../components/Icons/Camera.js';
+
+export default function getNodeIcon(which, item) {
+	let icon;
+	switch(which) {
+		case COLLAPSED:
+			icon = FolderClosed;
+			break;
+		case EXPANDED:
+			icon = FolderOpen;
+			break;
+		case LEAF:
+			icon = BigCircle;
+			if (item.regulars__regular_fk_id === 1) {
+				icon = Camera;
+			}
+			break;
+	}
+	return icon;
+}