@onehat/ui 0.3.31 → 0.3.33

package/src/Components/Tree/Tree.js

@@ -25,6 +25,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
+import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
@@ -1181,60 +1182,66 @@ function TreeComponent(props) {
 
 }
 
-export const Tree = withAlert(
-						withEvents(
-							withData(
-								// withMultiSelection(
-									withSelection(
-										withFilters(
-											withContextMenu(
-												TreeComponent
+export const Tree = withComponent(
+						withAlert(
+							withEvents(
+								withData(
+									// withMultiSelection(
+										withSelection(
+											withFilters(
+												withContextMenu(
+													TreeComponent
+												)
 											)
 										)
-									)
-								// )
+									// )
+								)
 							)
 						)
 					);
 
-export const SideTreeEditor = withAlert(
-									withEvents(
-										withData(
-											// withMultiSelection(
-												withSelection(
-													withSideEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	TreeComponent
+export const SideTreeEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												// withMultiSelection(
+													withSelection(
+														withSideEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		TreeComponent
+																	)
 																)
-															)
-														),
-														true // isTree
+															),
+															true // isTree
+														)
 													)
-												)
-											// )
+												// )
+											)
 										)
 									)
 								);
 
-export const WindowedTreeEditor = withAlert(
-									withEvents(
-										withData(
-											// withMultiSelection(
-												withSelection(
-													withWindowedEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	TreeComponent
+export const WindowedTreeEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												// withMultiSelection(
+													withSelection(
+														withWindowedEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		TreeComponent
+																	)
 																)
-															)
-														),
-														true // isTree
+															),
+															true // isTree
+														)
 													)
-												)
-											// )
+												// )
+											)
 										)
 									)
 								);

package/src/Components/Viewer/TagViewer.js

@@ -2,6 +2,7 @@ import {
 	Text,
 } from 'native-base';
 import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
 import _ from 'lodash';
 
 function TagViewer(props) {
@@ -25,4 +26,5 @@ function TagViewer(props) {
 				{...props}
 			>{values}</Text>;
 }
-export default TagViewer;
+
+export default withComponent(TagViewer);

package/src/Components/Viewer/Viewer.js

@@ -1,5 +1,4 @@
 import {
-	Button,
 	Column,
 	Icon,
 	ScrollView,
@@ -10,9 +9,11 @@ import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
 import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
@@ -25,7 +26,10 @@ function Viewer(props) {
 			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
 			columnDefaults = {}, // defaults for each Column defined in items (above)
 			record,
-			additionalViewButtons = [],
+			additionalViewButtons,
+
+			// withComponent
+			self,
 
 			// withData
 			Repository,
@@ -110,7 +114,10 @@ function Viewer(props) {
 			let element = <Element
 								value={value}
 								isEditable={false}
+								parent={self}
+								reference={name}
 								{...propsToPass}
+								{...editorTypeProps}
 							/>;
 			if (label) {
 				const labelProps = {};
@@ -146,6 +153,7 @@ function Viewer(props) {
 										h={350}
 										canEditorViewOnly={true}
 										uniqueRepository={true}
+										parent={self}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -158,11 +166,49 @@ function Viewer(props) {
 				});
 			}
 			return components;
+		},
+		buildAdditionalButtons = (configs) => {
+			const additionalButtons = [];
+			_.each(additionalViewButtons, (config) => {
+				const {
+						key,
+						text,
+						handler,
+						icon,
+						isDisabled,
+						color = '#fff',
+					} = config,
+					buttonProps = {};
+				if (key) {
+					buttonProps.key = key;
+					buttonProps.reference = key;
+				}
+				if (handler) {
+					buttonProps.onPress = handler;
+				}
+				if (icon) {
+					buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
+				}
+				if (isDisabled) {
+					buttonProps.isDisabled = isDisabled;
+				}
+				
+				const button = <Button
+									color={color}
+									ml={2}
+									parent={self}
+									reference={key}
+									{...buttonProps}
+								>{text}</Button>;
+				additionalButtons.push(button);
+			});
+			return additionalButtons;
 		};
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor;
+		showCloseBtn = !isSideEditor,
+		additionalButtons = buildAdditionalButtons();
 
 	return <Column flex={flex} {...props}>
 				<ScrollView width="100%" _web={{ height: 1 }}>
@@ -176,9 +222,9 @@ function Viewer(props) {
 											>To Edit</Button>
 										</Row>}
 						
-						{!_.isEmpty(additionalViewButtons) && 
+						{!_.isEmpty(additionalButtons) && 
 							<Row p={2} alignItems="center" justifyContent="flex-end">
-								{additionalViewButtons}
+								{additionalButtons}
 							</Row>}
 
 						{buildFromItems()}
@@ -201,16 +247,13 @@ function Viewer(props) {
 									color="#fff"
 								>Delete</Button>
 							</Row>}
-						{showCloseBtn && 
-							<Button.Group space={2}>
-								<Button
-									key="closeBtn"
-									onPress={onClose}
-									color="#fff"
-								>Close</Button>
-							</Button.Group>}
+						{showCloseBtn && <Button
+											key="closeBtn"
+											onPress={onClose}
+											color="#fff"
+										>Close</Button>}
 					</Footer>}
 			</Column>;
 }
 
-export default withPdfButton(Viewer);
+export default withComponent(withPdfButton(Viewer));

package/src/Components/index.js

@@ -8,6 +8,7 @@ import ArrayRadioGroup from './Form/Field/RadioGroup/ArrayRadioGroup.js';
 // import BackButton from '../Components/Buttons/BackButton.js';
 import Blank from './Blank.js';
 import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
+import Button from '../Components/Buttons/Button.js';
 // import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
 // import CKEditor from './Form/Field/CKEditor/CKEditor.js'; // web only
 import Checkbox from './Form/Field/Checkbox/Checkbox.js';
@@ -59,6 +60,7 @@ const components = {
 	// BackButton,
 	Blank,
 	BooleanCombo,
+	Button,
 	// CartButtonWithBadge,
 	Checkbox,
 	CheckboxGroup,

package/src/Functions/getIconButtonFromConfig.js

@@ -1,7 +1,7 @@
 import IconButton from '../Components/Buttons/IconButton.js';
 import UiGlobals from '../UiGlobals.js';
 
-export default function getIconButtonFromConfig(config, ix) {
+export default function getIconButtonFromConfig(config, ix, parent) {
 	const
 		{
 			key,
@@ -27,6 +27,8 @@ export default function getIconButtonFromConfig(config, ix) {
 		};
 	return <IconButton
 				key={key || ix}
+				parent={parent}
+				reference={key || ix}
 				onPress={handler}
 				icon={icon}
 				_icon={_icon}

package/src/Components/Form/Field/Field.js

@@ -1,14 +0,0 @@
-import {
-	Box,
-} from 'native-base';
-import _ from 'lodash';
-
-export default function Blank(props) {
-	const {
-			children,
-			...propsToPass
-		} = props;
-	return <Box {...propsToPass}>
-				{children}
-			</Box>;
-}