Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb4e12f2

Browse files
authored
Merge pull request#533 from raheeliftikhar5/foldable-comps-sections
Right Panel: Foldable comps sections
2 parents5e065a7 +5fc8cdd commitb4e12f2

File tree

1 file changed

+75
-34
lines changed

1 file changed

+75
-34
lines changed

‎client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx‎

Lines changed: 75 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ import { draggingUtils } from "layout";
88
import{isEmpty}from"lodash";
99
import{language}from"i18n";
1010
import{
11-
ComListTitle,
1211
CompIconDiv,
1312
EmptyCompContent,
1413
RightPanelContentWrapper,
1514
}from"pages/editor/right/styledComponent";
1615
import{tableDragClassName}from"pages/tutorials/tutorialsConstant";
17-
importReact,{useContext,useMemo}from"react";
16+
importReact,{useContext,useMemo,useState}from"react";
1817
importstyledfrom"styled-components";
19-
import{labelCss}from"lowcoder-design";
18+
import{
19+
BaseSection,
20+
PropertySectionContext,
21+
PropertySectionContextType,
22+
PropertySectionState,
23+
labelCss,
24+
}from"lowcoder-design";
2025
import{TransparentImg}from"../../../util/commonUtils";
2126
import{RightContext}from"./rightContext";
2227

23-
constGrayLabel=(props:{label:string})=>{
24-
const{ label}=props;
25-
return<ComListTitle>{label}</ComListTitle>;
26-
};
27-
2828
constCompDiv=styled.div`
2929
display: flex;
3030
flex-direction: column;
@@ -80,16 +80,25 @@ const InsertContain = styled.div`
8080
gap: 8px;
8181
`;
8282

83-
constCategoryLabel=styled(GrayLabel)`
84-
margin: 0;
85-
`;
86-
8783
constSectionWrapper=styled.div`
88-
margin-bottom: 16px;
84+
.section-header {
85+
margin-left: 0;
86+
}
87+
&:not(:last-child){
88+
border-bottom: 1px solid #e1e3eb;
89+
}
8990
`;
9091

92+
conststateCompName='UICompSections';
93+
constinitialState:PropertySectionState={[stateCompName]:{}};
94+
Object.keys(uiCompCategoryNames).forEach((cat)=>{
95+
constkey=uiCompCategoryNames[catasUICompCategory];
96+
initialState[stateCompName][key]=key===uiCompCategoryNames.common
97+
})
98+
9199
exportconstUICompPanel=()=>{
92100
const{ onDrag, searchValue}=useContext(RightContext);
101+
const[propertySectionState,setPropertySectionState]=useState<PropertySectionState>(initialState);
93102

94103
constcategories=useMemo(()=>{
95104
constcats:Record<string,[string,UICompManifest][]>=Object.fromEntries(
@@ -103,6 +112,22 @@ export const UICompPanel = () => {
103112
returncats;
104113
},[]);
105114

115+
constpropertySectionContextValue=useMemo<PropertySectionContextType>(()=>{
116+
return{
117+
compName:stateCompName,
118+
state:propertySectionState,
119+
toggle:(compName:string,sectionName:string)=>{
120+
setPropertySectionState((oldState)=>{
121+
constnextSectionState:PropertySectionState={ ...oldState};
122+
constcompState=nextSectionState[compName]||{};
123+
compState[sectionName]=compState[sectionName]===false;
124+
nextSectionState[compName]=compState;
125+
returnnextSectionState;
126+
});
127+
},
128+
};
129+
},[propertySectionState]);
130+
106131
constcompList=useMemo(
107132
()=>
108133
Object.entries(categories)
@@ -122,36 +147,52 @@ export const UICompPanel = () => {
122147

123148
return(
124149
<SectionWrapperkey={index}>
125-
<CategoryLabellabel={uiCompCategoryNames[keyasUICompCategory]}/>
126-
<InsertContain>
127-
{infos.map((info)=>(
128-
<CompDivkey={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-
<IconContainIcon={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>
150+
<BaseSection
151+
noMargin
152+
width={288}
153+
name={uiCompCategoryNames[keyasUICompCategory]}
154+
>
155+
<InsertContain>
156+
{infos.map((info)=>(
157+
<CompDivkey={info[0]}className={info[0]==="table" ?tableDragClassName :""}>
158+
<HovDiv
159+
draggable
160+
onDragStart={(e)=>{
161+
e.dataTransfer.setData("compType",info[0]);
162+
e.dataTransfer.setDragImage(TransparentImg,0,0);
163+
draggingUtils.setData("compType",info[0]);
164+
onDrag(info[0]);
165+
}}
166+
>
167+
<IconContainIcon={info[1].icon}></IconContain>
168+
</HovDiv>
169+
<CompNameLabel>{info[1].name}</CompNameLabel>
170+
{language!=="en"&&<CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
171+
</CompDiv>
172+
))}
173+
</InsertContain>
174+
</BaseSection>
145175
</SectionWrapper>
146176
);
147177
})
148178
.filter((t)=>t!=null),
149179
[categories,searchValue,onDrag]
150180
);
151181

182+
if(!compList.length)return(
183+
<RightPanelContentWrapper>
184+
<EmptyCompContent/>
185+
</RightPanelContentWrapper>
186+
)
187+
152188
return(
153189
<RightPanelContentWrapper>
154-
{compList.length>0 ?compList :<EmptyCompContent/>}
190+
{/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
191+
<PropertySectionContext.Provider
192+
value={propertySectionContextValue}
193+
>
194+
{compList}
195+
</PropertySectionContext.Provider>
155196
</RightPanelContentWrapper>
156197
);
157198
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp