Merge pull request #1520 from lowcoder-org/mobile-preview

Updated device mockup package

Author: FalkWolsky

client/packages/lowcoder/package.json

@@ -52,7 +52,6 @@
     "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",
     "hotkeys-js": "^3.8.7",
-    "html5-device-mockups": "^3.2.1",
     "immer": "^9.0.7",
     "less": "^4.1.3",
     "lodash": "^4.17.21",
@@ -68,7 +67,7 @@
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-colorful": "^5.5.1",
-    "react-device-mockups": "^0.1.12",
+    "react-device-mockup": "^1.0.0",
     "react-documents": "^1.2.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -256,8 +256,31 @@ export const EditorWrapper = styled.div`
 
 const DeviceWrapperInner = styled(Flex)`
   margin: 2% 0 0;
-  .screen {
-    overflow: auto;
+  .device-mockup.portrait {
+    > div:first-child {
+      > div:first-child {
+        > div:first-child {
+          > div:nth-child(2) {
+            display: block !important;
+            overflow: hidden auto !important;
+          } 
+        } 
+      }
+    }
+  }
+  .device-mockup.landscape {
+    > div:first-child {
+      > div:first-child {
+        > div:first-child {
+          > div:nth-child(2) {
+            > div:first-child {
+              display: block !important;
+              overflow: hidden auto !important;
+            }
+          } 
+        } 
+      }
+    }
   }
 `;
 
@@ -322,13 +345,11 @@ const DeviceWrapper = ({
   useEffect(() => {
     const loadWrapper = async () => {
       if (deviceType === "tablet") {
-        await import('html5-device-mockups/dist/device-mockups.min.css');
-        const { IPadPro } = await import("react-device-mockups");
-        setWrapper(() => IPadPro);
+        const { IPadMockup } = await import("react-device-mockup");
+        setWrapper(() => IPadMockup);
       } else if (deviceType === "mobile") {
-        await import('html5-device-mockups/dist/device-mockups.min.css');
-        const { IPhone7 } = await import("react-device-mockups");
-        setWrapper(() => IPhone7);
+        const { IPhoneMockup } = await import("react-device-mockup");
+        setWrapper(() => IPhoneMockup);
       } else {
         setWrapper(() => null);
       }
@@ -357,8 +378,9 @@ const DeviceWrapper = ({
   return (
     <DeviceWrapperInner justify="center" >
       <Wrapper
-        orientation={deviceOrientation}
-        width={deviceWidth}
+        isLandscape={deviceOrientation === 'landscape'}
+        screenWidth={deviceWidth}
+        className={`device-mockup ${deviceOrientation === 'landscape' && deviceType === 'mobile' ? 'landscape' : 'portrait'} `}
       >
         {children}
       </Wrapper>

client/yarn.lock

@@ -11492,13 +11492,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"html5-device-mockups@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "html5-device-mockups@npm:3.2.1"
-  checksum: abba0bccc6398313102a9365203092a7c0844879d1b0492168279c516c9462d2a7e016045be565bc183e3405a1ae4929402eaceb1952abdbf16f1580afa68df3
-  languageName: node
-  linkType: hard
-
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -14203,7 +14196,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     file-saver: ^2.0.5
     github-markdown-css: ^5.1.0
     hotkeys-js: ^3.8.7
-    html5-device-mockups: ^3.2.1
     http-proxy-middleware: ^2.0.6
     immer: ^9.0.7
     less: ^4.1.3
@@ -14220,7 +14212,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     react: ^18.2.0
     react-best-gradient-color-picker: ^3.0.10
     react-colorful: ^5.5.1
-    react-device-mockups: ^0.1.12
+    react-device-mockup: ^1.0.0
     react-documents: ^1.2.1
     react-dom: ^18.2.0
     react-draggable: ^4.4.4
@@ -17774,15 +17766,12 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"react-device-mockups@npm:^0.1.12":
-  version: 0.1.12
-  resolution: "react-device-mockups@npm:0.1.12"
+"react-device-mockup@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "react-device-mockup@npm:1.0.0"
   peerDependencies:
-    html5-device-mockups: ^3.2.1
-    prop-types: ^15.5.4
-    react: ^15.0.0 || ^16.0.0 || ^17.0.0
-    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: 738e969802c32810c2ca3ca3bd6c9bacf9b3d7adda0569c4f5c7fb1d68bab860ac7bb5a50aa2677d852143cb30ab8520e556c4dc7f53be154fd16ca08a9ba32c
+    react: "*"
+  checksum: 5a653b3e22c9cad567bf607169a710b70dc80c0f5b2b981008c06ff2566535ee809cb0819f0d3663bd2f0e3da6052a1a2b77baea58413e2202c2bab4602aa13e
   languageName: node
   linkType: hard