Merge branch 'dev' into add-appconfig-query

Author: FalkWolsky

client/config/test/jest.config.js

@@ -6,14 +6,10 @@ export function currentDirName(importMetaUrl) {
   return dirname(fileURLToPath(importMetaUrl));
 }
 
-
 const globals = {};
 buildVars.forEach(({ name, defaultValue }) => {
   globals[name] = process.env[name] || defaultValue;
 });
-const edition = process.env.REACT_APP_EDITION;
-const isEEGlobal = edition === "enterprise-global";
-const isEE = edition === "enterprise" || isEEGlobal;
 const currentDir = currentDirName(import.meta.url);
 
 export default {
@@ -22,8 +18,7 @@ export default {
     "react-markdown": path.resolve(currentDir, "./mocks/react-markdown.js"),
     "\\.md\\?url$": path.resolve(currentDir, "./mocks/markdown-url-module.js"),
     "^@lowcoder-ee(.*)$": path.resolve(
-      currentDir,
-      isEE ? "../../packages/lowcoder/src/ee/$1" : "../../packages/lowcoder/src/$1"
+      currentDir, "../../packages/lowcoder/src/$1"
     ),
     "lowcoder-sdk": path.resolve(currentDir, "../../packages/lowcoder/src/index.sdk"),
   },

client/package.json

@@ -13,7 +13,6 @@
     "start": "yarn workspace lowcoder start",
     "start-win": "LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
     "start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
-    "start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
     "build": "yarn node ./scripts/build.js",
     "test": "jest && yarn workspace lowcoder-comps test",
     "prepare": "yarn workspace lowcoder prepare",
@@ -35,6 +34,7 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
+    "@types/simplebar": "^5.3.3",
     "@types/stylis": "^4.0.2",
     "@types/tern": "0.23.4",
     "@types/ua-parser-js": "^0.7.36",
@@ -51,7 +51,6 @@
     "mq-polyfill": "^1.1.8",
     "prettier": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
     "shelljs": "^0.8.5",
     "svgo": "^3.0.0",
     "typescript": "^4.8.4",
@@ -75,10 +74,13 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",
-    "antd-mobile": "^5.28.0",
+    "antd-mobile": "^5.34.0",
     "chalk": "4",
     "number-precision": "^1.6.0",
     "react-player": "^2.11.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "rollup": "^4.13.0",
+    "simplebar": "^6.2.5",
     "tui-image-editor": "^3.15.3"
   }
 }

client/packages/lowcoder-comps/.gitignore

@@ -1,3 +1,4 @@
 /lib
 /node_modules
+/package
 *.tgz

client/packages/lowcoder-comps/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "experimentalDecorators": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

client/packages/lowcoder-design/package.json

@@ -13,7 +13,9 @@
     "react-virtualized": "^9.22.3",
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "simplebar": "^6.2.5",
+    "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -23,6 +25,7 @@
     "@rollup/plugin-typescript": "^9.0.2",
     "@rollup/plugin-url": "^8.0.1",
     "@svgr/rollup": "^6.5.1",
+    "@types/simplebar": "^5.3.3",
     "rollup": "^2",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-polyfill-node": "^0.11.0",

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

@@ -1,7 +1,7 @@
-import { App } from 'antd';
-import type { MessageInstance } from 'antd/es/message/interface';
-import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
-import type { NotificationInstance } from 'antd/es/notification/interface';
+import { default as App } from "antd/es/app";
+import type { MessageInstance } from "antd/es/message/interface";
+import type { ModalStaticFunctions } from "antd/es/modal/confirm";
+import type { NotificationInstance } from "antd/es/notification/interface";
 
 let messageInstance: MessageInstance;
 let notificationInstance: NotificationInstance;

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

@@ -1,8 +1,11 @@
 import React from "react";
 import SimpleBar from "simplebar-react";
+import 'simplebar-react/dist/simplebar.min.css';
 import styled from "styled-components";
+import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's DebouncedFunc type
 
-const ScrollBarWrapper = styled.div`
+
+const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
   min-height: 0;
   height: 100%;
   width: 100%;
@@ -33,19 +36,48 @@ const ScrollBarWrapper = styled.div`
     top: 10px;
     bottom: 10px;
   }
