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

Commit 45830f5

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /