Merge pull request #1192 from MenamAfzal/fixed-height-scrollbar

Added scrollbar & Switches

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<Record<string,any>>) => {
@@ -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")})}
  </Section>
  <Section name={sectionNames.style}>
  {children.style.getPropertyView()}

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 {

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"
  },
 };
 

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<T extends OptionsType> extends Omit<SelectProps, "placem
 export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
  const { placement = "right" } = props;
  const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
+
+ useEffect(() => {
+ const dropdownElems = document.querySelectorAll<HTMLElement>("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 (
  <FlexDiv style={props.style} className={props.className}>
  {props.label && (

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 (
  <BackgroundColorContext.Provider value={props.style.background}>
  <DisabledContext.Provider value={props.disabled}>
- <ContainWrapper $style={{
- ...props.style,
- display: "grid",
- gridTemplateColumns: templateColumns,
- columnGap,
- gridTemplateRows: templateRows,
- rowGap,
- }}>
- {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 (
- <BackgroundColorContext.Provider value={props.columnStyle.background}>
- <ColWrapper
- key={id}
- $style={props.columnStyle}
- $minWidth={column.minWidth}
- $matchColumnsHeight={matchColumnsHeight}
- >
- <ColumnContainer
- layout={containerProps.layout.getView()}
- items={gridItemCompToGridItems(containerProps.items.getView())}
- horizontalGridCells={horizontalGridCells}
- positionParams={containerProps.positionParams.getView()}
- dispatch={childDispatch}
- autoHeight={props.autoHeight}
- style={columnStyle}
- />
- </ColWrapper>
- </BackgroundColorContext.Provider>
- )
- })
- }
- </ContainWrapper>
+ <div style={{ height: "inherit", overflow: "auto"}}>
+ <ScrollBar style={{ margin: "0px", padding: "0px" }} overflow="scroll" hideScrollbar={!mainScrollbar}>
+ <ContainWrapper $style={{
+ ...props.style,
+ display: "grid",
+ gridTemplateColumns: templateColumns,
+ columnGap,
+ gridTemplateRows: templateRows,
+ rowGap,
+ }}>
+ {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 (
+ <BackgroundColorContext.Provider value={props.columnStyle.background}>
+ <ColWrapper
+ key={id}
+ $style={props.columnStyle}
+ $minWidth={column.minWidth}
+ $matchColumnsHeight={matchColumnsHeight}
+ >
+ <ColumnContainer
+ layout={containerProps.layout.getView()}
+ items={gridItemCompToGridItems(containerProps.items.getView())}
+ horizontalGridCells={horizontalGridCells}
+ positionParams={containerProps.positionParams.getView()}
+ dispatch={childDispatch}
+ autoHeight={props.autoHeight}
+ style={columnStyle}
+ />
+ </ColWrapper>
+ </BackgroundColorContext.Provider>
+ )
+ })
+ }
+ </ContainWrapper>
+ </ScrollBar>
+ </div>
  </DisabledContext.Provider>
  </BackgroundColorContext.Provider>
  );
@@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () {
  <>
  <Section name={sectionNames.layout}>
  {children.autoHeight.getPropertyView()}
+ {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
+ label: trans("prop.mainScrollbar")
+ })}
  {children.horizontalGridCells.propertyView({
  label: trans('prop.horizontalGridCells'),
  })}

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 (
  <StyledDiv
  $style={props.style}
+ id="fileViewer"
  onClick={(e) => 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 () {
  </ErrorWrapper>
  );
  }
- return <DraggableFileViewer src={props.src} style={props.style} animationStyle={props.animationStyle}/>;
+ return <DraggableFileViewer
+ src={props.src}
+ style={props.style}
+ animationStyle={props.animationStyle}
+ showVerticalScrollbar={props.showVerticalScrollbar}
+ />;
  })
  .setPropertyViewFn((children) => {
  return (
@@ -100,6 +113,14 @@ let FileViewerBasicComp = (function () {
  {hiddenPropertyView(children)}
  </Section>
  )}
+ <Section name={sectionNames.layout}>
+ {children.autoHeight.getPropertyView()}
+ {!children.autoHeight.getView() && (
+ children.showVerticalScrollbar.propertyView({
+ label: trans("prop.showVerticalScrollbar"),
+ })
+ )}
+ </Section>
 
  {["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();
  }
 };