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

Commit7c7a646

Browse files
committed
fix jsonEditor and jsonExplorer
1 parente5e99ab commit7c7a646

File tree

2 files changed

+66
-34
lines changed

2 files changed

+66
-34
lines changed

‎viewer/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{Section,sectionNames}from"lowcoder-design";
1+
import{ScrollBar,Section,sectionNames}from"lowcoder-design";
22
import{UICompBuilder}from"../../generators";
33
import{NameConfigHidden,NameConfig,withExposingConfigs}from"../../generators/withExposing";
44
import{defaultData}from"./jsonConstants";
@@ -20,18 +20,18 @@ import {
2020
}from"base/codeEditor/codeMirror";
2121
import{useExtensions}from"base/codeEditor/extensions";
2222
import{EditorContext}from"comps/editorState";
23-
import{useMergeCompStyles}from"@lowcoder-ee/util/hooks";
23+
import{AutoHeightControl,BoolControl}from"@lowcoder-ee/index.sdk";
2424

2525
/**
2626
* JsonEditor Comp
2727
*/
2828

29-
constWrapper=styled.div`
29+
constWrapper=styled.div<{$height:boolean;$showVerticalScrollbar:boolean}>`
3030
background-color: #fff;
3131
border: 1px solid #d7d9e0;
3232
border-radius: 4px;
33-
overflow: auto;
3433
height: 100%;
34+
overflow-y:${props=>(props.$showVerticalScrollbar ?'scroll' :'auto')};
3535
`;
3636

3737
/**
@@ -63,20 +63,22 @@ function fixOldDataSecond(oldData: any) {
6363
}
6464

6565
constchildrenMap={
66-
value:jsonValueExposingStateControl("value",defaultData),
66+
value:jsonValueExposingStateControl('value',defaultData),
6767
onEvent:ChangeEventHandlerControl,
68-
label:withDefault(LabelControl,{position:"column"}),
68+
autoHeight:withDefault(AutoHeightControl,'auto'),
69+
showVerticalScrollbar:BoolControl,
70+
label:withDefault(LabelControl,{position:'column'}),
6971
style:styleControl(JsonEditorStyle,'style'),
70-
animationStyle:styleControl(AnimationStyle,'animationStyle'),
72+
animationStyle:styleControl(AnimationStyle,'animationStyle'),
7173
...formDataChildren,
7274
};
7375

7476
letJsonEditorTmpComp=(function(){
75-
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
76-
useMergeCompStyles(propsasRecord<string,any>,dispatch);
77-
77+
returnnewUICompBuilder(childrenMap,(props)=>{
7878
constwrapperRef=useRef<HTMLDivElement>(null);
7979
constview=useRef<EditorViewType|null>(null);
80+
constinitialized=useRef(false);
81+
conststate=useRef<EditorState|null>(null);
8082
consteditContent=useRef<string>();
8183
const{ extensions}=useExtensions({
8284
codeType:"PureJSON",
@@ -99,15 +101,21 @@ let JsonEditorTmpComp = (function () {
99101
});
100102

101103
useEffect(()=>{
102-
if(wrapperRef.current&&!view.current){
103-
conststate=EditorState.create({
104+
if(!initialized.current&&wrapperRef.current){
105+
state.current=EditorState.create({
104106
doc:JSON.stringify(props.value.value,null,2),
105107
extensions,
106108
});
107-
view.current=newEditorView({ state,parent:wrapperRef.current});
108109
}
109110
},[wrapperRef.current]);
110111

112+
useEffect(()=>{
113+
if(state.current&&wrapperRef.current){
114+
view.current=newEditorView({state:state.current,parent:wrapperRef.current});
115+
initialized.current=true;
116+
}
117+
},[props.showVerticalScrollbar])
118+
111119
if(wrapperRef.current&&view.current&&!editContent.current){
112120
conststate=EditorState.create({
113121
doc:JSON.stringify(props.value.value,null,2),
@@ -121,7 +129,16 @@ let JsonEditorTmpComp = (function () {
121129
returnprops.label({
122130
style:props.style,
123131
animationStyle:props.animationStyle,
124-
children:<Wrapperref={wrapperRef}onFocus={()=>(editContent.current="focus")}/>,
132+
children:(
133+
<ScrollBarhideScrollbar={!props.showVerticalScrollbar}>
134+
<Wrapper
135+
ref={wrapperRef}
136+
onFocus={()=>(editContent.current='focus')}
137+
$height={props.autoHeight}
138+
$showVerticalScrollbar={props.showVerticalScrollbar}
139+
/>
140+
</ScrollBar>
141+
),
125142
});
126143
})
127144
.setPropertyViewFn((children)=>{
@@ -139,7 +156,13 @@ let JsonEditorTmpComp = (function () {
139156
{hiddenPropertyView(children)}
140157
</Section>
141158
)}
142-
159+
<Sectionname={trans('prop.height')}>
160+
{children.autoHeight.propertyView({label:trans('prop.height')})}
161+
</Section>
162+
{!children.autoHeight.getView()&&<Sectionname={sectionNames.layout}>
163+
{children.showVerticalScrollbar.propertyView({label:trans('prop.showVerticalScrollbar')})}
164+
165+
</Section>}
143166
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(children.label.getPropertyView())}
144167
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
145168
<>
@@ -160,7 +183,7 @@ JsonEditorTmpComp = migrateOldData(JsonEditorTmpComp, fixOldDataSecond);
160183

161184
JsonEditorTmpComp=classextendsJsonEditorTmpComp{
162185
overrideautoHeight():boolean{
163-
returnfalse;
186+
returnthis.children.autoHeight.getView();
164187
}
165188
};
166189

‎viewer/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{Section,sectionNames}from"lowcoder-design";
1+
import{ScrollBar,Section,sectionNames}from"lowcoder-design";
22
import{UICompBuilder,withDefault}from"../../generators";
33
import{NameConfigHidden,NameConfig,withExposingConfigs}from"../../generators/withExposing";
44
importReactJson,{typeThemeKeys}from"react-json-view";
@@ -13,7 +13,7 @@ import { EditorContext } from "comps/editorState";
1313
import{useContext,useEffect}from"react";
1414
import{AnimationStyle,AnimationStyleType}from"@lowcoder-ee/comps/controls/styleControlConstants";
1515
import{styleControl}from"@lowcoder-ee/comps/controls/styleControl";
16-
import{useMergeCompStyles}from"@lowcoder-ee/util/hooks";
16+
import{AutoHeightControl}from"@lowcoder-ee/index.sdk";
1717

1818
/**
1919
* JsonExplorer Comp
@@ -44,7 +44,7 @@ const JsonExplorerContainer = styled.div<{
4444
${(props)=>props.$animationStyle}
4545
height: 100%;
4646
overflow-y: scroll;
47-
background-color:${(props)=>bgColorMap[props.$theme]||"#ffffff"};
47+
background-color:${(props)=>bgColorMap[props.$theme]||'#ffffff'};
4848
border: 1px solid #d7d9e0;
4949
border-radius: 4px;
5050
padding: 10px;
@@ -53,35 +53,37 @@ const JsonExplorerContainer = styled.div<{
5353
letJsonExplorerTmpComp=(function(){
5454
constchildrenMap={
5555
value:withDefault(ArrayOrJSONObjectControl,JSON.stringify(defaultData,null,2)),
56+
autoHeight:withDefault(AutoHeightControl,'auto'),
57+
showVerticalScrollbar:BoolControl,
5658
indent:withDefault(NumberControl,4),
5759
expandToggle:BoolControl.DEFAULT_TRUE,
5860
theme:dropdownControl(themeOptions,'shapeshifter:inverted'),
5961
animationStyle:styleControl(AnimationStyle,'animationStyle'),
6062
};
61-
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
62-
useMergeCompStyles(propsasRecord<string,any>,dispatch);
63-
63+
returnnewUICompBuilder(childrenMap,(props)=>{
6464
return(
6565
<JsonExplorerContainer
6666
$theme={props.themeaskeyoftypeofbgColorMap}
6767
$animationStyle={props.animationStyle}
6868
>
69-
<ReactJson
70-
name={false}
71-
src={props.value}
72-
theme={props.themeasThemeKeys}
73-
collapsed={!props.expandToggle}
74-
displayDataTypes={false}
75-
indentWidth={props.indent}
76-
/>
69+
<ScrollBarhideScrollbar={!props.showVerticalScrollbar}>
70+
<ReactJson
71+
name={false}
72+
src={props.value}
73+
theme={props.themeasThemeKeys}
74+
collapsed={!props.expandToggle}
75+
displayDataTypes={false}
76+
indentWidth={props.indent}
77+
/>
78+
</ScrollBar>
7779
</JsonExplorerContainer>
78-
)
80+
);
7981
})
8082
.setPropertyViewFn((children)=>{
8183
return(
8284
<>
8385
<Sectionname={sectionNames.basic}>
84-
{children.value.propertyView({label:trans("export.jsonEditorDesc")})}
86+
{children.value.propertyView({label:trans("export.jsonEditorDesc")})}
8587
</Section>
8688

8789
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
@@ -96,7 +98,14 @@ let JsonExplorerTmpComp = (function () {
9698
{children.indent.propertyView({label:trans("jsonExplorer.indent")})}
9799
</Section>
98100
)}
99-
101+
<Sectionname={trans('prop.height')}>
102+
{children.autoHeight.propertyView({label:trans('prop.height')})}
103+
</Section>
104+
{!children.autoHeight.getView()&&<Sectionname={sectionNames.layout}>
105+
{children.showVerticalScrollbar.propertyView({
106+
label:trans('prop.showVerticalScrollbar'),
107+
})}
108+
</Section>}
100109
{(useContext(EditorContext).editorModeStatus==='layout'||
101110
useContext(EditorContext).editorModeStatus==='both')&&(
102111
<>
@@ -118,7 +127,7 @@ let JsonExplorerTmpComp = (function () {
118127

119128
JsonExplorerTmpComp=classextendsJsonExplorerTmpComp{
120129
overrideautoHeight():boolean{
121-
returnfalse;
130+
returnthis.children.autoHeight.getView();
122131
}
123132
};
124133

0 commit comments

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