@onehat/ui 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.8",
+	"version": "0.2.10",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,12 +25,12 @@
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",
 		"native-base": "^3.4.25",
-		"react-datetime": "^3.2.0",
 		"react-hook-form": "^7.43.1"
 	},
 	"peerDependencies": {
 	  "react": "*",
 	  "react-color": "^2.19.3",
+	  "react-datetime": "^3.2.0",
 	  "react-draggable": "^4.4.5",
 	  "react-dom": "*",
 	  "react-native": "*"

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

@@ -10,9 +10,8 @@ import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
-import UiConfig from '../../../UiConfig.js';
+import UiGlobals from '../../../UiGlobals.js';
 import Input from '../Field/Input.js';
-import styles from '../../../Constants/Styles.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import _ from 'lodash';
@@ -24,6 +23,7 @@ export function ColorElement(props) {
 			tooltip = 'Choose a color.',
 			tooltipPlacement = 'bottom',
 		} = props,
+		styles = UiGlobals.styles,
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		pickerRef = useRef(),
@@ -38,7 +38,7 @@ export function ColorElement(props) {
 				return;
 			}
 
-			if (UiConfig.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
+			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
 					triggerRect = triggerRef.current.getBoundingClientRect(),

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

@@ -10,9 +10,8 @@ import {
 import {
 	UI_MODE_WEB,
 } from '../../../../Constants/UiModes.js';
-import UiConfig from '../../../../UiConfig.js';
+import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
-import styles from '../../../../Constants/Styles.js';
 import withData from '../../../Hoc/withData.js';
 import withEvents from '../../../Hoc/withEvents.js';
 import withSelection from '../../../Hoc/withSelection.js';
@@ -62,6 +61,7 @@ export function Combo(props) {
 
 			tooltipPlacement = 'bottom',
 		} = props,
+		styles = UiGlobals.styles,
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
@@ -79,7 +79,7 @@ export function Combo(props) {
 			if (isMenuShown) {
 				return;
 			}
-			if (UiConfig.mode === UI_MODE_WEB && inputRef.current.getBoundingClientRect) {
+			if (UiGlobals.mode === UI_MODE_WEB && inputRef.current.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const
 					rect = inputRef.current.getBoundingClientRect(),

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

@@ -20,7 +20,7 @@ import './datetime.css';
 import {
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
-import UiConfig from '../../../UiConfig.js';
+import UiGlobals from '../../../UiGlobals.js';
 import Formatters from '@onehat/data/src/Util/Formatters.js';
 import Parsers from '@onehat/data/src/Util/Parsers.js';
 import Input from '../Field/Input.js';
@@ -28,7 +28,6 @@ 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 styles from '../../../Constants/Styles.js';
 import _ from 'lodash';
 
 export function DateElement(props) {
@@ -41,6 +40,7 @@ export function DateElement(props) {
 			tooltip = 'Choose a date.',
 			tooltipPlacement = 'bottom',
 		} = props,
+		styles = UiGlobals.styles,
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		pickerRef = useRef(),
@@ -54,7 +54,7 @@ export function DateElement(props) {
 			if (isPickerShown) {
 				return;
 			}
-			if (UiConfig.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
+			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
 					triggerRect = triggerRef.current.getBoundingClientRect(),
@@ -226,6 +226,7 @@ export function DateElement(props) {
 		pickerValue = pickerValue.toDate();
 	}
 
+	const DT = Datetime.default || Datetime; // this shouldn't be necessary, but I couldn't get it to work unless doing this! Something is screwey with the ES6 import of Datetime.
 
 	// Web version
 	return <Tooltip label={tooltip} placement={tooltipPlacement}>
@@ -321,7 +322,7 @@ export function DateElement(props) {
 								ref={pickerRef}
 								p={0}
 							>
-								<Datetime
+								<DT
 									open={true}
 									input={false}
 									closeOnClickOutside={false}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {
 	Text,
 } from 'native-base';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 
@@ -11,7 +11,8 @@ const
 		const {
 				value,
 				text = value,
-			} = props;
+			} = props,
+			styles = UiGlobals.styles;
 		return <Text
 					ref={props.outerRef}
 					onChangeText={props.setValue}

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

@@ -10,8 +10,7 @@ import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../../Constants/UiModes.js';
-import UiConfig from '../../../UiConfig.js';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import {
 	FILE_MODE_IMAGE,
 	FILE_MODE_FILE,
@@ -50,6 +49,7 @@ function FileElement(props) {
 			tooltip = 'Choose or drag a file on top of this control.',
 			tooltipPlacement = 'bottom',
 		} = props,
+		styles = UiGlobals.styles,
 		dragRef = useRef(),
 		fileInputRef = useRef(),
 		[isDropping, setIsDropping] = useState(false),
@@ -157,7 +157,7 @@ function FileElement(props) {
 		setLocalFilename(localFilename);
 	}, []);
 
-	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 		

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

@@ -6,7 +6,7 @@ import {
 import {
 	AUTO_SUBMIT_DELAY,
 } from '../../../Constants/Input.js';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
@@ -22,6 +22,7 @@ function InputElement(props) {
 			tooltip = null,
 			tooltipPlacement = 'bottom',
 		} = props,
+		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
 		[localValue, setLocalValue] = useState(value),
 		onKeyPressLocal = (e) => {

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

@@ -8,7 +8,7 @@ import {
 import {
 	AUTO_SUBMIT_DELAY,
 } from '../../../Constants/Input.js';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
@@ -26,6 +26,7 @@ function NumberElement(props) {
 		maxValue,
 		tooltip = null,
 	} = props,
+	styles = UiGlobals.styles,
 	debouncedSetValueRef = useRef(),
 	[localValue, setLocalValue] = useState(value),
 	onInputKeyPress = (e) => {

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

@@ -2,12 +2,13 @@ import React from 'react';
 import {
 	Text,
 } from 'native-base';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 
 const
 	TextElement = (props) => {
+		const styles = UiGlobals.styles;
 		return <Text
 					ref={props.outerRef}
 					numberOfLines={1}

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

@@ -2,12 +2,13 @@ import React from 'react';
 import {
 	TextArea,
 } from 'native-base';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 
 const
 	TextAreaElement = (props) => {
+		const styles = UiGlobals.styles;
 		return <TextArea
 					ref={props.outerRef}
 					onChangeText={props.setValue}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {
 	Switch,
 } from 'native-base';
-import styles from '../../../Constants/Styles.js';
+import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 
@@ -12,6 +12,7 @@ const
 				value,
 				setValue,
 			} = props,
+			styles = UiGlobals.styles,
 			onToggle = () => {
 				setValue(!value);
 			};

package/src/Components/Form/FieldSet.js

@@ -5,7 +5,7 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import styles from '../../Constants/Styles.js';
+import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton.js';
 import CaretUp from '../Icons/CaretUp.js';
 import CaretDown from '../Icons/CaretDown.js';
@@ -19,6 +19,7 @@ export default function FieldSet(props) {
 			hasErrors,
 			...propsToPass
 		} = props,
+		styles = UiGlobals.styles,
 		[localIsCollapsed, setLocalIsCollapsed] = useState(isCollapsed),
 		onToggleCollapse = () => {
 			setLocalIsCollapsed(!localIsCollapsed);

package/src/Components/Grid/Grid.js

@@ -11,7 +11,6 @@ import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
-import styles from '../../Constants/Styles.js';
 import {
 	v4 as uuid,
 } from 'uuid';
@@ -22,6 +21,7 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Grid.js';
+import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
@@ -139,6 +139,7 @@ export function Grid(props) {
 			onEditorRowClick,
 
 		} = props,
+		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
 		gridRef = useRef(),
 		[isReady, setIsReady] = useState(false),

package/src/Components/Grid/GridHeaderRow.js

@@ -15,8 +15,7 @@ import {
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
-import UiConfig from '../../UiConfig.js';
-import styles from '../../Constants/Styles.js';
+import UiGlobals from '../../UiGlobals.js';
 import useBlocking from '../../Hooks/useBlocking.js';
 import AngleRight from '../Icons/AngleRight.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
@@ -42,6 +41,7 @@ export default function GridHeaderRow(props) {
 			gridRef,
 			isHovered,
 		} = props,
+		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
 		sortField = Repository && Repository.getSortField(),
 		{ isBlocked } = useBlocking(),
@@ -269,7 +269,7 @@ export default function GridHeaderRow(props) {
 		}
 	}, [columnsConfig]);
 	
-	if (UiConfig.mode !== UI_MODE_WEB) {
+	if (UiGlobals.mode !== UI_MODE_WEB) {
 		canColumnsReorder = false;
 		canColumnsResize = false;
 	}

package/src/Components/Grid/GridRow.js

@@ -7,8 +7,8 @@ import {
 import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
-import styles from '../../Constants/Styles.js';
 import AngleRight from '../Icons/AngleRight.js';
 import _ from 'lodash';
 
@@ -24,6 +24,7 @@ export default function GridRow(props) {
 			bg,
 			item,
 		} = props,
+		styles = UiGlobals.styles,
 		isPhantom = item.isPhantom,
 		hash = item.hash || item;
 

package/src/Components/Hoc/withDraggable.js

@@ -7,7 +7,7 @@ import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
-import UiConfig from '../../UiConfig.js';
+import UiGlobals from '../../UiGlobals.js';
 import Draggable from 'react-draggable'; // https://github.com/react-grid-layout/react-draggable
 import useBlocking from '../../Hooks/useBlocking.js';
 import {
@@ -21,7 +21,7 @@ import {
 export default function withDraggable(WrappedComponent) {
 	return (props) => {
 
-		if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			throw new Error('Not yet implemented for RN.');
 		}
 		const {

package/src/Components/Hoc/withInlineEditor.js

@@ -12,14 +12,13 @@ import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
-import UiConfig from '../../UiConfig.js';
+import UiGlobals from '../../UiGlobals.js';
 import Form from '../Form/Form.js';
 import withEditor from './withEditor.js';
-import styles from '../../Constants/Styles.js';
 import _ from 'lodash';
 
 export default function withInlineEditor(WrappedComponent) {
-	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 	return withEditor((props) => {
@@ -39,6 +38,7 @@ export default function withInlineEditor(WrappedComponent) {
 				// withData
 				Repository,
 			} = props,
+			styles = UiGlobals.styles,
 			inlineEditorRef = useRef(),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
 			[currentRow, setCurrentRow] = useState(),

package/src/Components/Panel/Footer.js

@@ -1,9 +1,10 @@
 import {
 	Row,
 } from 'native-base';
-import styles from '../../Constants/Styles.js';
+import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {
+	const styles = UiGlobals.styles;
 	return <Row
 				alignItems="center"
 				justifyContent="center"

package/src/Components/Panel/Header.js

@@ -13,17 +13,16 @@ import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
-import UiConfig from '../../UiConfig.js';
+import UiGlobals from '../../UiGlobals.js';
 import Minus from '../Icons/Minus.js';
 import Plus from '../Icons/Plus.js';
 import Xmark from '../Icons/Xmark.js';
-import styles from '../../Constants/Styles.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import IconButton from '../Buttons/IconButton.js';
 
 export default function Header(props) {
 	
-	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 
@@ -36,7 +35,8 @@ export default function Header(props) {
 			collapseDirection = VERTICAL,
 			isCollapsed = false,
 			onToggleCollapse = emptyFn,
-		} = props;
+		} = props,
+		styles = UiGlobals.styles;
 
 	let closeBtn = null,
 		collapseBtn = null;

package/src/Components/Panel/Panel.js

@@ -13,7 +13,7 @@ import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
-import UiConfig from '../../UiConfig.js';
+import UiGlobals from '../../UiGlobals.js';
 import Header from './Header.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import emptyFn from '../../Functions/emptyFn.js';
@@ -25,7 +25,7 @@ import _ from 'lodash';
 
 function Panel(props) {
 
-	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 	const {

package/src/Components/Panel/TabPanel.js

@@ -11,10 +11,10 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton.js';
 import Minimize from '../Icons/Minimize.js';
 import Maximize from '../Icons/Maximize.js';
-import styles from '../../Constants/Styles.js';
 import Panel from './Panel.js';
 import _ from 'lodash';
 
@@ -32,6 +32,7 @@ export default function TabPanel(props) {
 			onChangeIsCollapsed,
 			...propsToPass
 		} = props,
+		styles = UiGlobals.styles,
 		[currentTab, setCurrentTabRaw] = useState(initialTab),
 		[isCollapsed, setIsCollapsedRaw] = useState(startsCollapsed),
 		setIsCollapsed = (isCollapsed) => {

package/src/Constants/Styles.js

@@ -1,6 +1,5 @@
-// import * as appStyles from '../../Constants/Styles.js';
-import _ from 'lodash';
-
+// These are the default styles of the @onehat/ui components.
+// App can override these with Functions/registerStyles()
 const
 	DEFAULT_FONTSIZE = 15,
 	WHITE = '#fff',
@@ -82,5 +81,4 @@ const defaults = {
 	TEXT_FONTSIZE: DEFAULT_FONTSIZE,
 };
 
-export default defaults; //_.merge(defaults, appStyles);
-
+export default defaults;

package/src/Functions/registerStyles.js

@@ -0,0 +1,6 @@
+ import UiGlobals from '../UiGlobals.js';
+ import _ from 'lodash';
+
+ export default function registerStyles(newStyles) {
+	 _.merge(UiGlobals.styles, newStyles);
+ }

package/src/OneHatUi.js

@@ -2,6 +2,7 @@
 
 import EventEmitter from '@onehat/events';
 import Components from './Components/index.js';
+import Styles from './Constants/Styles.js';
 import UiGlobals from './UiGlobals.js';
 import _ from 'lodash';
 
@@ -14,6 +15,7 @@ export class OneHatUi extends EventEmitter {
 		super(...arguments);
 
 		UiGlobals.components = Components;
+		UiGlobals.styles = Styles;
 
 		this.registerEvents([
 			'error',

package/src/UiGlobals.js

@@ -1,3 +1,18 @@
-const Globals = {};
+import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from './Constants/UiModes.js';
+
+
+const Globals = {
+	mode: null,
+};
+
+if (isBrowser || isWebWorker) {
+	Globals.mode = UI_MODE_WEB;
+} else if (isNode) {
+	Globals.mode = UI_MODE_REACT_NATIVE;
+}
 
 export default Globals;

package/src/Functions/setUiMode.js

@@ -1,5 +0,0 @@
-import UiConfig from '../UiConfig.js';
-
-export default function setUiMode(mode) {
-	UiConfig.mode = mode;
-}

package/src/UiConfig.js

@@ -1,19 +0,0 @@
-import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
-import {
-	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
-} from './Constants/UiModes.js';
-
-
-const UiConfig = {
-	mode: null,
-};
-
-if (isBrowser || isWebWorker) {
-	UiConfig.mode = UI_MODE_WEB;
-} else
-if (isNode) {
-	UiConfig.mode = UI_MODE_REACT_NATIVE;
-}
-
-export default UiConfig;