optimise lowcoder-design components

lowcoder-org · FalkWolsky · May 22, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
commit 9cac3cf7183bd3094e89bebe2410fbdb6440a977
diff --git a/client/packages/lowcoder-design/src/components/Modal/handler.tsx b/client/packages/lowcoder-design/src/components/Modal/handler.tsx
@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { memo, useMemo } from "react";
 
 type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
 type ReactRef<T extends HTMLElement> = {
@@ -83,8 +84,11 @@ const ResizeHandle = styled.div<{ $axis: string }>`
   ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
-const Handle = (axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} $axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
-};
+// Memoize Handle component
+const Handle = memo((axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
+  return <ResizeHandle ref={ref} $axis={axis} className="react-resizable-handle" />;
+});
+
+Handle.displayName = 'Handle';
 
 export default Handle;
diff --git a/client/packages/lowcoder-design/src/components/Modal/index.tsx b/client/packages/lowcoder-design/src/components/Modal/index.tsx
@@ -1,5 +1,5 @@
 import { default as AntdModal, ModalProps as AntdModalProps } from "antd/es/modal";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
 import { useResizeDetector } from "react-resize-detector";
 import Handle from "./handler";
@@ -39,45 +39,60 @@ export function Modal(props: ModalProps) {
 
   const [width, setWidth] = useState<number>();
   const [height, setHeight] = useState<number>();
+
+  // Memoize style object
+  const modalStyles = useMemo(() => ({
+    body: {
+      height: height ?? modalHeight,
+      ...styles?.body,
+    }
+  }), [height, modalHeight, styles?.body]);
+
+  // Memoize event handlers
+  const handleResizeStart = useCallback((event: React.SyntheticEvent, { node, size, handle }: { node: HTMLElement; size: { width: number; height: number }; handle: ResizeHandle }) => {
+    props.onResizeStart?.(event, node, size, handle);
+  }, [props.onResizeStart]);
+
+  const handleResize = useCallback((event: React.SyntheticEvent, { node, size, handle }: { node: HTMLElement; size: { width: number; height: number }; handle: ResizeHandle }) => {
+    setWidth(size.width);
+    setHeight(size.height);
+    props.onResize?.(event, node, size, handle);
+  }, [props.onResize]);
+
+  const handleResizeStop = useCallback((event: React.SyntheticEvent, { node, size, handle }: { node: HTMLElement; size: { width: number; height: number }; handle: ResizeHandle }) => {
+    props.onResizeStop?.(event, node, size, handle);
+  }, [props.onResizeStop]);
+
   useEffect(() => {
     setWidth(undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modalWidth]);
+
   useEffect(() => {
     setHeight(undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modalHeight]);
 
   const { width: detectWidth, height: detectHeight, ref } = useResizeDetector();
-  // log.info("Modal. modalWidth: ", modalWidth, " width: ", size?.w, " detectWidth: ", detectWidth);
+
+  // Memoize Resizable props
+  const resizableProps = useMemo(() => ({
+    width: width ?? detectWidth ?? 0,
+    height: height ?? detectHeight ?? 0,
+    resizeHandles,
+    handle: Handle,
+    onResizeStart: handleResizeStart,
+    onResize: handleResize,
+    onResizeStop: handleResizeStop
+  }), [width, detectWidth, height, detectHeight, resizeHandles, handleResizeStart, handleResize, handleResizeStop]);
+
   return (
     <AntdModal
       width={width ?? modalWidth}
-      styles={{ 
-        body: {
-          height: height ?? modalHeight,
-          ...styles?.body,
-        }
-      }}
+      styles={modalStyles}
       {...otherProps}
     >
-      <Resizable
-        width={width ?? detectWidth ?? 0}
-        height={height ?? detectHeight ?? 0}
-        resizeHandles={resizeHandles}
-        handle={Handle}
-        onResizeStart={(event, { node, size, handle }) =>
-          props.onResizeStart?.(event, node, size, handle)
-        }
-        onResize={(event, { node, size, handle }) => {
-          setWidth(size.width);
-          setHeight(size.height);
-          props.onResize?.(event, node, size, handle);
-        }}
-        onResizeStop={(event, { node, size, handle }) =>
-          props.onResizeStop?.(event, node, size, handle)
-        }
-      >
+      <Resizable {...resizableProps}>
         <div ref={ref} style={{ height: "100%" }}>
           {children}
         </div>

diff --git a/client/packages/lowcoder-design/src/components/ScrollBar.tsx b/client/packages/lowcoder-design/src/components/ScrollBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import SimpleBar from "simplebar-react";
 import styled from "styled-components";
 import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's DebouncedFunc type
@@ -57,7 +57,7 @@ interface IProps {
   children: React.ReactNode;
   className?: string;
   height?: string;
-  overflow?:string,
+  overflow?: string,
   style?: React.CSSProperties; // Add this line to include a style prop
   scrollableNodeProps?: {
     onScroll: DebouncedFunc<(e: any) => void>;
@@ -68,7 +68,7 @@ interface IProps {
   suffixNode?: React.ReactNode;
 }
 
-export const ScrollBar = ({
+export const ScrollBar = React.memo(({
   className,
   children,
   style,
@@ -80,31 +80,46 @@ export const ScrollBar = ({
   suffixNode,
   ...otherProps
 }: IProps) => {
-  const height = style?.height ?? '100%';
-  // You can now use the style prop directly or pass it to SimpleBar
-  const combinedStyle = { ...style, height }; // Example of combining height with passed style
+  // Memoize the combined style to prevent unnecessary re-renders
+  const combinedStyle = useMemo(() => {
+    const height = style?.height ?? '100%';
+    return { ...style, height };
+  }, [style]);
+
+  // Memoize the render function to prevent recreation on every render
+  const renderContent = useCallback(({ scrollableNodeProps, contentNodeProps }: any) => (
+    <div {...scrollableNodeProps}>
+      {prefixNode}
+      <div {...contentNodeProps}>
+        {children}
+      </div>
+      {suffixNode}
+    </div>
+  ), [prefixNode, children, suffixNode]);
 
   return hideScrollbar ? (
-    <ScrollBarWrapper className={className}>
+    <ScrollBarWrapper 
+      className={className} 
+      $hideplaceholder={$hideplaceholder}
+      $overflow={overflow}
+    >
       {prefixNode}
       {children}
       {suffixNode}
     </ScrollBarWrapper>
   ) : (
-    <ScrollBarWrapper className={className}>
-      <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
-        {({ scrollableNodeProps, contentNodeProps }) => {
-          return (
-            <div {...scrollableNodeProps as any}>
-              {prefixNode}
-              <div {...contentNodeProps as any}>
-                {children}
-              </div>
-              {suffixNode}
-            </div>
-          );
-        }}
+    <ScrollBarWrapper 
+      className={className}
+      $hideplaceholder={$hideplaceholder}
+      $overflow={overflow}
+    >
+      <SimpleBar 
+        style={combinedStyle} 
+        scrollableNodeProps={scrollableNodeProps} 
+        {...otherProps}
+      >
+        {renderContent}
       </SimpleBar>
     </ScrollBarWrapper>
   );
-};
+});
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -1,5 +1,5 @@
 import { trans } from "i18n/design";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext, useCallback, useMemo } from "react";
 import styled from "styled-components";
 import { ReactComponent as Packup } from "icons/v1/icon-Pack-up.svg";
 import { labelCss } from "./Label";
@@ -14,6 +14,7 @@ const SectionItem = styled.div<{ $width?: number }>`
     border-bottom: none;
   }
 `;
+
 const SectionLabel = styled.div`
   ${labelCss};
   flex-grow: 1;
