@onehat/ui 0.1.2 → 0.2.0

package/src/Components/Icons/Truck.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
+		<Path d="M48 0C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zm368 160h50.7l77.3 77.3V256H416v-96zM208 416c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm272 48c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/TruckFast.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
+		<Path d="M112 0C85.5 0 64 21.5 64 48v48H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h256c8.8 0 16 7.2 16 16s-7.2 16-16 16H48c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H112zm432 237.3V256H416v-96h50.7l77.3 77.3zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm368-48c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/User.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
+		<Path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3h-91.4z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/UserGroup.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
+		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8 2.4-.1 4.7-.2 7.1-.2h61.4c89.1 0 161.3 72.2 161.3 161.3 0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9 19.7-26.6 31.3-59.5 31.3-95.1 0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/UserSecret.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
+		<Path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4-47.3 8.7-78 22.8-78 38.6 0 14.3 25 27.1 64.6 35.9-.4 4-.6 8-.6 12.1 0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5 0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48 0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9-4.7 3.3-8.8 6.1-15.5 6.1zm56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2-2.3-7-12.2-7-14.5 0-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32-32 128-48-192 64 32zm128-32l-48 192-32-128 16-32 64-32z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/X.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" {...props}>
+		<Path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5c-11.3-13.6-31.5-15.4-45.1-4.1S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306l135.4 162.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/Xmark.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" {...props}>
+		<Path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Mask.js

@@ -0,0 +1,11 @@
+import {
+	Box,
+} from 'native-base';
+import _ from 'lodash';
+
+export default function Mask(props) {
+	const propsToPass = _.omit(props, 'children');
+	return <Box bg="trueGray.400" {...propsToPass} testID="mask">
+				{props.children}
+			</Box>;
+}

package/src/Components/Messages/ConfirmationMessage.js

@@ -0,0 +1,26 @@
+ import {
+	Button,
+	Modal,
+	Text,
+} from 'native-base';
+import emptyFn from '../../Functions/emptyFn';
+
+export default function ConfirmationMessage(props) {
+	const {
+			textMessage,
+			onCancel = emptyFn,
+			onOk = emptyFn,
+		} = props;
+
+	return <Modal {...props} _backdrop={{ bg: "#000" }}>
+				<Modal.Content maxWidth="400px">
+					<Modal.Body p={5} pb={0} borderTopWidth={0}>
+						<Text color="#000">{textMessage}</Text>
+					</Modal.Body>
+					<Modal.Footer p={0} pr={4} borderTopWidth={0}>
+						<Button variant="ghost" color="primary.800" onPress={onCancel}>Cancel</Button>
+						<Button variant="ghost" color="primary.800" onPress={onOk}>OK</Button>
+					</Modal.Footer>
+				</Modal.Content>
+			</Modal>;
+}

package/src/Components/Messages/ErrorMessage.js

