@onehat/ui 0.2.17 → 0.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.17",
+	"version": "0.2.19",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -21,6 +21,7 @@
 	"dependencies": {
 		"@ckeditor/ckeditor5-react": "^5.0.6",
 		"@onehat/data": "^1.13.6",
+		"@hookform/resolvers": "^2.9.11",
 		"browser-or-node": "^2.1.1",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",

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';
@@ -30,6 +25,15 @@ import emptyFn from '../../../Functions/emptyFn.js';
 import Calendar from '../../Icons/Calendar.js';
 import _ from 'lodash';
 
+// eslint-disable-next-line
+let Datetime;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	Datetime = await import('../../../PlatformImports/Web/Datetime.js');
+} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+	Datetime = await import('../../../PlatformImports/ReactNative/Datetime.js');
+}
+
+
 export function DateElement(props) {
 	const {
 			placeholderText,
@@ -226,8 +230,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 +324,7 @@ export function DateElement(props) {
 								ref={pickerRef}
 								p={0}
 							>
-								<DT
+								<Datetime
 									open={true}
 									input={false}
 									closeOnClickOutside={false}

package/src/Components/Hoc/withDraggable.js

@@ -13,8 +13,14 @@ import {
 	v4 as uuid,
 } from 'uuid';
 
+
 // eslint-disable-next-line
-const Draggable = await import('../../PlatformImports/' + CURRENT_MODE + '/Draggable.js');
+let Draggable;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	Draggable = await import('../../PlatformImports/Web/Draggable.js');
+} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+	Draggable = await import('../../PlatformImports/ReactNative/Draggable.js');
+}
 
 
 

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/registerWebComponents.js

@@ -0,0 +1,9 @@
+import UiGlobals from '../UiGlobals.js';
+import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
+import _ from 'lodash';
+
+export function registerWebComponents() {
+	_.merge(UiGlobals.components, {
+		CKEditor,
+	});
+}

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;