@onehat/ui 0.2.26 → 0.2.27

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.26",
+	"version": "0.2.27",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,7 +19,6 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@ckeditor/ckeditor5-react": "^5.0.6",
 		"@onehat/data": "^1.13.6",
 		"@hookform/resolvers": "^2.9.11",
 		"ckeditor5-custom-build": "file:ckeditor5",
@@ -28,11 +27,13 @@
 		"react-hook-form": "^7.43.1"
 	},
 	"peerDependencies": {
+	  "@ckeditor/ckeditor5-react": "^5.0.6",
 	  "react": "*",
 	  "react-color": "^2.19.3",
 	  "react-datetime": "^3.2.0",
 	  "react-draggable": "^4.4.5",
 	  "react-native-draggable": "^3.3.0",
+	  "react-native-ckeditor5": "^1.0.9",
 	  "react-dom": "*",
 	  "react-native": "*"
 	},

package/src/Components/Container/Container.js

@@ -7,6 +7,11 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 import Splitter from './Splitter.js';
 
 export default function Container(props) {
@@ -26,6 +31,7 @@ export default function Container(props) {
 			isWestCollapsed,
 			setIsWestCollapsed,
 		} = props,
+		canResize = CURRENT_MODE === UI_MODE_WEB,
 		[localIsNorthCollapsed, setLocalIsNorthCollapsed] = useState(north ? north.props.startsCollapsed : false),
 		[localIsSouthCollapsed, setLocalIsSouthCollapsed] = useState(south ? south.props.startsCollapsed : false),
 		[localIsEastCollapsed, setLocalIsEastCollapsed] = useState(east ? east.props.startsCollapsed : false),
@@ -68,7 +74,7 @@ export default function Container(props) {
 		if (!north.props.h && !north.props.flex) {
 			componentProps.flex = 50;
 		}
-		if (north.props.isResizable) {
+		if (canResize && north.props.isResizable) {
 			if (northHeight) {
 				componentProps.h = northHeight;
 				componentProps.flex = null;
@@ -92,7 +98,7 @@ export default function Container(props) {
 		if (!south.props.h && !south.props.flex) {
 			componentProps.flex = 50;
 		}
-		if (south.props.isResizable) {
+		if (canResize && south.props.isResizable) {
 			if (southHeight) {
 				componentProps.h = southHeight;
 				componentProps.flex = null;
@@ -116,7 +122,7 @@ export default function Container(props) {
 		if (!east.props.h && !east.props.flex) {
 			componentProps.flex = 50;
 		}
-		if (east.props.isResizable) {
+		if (canResize && east.props.isResizable) {
 			if (eastWidth) {
 				componentProps.w = eastWidth;
 				componentProps.flex = null;
@@ -140,7 +146,7 @@ export default function Container(props) {
 		if (!west.props.h && !west.props.flex) {
 			componentProps.flex = 50;
 		}
-		if (west.props.isResizable) {
+		if (canResize && west.props.isResizable) {
 			if (westWidth) {
 				componentProps.w = westWidth;
 				componentProps.flex = null;

package/src/Components/Container/ScreenContainer.js

@@ -0,0 +1,81 @@
+import {
+	Platform,
+	RefreshControl,
+	useWindowDimensions,
+} from 'react-native';
+import {
+	Column,
+	ScrollView,
+	KeyboardAvoidingView,
+} from 'native-base';
+import { useHeaderHeight } from '@react-navigation/elements';
+// import testProps from '../OneHat/functions/testProps';
+
+export default function ScreenContainer(props) {
+	const {
+			screenName = 'ScreenContainer',
+			p = 0,
+			safeArea = false,
+			bg = '#fff',
+			scrollEnabled = false,
+			keyboardAvoiding = false,
+			subtractHeaderHeight = true,
+			setScrollViewRef = () => {},
+			onLayout = () => {},
+			onRefresh = () => {},
+			isRefreshing,
+		} = props,
+		{
+			height,
+		} = useWindowDimensions(),
+		headerHeight = subtractHeaderHeight ? useHeaderHeight() : 0,
+		safeAreaProps = {};
+	if (safeArea !== false) {
+		safeAreaProps.safeArea = true;
+	}
+
+	const column = <Column
+						// {...testProps(screenName)}
+						alignItems="center"
+						justifyContent="flex-start"
+						flex={1}
+						w="100%"
+						p={p}
+						bg={bg}
+						overflow="visible"
+						onLayout={onLayout}
+						{...safeAreaProps}
+					>
+						{props.children}
+					</Column>;
+	
+	if (scrollEnabled) {
+		const scrollViewProps = {};
+		if (onRefresh && typeof isRefreshing !== 'undefined') {
+			scrollViewProps.refreshControl = <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
+		}
+		const scrollView = <ScrollView
+								ref={(ref) => {
+									setScrollViewRef(ref);
+								}}
+								keyboardShouldPersistTaps="handled"
+								_contentContainerStyle={{
+									minHeight: height - headerHeight,
+								}}
+								{...scrollViewProps}
+							>{column}</ScrollView>;
+		if (keyboardAvoiding) {
+			return <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} flex={1} width="100%">
+						{scrollView}
+					</KeyboardAvoidingView>
+		} else {
+			return scrollView;
+		}
+	}
+	if (keyboardAvoiding) {
+		return <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} flex={1} width="100%">
+					{column}
+				</KeyboardAvoidingView>;
+	}
+	return column;
+}

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

@@ -38,7 +38,7 @@ export function DateElement(props) {
 			tooltipPlacement = 'bottom',
 		} = props,
 		styles = UiGlobals.styles,
-		Datetime = getComponentFromType('Draggable'),
+		Datetime = getComponentFromType('Datetime'),
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		pickerRef = useRef(),

package/src/Components/Form/Field/{CKEditor/CKEditor.js → HtmlEditor.js}

@@ -4,23 +4,23 @@ import {
 } from 'native-base';
 import {
 	AUTO_SUBMIT_DELAY,
-} from '../../../../Constants/Input.js';
+} from '../../../Constants/Input.js';
 import Editor from 'ckeditor5-custom-build/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
-import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
-import withValue from '../../../Hoc/withValue.js';
-import withTooltip from '../../../Hoc/withTooltip.js';
+import getComponentFromType from '../../../Functions/getComponentFromType.js';
+import withValue from '../../Hoc/withValue.js';
+import withTooltip from '../../Hoc/withTooltip.js';
 import _ from 'lodash';
-import './styles.css';
 
 const
-	CKEditorElement = (props) => {
+	HtmlEditorElement = (props) => {
 		const {
 				value,
 				setValue,
 				h = 150,
 			} = props,
+			CKEditor = getComponentFromType('CKEditor'),
 			debouncedSetValueRef = useRef(),
-			[editor, setEditor] = useState(null),
+			[editor, setEditor] = useState(null), // in case you need to adjust things procedurally
 			config = {
 			};
 		
@@ -52,12 +52,12 @@ const
 					/>
 				</Row>;
 	},
-	CKEditorField = withValue(CKEditorElement);
+	HtmlEditorField = withValue(HtmlEditorElement);
 	
 
-export default CKEditorField;
+export default HtmlEditorField;
 
 // // Tooltip needs us to forwardRef
 // export default withTooltip(React.forwardRef((props, ref) => {
-// 	return <CKEditorField {...props} outerRef={ref} />;
+// 	return <HtmlEditorField {...props} outerRef={ref} />;
 // }));

package/src/Components/Panel/Header.js

@@ -116,17 +116,8 @@ export default function Header(props) {
 							w="100%"
 							style={{ userSelect: 'none', ...doubleClickStyle, }}
 							onPress={(e) => {
-								switch (e.detail) {
-									case 1: // single click
-										break;
-									case 2: // double click
-										if (isCollapsible) {
-											onToggleCollapse(e);
-										}
-										break;
-									case 3: // triple click
-										break;
-									default:
+								if (isCollapsible) {
+									onToggleCollapse(e);
 								}
 							}}
 						>
@@ -136,17 +127,24 @@ export default function Header(props) {
 								h="100%" 
 								w="100%"
 								bg={styles.PANEL_HEADER_BG_VERTICAL}
-								style={{ userSelect: 'none', }}
 							>
 								{collapseBtn}
-								<Text
-									flex={1}
-									fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
-									color={styles.PANEL_HEADER_TEXT_COLOR}
-									numberOfLines={1}
-									ellipsizeMode="head"
-									style={{transform: [{ rotate: '-90deg'}]}}
-								>{title}</Text>
+								<Column
+									alignItems="center"
+									justifyContent="center"
+									flex={1} 
+									w="100%"
+								>
+									<Text
+										textAlign="right"
+										fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
+										color={styles.PANEL_HEADER_TEXT_COLOR}
+										numberOfLines={1}
+										ellipsizeMode="head"
+										w={200}
+										style={{ transform: [{ rotate: '-90deg'}] }}
+									>{title}</Text>
+								</Column>
 							</Column>
 						</Pressable>;
 			}
@@ -154,21 +152,11 @@ export default function Header(props) {
 	
 		return <Pressable
 					testID={testID}
-					flex={1}
 					w="100%"
 					style={{ userSelect: 'none', ...doubleClickStyle, }}
 					onPress={(e) => {
-						switch (e.detail) {
-							case 1: // single click
-								break;
-							case 2: // double click
-								if (isCollapsible) {
-									onToggleCollapse(e);
-								}
-								break;
-							case 3: // triple click
-								break;
-							default:
+						if (isCollapsible) {
+							onToggleCollapse(e);
 						}
 					}}
 				>
@@ -178,7 +166,6 @@ export default function Header(props) {
 						px={styles.PANEL_HEADER_PX}
 						py={styles.PANEL_HEADER_PY}
 						bg={styles.PANEL_HEADER_BG}
-						style={{ userSelect: 'none', }}
 					>
 						{closeBtn}
 						<Text
@@ -194,5 +181,4 @@ export default function Header(props) {
 
 	}
 
-
 }

package/src/Components/Panel/Panel.js

@@ -1,4 +1,3 @@
-import { useState, } from 'react';
 import {
 	Column,
 	Row,
@@ -120,22 +119,22 @@ function Panel(props) {
 	}
 
 	if (isCollapsed) {
-		if (collapseDirection !== VERTICAL) {
-			return <Column overflow="hidden" {...framePropsToUse} w="33px" height="100%">
+		if (collapseDirection === HORIZONTAL) {
+			return <Column overflow="hidden" {...propsToPass} {...framePropsToUse} w="33px" h="100%">
 						{isDisabled && <Mask />}
 						{headerComponent}
 					</Column>;
 		}
-		return <Column overflow="hidden" {...framePropsToUse}>
+		return <Column overflow="hidden" {...propsToPass} {...framePropsToUse} h="33px" w="100%">
 					{isDisabled && <Mask />}
 					{headerComponent}
 				</Column>;
 	}
-	return <Column overflow="hidden" onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
+	return <Column overflow="hidden" {...propsToPass} onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
 				{isDisabled && <Mask />}
 				{headerComponent}
 				{topToolbar}
-				<Column flex={1} w="100%" overflow="hidden" {...propsToPass}>
+				<Column flex={1} w="100%" overflow="hidden">
 					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
 				</Column>
 				{bottomToolbar}

package/src/Components/index.js

@@ -10,7 +10,6 @@ import Blank from './Blank.js';
 import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
 // import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
 import CheckboxGroup from './Form/Field/CheckboxGroup/CheckboxGroup.js';
-// import CKEditor from './Form/Field/CKEditor/CKEditor.js'; // web only
 import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
 // import ComboEditor from '../Components/Form/Field/Combo/ComboEditor.js';
@@ -26,6 +25,7 @@ import FiltersForm from './Form/FiltersForm.js';
 import Form from './Form/Form.js';
 import Grid from './Grid/Grid.js';
 import GridPanel from './Panel/GridPanel.js';
+import HtmlEditor from './Form/Field/HtmlEditor.js';
 import IconButton from './Buttons/IconButton.js';
 import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
@@ -56,7 +56,6 @@ const components = {
 	BooleanCombo,
 	// CartButtonWithBadge,
 	CheckboxGroup,
-	// CKEditor,
 	Color,
 	Column,
 	Combo,
@@ -73,6 +72,7 @@ const components = {
 	Form,
 	Grid,
 	GridPanel,
+	HtmlEditor,
 	IconButton,
 	Input,
 	IntervalsCombo,

package/src/Functions/registerReactNativeComponents.js

@@ -1,11 +1,15 @@
 import UiGlobals from '../UiGlobals.js';
+import CKEditor from '../PlatformImports/ReactNative/CKEditor';
 import Datetime from '../PlatformImports/ReactNative/Datetime';
 import Draggable from '../PlatformImports/ReactNative/Draggable';
+import ScreenContainer from '../Components/Container/ScreenContainer';
 import _ from 'lodash';
 
 export default function registerReactNativeComponents() {
 	_.merge(UiGlobals.components, {
+		CKEditor,
 		Datetime,
 		Draggable,
+		ScreenContainer,
 	});
 }

package/src/Functions/registerWebComponents.js

@@ -1,5 +1,5 @@
 import UiGlobals from '../UiGlobals.js';
-import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
+import CKEditor from '../PlatformImports/Web/CKEditor';
 import Datetime from '../PlatformImports/Web/Datetime.js';
 import Draggable from '../PlatformImports/Web/Draggable.js';
 import File from '../Components/Form/Field/File.js';

package/src/PlatformImports/ReactNative/CKEditor.js

@@ -0,0 +1,3 @@
+import CKEditor5 from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
+
+export default CKEditor5.default || CKEditor5;

package/src/PlatformImports/Web/CKEditor.js

@@ -0,0 +1,4 @@
+import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
+import './ckeditor.css';
+
+export default CKEditor.default || CKEditor;

package/src/Components/ScreenContainer.js

@@ -1,71 +0,0 @@
-import {
-	Keyboard,
-	Platform,
-	TouchableWithoutFeedback,
-} from 'react-native';
-import {
-	Column,
-	KeyboardAvoidingView,
-	ScrollView,
-} from 'native-base';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-import { useDimensions } from '@react-native-community/Hooks';
-import { useHeaderHeight } from '@react-navigation/elements';
-import testProps from '../Functions/testProps';
-
-export default function ScreenContainer(props) {
-	const {
-			screenName = 'ScreenContainer',
-			p = 0,
-			safeArea = false,
-			bg = '#fff',
-			scrollEnabled = false,
-			keyboardAvoiding = false,
-			behavior = Platform.OS === 'ios' ? 'padding' : 'height', // for the KeyboardAvoidingView. 'height', 'position', 'padding'
-			justifyContent = 'flex-start',
-			alignItems = 'center',
-			onLayout = () => {},
-		} = props,
-		screen = useDimensions().screen,
-		headerHeight = useHeaderHeight(),
-		safeAreaProps = {};
-	if (safeArea !== false) {
-		safeAreaProps.safeAreaTop = true;
-	}
-
-	let content = <Column
-						{...testProps(screenName)}
-						alignItems={alignItems}
-						justifyContent={justifyContent}
-						flex={1}
-						w="100%"
-						p={p}
-						bg={bg}
-						overflow="visible"
-						onLayout={onLayout}
-						{...safeAreaProps}
-					>
-						{props.children}
-					</Column>;
-	if (keyboardAvoiding && scrollEnabled) {
-		content = <KeyboardAwareScrollView behavior={behavior} contentContainerStyle={{ flex: 1, }}>
-						<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-							{content}
-						</TouchableWithoutFeedback>
-					</KeyboardAwareScrollView>;
-	} else {
-		if (keyboardAvoiding) {
-			content = <KeyboardAvoidingView behavior={behavior} flex={1}>
-							<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-								{content}
-							</TouchableWithoutFeedback>
-						</KeyboardAvoidingView>;
-		}
-		if (scrollEnabled) {
-			content = <ScrollView keyboardShouldPersistTaps="always" _contentContainerStyle={{
-							minHeight: screen.height - headerHeight,
-						}}>{content}</ScrollView>;
-		}
-	}
-	return content;
-}