Skip to content
Next Next commit
autoheight in json comps
  • Loading branch information
MenamAfzal committed Aug 5, 2024
commit e8008ccd705ae1a5944879c19f86d9cae85dd653
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ import {
import { useExtensions } from "base/codeEditor/extensions";
import { EditorContext } from "comps/editorState";
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
import { AutoHeightControl } from "@lowcoder-ee/index.sdk";

/**
* JsonEditor Comp
*/

const Wrapper = styled.div`
const Wrapper = styled.div<{$height:boolean}>`
background-color: #fff;
border: 1px solid #d7d9e0;
border-radius: 4px;
overflow: auto;
height: 100%;
height: ${props=>props.$height?'100%':'300px'};
`;

/**
Expand Down Expand Up @@ -63,11 +64,12 @@ function fixOldDataSecond(oldData: any) {
}

const childrenMap = {
value: jsonValueExposingStateControl("value", defaultData),
value: jsonValueExposingStateControl('value', defaultData),
onEvent: ChangeEventHandlerControl,
label: withDefault(LabelControl, { position: "column" }),
autoHeight: AutoHeightControl,
label: withDefault(LabelControl, {position: 'column'}),
style: styleControl(JsonEditorStyle, 'style'),
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
...formDataChildren,
};

Expand Down Expand Up @@ -121,7 +123,7 @@ let JsonEditorTmpComp = (function () {
return props.label({
style: props.style,
animationStyle: props.animationStyle,
children: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} />,
children: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} $height={props.autoHeight}/>,
});
})
.setPropertyViewFn((children) => {
Expand All @@ -139,7 +141,9 @@ let JsonEditorTmpComp = (function () {
{hiddenPropertyView(children)}
</Section>
)}

<Section name={trans('prop.height')}>
{children.autoHeight.propertyView({ label: trans('prop.height') })}
</Section>
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )}
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { useContext, useEffect } from "react";
import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
import { AutoHeightControl } from "@lowcoder-ee/index.sdk";

/**
* JsonExplorer Comp
Expand All @@ -40,9 +41,10 @@ const bgColorMap = {
const JsonExplorerContainer = styled.div<{
$theme: keyof typeof bgColorMap;
$animationStyle: AnimationStyleType;
$height: boolean
}>`
${(props) => props.$animationStyle}
height: 100%;
height: ${props => props.$height ?'100%':'300px'};
overflow-y: scroll;
background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"};
border: 1px solid #d7d9e0;
Expand All @@ -53,6 +55,7 @@ const JsonExplorerContainer = styled.div<{
let JsonExplorerTmpComp = (function () {
const childrenMap = {
value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)),
autoHeight: AutoHeightControl,
indent: withDefault(NumberControl, 4),
expandToggle: BoolControl.DEFAULT_TRUE,
theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
Expand All @@ -63,6 +66,7 @@ let JsonExplorerTmpComp = (function () {

return (
<JsonExplorerContainer
$height={props.autoHeight}
$theme={props.theme as keyof typeof bgColorMap}
$animationStyle={props.animationStyle}
>
Expand All @@ -81,7 +85,7 @@ let JsonExplorerTmpComp = (function () {
return (
<>
<Section name={sectionNames.basic}>
{children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
{children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
</Section>

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
Expand All @@ -96,7 +100,9 @@ let JsonExplorerTmpComp = (function () {
{children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
</Section>
)}

<Section name={trans('prop.height')}>
{children.autoHeight.propertyView({label: trans('prop.height')})}
</Section>
{(useContext(EditorContext).editorModeStatus === 'layout' ||
useContext(EditorContext).editorModeStatus === 'both') && (
<>
Expand Down