@@ -0,0 +1,15 @@
+import {
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import TriangleExclamation from '../Icons/TriangleExclamation';
+
+export default function ErrorMsg(props) {
+	return <Row justifyContent="center" alignItems="center" my={2} w="100%">
+				<Icon as={TriangleExclamation} color="red.500" size="sm" mr={1} />
+				<Text color="red.500">
+					{props.children}
+				</Text>
+			</Row>;
+}

package/src/Components/Messages/Loading.js

@@ -0,0 +1,16 @@
+import {
+	Row,
+	Spinner,
+} from 'native-base';
+// import ScreenContainer from '../ScreenContainer';
+
+export default function Loading(props) {
+	// if (props.isScreen) {
+	// 	return <ScreenContainer {...props}>
+	// 				<Spinner flex={1} color="primary.500" />
+	// 			</ScreenContainer>;
+	// }
+	return <Row justifyContent="center" minHeight={100} {...props}>
+				<Spinner flex={1} color="primary.500" />
+			</Row>;
+}

package/src/Components/Messages/OkMessage.js

@@ -0,0 +1,24 @@
+ import {
+	Button,
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
+
+export default function OkMessage(props) {
+	const {
+			textMessage,
+			onClose,
+		} = props;
+
+	return <Modal {...props} _backdrop={{ bg: "#000" }}>
+				<Modal.Content maxWidth="400px">
+					<Modal.Body p={5} pb={0} borderTopWidth={0}>
+						<Text color="#000">{textMessage}</Text>
+					</Modal.Body>
+					<Modal.Footer p={0} pr={4} borderTopWidth={0}>
+						<Button variant="ghost" color="primary.800" onPress={onClose}>OK</Button>
+					</Modal.Footer>
+				</Modal.Content>
+			</Modal>;
+}

package/src/Components/Messages/WaitMessage.js

@@ -0,0 +1,18 @@
+ import {
+	Row,
+	Text,
+} from 'native-base';
+import Loading from './Loading';
+
+export default function WaitMessage(props) {
+	const {
+			textMessage = 'Please wait...',
+		} = props;
+
+	return <Row position="absolute" width="100%" top="40" left="0" _backdrop={{ bg: "#000" }} justifyContent="center" alignItems="center" pb={20} {...props}>
+				<Row bg="#fff" p={3} width="50%" justifyContent="center" alignItems="center" borderColor="#000" borderRadius={5}>
+					<Loading minHeight="auto" h={5} w={5} mr={2} />
+					<Text color="#000">{textMessage}</Text>
+				</Row>
+			</Row>;
+}

package/src/Components/Panel/AccordionGridPanel.js

@@ -0,0 +1,94 @@
+import { useState, } from 'react';
+import {
+	Column,
+	ScrollView,
+} from 'native-base';
+import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
+import testProps from '../../Functions/testProps';
+import Footer from './Footer';
+import Toolbar from '../Toolbar/Toolbar';
+import PaginationToolbar from '../Toolbar/PaginationToolbar';
+import NoRecordsFound from './NoRecordsFound';
+import GridPanel from './GridPanel';
+import _ from 'lodash';
+
+export default function AccordionGridPanel(props) {
+	
+	// const {
+	// 		sections = [],
+	// 		Repository = null,
+	// 		topToolbar = null,
+	// 		bottomToolbar = 'pagination',
+	// 		columns = [],
+	// 		getRowProps = () => {
+	// 			return {
+	// 				bg: '#fff',
+	// 				p: 2,
+	// 			};
+	// 		},
+	// 		renderSectionHeader = (section, ix, isActive) => {},
+	// 		onChangeSelection = () => {},
+	// 		noneFoundText,
+	// 		containerStyle = {},
+	// 		hideRightColumn = false,
+	// 		activeSectionIndexes = [0],
+	// 	} = props,
+	// 	[activeSections, setActiveSections] = useState(activeSectionIndexes);
+
+	// return <Column
+	// 			{...testProps('AccorionGridPanel')}
+	// 			flex={1}
+	// 			w="100%"
+	// 			{...containerStyle}
+	// 		>
+	// 			{topToolbar && <Toolbar>{topToolbar}</Toolbar>}
+
+	// 			<ScrollView
+	// 				keyboardShouldPersistTaps="always"
+	// 				flex={1}
+	// 				w="100%"
+	// 			>
+	// 				<Accordion
+	// 					activeSections={activeSections}
+	// 					sections={sections}
+	// 					onChange={setActiveSections}
+	// 					renderHeader={renderSectionHeader}
+	// 					renderContent={(section) => {
+	// 						if (!section.data.length) {
+	// 							return <NoRecordsFound text={noneFoundText} />;
+	// 						}
+	// 						return <GridPanel
+	// 									flatListProps={{
+	// 										scrollEnabled: false,
+	// 										...testProps(section.title),
+	// 									}}
+	// 									noneFoundText="No items found."
+	// 									Repository={{ // Simulated repository
+	// 										entities: section.data,
+	// 										schema: section.schema,
+	// 									}}
+	// 									flex={1}
+	// 									w="100%"
+	// 									getRowProps={getRowProps}
+	// 									pullToRefresh={false}
+	// 									columns={columns}
+	// 									onChangeSelection={onChangeSelection}
+	// 									bottomToolbar={false}
+	// 									hideRightColumn={hideRightColumn}
+	// 								/>;
+	// 					}}
+	// 				/>
+	// 			</ScrollView>
+
+	// 			{bottomToolbar && (bottomToolbar !== 'pagination' || Repository.entities.length > 5) && /* Only show pagination toolbar if >5 items to display */ (
+	// 				<Footer>
+	// 					{(
+	// 						bottomToolbar === 'pagination' ? 
+	// 							<PaginationToolbar Repository={Repository} /> :
+	// 								<Toolbar>{bottomToolbar}</Toolbar>
+	// 					)}
+	// 				</Footer>
+	// 			)}
+	// 		</Column>;
+}
+ 

package/src/Components/Panel/Footer.js

@@ -0,0 +1,20 @@
+import {
+	Row,
+} from 'native-base';
+import styles from '../../Constants/Styles';
+
+export default function Footer(props) {
+	return <Row
+				alignItems="center"
+				justifyContent="center"
+				alignSelf="flex-end"
+				bg={styles.PANEL_FOOTER_BG}
+				testID="footer"
+				w="100%"
+				p={2}
+				safeAreaBottom
+				{...props}
+			>
+				{props.children}
+			</Row>;
+}

package/src/Components/Panel/FormPanel.js

@@ -0,0 +1,23 @@
+import {
+	Text,
+} from 'native-base';
+import Panel from './Panel';
+import Form, { FormEditor } from '../Form/Form';
+import withData from '../Hoc/withData';
+import _ from 'lodash';
+
+export function FormPanel(props) {
+	const {
+			instructions,
+			isEditor = false,
+			_panel = {},
+			_form = {},
+		} = props,
+		WhichForm = isEditor ? FormEditor : Form;
+	return <Panel isCollapsible={false} {...props} {..._panel}>
+				{instructions && <Text px={5} pt={3} fontStyle="italic">{instructions}</Text>}
+				<WhichForm px={3} pt={6} {...props} {..._form}/>
+			</Panel>;
+}
+
+export default withData(FormPanel);

package/src/Components/Panel/GridPanel.js

@@ -0,0 +1,45 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel';
+import Grid, { InlineGridEditor, } from '../Grid/Grid';
+import {
+	EDITOR_TYPE_INLINE,
+	EDITOR_TYPE_WINDOWED,
+} from '../../Constants/EditorTypes';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			editorType,
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		WhichGrid = (editorType === EDITOR_TYPE_INLINE) ? InlineGridEditor : Grid,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<WhichGrid {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/Header.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	FaTimes,
+	FaMinus,
+	FaPlus,
+} from 'react-icons/fa';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../Constants/UiModes';
+import UiConfig from '../../UiConfig';
+import styles from '../../Constants/Styles';
+import emptyFn from '../../Functions/emptyFn';
+import IconButton from '../Buttons/IconButton';
+
+export default function Header(props) {
+	
+	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+		throw new Error('Not yet implemented for RN.');
+	}
+
+	const {
+			testID = 'Header',
+			title = '',
+			isClosable = true,
+			onClose = emptyFn,
+			isCollapsible = true,
+			collapseDirection = VERTICAL,
+			isCollapsed = false,
+			onToggleCollapse = emptyFn,
+		} = props;
+
+	let closeBtn = null,
+		collapseBtn = null;
+	if (isClosable) {
+		closeBtn = <IconButton
+						icon={<FaTimes size={styles.PANEL_HEADER_ICON_SIZE} color={styles.HEADER_ICON_COLOR} />}
+						onPress={onClose}
+						testID="closeBtn"
+						alignSelf="center"
+						mr={1}
+					/>;
+	}
+	if (isCollapsible) {
+		collapseBtn = <IconButton
+						icon={isCollapsed ? <FaPlus size={styles.PANEL_HEADER_ICON_SIZE} color={styles.HEADER_ICON_COLOR} /> : <FaMinus size={styles.PANEL_HEADER_ICON_SIZE}  color={styles.HEADER_ICON_COLOR} />}
+						onPress={onToggleCollapse}
+						testID="collapseBtn"
+						alignSelf="center"
+						ml={1}
+						h="20px"
+						w="30px"
+					/>;
+	}
+	
+	const doubleClickStyle = {};
+	if (isCollapsible) {
+		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>;
+		}
+	}
+
+	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

@@ -0,0 +1,152 @@
+import { useState, } from 'react';
+import {
+	Column,
+	Row,
+	ScrollView,
+	Text,
+} from 'native-base';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../Constants/UiModes';
+import UiConfig from '../../UiConfig';
+import Header from './Header';
+import withCollapsible from '../Hoc/withCollapsible';
+import emptyFn from '../../Functions/emptyFn';
+import _ from 'lodash';
+
+// Note on collapseDirections:
+// HORIZONTAL means the Panel collapses along the X axis.
+// VERTICAL means the Panel collapses along the Y axis.
+
+function Panel(props) {
+
+	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+		throw new Error('Not yet implemented for RN.');
+	}
+	const {
+			isDisabled = false,
+			frame = false,
+			isScrollable = false,
+			h,
+			maxHeight,
+			w,
+			maxWidth,
+			flex,
+			onLayout = null,
+			
+			// Header
+			title = props.model,
+			titleSuffix = '',
+			showHeader = true,
+			header = null,
+			isClosable = false,
+			onClose = emptyFn,
+			isCollapsible = true,
+			isCollapsed = false,
+			setIsCollapsed,
+			collapseDirection = VERTICAL, // HORIZONTAL, VERTICAL
+
+			// Content
+			topToolbar = null,
+			children = null,
+			bottomToolbar = null,
+			footer = null,
+
+			...propsToPass
+		} = props,
+		onToggleCollapse = () => {
+			setIsCollapsed(!isCollapsed);
+		};
+
+	let headerComponent = header;
+	if (showHeader && title) {
+		headerComponent = <Header
+								title={title + titleSuffix}
+								isClosable={isClosable}
+								onClose={onClose}
+								isCollapsible={isCollapsible}
+								isCollapsed={isCollapsed}
+								collapseDirection={collapseDirection}
+								onToggleCollapse={onToggleCollapse}
+							/>;
+	}
+
+	const sizeProps = {};
+	if (!flex && !h && !w) {
+		sizeProps.flex = 1;
+	} else {
+		if (h) {
+			sizeProps.h = h;
+		}
+		if (w) {
+			sizeProps.w = w;
+		}
+		if (flex) {
+			sizeProps.flex = flex;
+		}
+	}
+	if (maxWidth) {
+		sizeProps.maxWidth = maxWidth;
+	}
+	if (maxHeight) {
+		sizeProps.maxHeight = maxHeight;
+	}
+	// if (propsToPass.h && isCollapsed) {
+	// 	delete propsToPass.h;
+	// }
+
+	const
+		borderProps = {
+			borderTopColor: 'primary.600',
+			borderBottomColor: 'primary.600',
+			borderLeftColor: 'primary.600',
+			borderRightColor: 'primary.600',
+		},
+		nonFrameProps = {
+			...borderProps,
+			borderTopWidth: 1,
+			borderBottomWidth: 1,
+			borderLeftWidth: 1,
+			borderRightWidth: 1,
+		},
+		frameProps = {
+			...borderProps,
+			borderTopWidth: 3,
+			borderBottomWidth: 3,
+			borderLeftWidth: 3,
+			borderRightWidth: 3,
+		};
+	let framePropsToUse = nonFrameProps;
+	if (frame) {
+		framePropsToUse = frameProps;
+	}
+	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" 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);