+
+  ${props => Boolean(props.$hideplaceholder) && `
+    .simplebar-placeholder {
+      display: none !important;
+    }
+  `}
 `;
 
-interface IProps extends SimpleBar.Props {
+// .simplebar-placeholder { added by Falk Wolsky to hide the placeholder - as it doubles the vertical space of a Module on a page
+
+interface IProps {
   children: React.ReactNode;
   className?: string;
   height?: string;
+  style?: React.CSSProperties; // Add this line to include a style prop
+  scrollableNodeProps?: {
+    onScroll: DebouncedFunc<(e: any) => void>;
+  };
+  $hideplaceholder?: boolean;
+  hideScrollbar?: boolean;
 }
 
-export const ScrollBar = (props: IProps) => {
-  const { height = "100%", className, children, ...otherProps } = props;
-  return (
+export const ScrollBar = ({
+  height = "100%",
+  className,
+  children,
+  style,
+  scrollableNodeProps,
+  hideScrollbar = false,
+  $hideplaceholder = 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 ? (
+    <ScrollBarWrapper className={className}>
+      {children}
+    </ScrollBarWrapper>
+  ) : (
     <ScrollBarWrapper className={className}>
-      <SimpleBar forceVisible="y" style={{ height: height }} {...otherProps}>
+      <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
         {children}
       </SimpleBar>
     </ScrollBarWrapper>

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

@@ -75,6 +75,7 @@ const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
 
 interface ISectionConfig<T> {
   name?: string;
+  open?: boolean;
   width?: number;
   noMargin?: boolean;
   style?: React.CSSProperties;
@@ -103,7 +104,9 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
 export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   const { name } = props;
   const { compName, state, toggle } = useContext(PropertySectionContext);
-  const open = name ? state[compName]?.[name] !== false : true;
+  const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
+
+  // console.log("open", open, props.open);
 
   const handleToggle = () => {
     if (!name) {

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
-import { DataNode, TreeProps } from "antd/lib/tree";
-import DirectoryTree from "antd/lib/tree/DirectoryTree";
+import { DataNode, TreeProps } from "antd/es/tree";
+import DirectoryTree from "antd/es/tree/DirectoryTree";
 
 export const Treediv = styled.div<{ $height?: number }>`
   padding-left: 24px;

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

@@ -1,8 +1,10 @@
 import { CSSProperties } from "react";
-import { Ref } from "react";
-import ReactPlayer from "react-player";
+import { lazy, Ref } from "react";
+import type {default as ReactPlayerType} from "react-player";
 import styled from "styled-components";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 const Audio = styled(ReactPlayer)`
   height: 32px !important;
 `;
@@ -14,7 +16,7 @@ export function TacoAudio(props: {
   onEnded?: () => void;
   className?: string;
   style?: CSSProperties;
-  audioRef?: Ref<ReactPlayer>;
+  audioRef?: Ref<ReactPlayerType>;
   autoPlay?: boolean;
   loop?: boolean;
 }) {

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -1,6 +1,6 @@
 import { colord, extend } from "colord";
 import namesPlugin from "colord/plugins/names";
-import { generate } from "@ant-design/colors";
+import { generate } from "@ant-design/colors/es";
 
 extend([namesPlugin]);
 

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -1,26 +1,26 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 // import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
-import { Popover } from "antd";
-import { ActionType } from "@rc-component/trigger/lib/interface";
+import { default as Popover } from "antd/lib/popover";
+import type { ActionType } from "@rc-component/trigger/lib/interface";
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
 import { trans } from "i18n/design";
-import _ from "lodash";
+import { upperFirst, sortBy } from "lodash";
 import {
   ReactNode,
   useEffect,
   useCallback,
   useMemo,
   useRef,
   useState,
+  Suspense
 } from "react";
 import Draggable from "react-draggable";
-import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
+import { default as List, type ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
 import { ANTDICON } from "icons/antIcon";
-import { Divider } from "antd-mobile";
 
 const PopupContainer = styled.div`
   width: 580px;
@@ -141,7 +141,7 @@ class Icon {
   readonly title: string;
   constructor(readonly def: IconDefinition | any, readonly names: string[]) {
     if (def?.iconName) {
-      this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
+      this.title = def.iconName.split("-").map(upperFirst).join(" ");
     } else {
       this.title = names[0].slice(5);
       this.def = def;
@@ -231,7 +231,7 @@ function search(
     .toLowerCase()
     .split(/\s+/g)
     .filter((t) => t);
-  return _.sortBy(
+  return sortBy(
     Object.entries(allIcons).filter(([key, icon]) => {
       if (icon.names.length === 0) {
         return false;
@@ -297,7 +297,11 @@ const IconPopup = (props: {
                   onChangeIcon(key);
                 }}
               >
-                <IconWrapper>{icon.getView()}</IconWrapper>
+                <IconWrapper>
+                  <Suspense fallback={null}>
+                    {icon.getView()}
+                  </Suspense>
+                </IconWrapper>
                 <IconKeyDisplay>{key}</IconKeyDisplay>
               </IconItemContainer>
             </Tooltip>

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

@@ -1,9 +1,12 @@
 import { css } from "styled-components";
-import ReactMarkdown from "react-markdown";
+import { lazy } from "react";
+// import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
-import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+
+const ReactMarkdown = lazy(() => import('react-markdown'));
 
 export const markdownCompCss = css`
   .markdown-body {

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { default as Alert } from "antd/es/alert";
 import { ReactNode } from "react";
-import { AlertProps } from "antd/lib/alert";
+import { AlertProps } from "antd/es/alert";
 import { ToolTipLabel } from "./toolTip";
 import { DocLink } from "components/ExternalLink";
 

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

@@ -1,7 +1,10 @@
-import ReactPlayer from "react-player";
+// import ReactPlayer from "react-player";
+import { lazy } from 'react';
 import styled from "styled-components";
 import { videoPlayTriangle } from "icons";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 export const Video = styled(ReactPlayer)`
   height: 100% !important;
   width: 100% !important;