Skip to content

Commit 45830f5

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1192 from MenamAfzal/fixed-height-scrollbar
Added scrollbar & Switches
2 parents 6fe9b5f + 76cf4d7 commit 45830f5

File tree

22 files changed

+392
-200
lines changed

22 files changed

+392
-200
lines changed

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ let childrenMap: any = {
150150
currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
151151
currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
152152
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
153+
showVerticalScrollbar: withDefault(BoolControl, false),
153154
};
154155

155156
// this should ensure backwards compatibility with older versions of the SDK
@@ -188,7 +189,10 @@ let CalendarBasicComp = (function () {
188189
currentPremiumView?: string;
189190
animationStyle?:any;
190191
modalStyle?:any
191-
}) => {
192+
showVerticalScrollbar?:boolean
193+
194+
}, dispatch: any) => {
195+
192196
const comp = useContext(EditorContext)?.getUICompByName(
193197
useContext(CompNameContext)
194198
);
@@ -315,6 +319,7 @@ let CalendarBasicComp = (function () {
315319
licenseKey,
316320
resourceName,
317321
modalStyle,
322+
showVerticalScrollbar
318323
} = props;
319324

320325
const handleEventDataChange = useCallback((data: Array<Record<string,any>>) => {
@@ -745,6 +750,7 @@ let CalendarBasicComp = (function () {
745750
$editable={editable}
746751
$style={style}
747752
$theme={theme?.theme}
753+
$showVerticalScrollbar={showVerticalScrollbar}
748754
onDoubleClick={handleDbClick}
749755
$left={left}
750756
key={initialDate ? currentView + initialDate : currentView}
@@ -873,7 +879,8 @@ let CalendarBasicComp = (function () {
873879
style: { getPropertyView: () => any; };
874880
animationStyle: { getPropertyView: () => any; };
875881
modalStyle: { getPropertyView: () => any; };
876-
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string; }) => any; };
882+
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
883+
showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; };
877884
}) => {
878885
const license = children.licenseKey.getView();
879886

@@ -918,6 +925,7 @@ let CalendarBasicComp = (function () {
918925
? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })
919926
: children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })}
920927
{children.firstDay.propertyView({ label: trans("calendar.startWeek"), })}
928+
{children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
921929
</Section>
922930
<Section name={sectionNames.style}>
923931
{children.style.getPropertyView()}

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const Wrapper = styled.div<{
3232
$style?: CalendarStyleType;
3333
$theme?: ThemeDetail;
3434
$left?: number;
35+
$showVerticalScrollbar?:boolean;
3536
}>`
3637
position: relative;
3738
height: 100%;
@@ -359,6 +360,9 @@ export const Wrapper = styled.div<{
359360
.fc .fc-scrollgrid table {
360361
width: 100% !important;
361362
}
363+
.fc-scroller.fc-scroller-liquid-absolute::-webkit-scrollbar {
364+
display:${(props) => (props.$showVerticalScrollbar ? 'block' : 'none')};
365+
}
362366
363367
// event
364368
.fc-timegrid-event .fc-event-main {

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,8 @@ export const en = {
345345
animationType:"Type",
346346
animationDelay:"Delay",
347347
animationDuration:"Duration",
348-
animationIterationCount:"IterationCount"
348+
animationIterationCount:"IterationCount",
349+
showVerticalScrollbar:"Show Vertical ScrollBar"
349350
},
350351
};
351352

‎client/packages/lowcoder-design/src/components/Dropdown.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ReactNode } from "react";
66
import styled from "styled-components";
77
import { CustomSelect } from "./customSelect";
88
import { EllipsisTextCss } from "./Label";
9+
import { useEffect } from "react";
910
import { TacoMarkDown } from "./markdown";
1011
import { Tooltip, ToolTipLabel } from "./toolTip";
1112

@@ -157,6 +158,19 @@ interface DropdownProps<T extends OptionsType> extends Omit<SelectProps, "placem
157158
export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
158159
const { placement = "right" } = props;
159160
const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
161+
162+
useEffect(() => {
163+
const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
164+
for (let index = 0; index < dropdownElems.length; index++) {
165+
const element = dropdownElems[index];
166+
console.log(element);
167+
element.style.maxHeight = "300px";
168+
element.style.overflowY = "scroll";
169+
element.style.minWidth = "150px";
170+
element.style.paddingRight = "10px";
171+
}
172+
}, []);
173+
160174
return (
161175
<FlexDiv style={props.style} className={props.className}>
162176
{props.label && (

‎client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
1717
import { addMapChildAction } from "comps/generators/sameTypeMap";
1818
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
1919
import { NameGenerator } from "comps/utils";
20-
import { Section, controlItem, sectionNames } from "lowcoder-design";
20+
import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design";
2121
import { HintPlaceHolder } from "lowcoder-design";
2222
import _ from "lodash";
2323
import styled from "styled-components";
@@ -96,6 +96,7 @@ const childrenMap = {
9696
templateRows: withDefault(StringControl, "1fr"),
9797
rowGap: withDefault(StringControl, "20px"),
9898
templateColumns: withDefault(StringControl, "1fr 1fr"),
99+
mainScrollbar: withDefault(BoolControl, false),
99100
columnGap: withDefault(StringControl, "20px"),
100101
style: styleControl(ContainerStyle, 'style'),
101102
columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
@@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
133134
columnGap,
134135
columnStyle,
135136
horizontalGridCells,
137+
mainScrollbar
136138
} = props;
137139

138140
return (
139141
<BackgroundColorContext.Provider value={props.style.background}>
140142
<DisabledContext.Provider value={props.disabled}>
141-
<ContainWrapper $style={{
142-
...props.style,
143-
display: "grid",
144-
gridTemplateColumns: templateColumns,
145-
columnGap,
146-
gridTemplateRows: templateRows,
147-
rowGap,
148-
}}>
149-
{columns.map(column => {
150-
const id = String(column.id);
151-
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
152-
if(!containers[id]) return null
153-
const containerProps = containers[id].children;
154-
const noOfColumns = columns.length;
155-
return (
156-
<BackgroundColorContext.Provider value={props.columnStyle.background}>
157-
<ColWrapper
158-
key={id}
159-
$style={props.columnStyle}
160-
$minWidth={column.minWidth}
161-
$matchColumnsHeight={matchColumnsHeight}
162-
>
163-
<ColumnContainer
164-
layout={containerProps.layout.getView()}
165-
items={gridItemCompToGridItems(containerProps.items.getView())}
166-
horizontalGridCells={horizontalGridCells}
167-
positionParams={containerProps.positionParams.getView()}
168-
dispatch={childDispatch}
169-
autoHeight={props.autoHeight}
170-
style={columnStyle}
171-
/>
172-
</ColWrapper>
173-
</BackgroundColorContext.Provider>
174-
)
175-
})
176-
}
177-
</ContainWrapper>
143+
<div style={{ height: "inherit", overflow: "auto"}}>
144+
<ScrollBar style={{ margin: "0px", padding: "0px" }} overflow="scroll" hideScrollbar={!mainScrollbar}>
145+
<ContainWrapper $style={{
146+
...props.style,
147+
display: "grid",
148+
gridTemplateColumns: templateColumns,
149+
columnGap,
150+
gridTemplateRows: templateRows,
151+
rowGap,
152+
}}>
153+
{columns.map(column => {
154+
const id = String(column.id);
155+
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
156+
if(!containers[id]) return null
157+
const containerProps = containers[id].children;
158+
const noOfColumns = columns.length;
159+
return (
160+
<BackgroundColorContext.Provider value={props.columnStyle.background}>
161+
<ColWrapper
162+
key={id}
163+
$style={props.columnStyle}
164+
$minWidth={column.minWidth}
165+
$matchColumnsHeight={matchColumnsHeight}
166+
>
167+
<ColumnContainer
168+
layout={containerProps.layout.getView()}
169+
items={gridItemCompToGridItems(containerProps.items.getView())}
170+
horizontalGridCells={horizontalGridCells}
171+
positionParams={containerProps.positionParams.getView()}
172+
dispatch={childDispatch}
173+
autoHeight={props.autoHeight}
174+
style={columnStyle}
175+
/>
176+
</ColWrapper>
177+
</BackgroundColorContext.Provider>
178+
)
179+
})
180+
}
181+
</ContainWrapper>
182+
</ScrollBar>
183+
</div>
178184
</DisabledContext.Provider>
179185
</BackgroundColorContext.Provider>
180186
);
@@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () {
207213
<>
208214
<Section name={sectionNames.layout}>
209215
{children.autoHeight.getPropertyView()}
216+
{(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
217+
label: trans("prop.mainScrollbar")
218+
})}
210219
{children.horizontalGridCells.propertyView({
211220
label: trans('prop.horizontalGridCells'),
212221
})}

‎client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { DocumentViewer } from "react-documents";
66
import styled, { css } from "styled-components";
77
import { Section, sectionNames } from "lowcoder-design";
88
import { StringControl } from "../controls/codeControl";
9-
import { UICompBuilder } from "../generators";
9+
import { UICompBuilder, withDefault } from "../generators";
1010
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
1111
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1212
import { trans } from "i18n";
13-
13+
import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk";
1414
import { useContext } from "react";
1515
import { EditorContext } from "comps/editorState";
1616

@@ -42,12 +42,18 @@ const StyledDiv = styled.div<{$style: FileViewerStyleType;}>`
4242
${(props) => props.$style && getStyle(props.$style)}
4343
`;
4444

45-
const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => {
45+
const DraggableFileViewer = (props: {
46+
src: string;
47+
style: FileViewerStyleType,
48+
animationStyle:AnimationStyleType,
49+
showVerticalScrollbar: boolean,
50+
}) => {
4651
const [isActive, setActive] = useState(false);
4752

4853
return (
4954
<StyledDiv
5055
$style={props.style}
56+
id="fileViewer"
5157
onClick={(e) => setActive(true)}
5258
onMouseLeave={(e) => setActive(false)}
5359
>
@@ -67,6 +73,8 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an
6773
let FileViewerBasicComp = (function () {
6874
const childrenMap = {
6975
src: StringControl,
76+
autoHeight: withDefault(AutoHeightControl,'auto'),
77+
showVerticalScrollbar: withDefault(BoolControl, false),
7078
style: styleControl(FileViewerStyle , 'style'),
7179
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
7280
};
@@ -81,7 +89,12 @@ let FileViewerBasicComp = (function () {
8189
</ErrorWrapper>
8290
);
8391
}
84-
return <DraggableFileViewer src={props.src} style={props.style} animationStyle={props.animationStyle}/>;
92+
return <DraggableFileViewer
93+
src={props.src}
94+
style={props.style}
95+
animationStyle={props.animationStyle}
96+
showVerticalScrollbar={props.showVerticalScrollbar}
97+
/>;
8598
})
8699
.setPropertyViewFn((children) => {
87100
return (
@@ -100,6 +113,14 @@ let FileViewerBasicComp = (function () {
100113
{hiddenPropertyView(children)}
101114
</Section>
102115
)}
116+
<Section name={sectionNames.layout}>
117+
{children.autoHeight.getPropertyView()}
118+
{!children.autoHeight.getView() && (
119+
children.showVerticalScrollbar.propertyView({
120+
label: trans("prop.showVerticalScrollbar"),
121+
})
122+
)}
123+
</Section>
103124

104125
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
105126
<>
@@ -119,7 +140,7 @@ let FileViewerBasicComp = (function () {
119140

120141
FileViewerBasicComp = class extends FileViewerBasicComp {
121142
override autoHeight(): boolean {
122-
return false;
143+
return this.children.autoHeight.getView();
123144
}
124145
};
125146

0 commit comments

Comments
 (0)