fixes for shared module and firefox dnd

Author: ahwelgemoed

apps/native-widgets/expand-text-native-widget/package.json

@@ -35,6 +35,6 @@
         "@types/react-native": "~0.63.52"
     },
     "dependencies": {
-        "@appservicescomponents/useMendix": "*"
+        "@appservicescomponents/usemendix": "*"
     }
 }

apps/native-widgets/expand-text-native-widget/src/ExpandText.tsx

@@ -4,7 +4,7 @@ import { TextStyle, ViewStyle, Animated, View, TouchableWithoutFeedback } from "
 import { Style } from "@mendix/pluggable-widgets-tools";
 
 import { ExpandTextProps } from "../typings/ExpandTextProps";
-import { useDynamicValue } from "@appservicescomponents/useMendix";
+import { useDynamicValue } from "@appservicescomponents/usemendix";
 import { OffScreenRender } from "./components/OffScreenRender";
 import { DisplayText, Ran_State } from "./components/DisplayText";
 

apps/native-widgets/lottie-native/package.json

@@ -35,7 +35,7 @@
         "@types/react-native": "~0.63.52"
     },
     "dependencies": {
-        "@appservicescomponents/useMendix": "*",
+        "@appservicescomponents/usemendix": "*",
         "@appservicescomponents/chore": "*",
         "@testing-library/react-native": "^11.0.0",
         "lottie-ios": "^3.2.3",

apps/native-widgets/lottie-native/src/components/ControlledPlaying.tsx

@@ -4,7 +4,7 @@ import LottieView from "lottie-react-native";
 import { View } from "react-native";
 import { playAnimationSegments } from "../utils/helpers";
 // Hooks
-import { useDynamicValue, useEditableValue } from "@appservicescomponents/useMendix";
+import { useDynamicValue, useEditableValue } from "@appservicescomponents/usemendix";
 
 // TYPES
 import type { ControlledPlayingTypes } from "src/utils/Types";

apps/web-widgets/drag-and-drop-widget/package.json

@@ -1,7 +1,7 @@
 {
     "name": "draganddropwidget",
     "widgetName": "Draganddropwidget",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "description": "My widget description",
     "copyright": "2022 Mendix Technology BV",
     "author": "ahwelgemoed",
@@ -28,7 +28,8 @@
         "@types/big.js": "^6.0.2",
         "@types/classnames": "^2.2.4",
         "@types/react": "~17.0.1",
-        "@types/react-dom": "~17.0.1"
+        "@types/react-dom": "~17.0.1",
+        "@types/ua-parser-js": "^0.7.36"
     },
     "dependencies": {
         "@types/react-dnd-multi-backend": "^6.0.1",
@@ -45,6 +46,7 @@
         "react-dnd-preview": "^6.0.2",
         "react-dnd-scrolling": "^1.2.4",
         "react-dnd-touch-backend": "^14.1.1",
-        "react-transition-group": "^4.4.2"
+        "react-transition-group": "^4.4.2",
+        "ua-parser-js": "^1.0.32"
     }
 }

apps/web-widgets/drag-and-drop-widget/src/Draganddropwidget.editorConfig.ts

@@ -1,8 +1,6 @@
 import { hidePropertiesIn } from "./utils/rndChores";
 
 export function getProperties(values: any, defaultProperties: any, _platform: "web" | "desktop") {
-    console.log("values", values);
-
     if (!values.isParent) {
         hidePropertiesIn(defaultProperties, values, ["uuidStringParentExpression"]);
     }

apps/web-widgets/drag-and-drop-widget/src/Draganddropwidget.tsx

@@ -13,11 +13,12 @@ import { ValueStatus } from "mendix";
 import type { OnDropTypes, Type_Parsed_Incoming_Data } from "./userTypes";
 import type { DraganddropwidgetContainerProps } from "../typings/DraganddropwidgetProps";
 
+const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+
 const DndWidget: FunctionComponent<DraganddropwidgetContainerProps> = props => {
     // Sort Incoming Data
     props.incomingData.setSortOrder([[props.sortOn.id, props.sort]]);
 
-    console.log("props", props.uuidStringContainer, props);
     const IF_NO_PARENT_UUID = useMemo(() => nanoid(), []);
     const END_ID = useMemo(() => nanoid(), []);
 
@@ -143,7 +144,7 @@ const DndWidget: FunctionComponent<DraganddropwidgetContainerProps> = props => {
         return <div>Loading..</div>;
     }
     return (
-        <MyDragProvider uuidStringContainer={props.uuidStringContainer}>
+        <MyDragProvider uuidStringContainer={props.uuidStringContainer} isFirefox={isFirefox}>
             <ScrollHelper
                 parentContainerName={parentContainerName}
                 isDragging={isDragging}
@@ -203,7 +204,7 @@ const DndWidget: FunctionComponent<DraganddropwidgetContainerProps> = props => {
                     </DroppableArea>
                 </Fragment>
             </ScrollHelper>
-            <DragPreview displayItem={props.hasDataContent} {...props} />
+            {!isFirefox ? <DragPreview displayItem={props.hasDataContent} {...props} /> : ""}
         </MyDragProvider>
     );
 };

apps/web-widgets/drag-and-drop-widget/src/components/MyDragProvider.tsx

@@ -1,10 +1,11 @@
-import { createElement, forwardRef, Fragment } from "react";
+import { createElement, FC, forwardRef, Fragment } from "react";
 import { DndProvider } from "react-dnd-multi-backend";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { DND_OPTIONS } from "../utils/general";
-
 interface MyDragInterface {
     children: any;
     uuidStringContainer: string;
+    isFirefox: boolean;
 }
 
 const MyDragProvider = forwardRef<HTMLDivElement, MyDragInterface>(props => {
@@ -14,15 +15,37 @@ const MyDragProvider = forwardRef<HTMLDivElement, MyDragInterface>(props => {
                 tabIndex={0}
                 aria-label="This is a Drag and Drop Region - Press Modifier and D To Pick Up Items. Use Up and Down Arrows to Move Items Higher or Lower or To a new List"
             />
-            <DndProvider
-                debugMode={false}
-                // @ts-ignore
-                options={DND_OPTIONS(props.uuidStringContainer)}
-            >
-                {props.children}
-            </DndProvider>
+            {props.isFirefox ? (
+                <MyDragProviderForFireFox>{props.children}</MyDragProviderForFireFox>
+            ) : (
+                <MyDragProviderForRest {...props}>{props.children}</MyDragProviderForRest>
+            )}
         </Fragment>
     );
 });
 
 export default MyDragProvider;
+
+const MyDragProviderForFireFox: FC = ({ children }) => {
+    return (
+        <DndProvider
+            debugMode={false}
+            // @ts-ignore
+            backend={HTML5Backend}
+        >
+            {children}
+        </DndProvider>
+    );
+};
+
+export const MyDragProviderForRest: FC<Omit<MyDragInterface, "isFirefox">> = ({ children, uuidStringContainer }) => {
+    return (
+        <DndProvider
+            debugMode={false}
+            // @ts-ignore
+            options={DND_OPTIONS(uuidStringContainer)}
+        >
+            {children}
+        </DndProvider>
+    );
+};

apps/web-widgets/drag-and-drop-widget/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Draganddropwidget" version="3.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Draganddropwidget" version="3.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Draganddropwidget.xml"/>
         </widgetFiles>