@onehat/ui 0.2.20 → 0.2.22

package/package.json

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

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

@@ -23,7 +23,7 @@ import IconButton from '../../Buttons/IconButton.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import Calendar from '../../Icons/Calendar.js';
-import getComponentFromType from '../../../Functions/getComponentFromType';
+import getComponentFromType from '../../../Functions/getComponentFromType.js';
 import _ from 'lodash';
 
 

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

@@ -7,6 +7,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../../Constants/UiModes.js';
@@ -157,7 +158,7 @@ function FileElement(props) {
 		setLocalFilename(localFilename);
 	}, []);
 
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 		

package/src/Components/Hoc/withDraggable.js

@@ -12,7 +12,7 @@ import useBlocking from '../../Hooks/useBlocking.js';
 import {
 	v4 as uuid,
 } from 'uuid';
-import getComponentFromType from '../../Functions/getComponentFromType';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 
 
 

package/src/Components/Panel/Header.js

@@ -10,6 +10,7 @@ import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
@@ -21,10 +22,6 @@ import emptyFn from '../../Functions/emptyFn.js';
 import IconButton from '../Buttons/IconButton.js';
 
 export default function Header(props) {
-	
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-		throw new Error('Not yet implemented for RN.');
-	}
 
 	const {
 			testID = 'Header',
@@ -66,41 +63,52 @@ export default function Header(props) {
 		doubleClickStyle.cursor = 'pointer';
 	}
 
-	if (isCollapsed) {
-		if (collapseDirection === HORIZONTAL) {
-			collapseBtn = React.cloneElement(collapseBtn, { my: 2, mr: 1, });
-			return <div
-						className="header"
-						style={{ flex: 1, width: '100%', userSelect: 'none', ...doubleClickStyle, }}
-						onClick={(e) => {
-							if (isCollapsible && e.detail === 2) { // double-click
-								onToggleCollapse(e);
-							}
-						}}
-					>
-						 <Column alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
-							{collapseBtn}
-							<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
-								<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
-							</div>
-						</Column>
-					</div>;
+
+	if (CURRENT_MODE === UI_MODE_WEB) {
+
+		if (isCollapsed) {
+			if (collapseDirection === HORIZONTAL) {
+				collapseBtn = React.cloneElement(collapseBtn, { my: 2, mr: 1, });
+				return <div
+							className="header"
+							style={{ flex: 1, width: '100%', userSelect: 'none', ...doubleClickStyle, }}
+							onClick={(e) => {
+								if (isCollapsible && e.detail === 2) { // double-click
+									onToggleCollapse(e);
+								}
+							}}
+						>
+							 <Column alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
+								{collapseBtn}
+								<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
+									<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
+								</div>
+							</Column>
+						</div>;
+			}
 		}
+	
+		return <div
+					className="header"
+					style={{ width: '100%', userSelect: 'none', ...doubleClickStyle, }}
+					onClick={(e) => {
+						if (isCollapsible && e.detail === 2) { // double-click
+							onToggleCollapse(e);
+						}
+					}}
+				>
+					<Row alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
+						{closeBtn}
+						<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
+						{collapseBtn}
+					</Row>
+				</div>;
+
+	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+
+		return null;
+
 	}
 
-	return <div
-				className="header"
-				style={{ width: '100%', userSelect: 'none', ...doubleClickStyle, }}
-				onClick={(e) => {
-					if (isCollapsible && e.detail === 2) { // double-click
-						onToggleCollapse(e);
-					}
-				}}
-			>
-				<Row alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
-					{closeBtn}
-					<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
-					{collapseBtn}
-				</Row>
-			</div>;
+
 }

package/src/Components/Panel/Panel.js

@@ -10,10 +10,10 @@ import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
-import UiGlobals from '../../UiGlobals.js';
 import Header from './Header.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import emptyFn from '../../Functions/emptyFn.js';
@@ -25,9 +25,6 @@ import _ from 'lodash';
 
 function Panel(props) {
 
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-		throw new Error('Not yet implemented for RN.');
-	}
 	const {
 			isDisabled = false,
 			frame = false,
@@ -125,28 +122,37 @@ function Panel(props) {
 	if (frame) {
 		framePropsToUse = frameProps;
 	}
-	if (isCollapsed) {
-		if (collapseDirection !== VERTICAL) {
-			return <Column overflow="hidden" {...framePropsToUse} w="33px" height="100%">
+
+	if (CURRENT_MODE === UI_MODE_WEB) {
+
+		if (isCollapsed) {
+			if (collapseDirection !== VERTICAL) {
+				return <Column overflow="hidden" {...framePropsToUse} w="33px" height="100%">
+							{isDisabled && <div className="mask"></div>}
+							{headerComponent}
+						</Column>;
+			}
+			return <Column overflow="hidden" {...framePropsToUse}>
 						{isDisabled && <div className="mask"></div>}
 						{headerComponent}
 					</Column>;
 		}
-		return <Column overflow="hidden" {...framePropsToUse}>
+		return <Column overflow="hidden" onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
 					{isDisabled && <div className="mask"></div>}
 					{headerComponent}
+					{topToolbar}
+					<Column flex={1} w="100%" overflow="hidden" {...propsToPass}>
+						{isScrollable ? <ScrollView>{children}</ScrollView> : children}
+					</Column>
+					{bottomToolbar}
+					{footer}
 				</Column>;
+
+	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+
+		return null;
+
 	}
-	return <Column overflow="hidden" onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
-				{isDisabled && <div className="mask"></div>}
-				{headerComponent}
-				{topToolbar}
-				<Column flex={1} w="100%" overflow="hidden" {...propsToPass}>
-					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
-				</Column>
-				{bottomToolbar}
-				{footer}
-			</Column>;
 }
 
 export default withCollapsible(Panel);

package/src/Components/index.js

@@ -20,7 +20,7 @@ import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
 import FieldSet from './Form/FieldSet.js';
-import File from './Form/Field/File.js';
+// import File from './Form/Field/File.js'; // web only
 import FiltersForm from './Form/FiltersForm.js';
 // import FiltersToolbar from '../Components/Toolbar/FiltersToolbar.js';
 import Form from './Form/Form.js';
@@ -67,7 +67,7 @@ const components = {
 	DateRange,
 	DisplayField,
 	FieldSet,
-	File,
+	// File,
 	FiltersForm,
 	// FiltersToolbar,
 	Form,

package/src/Functions/registerWebComponents.js

@@ -1,13 +1,15 @@
 import UiGlobals from '../UiGlobals.js';
 import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
-import Datetime from '../PlatformImports/Web/Datetime';
-import Draggable from '../PlatformImports/Web/Draggable';
+import Datetime from '../PlatformImports/Web/Datetime.js';
+import Draggable from '../PlatformImports/Web/Draggable.js';
+import File from './Form/Field/File.js';
 import _ from 'lodash';
 
-export function registerWebComponents() {
+export default function registerWebComponents() {
 	_.merge(UiGlobals.components, {
 		CKEditor,
 		Datetime,
 		Draggable,
+		File,
 	});
 }