@@ -64,6 +65,10 @@ const SectionLabelDiv = styled.div`
   }
 `;
 
+const ButtonContainer = styled.div`
+  display: flex;
+`;
+
 const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
   display: ${(props) => props.$show || "none"};
   flex-direction: column;
@@ -80,6 +85,7 @@ const TooltipWrapper = styled.span`
   white-space: pre-wrap;
   color:#fff;
 `;
+
 interface ISectionConfig<T> {
   name?: string;
   open?: boolean;
@@ -109,59 +115,67 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
   state: {},
 });
 
-export const BaseSection = (props: ISectionConfig<ReactNode>) => {
-  const { name,hasTooltip } = props;
+const TOOLTIP_CONTENT = (
+  <TooltipWrapper>
+    Here you can enter the animation type codes. Like bounce, swing or
+    tada. Read more about all possible codes at:{" "}
+    <a href="https://animate.style">https://animate.style</a>
+  </TooltipWrapper>
+);
+
+export const BaseSection = React.memo((props: ISectionConfig<ReactNode>) => {
+  const { name, hasTooltip } = props;
   const { compName, state, toggle } = useContext(PropertySectionContext);
   const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
 
-  // console.log("open", open, props.open);
-
-  const handleToggle = () => {
+  const handleToggle = useCallback(() => {
     if (!name) {
       return;
     }
     toggle(compName, name);
-  };
+  }, [name, compName, toggle]);
+
+  const tooltipContent = useMemo(() => hasTooltip ? TOOLTIP_CONTENT : null, [hasTooltip]);
+
+  const getPopupContainer = useCallback((node: HTMLElement) => {
+    return (node.closest('.react-grid-item') as HTMLElement) || document.body;
+  }, []);
 
   return (
     <SectionItem $width={props.width} style={props.style}>
       {props.name && (
         <SectionLabelDiv onClick={handleToggle} className={'section-header'}>
           <SectionLabel>{props.name}</SectionLabel>
-          <div style={{display: 'flex'}}>
+          <ButtonContainer>
             {open && props.additionalButton}
             <PackupIcon deg={open ? 'rotate(0deg)' : 'rotate(180deg)'} />
-          </div>
+          </ButtonContainer>
         </SectionLabelDiv>
       )}
       <Tooltip
-        title={
-          hasTooltip && (
-            <TooltipWrapper>
-              Here you can enter the animation type codes. Like bounce, swing or
-              tada. Read more about all possible codes at:{" "}
-              <a href="https://animate.style">https://animate.style</a>
-            </TooltipWrapper>
-          )
-        }
+        title={tooltipContent}
         arrow={{
           pointAtCenter: true,
         }}
         placement="top"
         color="#2c2c2c"
-        getPopupContainer={(node: any) => node.closest('.react-grid-item')}
+        getPopupContainer={getPopupContainer}
       >
         <ShowChildren $show={open ? 'flex' : 'none'} $noMargin={props.noMargin}>
           {props.children}
         </ShowChildren>
       </Tooltip>
     </SectionItem>
   );
-};
+});
 
