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

Commit6ebb066

Browse files
added fallback for left-panel, right-panel and bottom-panel
1 parent0ef3216 commit6ebb066

File tree

5 files changed

+81
-65
lines changed

5 files changed

+81
-65
lines changed

‎client/packages/lowcoder/src/layout/gridLayout.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1097,7 +1097,6 @@ const LayoutContainer = styled.div<{
10971097
}`}
10981098
`;
10991099

1100-
// export const ReactGridLayout = React.memo(GridLayout);
11011100
exportconstReactGridLayout=React.memo(GridLayout);
11021101

11031102
functionmoveOrResize(

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ export default function Header(props: HeaderProps) {
401401
size="small"
402402
>
403403
{editorModeOptions.map((option)=>(
404-
<Tooltiptitle={option.tooltip}>
404+
<Tooltipkey={option.key}title={option.tooltip}>
405405
<Radio.Buttonkey={option.key}value={option.value}>
406406
{option.label}
407407
</Radio.Button>

‎client/packages/lowcoder/src/pages/editor/AppEditor.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
3131
import{ALL_APPLICATIONS_URL}from"@lowcoder-ee/constants/routesURL";
3232
importhistoryfrom"util/history";
3333
importFlexfrom"antd/es/flex";
34+
importReactfrom"react";
3435

3536
constAppSnapshot=lazy(()=>{
3637
returnimport("pages/editor/appSnapshot")
@@ -42,7 +43,7 @@ const AppEditorInternalView = lazy(
4243
.then(moduleExports=>({default:moduleExports.AppEditorInternalView}))
4344
);
4445

45-
exportdefaultfunctionAppEditor(){
46+
constAppEditor=React.memo(()=>{
4647
constshowAppSnapshot=useSelector(showAppSnapshotSelector);
4748
constparams=useParams<AppPathParams>();
4849
constisUserViewModeCheck=useUserViewMode();
@@ -190,4 +191,6 @@ export default function AppEditor() {
190191
)}
191192
</ErrorBoundary>
192193
);
193-
}
194+
});
195+
196+
exportdefaultAppEditor;

‎client/packages/lowcoder/src/pages/editor/appSnapshot.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { TopHeaderHeight } from "constants/style";
3636
import{SnapshotItemProps,SnapshotList}from"../../components/SnapshotList";
3737
import{trans}from"i18n";
3838
importEditorSkeletonViewfrom"./editorSkeletonView";
39+
importReactfrom"react";
3940

4041
constAppEditorInternalView=lazy(
4142
()=>import("pages/editor/appEditorInternal")
@@ -134,7 +135,7 @@ const PAGE_SIZE = 10;
134135
constCURRENT_ITEM_KEY="current_key";
135136
constTIME_FORMAT=trans("history.timeFormat");
136137

137-
exportfunctionAppSnapshot(props:{currentAppInfo:AppSummaryInfo}){
138+
exportconstAppSnapshot=React.memo((props:{currentAppInfo:AppSummaryInfo})=>{
138139
const{ currentAppInfo}=props;
139140
constcurrentDsl=currentAppInfo.dsl;
140141
constdispatch=useDispatch();
@@ -289,4 +290,4 @@ export function AppSnapshot(props: { currentAppInfo: AppSummaryInfo }) {
289290
</AppSnapshotPanel>
290291
</Suspense>
291292
);
292-
}
293+
});

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

Lines changed: 72 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ import {
5454
import{isAggregationApp}from"util/appUtils";
5555
importEditorSkeletonViewfrom"./editorSkeletonView";
5656
import{getCommonSettings}from"@lowcoder-ee/redux/selectors/commonSettingSelectors";
57-
import{isEqual}from"lodash";
57+
import{isEqual,noop}from"lodash";
58+
import{BottomSkeleton}from"./bottom/BottomContent";
5859

5960
constLeftContent=lazy(
6061
()=>import('./LeftContent')
@@ -374,6 +375,23 @@ function EditorView(props: EditorViewProps) {
374375

375376
consthideBodyHeader=useTemplateViewMode()||(isViewMode&&(!showHeaderInPublic||!commonSettings.showHeaderInPublicApps));
376377

378+
constuiCompView=useMemo(()=>{
379+
if(showAppSnapshot){
380+
return(
381+
<ViewBody$hideBodyHeader={hideBodyHeader}$height={height}>
382+
<EditorContainer>{uiComp.getView()}</EditorContainer>
383+
</ViewBody>
384+
);
385+
}
386+
387+
returnuiComp.getView();
388+
},[
389+
showAppSnapshot,
390+
hideBodyHeader,
391+
height,
392+
uiComp,
393+
]);
394+
377395
// we check if we are on the public cloud
378396
constisLowCoderDomain=window.location.hostname==='app.lowcoder.cloud';
379397
constisLocalhost=window.location.hostname==='localhost';
@@ -425,16 +443,6 @@ function EditorView(props: EditorViewProps) {
425443

426444
// history mode, display with the right panel, a little trick
427445
constshowRight=panelStatus.right||showAppSnapshot;
428-
letuiCompView;
429-
if(showAppSnapshot){
430-
uiCompView=(
431-
<ViewBody$hideBodyHeader={hideBodyHeader}$height={height}>
432-
<EditorContainer>{uiComp.getView()}</EditorContainer>
433-
</ViewBody>
434-
);
435-
}else{
436-
uiCompView=uiComp.getView();
437-
}
438446

439447
constclickMenu=(params:{key:string})=>{
440448
letleft=true;
@@ -514,46 +522,47 @@ function EditorView(props: EditorViewProps) {
514522
)}
515523
</Sider>
516524
</SiderWrapper>
517-
518-
{panelStatus.left&&editorModeStatus!=="layout"&&(
519-
<LeftPanel>
520-
{menuKey===SiderKey.State&&<LeftContentuiComp={uiComp}/>}
521-
{menuKey===SiderKey.Setting&&(
522-
<SettingsDiv>
523-
<ScrollBar>
524-
{application&&
525-
!isAggregationApp(
526-
AppUILayoutType[application.applicationType]
527-
)&&(
528-
<>
529-
{appSettingsComp.getPropertyView()}
530-
<Divider/>
531-
</>
532-
)}
533-
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
534-
{props.preloadComp.getPropertyView()}
535-
<PreloadDiv
536-
onClick={()=>dispatch(
537-
setEditorExternalStateAction({
538-
showScriptsAndStyleModal:true,
539-
})
540-
)}
541-
>
542-
<LeftPreloadIcon/>
543-
{trans("leftPanel.toolbarPreload")}
544-
</PreloadDiv>
545-
</ScrollBar>
546-
547-
{props.preloadComp.getJSLibraryPropertyView()}
548-
</SettingsDiv>
549-
)}
550-
551-
{menuKey===SiderKey.Layout&&(
552-
<LeftLayersContentuiComp={uiComp}/>
553-
)}
554-
555-
</LeftPanel>
556-
)}
525+
<Suspensefallback={null}>
526+
{panelStatus.left&&editorModeStatus!=="layout"&&(
527+
<LeftPanel>
528+
{menuKey===SiderKey.State&&<LeftContentuiComp={uiComp}/>}
529+
{menuKey===SiderKey.Setting&&(
530+
<SettingsDiv>
531+
<ScrollBar>
532+
{application&&
533+
!isAggregationApp(
534+
AppUILayoutType[application.applicationType]
535+
)&&(
536+
<>
537+
{appSettingsComp.getPropertyView()}
538+
<Divider/>
539+
</>
540+
)}
541+
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
542+
{props.preloadComp.getPropertyView()}
543+
<PreloadDiv
544+
onClick={()=>dispatch(
545+
setEditorExternalStateAction({
546+
showScriptsAndStyleModal:true,
547+
})
548+
)}
549+
>
550+
<LeftPreloadIcon/>
551+
{trans("leftPanel.toolbarPreload")}
552+
</PreloadDiv>
553+
</ScrollBar>
554+
555+
{props.preloadComp.getJSLibraryPropertyView()}
556+
</SettingsDiv>
557+
)}
558+
559+
{menuKey===SiderKey.Layout&&(
560+
<LeftLayersContentuiComp={uiComp}/>
561+
)}
562+
563+
</LeftPanel>
564+
)}
565+
</Suspense>
557566
<MiddlePanel>
558567
<EditorWrapperclassName={editorContentClassName}>
559568
<EditorHotKeysdisabled={readOnly}>
@@ -563,15 +572,19 @@ function EditorView(props: EditorViewProps) {
563572
</EditorContainerWithViewMode>
564573
</EditorHotKeys>
565574
</EditorWrapper>
566-
{panelStatus.bottom&&editorModeStatus!=="layout"&&<Bottom/>}
575+
<Suspensefallback={<BottomSkeleton/>}>
576+
{panelStatus.bottom&&editorModeStatus!=="layout"&&<Bottom/>}
577+
</Suspense>
567578
</MiddlePanel>
568-
{showRight&&(
569-
<RightPanel
570-
uiComp={uiComp}
571-
onCompDrag={onCompDrag}
572-
showPropertyPane={editorState.showPropertyPane}
573-
onTabChange={setShowPropertyPane}/>
574-
)}
579+
<Suspensefallback={null}>
580+
{showRight&&(
581+
<RightPanel
582+
uiComp={uiComp}
583+
onCompDrag={onCompDrag}
584+
showPropertyPane={editorState.showPropertyPane}
585+
onTabChange={setShowPropertyPane}/>
586+
)}
587+
</Suspense>
575588
</Body>
576589
</EditorGlobalHotKeys>
577590
</Height100Div></>

0 commit comments

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