@onehat/ui 0.3.81 → 0.3.83

package/package.json

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

package/src/Components/Buttons/Button.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, } from 'react';
+import { useRef, } from 'react';
 import {
 	Button,
 } from 'native-base';
@@ -10,9 +10,9 @@ const ButtonComponent = function(props) {
 		} = props,
 		buttonRef = useRef();
 	
-	useEffect(() => {
+	if (self) {
 		self.ref = buttonRef.current;
-	}, []);
+	}
 
 	return <Button ref={buttonRef} {...props} />;
 }

package/src/Components/Buttons/IconButton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, } from 'react';
+import React, { useRef, } from 'react';
 import {
 	Icon,
 	Pressable,
@@ -25,10 +25,9 @@ const
 		if (!ref) {
 			ref = useRef();
 		}
-
-		useEffect(() => {
+		if (self) {
 			self.ref = ref.current;
-		}, []);
+		}
 
 		const propsIcon = props._icon || {};
 		let icon = props.icon,

package/src/Components/Hoc/withComponent.js

@@ -1,33 +1,31 @@
-import React, { useState, useRef, useEffect, } from 'react';
-import {
-	v4 as uuid,
-} from 'uuid';
-import _ from 'lodash';
+import { useRef, useEffect, } from 'react';
 
 // This HOC establishes a parent-child relationship between components.
-// Basically anything wrapped in withComponent registers itself with a parent
-// and allows children to register.
+// Basically anything wrapped in withComponent that has a reference prop
+// registers itself with a parent and allows children to register.
 
 export default function withComponent(WrappedComponent) {
 	return (props) => {
 
+		if (!props.reference) {
+			return <WrappedComponent {...props} />;
+		}
+
 		const {
-				// self: parent,
 				parent,
-				componentMethods,
+				reference,
 				...propsToPass
 			} = props,
-			reference = !_.isEmpty(props.reference) ? props.reference : uuid(),
 			childrenRef = useRef({}),
 			selfRef = useRef({
 				parent,
 				reference,
+				path: (parent?.path || '' ) + '/' + reference,
 				hasChild: (childRef) => {
 					const {
 							reference,
-						} = childRef,
-						found = _.find(childrenRef.current, (ref, ix) => ix === reference);
-					return !!found;
+						} = childRef;
+					return typeof childrenRef.current[reference] !== 'undefined';
 				},
 				registerChild: (childRef) => {
 					const {
@@ -50,16 +48,11 @@ export default function withComponent(WrappedComponent) {
 			});
 
 		useEffect(() => {
-			if (componentMethods) {
-				_.each(componentMethods, (method, name) => {
-					selfRef.current[name] = method;
-				});
-			}
-			if (parent && reference && !parent.hasChild(selfRef.current)) {
+			if (parent && !parent.hasChild(selfRef.current)) {
 				parent.registerChild(selfRef.current);
 			}
 			return () => {
-				if (parent && reference) {
+				if (parent) {
 					parent.unregisterChild(selfRef.current);
 				}
 				childrenRef.current = {};
@@ -67,10 +60,8 @@ export default function withComponent(WrappedComponent) {
 		}, []);
 
 		return <WrappedComponent
-					// parent={parent}
 					self={selfRef.current}
 					{...propsToPass}
-					reference={reference}
 				/>;
 
 	};

package/src/Components/Hoc/withFilters.js

@@ -62,7 +62,7 @@ export default function withFilters(WrappedComponent) {
 					defaultFilters: modelDefaultFilters,
 					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
-				id = props.id || props.reference || useId(),
+				id = props.id || props.path || useId(),
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters

package/src/Components/Tab/TabBar.js

@@ -11,6 +11,7 @@ import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import UiGlobals from '../../UiGlobals.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 import withComponent from '../Hoc/withComponent.js';
 import IconButton from '../Buttons/IconButton.js';
 import Minimize from '../Icons/Minimize.js';
@@ -184,16 +185,23 @@ function TabBar(props) {
 				if (isCollapsed || !tab.title) {
 					useIconButton = true;
 				}
+				const tabIcon = _.clone(tab._icon);
+				if (tabIcon.as && _.isString(tabIcon.as)) {
+					Type = getComponentFromType(tabIcon.as);
+					if (Type) {
+						tabIcon.as = Type;
+					}
+				}
 				if (useIconButton) {
 					button = <IconButton
-								key={'tab' + ix}
+								key={'tabIconButton' + ix}
 								onPress={() => setCurrentTab(ix)}
 								{...buttonProps}
 								// {...thisButtonProps}
 								_icon={{
 									color: isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR,
 									...iconProps,
-									...tab._icon,
+									...tabIcon,
 								}}
 								_hover={{
 									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
@@ -203,12 +211,12 @@ function TabBar(props) {
 							/>;
 				} else {
 					button = <Button
-								key={'tab' + ix}
+								key={'tabButton' + ix}
 								onPress={() => setCurrentTab(ix)}
 								leftIcon={<Icon
 											color={isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR}
 											{...iconProps}
-											{...tab._icon}
+											{...tabIcon}
 										/>}
 								{...buttonProps}
 								{...thisButtonProps}
@@ -232,7 +240,7 @@ function TabBar(props) {
 							>
 								{button}
 								<IconButton
-									key={'tab' + ix}
+									key={'tabXButton' + ix}
 									onPress={() => onTabClose(ix)}
 									icon={Xmark}
 									tooltip="Close Tab"

package/src/Components/index.js

@@ -2,6 +2,179 @@ import {
 	Column,
 	Row,
 } from 'native-base';
+import AddressBook from '../Components/Icons/AddressBook.js';
+import Alt from '../Components/Icons/Alt.js';
+import AngleLeft from '../Components/Icons/AngleLeft.js';
+import AngleRight from '../Components/Icons/AngleRight.js';
+import AnglesLeft from '../Components/Icons/AnglesLeft.js';
+import AnglesRight from '../Components/Icons/AnglesRight.js';
+import Asterisk from '../Components/Icons/Asterisk.js';
+import Ban from '../Components/Icons/Ban.js';
+import Bars from '../Components/Icons/Bars.js';
+import BarsStaggered from '../Components/Icons/BarsStaggered.js';
+import BigCircle from '../Components/Icons/BigCircle.js';
+import Book from '../Components/Icons/Book.js';
+import Bookmark from '../Components/Icons/Bookmark.js';
+import BookOpen from '../Components/Icons/BookOpen.js';
+import Bug from '../Components/Icons/Bug.js';
+import Building from '../Components/Icons/Building.js';
+import Calendar from '../Components/Icons/Calendar.js';
+import Calendar2 from '../Components/Icons/Calendar2.js';
+import CalendarDays from '../Components/Icons/CalendarDays.js';
+import Camera from '../Components/Icons/Camera.js';
+import CaretDown from '../Components/Icons/CaretDown.js';
+import CaretUp from '../Components/Icons/CaretUp.js';
+import CartPlus from '../Components/Icons/CartPlus.js';
+import CartShopping from '../Components/Icons/CartShopping.js';
+import CashRegister from '../Components/Icons/CashRegister.js';
+import Certificate from '../Components/Icons/Certificate.js';
+import ChartLine from '../Components/Icons/ChartLine.js';
+import ChartPie from '../Components/Icons/ChartPie.js';
+import Check from '../Components/Icons/Check.js';
+import CheckDouble from '../Components/Icons/CheckDouble.js';
+import ChevronDown from '../Components/Icons/ChevronDown.js';
+import ChevronLeft from '../Components/Icons/ChevronLeft.js';
+import ChevronRight from '../Components/Icons/ChevronRight.js';
+import ChevronUp from '../Components/Icons/ChevronUp.js';
+import Circle from '../Components/Icons/Circle.js';
+import CircleArrowRight from '../Components/Icons/CircleArrowRight.js';
+import CircleExclamation from '../Components/Icons/CircleExclamation.js';
+import CircleInfo from '../Components/Icons/CircleInfo.js';
+import CircleQuestion from '../Components/Icons/CircleQuestion.js';
+import CircleXmark from '../Components/Icons/CircleXmark.js';
+import CircleXmarkRegular from '../Components/Icons/CircleXmarkRegular.js';
+import Clipboard from '../Components/Icons/Clipboard.js';
+import ClipboardCheck from '../Components/Icons/ClipboardCheck.js';
+import ClipboardList from '../Components/Icons/ClipboardList.js';
+import Clock from '../Components/Icons/Clock.js';
+import ClockRegular from '../Components/Icons/ClockRegular.js';
+import ClockRotateLeft from '../Components/Icons/ClockRotateLeft.js';
+import Clone from '../Components/Icons/Clone.js';
+import Collapse from '../Components/Icons/Collapse.js';
+import Comment from '../Components/Icons/Comment.js';
+import CommentRegular from '../Components/Icons/CommentRegular.js';
+import Comments from '../Components/Icons/Comments.js';
+import CommentsRegular from '../Components/Icons/CommentsRegular.js';
+import Copyright from '../Components/Icons/Copyright.js';
+import Dot from '../Components/Icons/Dot.js';
+import Duplicate from '../Components/Icons/Duplicate.js';
+import Edit from '../Components/Icons/Edit.js';
+import EllipsisVertical from '../Components/Icons/EllipsisVertical.js';
+import Envelope from '../Components/Icons/Envelope.js';
+import EnvelopeRegular from '../Components/Icons/EnvelopeRegular.js';
+import Excel from '../Components/Icons/Excel.js';
+import Exclamation from '../Components/Icons/Exclamation.js';
+import Expand from '../Components/Icons/Expand.js';
+import Eye from '../Components/Icons/Eye.js';
+import EyeSlash from '../Components/Icons/EyeSlash.js';
+import File from '../Components/Icons/File.js';
+import FloppyDiskRegular from '../Components/Icons/FloppyDiskRegular.js';
+import Folder from '../Components/Icons/Folder.js';
+import FolderClosed from '../Components/Icons/FolderClosed.js';
+import FolderOpen from '../Components/Icons/FolderOpen.js';
+import FolderTree from '../Components/Icons/FolderTree.js';
+import FullWidth from '../Components/Icons/FullWidth.js';
+import Gauge from '../Components/Icons/Gauge.js';
+import Gear from '../Components/Icons/Gear.js';
+import Gears from '../Components/Icons/Gears.js';
+import Gift from '../Components/Icons/Gift.js';
+import Grip from '../Components/Icons/Grip.js';
+import GripLines from '../Components/Icons/GripLines.js';
+import GripLinesVertical from '../Components/Icons/GripLinesVertical.js';
+import GripVertical from '../Components/Icons/GripVertical.js';
+import Hammer from '../Components/Icons/Hammer.js';
+import Hand from '../Components/Icons/Hand.js';
+import HighPriority from '../Components/Icons/HighPriority.js';
+import House from '../Components/Icons/House.js';
+import Images from '../Components/Icons/Images.js';
+import Info from '../Components/Icons/Info.js';
+import ItunesNote from '../Components/Icons/ItunesNote.js';
+import Leaf from '../Components/Icons/Leaf.js';
+import List from '../Components/Icons/List.js';
+import ListCheck from '../Components/Icons/ListCheck.js';
+import LocationDot from '../Components/Icons/LocationDot.js';
+import Loop from '../Components/Icons/Loop.js';
+import Loop1 from '../Components/Icons/Loop1.js';
+import LoopAll from '../Components/Icons/LoopAll.js';
+import LowPriority from '../Components/Icons/LowPriority.js';
+import MagnifyingGlass from '../Components/Icons/MagnifyingGlass.js';
+import Maximize from '../Components/Icons/Maximize.js';
+import MedPriority from '../Components/Icons/MedPriority.js';
+import Microphone from '../Components/Icons/Microphone.js';
+import Minimize from '../Components/Icons/Minimize.js';
+import Minus from '../Components/Icons/Minus.js';
+import MobileScreenButton from '../Components/Icons/MobileScreenButton.js';
+import MoneyBill from '../Components/Icons/MoneyBill.js';
+import MoneyBillWave from '../Components/Icons/MoneyBillWave.js';
+import Mouth from '../Components/Icons/Mouth.js';
+import Music from '../Components/Icons/Music.js';
+import Na from '../Components/Icons/Na.js';
+import NoLoop from '../Components/Icons/NoLoop.js';
+import NoReorderRows from '../Components/Icons/NoReorderRows.js';
+import ObjectGroupRegular from '../Components/Icons/ObjectGroupRegular.js';
+import Pause from '../Components/Icons/Pause.js';
+import Pdf from '../Components/Icons/Pdf.js';
+import Pencil from '../Components/Icons/Pencil.js';
+import Phone from '../Components/Icons/Phone.js';
+import Play from '../Components/Icons/Play.js';
+import Plus from '../Components/Icons/Plus.js';
+import Presentation from '../Components/Icons/Presentation.js';
+import Print from '../Components/Icons/Print.js';
+import Question from '../Components/Icons/Question.js';
+import Rate5x from '../Components/Icons/Rate-.5x.js';
+import Rate25x from '../Components/Icons/Rate-.25x.js';
+import Rate75x from '../Components/Icons/Rate-.75x.js';
+import Rate15x from '../Components/Icons/Rate-1.5x.js';
+import Rate125x from '../Components/Icons/Rate-1.25x.js';
+import Rate175x from '../Components/Icons/Rate-1.75x.js';
+import Rate1x from '../Components/Icons/Rate-1x.js';
+import Rate2x from '../Components/Icons/Rate-2x.js';
+import RateIcon5x from '../Components/Icons/RateIcon-.5x.js';
+import RateIcon25x from '../Components/Icons/RateIcon-.25x.js';
+import RateIcon75x from '../Components/Icons/RateIcon-.75x.js';
+import RateIcon15x from '../Components/Icons/RateIcon-1.5x.js';
+import RateIcon125x from '../Components/Icons/RateIcon-1.25x.js';
+import RateIcon175x from '../Components/Icons/RateIcon-1.75x.js';
+import RateIcon1x from '../Components/Icons/RateIcon-1x.js';
+import RateIcon2x from '../Components/Icons/RateIcon-2x.js';
+import RectangleXmark from '../Components/Icons/RectangleXmark.js';
+import RectangleXmarkRegular from '../Components/Icons/RectangleXmarkRegular.js';
+import ReorderRows from '../Components/Icons/ReorderRows.js';
+import RightFromBracket from '../Components/Icons/RightFromBracket.js';
+import RightToBracket from '../Components/Icons/RightToBracket.js';
+import Rotate from '../Components/Icons/Rotate.js';
+import RotateLeft from '../Components/Icons/RotateLeft.js';
+import RotateRight from '../Components/Icons/RotateRight.js';
+import ScrewdriverWrench from '../Components/Icons/ScrewdriverWrench.js';
+import Scroll from '../Components/Icons/Scroll.js';
+import Share from '../Components/Icons/Share.js';
+import Shop from '../Components/Icons/Shop.js';
+import SideBySide from '../Components/Icons/SideBySide.js';
+import SortDown from '../Components/Icons/SortDown.js';
+import SortUp from '../Components/Icons/SortUp.js';
+import Square from '../Components/Icons/Square.js';
+import SquareCheck from '../Components/Icons/SquareCheck.js';
+import SquareCheckRegular from '../Components/Icons/SquareCheckRegular.js';
+import SquareMinus from '../Components/Icons/SquareMinus.js';
+import SquareRegular from '../Components/Icons/SquareRegular.js';
+import Store from '../Components/Icons/Store.js';
+import ThumbsDown from '../Components/Icons/ThumbsDown.js';
+import ThumbsDownRegular from '../Components/Icons/ThumbsDownRegular.js';
+import ThumbsUp from '../Components/Icons/ThumbsUp.js';
+import ThumbsUpRegular from '../Components/Icons/ThumbsUpRegular.js';
+import Trash from '../Components/Icons/Trash.js';
+import TrashCan from '../Components/Icons/TrashCan.js';
+import TriangleExclamation from '../Components/Icons/TriangleExclamation.js';
+import Truck from '../Components/Icons/Truck.js';
+import TruckFast from '../Components/Icons/TruckFast.js';
+import User from '../Components/Icons/User.js';
+import UserGroup from '../Components/Icons/UserGroup.js';
+import UserPlus from '../Components/Icons/UserPlus.js';
+import UserSecret from '../Components/Icons/UserSecret.js';
+import Video from '../Components/Icons/Video.js';
+import X from '../Components/Icons/X.js';
+import Xmark from '../Components/Icons/Xmark.js';
+
 // import AccordionGridPanel from '../Components/Panel/AccordionGridPanel.js';
 import ArrayCheckboxGroup from './Form/Field/Checkbox/ArrayCheckboxGroup.js';
 import ArrayCombo from './Form/Field/Combo/ArrayCombo.js';
@@ -53,6 +226,179 @@ import YearsCombo from './Form/Field/Combo/YearsCombo.js';
 import _ from 'lodash';
 
 const components = {
+	AddressBook,
+	Alt,
+	AngleLeft,
+	AngleRight,
+	AnglesLeft,
+	AnglesRight,
+	Asterisk,
+	Ban,
+	Bars,
+	BarsStaggered,
+	BigCircle,
+	Book,
+	Bookmark,
+	BookOpen,
+	Bug,
+	Building,
+	Calendar,
+	Calendar2,
+	CalendarDays,
+	Camera,
+	CaretDown,
+	CaretUp,
+	CartPlus,
+	CartShopping,
+	CashRegister,
+	Certificate,
+	ChartLine,
+	ChartPie,
+	Check,
+	CheckDouble,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronUp,
+	Circle,
+	CircleArrowRight,
+	CircleExclamation,
+	CircleInfo,
+	CircleQuestion,
+	CircleXmark,
+	CircleXmarkRegular,
+	Clipboard,
+	ClipboardCheck,
+	ClipboardList,
+	Clock,
+	ClockRegular,
+	ClockRotateLeft,
+	Clone,
+	Collapse,
+	Comment,
+	CommentRegular,
+	Comments,
+	CommentsRegular,
+	Copyright,
+	Dot,
+	Duplicate,
+	Edit,
+	EllipsisVertical,
+	Envelope,
+	EnvelopeRegular,
+	Excel,
+	Exclamation,
+	Expand,
+	Eye,
+	EyeSlash,
+	File,
+	FloppyDiskRegular,
+	Folder,
+	FolderClosed,
+	FolderOpen,
+	FolderTree,
+	FullWidth,
+	Gauge,
+	Gear,
+	Gears,
+	Gift,
+	Grip,
+	GripLines,
+	GripLinesVertical,
+	GripVertical,
+	Hammer,
+	Hand,
+	HighPriority,
+	House,
+	Images,
+	Info,
+	ItunesNote,
+	Leaf,
+	List,
+	ListCheck,
+	LocationDot,
+	Loop,
+	Loop1,
+	LoopAll,
+	LowPriority,
+	MagnifyingGlass,
+	Maximize,
+	MedPriority,
+	Microphone,
+	Minimize,
+	Minus,
+	MobileScreenButton,
+	MoneyBill,
+	MoneyBillWave,
+	Mouth,
+	Music,
+	Na,
+	NoLoop,
+	NoReorderRows,
+	ObjectGroupRegular,
+	Pause,
+	Pdf,
+	Pencil,
+	Phone,
+	Play,
+	Plus,
+	Presentation,
+	Print,
+	Question,
+	Rate5x,
+	Rate25x,
+	Rate75x,
+	Rate15x,
+	Rate125x,
+	Rate175x,
+	Rate1x,
+	Rate2x,
+	RateIcon5x,
+	RateIcon25x,
+	RateIcon75x,
+	RateIcon15x,
+	RateIcon125x,
+	RateIcon175x,
+	RateIcon1x,
+	RateIcon2x,
+	RectangleXmark,
+	RectangleXmarkRegular,
+	ReorderRows,
+	RightFromBracket,
+	RightToBracket,
+	Rotate,
+	RotateLeft,
+	RotateRight,
+	ScrewdriverWrench,
+	Scroll,
+	Share,
+	Shop,
+	SideBySide,
+	SortDown,
+	SortUp,
+	Square,
+	SquareCheck,
+	SquareCheckRegular,
+	SquareMinus,
+	SquareRegular,
+	Store,
+	ThumbsDown,
+	ThumbsDownRegular,
+	ThumbsUp,
+	ThumbsUpRegular,
+	Trash,
+	TrashCan,
+	TriangleExclamation,
+	Truck,
+	TruckFast,
+	User,
+	UserGroup,
+	UserPlus,
+	UserSecret,
+	Video,
+	X,
+	Xmark,
+
 	// AccordionGridPanel,
 	ArrayCheckboxGroup,
 	ArrayCombo,