-export function Section(props: ISectionConfig<ControlNode>) {
+BaseSection.displayName = 'BaseSection';
+
+export const Section = React.memo((props: ISectionConfig<ControlNode>) => {
   return controlItem({ filterText: props.name, searchChild: true }, <BaseSection {...props} />);
-}
+});
+
+Section.displayName = 'Section';
 
 // common section names
 export const sectionNames = {

diff --git a/client/packages/lowcoder-design/src/components/Tab.tsx b/client/packages/lowcoder-design/src/components/Tab.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 
 const HeaderDiv = styled.div`
   width: 312px;
@@ -79,26 +79,42 @@ interface ITabs {
   activeKey: string;
 }
 
-const Tabs = (props: ITabs) => {
+const Tabs = React.memo((props: ITabs) => {
   const { onChange, tabsConfig, activeKey } = props;
-  const activeTab = tabsConfig.find((c) => c.key === activeKey) || tabsConfig[0];
+
+  const activeTab = useMemo(() => 
+    tabsConfig.find((c) => c.key === activeKey) || tabsConfig[0],
+    [tabsConfig, activeKey]
+  );
+
+  const handleTabClick = useCallback((key: string) => {
+    onChange(key);
+  }, [onChange]);
+
+  const renderTab = useCallback((tab: ITabsConfig) => {
+    const isActive = activeTab.key === tab.key;
+    return (
+      <IconAndName 
+        key={tab.key} 
+        onClick={() => handleTabClick(tab.key)} 
+        $isActive={isActive}
+      >
+        {tab.icon}
+        <Text $color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
+      </IconAndName>
+    );
+  }, [activeTab.key, handleTabClick]);
 
   return (
     <>
       <HeaderDiv>
-        {props.tabsConfig.map((tab) => {
-          const isActive = activeTab.key === tab.key;
-          return (
-            <IconAndName key={tab.key} onClick={() => onChange(tab.key)} $isActive={isActive}>
-              {tab.icon}
-              <Text $color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
-            </IconAndName>
-          );
-        })}
+        {tabsConfig.map(renderTab)}
       </HeaderDiv>
       <ChildDiv>{activeTab.content}</ChildDiv>
     </>
   );
-};
+});
+
+Tabs.displayName = 'Tabs';
 
 export { Tabs };