@@ -8,23 +8,20 @@ import { draggingUtils } from "layout";
88import { isEmpty } from "lodash" ;
99import { language } from "i18n" ;
1010import {
11- ComListTitle ,
1211CompIconDiv ,
1312EmptyCompContent ,
1413RightPanelContentWrapper ,
1514} from "pages/editor/right/styledComponent" ;
1615import { tableDragClassName } from "pages/tutorials/tutorialsConstant" ;
1716import React , { useContext , useMemo } from "react" ;
1817import styled from "styled-components" ;
19- import { labelCss } from "lowcoder-design" ;
18+ import {
19+ BaseSection ,
20+ labelCss ,
21+ } from "lowcoder-design" ;
2022import { TransparentImg } from "../../../util/commonUtils" ;
2123import { RightContext } from "./rightContext" ;
2224
23- const GrayLabel = ( props :{ label :string } ) => {
24- const { label} = props ;
25- return < ComListTitle > { label } </ ComListTitle > ;
26- } ;
27-
2825const CompDiv = styled . div `
2926 display: flex;
3027 flex-direction: column;
@@ -80,12 +77,10 @@ const InsertContain = styled.div`
8077 gap: 8px;
8178` ;
8279
83- const CategoryLabel = styled ( GrayLabel ) `
84- margin: 0;
85- ` ;
86-
8780const SectionWrapper = styled . div `
88- margin-bottom: 16px;
81+ .section-header {
82+ margin-left: 0;
83+ }
8984` ;
9085
9186export const UICompPanel = ( ) => {
@@ -122,26 +117,31 @@ export const UICompPanel = () => {
122117
123118return (
124119< SectionWrapper key = { index } >
125- < CategoryLabel label = { uiCompCategoryNames [ key as UICompCategory ] } />
126- < InsertContain >
127- { infos . map ( ( info ) => (
128- < CompDiv key = { info [ 0 ] } className = { info [ 0 ] === "table" ?tableDragClassName :"" } >
129- < HovDiv
130- draggable
131- onDragStart = { ( e ) => {
132- e . dataTransfer . setData ( "compType" , info [ 0 ] ) ;
133- e . dataTransfer . setDragImage ( TransparentImg , 0 , 0 ) ;
134- draggingUtils . setData ( "compType" , info [ 0 ] ) ;
135- onDrag ( info [ 0 ] ) ;
136- } }
137- >
138- < IconContain Icon = { info [ 1 ] . icon } > </ IconContain >
139- </ HovDiv >
140- < CompNameLabel > { info [ 1 ] . name } </ CompNameLabel >
141- { language !== "en" && < CompEnNameLabel > { info [ 1 ] . enName } </ CompEnNameLabel > }
142- </ CompDiv >
143- ) ) }
144- </ InsertContain >
120+ < BaseSection
121+ noMargin
122+ width = { 288 }
123+ name = { uiCompCategoryNames [ key as UICompCategory ] }
124+ >
125+ < InsertContain >
126+ { infos . map ( ( info ) => (
127+ < CompDiv key = { info [ 0 ] } className = { info [ 0 ] === "table" ?tableDragClassName :"" } >
128+ < HovDiv
129+ draggable
130+ onDragStart = { ( e ) => {
131+ e . dataTransfer . setData ( "compType" , info [ 0 ] ) ;
132+ e . dataTransfer . setDragImage ( TransparentImg , 0 , 0 ) ;
133+ draggingUtils . setData ( "compType" , info [ 0 ] ) ;
134+ onDrag ( info [ 0 ] ) ;
135+ } }
136+ >
137+ < IconContain Icon = { info [ 1 ] . icon } > </ IconContain >
138+ </ HovDiv >
139+ < CompNameLabel > { info [ 1 ] . name } </ CompNameLabel >
140+ { language !== "en" && < CompEnNameLabel > { info [ 1 ] . enName } </ CompEnNameLabel > }
141+ </ CompDiv >
142+ ) ) }
143+ </ InsertContain >
144+ </ BaseSection >
145145</ SectionWrapper >
146146) ;
147147} )