@onehat/ui 0.2.18 → 0.2.20

package/package.json

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

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

@@ -12,11 +12,6 @@ import {
 	TIME,
 	DATETIME,
 } from '../../../Constants/Date.js';
-// import DateTimePickerModal from 'react-native-modal-datetime-picker'; // https://github.com/mmazzarolo/react-native-modal-datetime-picker
-// import DateTimePicker from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
-import Datetime from 'react-datetime'; // https://www.npmjs.com/package/react-datetime
-import 'react-datetime/css/react-datetime.css';
-import './datetime.css';
 import {
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
@@ -28,8 +23,10 @@ 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 _ from 'lodash';
 
+
 export function DateElement(props) {
 	const {
 			placeholderText,
@@ -41,6 +38,7 @@ export function DateElement(props) {
 			tooltipPlacement = 'bottom',
 		} = props,
 		styles = UiGlobals.styles,
+		Datetime = getComponentFromType('Draggable'),
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		pickerRef = useRef(),
@@ -226,8 +224,6 @@ 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}>
 				<Row flex={1} h="100%" alignItems="center" onLayout={() => setIsRendered(true)}>
@@ -322,7 +318,7 @@ export function DateElement(props) {
 								ref={pickerRef}
 								p={0}
 							>
-								<DT
+								<Datetime
 									open={true}
 									input={false}
 									closeOnClickOutside={false}

package/src/Components/Hoc/withDraggable.js

@@ -12,9 +12,7 @@ import useBlocking from '../../Hooks/useBlocking.js';
 import {
 	v4 as uuid,
 } from 'uuid';
-
-// eslint-disable-next-line
-const Draggable = await import('../../PlatformImports/' + CURRENT_MODE + '/Draggable.js');
+import getComponentFromType from '../../Functions/getComponentFromType';
 
 
 
@@ -42,6 +40,7 @@ export default function withDraggable(WrappedComponent) {
 				// for local use
 				mode = HORIZONTAL, // HORIZONTAL, VERTICAL
 			} = props,
+			Draggable = getComponentFromType('Draggable'),
 			[isDragging, setIsDraggingRaw] = useState(false),
 			[node, setNode] = useState(false),
 			[bounds, setBounds] = useState(null),

package/src/Components/index.js

@@ -10,7 +10,7 @@ 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';
+// 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';
@@ -56,7 +56,7 @@ const components = {
 	BooleanCombo,
 	// CartButtonWithBadge,
 	CheckboxGroup,
-	CKEditor,
+	// CKEditor,
 	Color,
 	Column,
 	Combo,

package/src/Functions/registerComponents.js

@@ -1,5 +1,6 @@
 import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
 
 export default function registerComponents(newComponents) {
 	_.merge(UiGlobals.components, newComponents);
-}
+}

package/src/Functions/registerReactNativeComponents.js

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

package/src/Functions/registerWebComponents.js

@@ -0,0 +1,13 @@
+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 _ from 'lodash';
+
+export function registerWebComponents() {
+	_.merge(UiGlobals.components, {
+		CKEditor,
+		Datetime,
+		Draggable,
+	});
+}

package/src/PlatformImports/ReactNative/Datetime.js

@@ -0,0 +1,4 @@
+// import DateTimePickerModal from 'react-native-modal-datetime-picker'; // https://github.com/mmazzarolo/react-native-modal-datetime-picker
+import Datetime from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
+
+export default Datetime.default || Datetime;

package/src/PlatformImports/Web/Datetime.js

@@ -0,0 +1,5 @@
+import Datetime from 'react-datetime'; // https://www.npmjs.com/package/react-datetime
+import 'react-datetime/css/react-datetime.css';
+import './datetime.css';
+
+export default Datetime.default || Datetime;