diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index dfff1a453..bfdd73105 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -150,6 +150,7 @@ let childrenMap: any = { currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), animationStyle: styleControl(AnimationStyle, 'animationStyle'), + showVerticalScrollbar: withDefault(BoolControl, false), }; // this should ensure backwards compatibility with older versions of the SDK @@ -188,7 +189,10 @@ let CalendarBasicComp = (function () { currentPremiumView?: string; animationStyle?:any; modalStyle?:any - }) => { + showVerticalScrollbar?:boolean + + }, dispatch: any) => { + const comp = useContext(EditorContext)?.getUICompByName( useContext(CompNameContext) ); @@ -315,6 +319,7 @@ let CalendarBasicComp = (function () { licenseKey, resourceName, modalStyle, + showVerticalScrollbar } = props; const handleEventDataChange = useCallback((data: Array>) => { @@ -745,6 +750,7 @@ let CalendarBasicComp = (function () { $editable={editable} $style={style} $theme={theme?.theme} + $showVerticalScrollbar={showVerticalScrollbar} onDoubleClick={handleDbClick} $left={left} key={initialDate ? currentView + initialDate : currentView} @@ -873,7 +879,8 @@ let CalendarBasicComp = (function () { style: { getPropertyView: () => any; }; animationStyle: { getPropertyView: () => any; }; modalStyle: { getPropertyView: () => any; }; - licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string; }) => any; }; + licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; }; + showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; }; }) => { const license = children.licenseKey.getView(); @@ -918,6 +925,7 @@ let CalendarBasicComp = (function () { ? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), }) : children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })} {children.firstDay.propertyView({ label: trans("calendar.startWeek"), })} + {children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
{children.style.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index a1b3f4203..e8602a8fe 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -32,6 +32,7 @@ export const Wrapper = styled.div<{ $style?: CalendarStyleType; $theme?: ThemeDetail; $left?: number; + $showVerticalScrollbar?:boolean; }>` position: relative; height: 100%; @@ -359,6 +360,9 @@ export const Wrapper = styled.div<{ .fc .fc-scrollgrid table { width: 100% !important; } + .fc-scroller.fc-scroller-liquid-absolute::-webkit-scrollbar { + display:${(props) => (props.$showVerticalScrollbar ? 'block' : 'none')}; + } // event .fc-timegrid-event .fc-event-main { diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index b1819204a..f6261b84f 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -345,7 +345,8 @@ export const en = { animationType:"Type", animationDelay:"Delay", animationDuration:"Duration", - animationIterationCount:"IterationCount" + animationIterationCount:"IterationCount", + showVerticalScrollbar:"Show Vertical ScrollBar" }, }; diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx index adc5465d9..c20733c0f 100644 --- a/client/packages/lowcoder-design/src/components/Dropdown.tsx +++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx @@ -6,6 +6,7 @@ import { ReactNode } from "react"; import styled from "styled-components"; import { CustomSelect } from "./customSelect"; import { EllipsisTextCss } from "./Label"; +import { useEffect } from "react"; import { TacoMarkDown } from "./markdown"; import { Tooltip, ToolTipLabel } from "./toolTip"; @@ -157,6 +158,19 @@ interface DropdownProps extends Omit(props: DropdownProps) { const { placement = "right" } = props; const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option])); + + useEffect(() => { + const dropdownElems = document.querySelectorAll("div.ant-dropdown ul.ant-dropdown-menu"); + for (let index = 0; index < dropdownElems.length; index++) { + const element = dropdownElems[index]; + console.log(element); + element.style.maxHeight = "300px"; + element.style.overflowY = "scroll"; + element.style.minWidth = "150px"; + element.style.paddingRight = "10px"; + } + }, []); + return ( {props.label && ( diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx index a271f3972..df3fe5011 100644 --- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx @@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { NameGenerator } from "comps/utils"; -import { Section, controlItem, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; import styled from "styled-components"; @@ -96,6 +96,7 @@ const childrenMap = { templateRows: withDefault(StringControl, "1fr"), rowGap: withDefault(StringControl, "20px"), templateColumns: withDefault(StringControl, "1fr 1fr"), + mainScrollbar: withDefault(BoolControl, false), columnGap: withDefault(StringControl, "20px"), style: styleControl(ContainerStyle, 'style'), columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle') @@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => { columnGap, columnStyle, horizontalGridCells, + mainScrollbar } = props; return ( - - {columns.map(column => { - const id = String(column.id); - const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); - if(!containers[id]) return null - const containerProps = containers[id].children; - const noOfColumns = columns.length; - return ( - - - - - - ) - }) - } - +
+ + + {columns.map(column => { + const id = String(column.id); + const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); + if(!containers[id]) return null + const containerProps = containers[id].children; + const noOfColumns = columns.length; + return ( + + + + + + ) + }) + } + + +
); @@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () { <>
{children.autoHeight.getPropertyView()} + {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({ + label: trans("prop.mainScrollbar") + })} {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index cb0c689bc..4b53dea3a 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -6,11 +6,11 @@ import { DocumentViewer } from "react-documents"; import styled, { css } from "styled-components"; import { Section, sectionNames } from "lowcoder-design"; import { StringControl } from "../controls/codeControl"; -import { UICompBuilder } from "../generators"; +import { UICompBuilder, withDefault } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; - +import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -42,12 +42,18 @@ const StyledDiv = styled.div<{$style: FileViewerStyleType;}>` ${(props) => props.$style && getStyle(props.$style)} `; -const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => { +const DraggableFileViewer = (props: { + src: string; + style: FileViewerStyleType, + animationStyle:AnimationStyleType, + showVerticalScrollbar: boolean, +}) => { const [isActive, setActive] = useState(false); return ( setActive(true)} onMouseLeave={(e) => setActive(false)} > @@ -67,6 +73,8 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an let FileViewerBasicComp = (function () { const childrenMap = { src: StringControl, + autoHeight: withDefault(AutoHeightControl,'auto'), + showVerticalScrollbar: withDefault(BoolControl, false), style: styleControl(FileViewerStyle , 'style'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; @@ -81,7 +89,12 @@ let FileViewerBasicComp = (function () { ); } - return ; + return ; }) .setPropertyViewFn((children) => { return ( @@ -100,6 +113,14 @@ let FileViewerBasicComp = (function () { {hiddenPropertyView(children)}
)} +
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} +
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> @@ -119,7 +140,7 @@ let FileViewerBasicComp = (function () { FileViewerBasicComp = class extends FileViewerBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index a8ddfc99d..298d34970 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -14,15 +14,15 @@ import { i18nObjs, trans } from "i18n"; import type { JSONSchema7 } from "json-schema"; import styled from "styled-components"; import { toBoolean, toNumber, toString } from "util/convertUtils"; -import { Section, sectionNames } from "lowcoder-design"; +import { Section, sectionNames, ScrollBar } from "lowcoder-design"; import { jsonObjectControl } from "../../controls/codeControl"; import { eventHandlerControl, submitEvent } from "../../controls/eventHandlerControl"; -import { UICompBuilder } from "../../generators"; +import { UICompBuilder, withDefault } from "../../generators"; import DateWidget from "./dateWidget"; import ErrorBoundary from "./errorBoundary"; import { Theme } from "@rjsf/antd"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; - +import { AutoHeightControl } from "../../controls/autoHeightControl"; import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; @@ -49,6 +49,11 @@ const Container = styled.div<{ font-size: 18px; } + .ant-row { + margin-left: 0 !important; + margin-right: 0 !important; + } + #root-description { font-size: 12px; display: inline-block; @@ -188,7 +193,9 @@ let FormBasicComp = (function () { const childrenMap = { resetAfterSubmit: BoolControl, schema: jsonObjectControl(i18nObjs.jsonForm.defaultSchema), + showVerticalScrollbar: withDefault(BoolControl, false), uiSchema: jsonObjectControl(i18nObjs.jsonForm.defaultUiSchema), + autoHeight: AutoHeightControl, data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData), onEvent: eventHandlerControl(EventOptions), style: styleControl(JsonSchemaFormStyle , 'style'), @@ -202,6 +209,15 @@ let FormBasicComp = (function () { return ( +
+ ); }) @@ -325,9 +342,16 @@ let FormBasicComp = (function () { })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> +
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} +
{children.style.getPropertyView()}
@@ -343,6 +367,13 @@ let FormBasicComp = (function () { .build(); })(); +FormBasicComp = class extends FormBasicComp { + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } +}; + + let FormTmpComp = withExposingConfigs(FormBasicComp, [ depsConfig({ name: "data", diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index b501e3cab..105164b0d 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -39,7 +39,7 @@ const getStyle = (style: ContainerStyleType) => { `; }; -const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType }>` +const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType, $mainScrollbars: boolean }>` display: flex; flex-flow: column; height: 100%; @@ -47,6 +47,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:Animatio border-radius: 4px; ${(props) => props.$style && getStyle(props.$style)} ${props=>props.$animationStyle} + + #pageLayout::-webkit-scrollbar { + display: ${(props) => props.$mainScrollbars ? "block" : "none"}; + } `; const HeaderInnerGrid = styled(InnerGrid)<{ @@ -142,7 +146,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi } useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]); - + return (
- - + + {showSider && !container.innerSider && !container.siderRight && ( <> ` ${(props) => props.$animationStyle} height: 100%; @@ -56,8 +57,12 @@ const RowWrapper = styled(Row)<{ border-style: ${(props) => props.$style?.borderStyle}; padding: ${(props) => props.$style.padding}; background-color: ${(props) => props.$style.background}; - overflow-x: auto; rotate: ${props=> props.$style.rotation} + overflow: ${(props) => (props.$showScrollbar ? 'auto' : 'hidden')}; + ::-webkit-scrollbar { + display: ${(props) => (props.$showScrollbar ? 'block' : 'none')}; + } + `; const ColWrapper = styled(Col)<{ @@ -95,6 +100,7 @@ const childrenMap = { matchColumnsHeight: withDefault(BoolControl, true), style: styleControl(ResponsiveLayoutRowStyle , 'style'), columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'), + mainScrollbar: withDefault(BoolControl, false), animationStyle:styleControl(AnimationStyle , 'animationStyle'), columnPerRowLG: withDefault(NumberControl, 4), columnPerRowMD: withDefault(NumberControl, 2), @@ -138,6 +144,8 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { horizontalSpacing, animationStyle, horizontalGridCells, + mainScrollbar, + autoHeight } = props; return ( @@ -147,6 +155,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { @@ -214,6 +223,9 @@ export const ResponsiveLayoutBaseComp = (function () { <>
{children.autoHeight.getPropertyView()} + {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({ + label: trans("prop.mainScrollbar") + })} {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index b39c3879c..c0f25aad2 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -79,9 +79,13 @@ const localizeStyle = css` } `; -const commonStyle = (style: RichTextEditorStyleType) => css` +const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean) => css` height: 100%; + .ql-editor::-webkit-scrollbar { + display: ${contentScrollBar ? "block" : "none"}; + } + & .ql-editor { min-height: 85px; } @@ -126,11 +130,12 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css` interface Props { $hideToolbar: boolean; $style: RichTextEditorStyleType; + $contentScrollBar: boolean; } const AutoHeightReactQuill = styled.div` ${localizeStyle} - ${(props) => commonStyle(props.$style)} + ${(props) => commonStyle(props.$style, props.$contentScrollBar)} & .ql-container .ql-editor { min-height: 125px; } @@ -139,7 +144,7 @@ const AutoHeightReactQuill = styled.div` const FixHeightReactQuill = styled.div` ${localizeStyle} - ${(props) => commonStyle(props.$style)} + ${(props) => commonStyle(props.$style, props.$contentScrollBar)} & .quill { display: flex; flex-direction: column; @@ -169,6 +174,7 @@ const childrenMap = { hideToolbar: BoolControl, readOnly: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), + contentScrollBar: withDefault(BoolControl, false), placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")), toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)), onEvent: ChangeEventHandlerControl, @@ -188,6 +194,7 @@ interface IProps { autoHeight: boolean; onChange: (value: string) => void; $style: RichTextEditorStyleType; + contentScrollBar: boolean; } const ReactQuillEditor = React.lazy(() => import("react-quill")); @@ -264,6 +271,7 @@ function RichTextEditor(props: IProps) { ref={wrapperRef} $hideToolbar={props.hideToolbar} $style={props.$style} + $contentScrollBar={props.contentScrollBar} > }> { placeholder={props.placeholder} onChange={handleChange} $style={props.style} + contentScrollBar={props.contentScrollBar} /> ); }) @@ -325,6 +334,9 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { <>
{children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && children.contentScrollBar.propertyView({ + label: trans("prop.textAreaScrollBar"), + })} {children.toolbar.propertyView({ label: trans("richTextEditor.toolbar"), tooltip: trans("richTextEditor.toolbarDescription") })} {children.hideToolbar.propertyView({ label: trans("richTextEditor.hideToolbar") })}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index f06e5a231..572ba4a60 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -1,5 +1,5 @@ import { ConfigProvider, Steps} from "antd"; -import { BoolCodeControl } from "comps/controls/codeControl"; +import { BoolCodeControl, RadiusControl } from "comps/controls/codeControl"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl"; import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; @@ -10,7 +10,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { selectDivRefMethods, } from "./selectInputConstants"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { hasIcon } from "comps/utils"; @@ -18,6 +18,7 @@ import { RefControl } from "comps/controls/refControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { useContext, useState, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; const sizeOptions = [ { @@ -76,6 +77,7 @@ const statusOptions = [ ] const StepsChildrenMap = { + autoHeight: AutoHeightControl, initialValue: numberExposingStateControl("1"), value: stringExposingStateControl("value"), stepStatus : stringExposingStateControl("process"), @@ -92,13 +94,17 @@ const StepsChildrenMap = { options: StepOptionControl, style: styleControl(StepsStyle , 'style'), viewRef: RefControl, - animationStyle: styleControl(AnimationStyle ,'animationStyle' ) + animationStyle: styleControl(AnimationStyle ,'animationStyle' ), + showVerticalScrollbar: withDefault(BoolControl, false), + minHorizontalWidth: withDefault(RadiusControl, ''), }; let StepControlBasicComp = (function () { return new UICompBuilder(StepsChildrenMap, (props) => { const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} + height: 100%; + overflow-y: scroll; min-height: 24px; max-width: ${widthCalculator(props.style.margin)}; max-height: ${heightCalculator(props.style.margin)}; @@ -168,6 +174,15 @@ let StepControlBasicComp = (function () { }} > + ))} + ); @@ -217,6 +233,16 @@ let StepControlBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} + {children.minHorizontalWidth.propertyView({ + label: trans("prop.minHorizontalWidth"), + placeholder: '100px', + })} {children.size.propertyView({ label: trans("step.size"), radioButton: true, @@ -241,6 +267,9 @@ let StepControlBasicComp = (function () { { children.displayType.getView() != "inline" && !children.showDots.getView() && ( children.showIcons.propertyView({label: trans("step.showIcons")} ))} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")}) + )}
)} @@ -260,6 +289,12 @@ let StepControlBasicComp = (function () { .build(); })(); +StepControlBasicComp = class extends StepControlBasicComp { + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } +}; + export const StepComp = withExposingConfigs(StepControlBasicComp, [ new NameConfig("value", trans("step.valueDesc")), new NameConfig("stepStatus", trans("step.status") ), diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index ec3acbd9c..e8a695164 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -1,7 +1,7 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import styled, { css } from "styled-components"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; @@ -24,6 +24,7 @@ import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl import { NewChildren } from "../generators/uiCompBuilder"; import { RecordConstructorToComp } from "lowcoder-core"; import { ToViewReturn } from "../generators/multi"; +import { BoolControl } from "@lowcoder-ee/index.sdk"; const EventOptions = [clickEvent] as const; @@ -142,6 +143,7 @@ const childrenMap = { autoHeight: AutoHeightControl, type: dropdownControl(typeOptions, "markdown"), horizontalAlignment: alignWithJustifyControl(), + contentScrollBar: withDefault(BoolControl, true), verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), style: styleControl(TextStyle, 'style'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), @@ -176,6 +178,10 @@ const TextPropertyView = React.memo((props: { <>
{props.children.autoHeight.getPropertyView()} + {!props.children.autoHeight.getView() && + props.children.contentScrollBar.propertyView({ + label: trans("prop.contentScrollbar"), + })} {!props.children.autoHeight.getView() && props.children.verticalAlignment.propertyView({ label: trans("textShow.verticalAlignment"), @@ -214,7 +220,9 @@ const TextView = React.memo((props: ToViewReturn) => { }} onClick={() => props.onEvent("click")} > - {props.type === "markdown" ? {value} : value} + + {props.type === "markdown" ? {value} : value} + ); }, (prev, next) => JSON.stringify(prev) === JSON.stringify(next)); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 4b34ba614..2a559dee3 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -75,6 +75,7 @@ let TextAreaTmpComp = (function () { autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(InputFieldStyle, 'style') , labelStyle: styleControl(LabelStyle ,'labelStyle' ), + textAreaScrollBar: withDefault(BoolControl, false), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle') }; @@ -114,6 +115,10 @@ let TextAreaTmpComp = (function () { <>
{children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.textAreaScrollBar.propertyView({ + label: trans("prop.textAreaScrollBar"), + })} {hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index f7c877c90..5854058af 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -8,7 +8,7 @@ import { } from "lowcoder-core"; import { trans } from "i18n"; import { UICompBuilder, withDefault } from "../../generators"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; @@ -62,6 +62,8 @@ const childrenMap = { value: jsonControl(convertTimeLineData, timelineDate), mode: dropdownControl(modeOptions, "alternate"), reverse: BoolControl, + autoHeight: AutoHeightControl, + verticalScrollbar: withDefault(BoolControl, false), pending: withDefault(StringControl, trans("timeLine.defaultPending")), onEvent: eventHandlerControl(EventOptions), style: styleControl(TimeLineStyle, 'style'), @@ -136,31 +138,33 @@ const TimelineComp = ( })); return ( -
- - {props?.pending || ""} - - ) - } - items={timelineItems} - /> -
+ +
+ + {props?.pending || ""} + + ) + } + items={timelineItems} + /> +
+
); }; @@ -187,6 +191,11 @@ let TimeLineBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.verticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar") + })} {children.mode.propertyView({ label: trans("timeLine.mode"), tooltip: trans("timeLine.modeTooltip"), @@ -211,7 +220,7 @@ let TimeLineBasicComp = (function () { TimeLineBasicComp = class extends TimeLineBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index b6ebf264c..aa117ff5c 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -1,11 +1,10 @@ import { RecordConstructorToView } from "lowcoder-core"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { withExposingConfigs } from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { default as Tree } from "antd/es/tree"; import { useEffect, useState } from "react"; import styled from "styled-components"; -import ReactResizeDetector from "react-resize-detector"; import { StyleConfigType, styleControl } from "comps/controls/styleControl"; import { InputFieldStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; @@ -13,8 +12,6 @@ import { withDefault } from "comps/generators"; import { dropdownControl } from "comps/controls/dropdownControl"; import { BoolControl } from "comps/controls/boolControl"; import { - advancedSection, - expandSection, formSection, // intersectSection, treeCommonChildren, @@ -24,8 +21,6 @@ import { valuePropertyView, } from "./treeUtils"; import { - SelectInputInvalidConfig, - SelectInputValidationChildren, SelectInputValidationSection, } from "../selectInputComp/selectInputConstants"; import { selectInputValidate } from "../selectInputComp/selectInputConstants"; @@ -33,10 +28,11 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; type TreeStyleType = StyleConfigType; -const Container = styled.div` +const Container = styled.div` height: 100%; padding: 4px; background: ${(props) => props.background}; @@ -45,18 +41,8 @@ const Container = styled.div` .ant-tree-show-line .ant-tree-switcher { background: ${(props) => props.background}; } - .ant-tree:hover .ant-tree-list-scrollbar-show { - display: block !important; - } - .ant-tree-list-scrollbar { - width: 6px !important; - } - .ant-tree-list-scrollbar-thumb { - border-radius: 9999px !important; - background: rgba(139, 143, 163, 0.2) !important; - } - .ant-tree-list-scrollbar-thumb:hover { - background: rgba(139, 143, 163, 0.5) !important; + .simplebar-vertical { + display: ${(props) => props.verticalScrollbar ? 'block' : 'none'}; } `; @@ -74,6 +60,8 @@ const childrenMap = { checkStrictly: BoolControl, autoExpandParent: BoolControl, label: withDefault(LabelControl, { position: "column" }), + autoHeight: AutoHeightControl, + verticalScrollbar: withDefault(BoolControl, false), // TODO: more event onEvent: SelectEventHandlerControl, style: styleControl(InputFieldStyle , 'style'), @@ -101,50 +89,46 @@ const TreeCompView = (props: RecordConstructorToView) => { labelStyle, inputFieldStyle:props.inputFieldStyle, children: ( - setHeight(h)} - render={() => ( - - { - value.onChange(keys as (string | number)[]); - props.onEvent("change"); - }} - onCheck={(keys) => { - value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]); - props.onEvent("change"); - }} - onExpand={(keys) => { - expanded.onChange(keys as (string | number)[]); - }} - onFocus={() => props.onEvent("focus")} - onBlur={() => props.onEvent("blur")} - /> - - )} - > - + + + { + value.onChange(keys as (string | number)[]); + props.onEvent("change"); + }} + onCheck={(keys) => { + value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]); + props.onEvent("change"); + }} + onExpand={(keys) => { + expanded.onChange(keys as (string | number)[]); + }} + onFocus={() => props.onEvent("focus")} + onBlur={() => props.onEvent("blur")} + /> + + ), }); }; @@ -179,6 +163,11 @@ let TreeBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.verticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar") + })} {children.expanded.propertyView({ label: trans("tree.expanded") })} {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })} {children.showLine.propertyView({ label: trans("tree.showLine") })} @@ -202,7 +191,7 @@ let TreeBasicComp = (function () { TreeBasicComp = class extends TreeBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 096757b34..ee1fa3248 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -7,7 +7,7 @@ import { } from "comps/controls/styleControlConstants"; import { EditorContext } from "comps/editorState"; import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design"; +import { HintPlaceHolder, ScrollBar, TacoMarkDown } from "lowcoder-design"; import { ReactNode, useContext } from "react"; import styled, { css } from "styled-components"; import { checkIsMobile } from "util/commonUtils"; @@ -76,6 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle} display: flex; flex-flow: column; height: 100%; + overflow-y: scroll; border: ${(props) => props.$style.borderWidth} ${(props) => (props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; background-color: ${(props) => props.$style.background}; @@ -194,45 +195,42 @@ export function TriContainer(props: TriContainerProps) { )} {showBody && ( -
- - -

- {props.type === "markdown" ? ( - {text.value} - ) : ( - text.value - )} -

-
-
+ +
+ + +

+ {props.type === "markdown" ? ( + {text.value} + ) : ( + text.value + )} +

+
+
+
)} {showFooter && ( diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx index 8270d23e7..43fa3e5b7 100644 --- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx @@ -41,11 +41,14 @@ const DrawerWrapper = styled.div` } `; -const StyledDrawer = styled(Drawer)<{$titleAlign?: string}>` +const StyledDrawer = styled(Drawer)<{$titleAlign?: string, $drawerScrollbar: boolean}>` .ant-drawer-header-title { margin: 0px 20px !important; text-align: ${(props) => props.$titleAlign || "center"}; } + div.ant-drawer-body div.react-grid-layout::-webkit-scrollbar { + display: ${(props) => props.$drawerScrollbar ? "block" : "none"}; + } `; const ButtonStyle = styled(Button)<{$closePosition?: string, $title? :string}>` @@ -93,6 +96,7 @@ let TmpDrawerComp = (function () { titleAlign: HorizontalAlignmentControl, horizontalGridCells: SliderControl, autoHeight: AutoHeightControl, + drawerScrollbar: withDefault(BoolControl, true), style: styleControl(DrawerStyle), placement: PositionControl, closePosition: withDefault(LeftRightControl, "left"), @@ -137,6 +141,7 @@ let TmpDrawerComp = (function () { }} title={props.title} $titleAlign={props.titleAlign} + $drawerScrollbar={props.drawerScrollbar} closable={false} placement={props.placement} open={props.visible.value} @@ -209,6 +214,7 @@ let TmpDrawerComp = (function () { {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} + {children.drawerScrollbar.propertyView({ label: trans("prop.drawerScrollbar") })} {children.maskClosable.propertyView({ label: trans("prop.maskClosable"), })} diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx index 0d7ea6be8..ed2710ed5 100644 --- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx @@ -29,7 +29,7 @@ const EventOptions = [ { label: trans("modalComp.close"), value: "close", description: trans("modalComp.closeDesc") }, ] as const; -const getStyle = (style: ModalStyleType) => { +const getStyle = (style: ModalStyleType, modalScrollbar: boolean) => { return css` .ant-modal-content { border-radius: ${style.radius}; @@ -49,6 +49,9 @@ const getStyle = (style: ModalStyleType) => { background-color: ${style.background}; } } + div.ant-modal-body div.react-grid-layout::-webkit-scrollbar { + display: ${modalScrollbar ? "block" : "none"}; + } .ant-modal-close { inset-inline-end: 10px !important; top: 10px; @@ -80,8 +83,8 @@ function extractMarginValues(style: ModalStyleType) { return valuesarray; } -const ModalStyled = styled.div<{ $style: ModalStyleType }>` - ${(props) => props.$style && getStyle(props.$style)} +const ModalStyled = styled.div<{ $style: ModalStyleType, $modalScrollbar: boolean }>` + ${(props) => props.$style && getStyle(props.$style, props.$modalScrollbar)} `; const ModalWrapper = styled.div` @@ -105,6 +108,7 @@ let TmpModalComp = (function () { autoHeight: AutoHeightControl, title: StringControl, titleAlign: HorizontalAlignmentControl, + modalScrollbar: withDefault(BoolControl, false), style: styleControl(ModalStyle), maskClosable: withDefault(BoolControl, true), showMask: withDefault(BoolControl, true), @@ -174,7 +178,7 @@ let TmpModalComp = (function () { if (open) props.onEvent("open"); }} zIndex={Layers.modal} - modalRender={(node) => {node}} + modalRender={(node) => {node}} mask={props.showMask} className={props.className as string} data-testid={props.dataTestId as string} @@ -203,6 +207,10 @@ let TmpModalComp = (function () { label: trans('prop.horizontalGridCells'), })} {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.modalScrollbar.propertyView({ + label: trans("prop.modalScrollbar") + })} {!children.autoHeight.getView() && children.height.propertyView({ label: trans("modalComp.modalHeight"), diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 533ad2089..03cedc4e6 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -203,6 +203,10 @@ export const en = { "showVerticalScrollbar" : "Show Vertical Scrollbar", "showHorizontalScrollbar" : "Show Horizontal Scrollbar", "siderScrollbar" : "Show Scrollbars in Sider", + "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).", diff --git a/translations/locales/en.js b/translations/locales/en.js index 240d494af..aafb078ed 100644 --- a/translations/locales/en.js +++ b/translations/locales/en.js @@ -196,6 +196,10 @@ export const en = { "textOverflow": "Text Overflow", "scrollbar": "Show Scrollbars", "siderScrollbar": "Show Scrollbars in Sider", + "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "siderRight": "Show sider on the Right", "siderWidth": "Sider Width", "siderWidthTooltip": "Sider width supports percentages (%) and pixels (px).", diff --git a/translations/locales/en.ts b/translations/locales/en.ts index 418b180c9..75c7036bb 100644 --- a/translations/locales/en.ts +++ b/translations/locales/en.ts @@ -201,6 +201,10 @@ export const en = { "textOverflow": "Text Overflow", "scrollbar": "Show Scrollbars", "siderScrollbar" : "Show Scrollbars in Sider", + "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",