Skip to content

Commit b94a1bd

Browse files
MenamAfzalMenamAfzal
committed
pull from origin
2 parents 56a5588 + 45830f5 commit b94a1bd

File tree

36 files changed

+467
-220
lines changed

36 files changed

+467
-220
lines changed

‎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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ export const en = {
349349
animationIterationCount:"IterationCount",
350350
timeZone:"Time Zone",
351351
timeRange:"Time Range",
352+
showVerticalScrollbar:"Show Vertical ScrollBar"
352353
},
353354
timeZone: {
354355
"UTC-12:00": "(UTC-12:00) Int'l Date Line W",

‎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/app.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ import { buildMaterialPreviewURL } from "./util/materialUtils";
5656
import GlobalInstances from 'components/GlobalInstances';
5757
// import posthog from 'posthog-js'
5858
import { fetchHomeData } from "./redux/reduxActions/applicationActions";
59+
import { getNpmPackageMeta } from "./comps/utils/remote";
60+
import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
5961

6062
const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
6163
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -90,6 +92,7 @@ type AppIndexProps = {
9092
fetchHomeDataFinished: boolean;
9193
fetchConfig: (orgId?: string) => void;
9294
fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
95+
fetchLowcoderCompVersions: () => void;
9396
getCurrentUser: () => void;
9497
favicon: string;
9598
brandName: string;
@@ -112,6 +115,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
112115
this.props.fetchConfig(this.props.currentOrgId);
113116
if (!this.props.currentUserAnonymous) {
114117
this.props.fetchHomeData(this.props.currentUserAnonymous);
118+
this.props.fetchLowcoderCompVersions();
115119
}
116120
}
117121
}
@@ -418,10 +422,21 @@ const mapDispatchToProps = (dispatch: any) => ({
418422
dispatch(fetchUserAction());
419423
},
420424
fetchConfig: (orgId?: string) => dispatch(fetchConfigAction(orgId)),
421-
422425
fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
423426
dispatch(fetchHomeData({}));
424-
}
427+
},
428+
fetchLowcoderCompVersions: async () => {
429+
try {
430+
dispatch(setLowcoderCompsLoading(true));
431+
const packageMeta = await getNpmPackageMeta('lowcoder-comps');
432+
if (packageMeta?.versions) {
433+
dispatch(packageMetaReadyAction('lowcoder-comps', packageMeta));
434+
}
435+
dispatch(setLowcoderCompsLoading(false));
436+
} catch (_) {
437+
dispatch(setLowcoderCompsLoading(false));
438+
}
439+
},
425440
});
426441

427442
const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex);

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ApplicationCategoriesEnum } from "constants/applicationConstants";
2121
import { BoolControl } from "../controls/boolControl";
2222
import { getNpmPackageMeta } from "../utils/remote";
2323
import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
24+
import type { AppState } from "@lowcoder-ee/redux/reducers";
2425

2526
const TITLE = trans("appSetting.title");
2627
const USER_DEFINE = "__USER_DEFINE";
@@ -195,6 +196,7 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
195196
};
196197

197198
function AppSettingsModal(props: ChildrenInstance) {
199+
const lowcoderCompsMeta = useSelector((state: AppState) => state.npmPlugin.packageMeta['lowcoder-comps']);
198200
const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
199201
const {
200202
themeList,
@@ -209,7 +211,7 @@ function AppSettingsModal(props: ChildrenInstance) {
209211
preventAppStylesOverwriting,
210212
lowcoderCompVersion,
211213
} = props;
212-
214+
213215
const THEME_OPTIONS = themeList?.map((theme) => ({
214216
label: theme.name,
215217
value: theme.id + "",
@@ -230,14 +232,11 @@ function AppSettingsModal(props: ChildrenInstance) {
230232
}, [themeWithDefault]);
231233

232234
useEffect(() => {
233-
const fetchCompsPackageMeta = async () => {
234-
const packageMeta = await getNpmPackageMeta('lowcoder-comps');
235-
if (packageMeta?.versions) {
236-
setLowcoderCompVersions(Object.keys(packageMeta.versions).reverse())
237-
}
238-
}
239-
fetchCompsPackageMeta();
240-
}, [])
235+
setLowcoderCompVersions([
236+
'latest',
237+
...Object.keys(lowcoderCompsMeta.versions).reverse()
238+
])
239+
}, [lowcoderCompsMeta])
241240

242241

243242
const DropdownItem = (params: { value: string }) => {

‎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)