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

Commit12f2485

Browse files
optimise shared components
1 parentf1fbb60 commit12f2485

File tree

4 files changed

+224
-142
lines changed

4 files changed

+224
-142
lines changed
Lines changed: 103 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{useContext,useEffect,useState}from"react";
1+
importReact,{useContext,useEffect,useState,useCallback,useMemo}from"react";
22
importstyledfrom"styled-components";
33
import{PointIcon,SearchOutlinedIcon}from"lowcoder-design/src/icons";
44
importtype{EditPopoverItemType}from'lowcoder-design/src/components/popover';
@@ -72,89 +72,100 @@ interface Iprops {
7272
search?:{searchText:string;setSearchText:(t:string)=>void};
7373
}
7474

75-
exportconstCompName=(props:Iprops)=>{
75+
exportconstCompName=React.memo((props:Iprops)=>{
7676
const[error,setError]=useState<string|undefined>(undefined);
7777
const[editing,setEditing]=useState(false);
7878
const[upgrading,setUpgrading]=useState(false);
79+
const[showSearch,setShowSearch]=useState<boolean>(false);
80+
7981
consteditorState=useContext(EditorContext);
80-
constselectedComp=values(editorState.selectedComps())[0];
81-
constcompType=selectedComp.children.compType.getView()asUICompType;
82-
constcompInfo=parseCompType(compType);
83-
constdocUrl=getComponentDocUrl(compType);
84-
constplaygroundUrl=getComponentPlaygroundUrl(compType);
85-
86-
constitems:EditPopoverItemType[]=[];
87-
88-
// Falk: TODO - Implement upgrade for individual Version functionality
89-
consthandleUpgrade=async()=>{
90-
if(upgrading){
91-
return;
92-
}
82+
constselectedComp=useMemo(()=>values(editorState.selectedComps())[0],[editorState]);
83+
constcompType=useMemo(()=>selectedComp.children.compType.getView()asUICompType,[selectedComp]);
84+
constcompInfo=useMemo(()=>parseCompType(compType),[compType]);
85+
constdocUrl=useMemo(()=>getComponentDocUrl(compType),[compType]);
86+
constplaygroundUrl=useMemo(()=>getComponentPlaygroundUrl(compType),[compType]);
87+
88+
// Cleanup on unmount
89+
useEffect(()=>{
90+
return()=>{
91+
setError(undefined);
92+
setEditing(false);
93+
setUpgrading(false);
94+
setShowSearch(false);
95+
};
96+
},[]);
97+
98+
// Reset search when name changes
99+
useEffect(()=>{
100+
setShowSearch(false);
101+
},[props.name]);
102+
103+
consthandleUpgrade=useCallback(async()=>{
104+
if(upgrading)return;
93105
setUpgrading(true);
94-
awaitGridCompOperator.upgradeCurrentComp(editorState);
95-
setUpgrading(false);
96-
};
97-
98-
if(docUrl){
99-
items.push({
100-
text:trans("comp.menuViewDocs"),
101-
onClick:()=>{
102-
window.open(docUrl,"_blank");
103-
},
104-
});
105-
}
106+
try{
107+
awaitGridCompOperator.upgradeCurrentComp(editorState);
108+
}finally{
109+
setUpgrading(false);
110+
}
111+
},[upgrading,editorState]);
106112

107-
if(playgroundUrl){
108-
items.push({
109-
text:trans("comp.menuViewPlayground"),
110-
onClick:()=>{
111-
window.open(playgroundUrl,"_blank");
112-
},
113-
});
114-
}
113+
consthandleRename=useCallback((value:string)=>{
114+
if(editorState.rename(props.name,value)){
115+
editorState.setSelectedCompNames(newSet([value]));
116+
setError(undefined);
117+
}
118+
},[editorState,props.name]);
115119

120+
consthandleSearchChange=useCallback((e:React.ChangeEvent<HTMLInputElement>)=>{
121+
props.search?.setSearchText(e.target.value);
122+
},[props.search]);
116123

117-
if(compInfo.isRemote){
118-
// Falk: Displaying the current version of the component
119-
items.push({
120-
text:trans("history.currentVersion")+": "+compInfo.packageVersion,
121-
onClick:()=>{
122-
},
123-
});
124-
// items.push({
125-
// text: trans("history.currentVersion") + ": " + compInfo.packageVersion,
126-
// onClick: () => {
127-
128-
// },
129-
// });
130-
131-
items.push({
132-
text:trans("comp.menuUpgradeToLatest"),
133-
onClick:()=>{
134-
handleUpgrade();
135-
},
136-
137-
});
138-
}
124+
consthandleSearchToggle=useCallback(()=>{
125+
setShowSearch(prev=>!prev);
126+
props.search?.setSearchText("");
127+
},[props.search]);
139128

140-
const[showSearch,setShowSearch]=useState<boolean>(false);
141-
const{ search}=props;
142-
useEffect(()=>{
143-
setShowSearch(false);
144-
},[props.name]);
145-
constcompName=(
146-
<CompDiv$width={props.width}$hasSearch={!!search}$showSearch={showSearch}>
129+
constitems=useMemo<EditPopoverItemType[]>(()=>{
130+
constmenuItems:EditPopoverItemType[]=[];
131+
132+
if(docUrl){
133+
menuItems.push({
134+
text:trans("comp.menuViewDocs"),
135+
onClick:()=>window.open(docUrl,"_blank"),
136+
});
137+
}
138+
139+
if(playgroundUrl){
140+
menuItems.push({
141+
text:trans("comp.menuViewPlayground"),
142+
onClick:()=>window.open(playgroundUrl,"_blank"),
143+
});
144+
}
145+
146+
if(compInfo.isRemote){
147+
menuItems.push({
148+
text:trans("history.currentVersion")+": "+compInfo.packageVersion,
149+
onClick:()=>{},
150+
});
151+
152+
menuItems.push({
153+
text:trans("comp.menuUpgradeToLatest"),
154+
onClick:handleUpgrade,
155+
});
156+
}
157+
158+
returnmenuItems;
159+
},[docUrl,playgroundUrl,compInfo,handleUpgrade]);
160+
161+
constcompName=useMemo(()=>(
162+
<CompDiv$width={props.width}$hasSearch={!!props.search}$showSearch={showSearch}>
147163
<div>
148164
<EditText
149165
text={props.name}
150-
onFinish={(value)=>{
151-
if(editorState.rename(props.name,value)){
152-
editorState.setSelectedCompNames(newSet([value]));
153-
setError(undefined);
154-
}
155-
}}
166+
onFinish={handleRename}
156167
onChange={(value)=>setError(editorState.checkRename(props.name,value))}
157-
onEditStateChange={(editing)=>setEditing(editing)}
168+
onEditStateChange={setEditing}
158169
/>
159170
<PopupCard
160171
editorFocus={!!error&&editing}
@@ -163,16 +174,13 @@ export const CompName = (props: Iprops) => {
163174
hasError={!!error}
164175
/>
165176
</div>
166-
{!!search&&(
177+
{!!props.search&&(
167178
<SearchIcon
168-
onClick={()=>{
169-
setShowSearch(!showSearch);
170-
search?.setSearchText("");
171-
}}
179+
onClick={handleSearchToggle}
172180
style={{color:showSearch ?"#315EFB" :"#8B8FA3"}}
173181
/>
174182
)}
175-
{compType==="module" ?(
183+
{compType==="module" ?(
176184
<EditPopover
177185
items={items}
178186
edit={()=>GridCompOperator.editComp(editorState)}
@@ -189,19 +197,32 @@ export const CompName = (props: Iprops) => {
189197
</EditPopover>
190198
)}
191199
</CompDiv>
192-
);
200+
),[
201+
props.width,
202+
props.search,
203+
props.name,
204+
showSearch,
205+
error,
206+
editing,
207+
compType,
208+
items,
209+
editorState,
210+
handleRename,
211+
handleSearchToggle
212+
]);
213+
193214
return(
194215
<div>
195216
{compName}
196-
{search&&showSearch&&(
217+
{props.search&&showSearch&&(
197218
<Search
198219
placeholder={trans("comp.searchProp")}
199-
value={search.searchText}
200-
onChange={(e)=>search.setSearchText(e.target.value)}
220+
value={props.search.searchText}
221+
onChange={handleSearchChange}
201222
allowClear={true}
202223
style={{padding:"0 16px",margin:"0 0 4px 0"}}
203224
/>
204225
)}
205226
</div>
206227
);
207-
};
228+
});

‎client/packages/lowcoder/src/components/Tabs.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{defaultasAntdTabs}from"antd/es/tabs";
22
import{GreyTextColor,TabActiveColor}from"constants/style";
3-
import{ReactNode}from"react";
3+
import{ReactNode,memo}from"react";
44
importstyledfrom"styled-components";
55

66
exportconstTabs=styled(AntdTabs)`
@@ -52,12 +52,14 @@ interface TabTitleProps {
5252
text:ReactNode;
5353
}
5454

55-
exportconstTabTitle=functionTabTitle(props:TabTitleProps){
55+
exportconstTabTitle=memo(functionTabTitle(props:TabTitleProps){
5656
const{ icon, text}=props;
5757
return(
5858
<TabTitleWrapper>
5959
{icon&&<IconWrapper>{icon}</IconWrapper>}
6060
{text}
6161
</TabTitleWrapper>
6262
);
63-
};
63+
});
64+
65+
TabTitle.displayName='TabTitle';

0 commit comments

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