Cherry release -> back to dev

client/packages/lowcoder-design/src/components/ScrollBar.tsx

@@ -58,18 +58,15 @@ interface IProps {
   hideScrollbar?: boolean;
 }
 
-export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar, ...otherProps }: IProps) => {
+export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar = false, ...otherProps }: IProps) => {
   // You can now use the style prop directly or pass it to SimpleBar
   const combinedStyle = { ...style, height }; // Example of combining height with passed style
 
-  return (hideScrollbar ?? false) ? (
+  return hideScrollbar ? (
     <ScrollBarWrapper className={className}>
-      <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
-        {children}
-      </SimpleBar>
+      {children}
     </ScrollBarWrapper>
-  )
-  : (
+  ) : (
     <ScrollBarWrapper className={className}>
       {children}
     </ScrollBarWrapper>

client/packages/lowcoder/src/app.tsx

@@ -111,21 +111,16 @@ class AppIndex extends React.Component<AppIndexProps, any> {
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
           <meta name="description" content={trans("productDesc")} />
-
-          {isLowCoderDomain && (
-            <>
-              {/* setting Meta Attributes to be able for embedding via iframely */}
-              <meta property="iframely:title" content="Lowcoder" />
-              <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
-
-              <link rel="preconnect" href="https://fonts.googleapis.com"/>
-              <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
-              <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet"/>
-              {/* embedding analytics of Cleabits */}
-              <script src="https://tag.clearbitscripts.com/v1/pk_931b51e405557300e6a7c470e8247d5f/tags.js" referrerPolicy="strict-origin-when-cross-origin"></script>
-            </>
-          )}
-
+          {isLowCoderDomain && [
+            // Adding Support for iframely to be able to embedd the component explorer in the docu
+            <meta key="iframely:title" property="iframely:title" content="Lowcoder" />,
+            <meta key="iframely:description" property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />,
+            <link key="preconnect-googleapis" rel="preconnect" href="https://fonts.googleapis.com" />,
+            <link key="preconnect-gstatic" rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />,
+            <link key="font-ubuntu" href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet" />,
+            // adding Clearbit Support for Analytics
+            <script key="clearbit-script" src="https://tag.clearbitscripts.com/v1/pk_931b51e405557300e6a7c470e8247d5f/tags.js" referrerPolicy="strict-origin-when-cross-origin" type="text/javascript"></script>
+          ]}
         </Helmet>
         <SystemWarning />
         <Router history={history}>

client/packages/lowcoder/src/components/CompName.tsx

@@ -83,6 +83,7 @@ export const CompName = (props: Iprops) => {
 
   const items: EditPopoverItemType[] = [];
 
+  // Falk: TODO - Implement upgrade for individual Version functionality
   const handleUpgrade = async () => {
     if (upgrading) {
       return;
@@ -112,6 +113,13 @@ export const CompName = (props: Iprops) => {
 
 
   if (compInfo.isRemote) {
+    items.push({
+      text: trans("history.currentVersion") + ": " + compInfo.packageVersion,
+      onClick: () => {
+
+      },
+    });
+
     items.push({
       text: trans("comp.menuUpgradeToLatest"),
       onClick: () => {

client/packages/lowcoder/src/comps/comps/allComp.test.tsx

@@ -72,7 +72,7 @@ Object.keys(QueryMap).forEach((key) => {
 
 function logDiff(comp: any, newComp: any, prefix?: string) {
   if (_.isNil(comp.children)) {
-    console.info(`diff. comp.${prefix}: `, comp, ` newComp.${prefix}: `, newComp);
+    // console.info(`diff. comp.${prefix}: `, comp, ` newComp.${prefix}: `, newComp);
     return;
   }
   Object.keys(comp.children).forEach((key) => {

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -215,17 +215,11 @@ export function ListView(props: Props) {
     <BackgroundColorContext.Provider value={style.background}>
       <ListViewWrapper $style={style} $paddingWidth={paddingWidth}>
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
-          {scrollbars ? (
-            <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }}>
-              <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
-                <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
-              </ReactResizeDetector>}</>
-            </ScrollBar>
-          ) : (
+          <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
             <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
               <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
             </ReactResizeDetector>}</>
-          )}
+          </ScrollBar>
         </BodyWrapper>
         <FooterWrapper>
           <Pagination size="small" itemRender={pageItemRender} {...pageInfo.pagination} />

client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx

@@ -505,6 +505,7 @@ class ModuleTmpComp extends ModuleCompBase {
 const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   const appId = comp.children.appId.getView();
   const error = comp.children.error.getView();
+  const scrollbars = comp.children.scrollbars.getView();
 
   const moduleExternalState: ExternalEditorContextState = useMemo(
     () => ({
@@ -530,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ScrollBar style={{ height: comp.children.scrollbars.getView() ? "100%" : "auto", margin: "0px", padding: "0px" }}>
+        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
           <ExternalEditorContext.Provider value={moduleExternalState}>
            {comp.moduleRootComp.getView()}
           </ExternalEditorContext.Provider>

client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx

@@ -10,13 +10,17 @@ import {
 async function npmLoader(
   remoteInfo: RemoteCompInfo
 ): Promise<CompConstructor | null> {
-  const { packageName, packageVersion = "latest", compName } = remoteInfo;
+
+  console.log("remoteInfo: ", remoteInfo);
+
+  // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
+
+  const { packageName, packageVersion, compName } = remoteInfo;
   const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/index.js`;
   // const entry = `../../../../../public/package/index.js`; 
   // console.log("Entry", entry);
   try {
     const module = await import(/* webpackIgnore: true */ entry);
-    // console.log("Entry 1", module);
     const comp = module.default?.[compName];
     if (!comp) {
       throw new Error(trans("npm.compNotFound", { compName }));

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { BooleanStateControl, booleanExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { NameGenerator } from "comps/utils";
-import { ControlNode, Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
 import React, { useCallback, useContext } from "react";
@@ -33,6 +33,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design";
+import { BoolControl } from "comps/controls/boolControl";
 
 const EVENT_OPTIONS = [
   {
@@ -50,9 +51,10 @@ const childrenMap = {
     1: { layout: {}, items: {} },
   }),
   autoHeight: AutoHeightControl,
+  scrollbars: withDefault(BoolControl, false),
   onEvent: eventHandlerControl(EVENT_OPTIONS),
   disabled: BoolCodeControl,
-  showHeader: withDefault(BooleanStateControl, "true"),
+  showHeader: withDefault(BoolControl, true),
   style: styleControl(TabContainerStyle),
   headerStyle: styleControl(ContainerHeaderStyle),
   bodyStyle: styleControl(ContainerBodyStyle),
@@ -211,7 +213,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   const editorState = useContext(EditorContext);
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
-  const showHeader = props.showHeader.value;
+  const showHeader = props.showHeader.valueOf();
   const paddingWidth = isMobile ? 8 : 0;
 
   const tabItems = visibleTabs.map((tab) => {
@@ -236,14 +238,16 @@ const TabbedContainer = (props: TabbedContainerProps) => {
       forceRender: true,
       children: (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-          <ContainerInTab
-            layout={containerProps.layout.getView()}
-            items={gridItemCompToGridItems(containerProps.items.getView())}
-            positionParams={containerProps.positionParams.getView()}
-            dispatch={childDispatch}
-            autoHeight={props.autoHeight}
-            containerPadding={[paddingWidth, 20]}
-          />
+          <ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
+            <ContainerInTab
+              layout={containerProps.layout.getView()}
+              items={gridItemCompToGridItems(containerProps.items.getView())}
+              positionParams={containerProps.positionParams.getView()}
+              dispatch={childDispatch}
+              autoHeight={props.autoHeight}
+              containerPadding={[paddingWidth, 20]}
+            />
+          </ScrollBar>
         </BackgroundColorContext.Provider>
       )
     }
@@ -307,6 +311,11 @@ export const TabbedContainerBaseComp = (function () {
             <>
               <Section name={sectionNames.layout}>
                 {children.autoHeight.getPropertyView()}
+                {!children.autoHeight.getView() && (
+                  children.scrollbars.propertyView({
+                    label: trans("prop.scrollbar"),
+                  })
+                )}
               </Section>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -147,8 +147,7 @@ export function TriContainer(props: TriContainerProps) {
       )}
       {showBody && (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-          {scrollbars ? (
-            <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }}>
+            <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
               <BodyInnerGrid
                 $showBorder={showHeader}
                 {...otherBodyProps}
@@ -171,28 +170,6 @@ export function TriContainer(props: TriContainerProps) {
                 style={{padding: bodyStyle.containerBodyPadding}}
               />
             </ScrollBar>
-            ) : (
-            <BodyInnerGrid
-              $showBorder={showHeader}
-              {...otherBodyProps}
-              items={gridItemCompToGridItems(bodyItems)}
-              autoHeight={container.autoHeight}
-              emptyRows={14}
-              minHeight={showHeader ? "143px" : "142px"}
-              containerPadding={
-                (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
-              }
-              hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-              $backgroundColor={bodyStyle?.background || 'transparent'}
-              $borderColor={style?.border}
-              $borderWidth={style?.borderWidth}
-              $backgroundImage={bodyStyle?.backgroundImage}
-              $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
-              $backgroundImageSize={bodyStyle?.backgroundImageSize}
-              $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
-              $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
-              style={{padding: bodyStyle.containerBodyPadding}}/>
-          )}
         </BackgroundColorContext.Provider>
       )}
       {showFooter && (

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

@@ -125,12 +125,15 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
       this.children.showHeader.propertyView({ label: trans("prop.showHeader") }),
       this.children.showBody.propertyView({ label: trans("prop.showBody") }),
       this.children.showFooter.propertyView({ label: trans("prop.showFooter") }),
-      (!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") }),
+
     ];
   }
 
   heightPropertyView() {
-    return this.children.autoHeight.getPropertyView();
+    return [
+      this.children.autoHeight.getPropertyView(),
+      (!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") })
+    ];
   }
 
   stylePropertyView() {

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -747,10 +747,11 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                               preInputNode: <MarginIcon title="Margin" />,
                               placeholder: props[name],
                             })
-                            : (name === "padding" ||
+                            : name === "textSize" ||
+                              name === "padding" ||
                               name === "containerHeaderPadding" ||
                               name === "containerFooterPadding" ||
-                              name === "containerBodyPadding")
+                              name === "containerBodyPadding"
                               ? (
                                 children[name] as InstanceType<typeof StringControl>
                               ).propertyView({
@@ -820,37 +821,15 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                                                 preInputNode: <StyledBackgroundImageIcon title="Background Image Repeat" />,
                                                 placeholder: props[name],
                                               })
-                                              : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize"
-                                                ? (
-                                                  children[name] as InstanceType<typeof StringControl>
-                                                ).propertyView({
-                                                  label: config.label,
-                                                  preInputNode: <StyledBackgroundImageIcon title="Background Image Size" />,
-                                                  placeholder: props[name],
-                                                })
-                                                : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition"
-                                                  ? (
-                                                    children[name] as InstanceType<typeof StringControl>
-                                                  ).propertyView({
-                                                    label: config.label,
-                                                    preInputNode: <StyledBackgroundImageIcon title="Background Image Position" />,
-                                                    placeholder: props[name],
-                                                  })
-                                                  : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin"
-                                                    ? (
-                                                      children[name] as InstanceType<typeof StringControl>
-                                                    ).propertyView({
-                                                      label: config.label,
-                                                      preInputNode: <StyledBackgroundImageIcon title="Background Image Origin" />,
-                                                      placeholder: props[name],
-                                                    })
-                                                    : children[name].propertyView({
-                                                      label: config.label,
-                                                      panelDefaultColor: props[name],
-                                                      // isDep: isDepColorConfig(config),
-                                                      isDep: true,
-                                                      depMsg: depMsg,
-                                                    })}
+                                              : children[name].propertyView({
+                                                label: config.label,
+                                                panelDefaultColor: props[name],
+                                                // isDep: isDepColorConfig(config),	
+                                                isDep: true,
+                                                depMsg: depMsg,
+                                              })
+
+                    }
                   </div>
                 );
               })}

client/packages/lowcoder/src/comps/hooks/agoraFunctions.tsx

@@ -43,12 +43,12 @@ const useAgora = () => {
   const leaveChannel = async () => {
     if (isJoined) {
       if (!client) {
-        console.error("Agora client is not initialized");
+        // console.error("Agora client is not initialized");
         return;
       }
 
       if (!client.localTracks.length) {
-        console.error("No local tracks to unpublish");
+        // console.error("No local tracks to unpublish");
         return;
       }
 
@@ -105,7 +105,7 @@ const useAgora = () => {
       setHeight(videoHeight!);
       // console.log(`Video width: ${videoWidth}px, height: ${videoHeight}px`);
     } else {
-      console.error("Media stream track not found");
+      // console.error("Media stream track not found");
     }
   };