@@ -13,10 +13,13 @@ import {
1313RightPanelContentWrapper ,
1414} from "pages/editor/right/styledComponent" ;
1515import { tableDragClassName } from "pages/tutorials/tutorialsConstant" ;
16- import React , { useContext , useMemo } from "react" ;
16+ import React , { useContext , useMemo , useState } from "react" ;
1717import styled from "styled-components" ;
1818import {
1919BaseSection ,
20+ PropertySectionContext ,
21+ PropertySectionContextType ,
22+ PropertySectionState ,
2023labelCss ,
2124} from "lowcoder-design" ;
2225import { TransparentImg } from "../../../util/commonUtils" ;
@@ -83,8 +86,16 @@ const SectionWrapper = styled.div`
8386 }
8487` ;
8588
89+ const stateCompName = 'UICompSections' ;
90+ const initialState :PropertySectionState = { [ stateCompName ] :{ } } ;
91+ Object . keys ( uiCompCategoryNames ) . forEach ( ( cat ) => {
92+ const key = uiCompCategoryNames [ cat as UICompCategory ] ;
93+ initialState [ stateCompName ] [ key ] = key === uiCompCategoryNames . common
94+ } )
95+
8696export const UICompPanel = ( ) => {
8797const { onDrag, searchValue} = useContext ( RightContext ) ;
98+ const [ propertySectionState , setPropertySectionState ] = useState < PropertySectionState > ( initialState ) ;
8899
89100const categories = useMemo ( ( ) => {
90101const cats :Record < string , [ string , UICompManifest ] [ ] > = Object . fromEntries (
@@ -98,6 +109,22 @@ export const UICompPanel = () => {
98109return cats ;
99110} , [ ] ) ;
100111
112+ const propertySectionContextValue = useMemo < PropertySectionContextType > ( ( ) => {
113+ return {
114+ compName :stateCompName ,
115+ state :propertySectionState ,
116+ toggle :( compName :string , sectionName :string ) => {
117+ setPropertySectionState ( ( oldState ) => {
118+ const nextSectionState :PropertySectionState = { ...oldState } ;
119+ const compState = nextSectionState [ compName ] || { } ;
120+ compState [ sectionName ] = compState [ sectionName ] === false ;
121+ nextSectionState [ compName ] = compState ;
122+ return nextSectionState ;
123+ } ) ;
124+ } ,
125+ } ;
126+ } , [ propertySectionState ] ) ;
127+
101128const compList = useMemo (
102129( ) =>
103130Object . entries ( categories )
@@ -149,9 +176,20 @@ export const UICompPanel = () => {
149176[ categories , searchValue , onDrag ]
150177) ;
151178
179+ if ( ! compList . length ) return (
180+ < RightPanelContentWrapper >
181+ < EmptyCompContent />
182+ </ RightPanelContentWrapper >
183+ )
184+
152185return (
153186< RightPanelContentWrapper >
154- { compList . length > 0 ?compList :< EmptyCompContent /> }
187+ { /* {compList.length > 0 ? compList : <EmptyCompContent />} */ }
188+ < PropertySectionContext . Provider
189+ value = { propertySectionContextValue }
190+ >
191+ { compList }
192+ </ PropertySectionContext . Provider >
155193</ RightPanelContentWrapper >
156194) ;
157195} ;