Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc3aa49a

Browse files
use canvas width to update screen info
1 parentd94a667 commitc3aa49a

File tree

2 files changed

+16
-7
lines changed

2 files changed

+16
-7
lines changed

‎client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import{useCallback,useEffect,useState}from"react";
1+
import{useCallback,useEffect,useMemo,useState}from"react";
22
import{hookToStateComp}from"../generators/hookToComp";
3+
import{CanvasContainerID}from"@lowcoder-ee/index.sdk";
34

45
enumScreenTypes{
56
Mobile='mobile',
@@ -19,9 +20,13 @@ type ScreenInfo = {
1920
}
2021

2122
functionuseScreenInfo(){
22-
constgetDeviceType=()=>{
23-
if(window.innerWidth<768)returnScreenTypes.Mobile;
24-
if(window.innerWidth<889)returnScreenTypes.Tablet;
23+
constcanvasContainer=document.getElementById(CanvasContainerID);
24+
constcanvas=document.getElementsByClassName('lowcoder-app-canvas')?.[0];
25+
constcanvasWidth=canvasContainer?.clientWidth||canvas?.clientWidth;
26+
27+
constgetDeviceType=(width:number)=>{
28+
if(width<768)returnScreenTypes.Mobile;
29+
if(width<889)returnScreenTypes.Tablet;
2530
returnScreenTypes.Desktop;
2631
}
2732
constgetFlagsByDeviceType=(deviceType:ScreenType)=>{
@@ -41,16 +46,17 @@ function useScreenInfo() {
4146

4247
constgetScreenInfo=useCallback(()=>{
4348
const{ innerWidth, innerHeight}=window;
44-
constdeviceType=getDeviceType();
49+
constdeviceType=getDeviceType(canvasWidth||window.innerWidth);
4550
constflags=getFlagsByDeviceType(deviceType);
4651

4752
return{
4853
width:innerWidth,
4954
height:innerHeight,
55+
canvasWidth,
5056
deviceType,
5157
...flags
5258
};
53-
},[])
59+
},[canvasWidth])
5460

5561
const[screenInfo,setScreenInfo]=useState<ScreenInfo>({});
5662

@@ -64,6 +70,10 @@ function useScreenInfo() {
6470
return()=>window.removeEventListener('resize',updateScreenInfo);
6571
},[updateScreenInfo])
6672

73+
useEffect(()=>{
74+
updateScreenInfo();
75+
},[canvasWidth]);
76+
6777
returnscreenInfo;
6878
}
6979

‎client/packages/lowcoder/src/pages/common/header.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
Layout,
2323
Left,
2424
Middle,
25-
MobileAppIcon,
2625
ModuleIcon,
2726
PackUpIcon,
2827
RefreshIcon,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp