Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7c7a646

Browse files
Imiss-U1025Imiss-U1025
committed
fix jsonEditor and jsonExplorer
1 parent e5e99ab commit 7c7a646

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-
const Wrapper = styled.div`
29+
const Wrapper = 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
const childrenMap = {
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
let JsonEditorTmpComp = (function () {
75-
return new UICompBuilder(childrenMap, (props, dispatch) => {
76-
useMergeCompStyles(props as Record<string, any>, dispatch);
77-
77+
return new UICompBuilder(childrenMap, (props) => {
7878
const wrapperRef = useRef<HTMLDivElement>(null);
7979
const view = useRef<EditorViewType | null>(null);
80+
const initialized = useRef(false);
81+
const state = useRef<EditorState | null>(null);
8082
const editContent = 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-
const state = 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 = new EditorView({ state, parent: wrapperRef.current });
108109
}
109110
}, [wrapperRef.current]);
110111

112+
useEffect(() => {
113+
if (state.current&&wrapperRef.current) {
114+
view.current = new EditorView({ state: state.current, parent: wrapperRef.current });
115+
initialized.current = true;
116+
}
117+
}, [props.showVerticalScrollbar])
118+
111119
if (wrapperRef.current && view.current && !editContent.current) {
112120
const state = EditorState.create({
113121
doc: JSON.stringify(props.value.value, null, 2),
@@ -121,7 +129,16 @@ let JsonEditorTmpComp = (function () {
121129
return props.label({
122130
style: props.style,
123131
animationStyle: props.animationStyle,
124-
children: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} />,
132+
children: (
133+
<ScrollBar hideScrollbar={!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+
<Section name={trans('prop.height')}>
160+
{children.autoHeight.propertyView({ label: trans('prop.height') })}
161+
</Section>
162+
{!children.autoHeight.getView()&&<Section name={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 = class extends JsonEditorTmpComp {
162185
override autoHeight(): boolean {
163-
return false;
186+
return this.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
import ReactJson, { type ThemeKeys } 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
let JsonExplorerTmpComp = (function () {
5454
const childrenMap = {
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-
return new UICompBuilder(childrenMap, (props, dispatch) => {
62-
useMergeCompStyles(props as Record<string, any>, dispatch);
63-
63+
return new UICompBuilder(childrenMap, (props) => {
6464
return (
6565
<JsonExplorerContainer
6666
$theme={props.theme as keyof typeof bgColorMap}
6767
$animationStyle={props.animationStyle}
6868
>
69-
<ReactJson
70-
name={false}
71-
src={props.value}
72-
theme={props.theme as ThemeKeys}
73-
collapsed={!props.expandToggle}
74-
displayDataTypes={false}
75-
indentWidth={props.indent}
76-
/>
69+
<ScrollBar hideScrollbar={!props.showVerticalScrollbar}>
70+
<ReactJson
71+
name={false}
72+
src={props.value}
73+
theme={props.theme as ThemeKeys}
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
<Section name={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+
<Section name={trans('prop.height')}>
102+
{children.autoHeight.propertyView({label: trans('prop.height')})}
103+
</Section>
104+
{!children.autoHeight.getView()&&<Section name={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 = class extends JsonExplorerTmpComp {
120129
override autoHeight(): boolean {
121-
return false;
130+
return this.children.autoHeight.getView();
122131
}
123132
};
124133

0 commit comments

Comments
 (0)