Movatterモバイル変換

[0]ホーム
URL:

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

Commit45830f5

Browse files
authored
Merge pull request#1192 from MenamAfzal/fixed-height-scrollbar
Added scrollbar & Switches
2 parents6fe9b5f +76cf4d7 commit45830f5

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
constcomp=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
consthandleEventDataChange=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
constlicense=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
<Sectionname={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
importstyledfrom"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
exportfunctionDropdown<TextendsOptionsType>(props:DropdownProps<T>){
158159
const{ placement="right"}=props;
159160
constvalueInfoMap=_.fromPairs(props.options.map((option)=>[option.value,option]));
161+
162+
useEffect(()=>{
163+
constdropdownElems=document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
164+
for(letindex=0;index<dropdownElems.length;index++){
165+
constelement=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
<FlexDivstyle={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
importstyledfrom"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.Providervalue={props.style.background}>
140142
<DisabledContext.Providervalue={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-
constid=String(column.id);
151-
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
152-
if(!containers[id])returnnull
153-
constcontainerProps=containers[id].children;
154-
constnoOfColumns=columns.length;
155-
return(
156-
<BackgroundColorContext.Providervalue={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+
<divstyle={{height:"inherit",overflow:"auto"}}>
144+
<ScrollBarstyle={{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+
constid=String(column.id);
155+
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
156+
if(!containers[id])returnnull
157+
constcontainerProps=containers[id].children;
158+
constnoOfColumns=columns.length;
159+
return(
160+
<BackgroundColorContext.Providervalue={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
<Sectionname={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
importstyled,{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-
constDraggableFileViewer=(props:{src:string;style:FileViewerStyleType,animationStyle:AnimationStyleType})=>{
45+
constDraggableFileViewer=(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
letFileViewerBasicComp=(function(){
6874
constchildrenMap={
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<DraggableFileViewersrc={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+
<Sectionname={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=classextendsFileViewerBasicComp{
121142
overrideautoHeight():boolean{
122-
returnfalse;
143+
returnthis.children.autoHeight.getView();
123144
}
124145
};
125146

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp