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

Commit203ea02

Browse files
fix theme not saving
1 parent9261b94 commit203ea02

File tree

4 files changed

+95
-78
lines changed

4 files changed

+95
-78
lines changed

‎client/packages/lowcoder/src/constants/routesURL.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const ORGANIZATION_SETTING = "/setting/organization";
1515
exportconstTHEME_SETTING="/setting/theme";
1616
exportconstPLUGINS_SETTING="/setting/plugins";
1717
exportconstTHEME_DETAIL="/setting/theme/detail";
18+
exportconstTHEME_DETAIL_URL=`${THEME_DETAIL}/:themeId`;
1819

1920
exportconstOAUTH_PROVIDER_SETTING="/setting/oauth-provider";
2021
exportconstOAUTH_PROVIDER_DETAIL="/setting/oauth-provider/detail";

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx‎

Lines changed: 76 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -87,50 +87,55 @@ type ThemeDetailPageProps = {
8787
themeList?:ThemeType[];
8888
orgId:string;
8989
location:Location&{state:LocationProp};
90+
match:any;
9091
};
9192

9293
typeThemeDetailPageState={
93-
name:string;
94-
theme:ThemeDetail;
94+
name?:string;
95+
theme?:ThemeDetail;
9596
canLeave:boolean;
9697
compDsl?:JSONObject;
9798
};
9899

99100
classThemeDetailPageextendsReact.Component<ThemeDetailPageProps,ThemeDetailPageState>{
100-
themeDefault:ThemeDetail;
101+
themeDefault?:ThemeDetail;
101102
readonlyid:string;
102-
readonlytype:string;
103+
//readonly type: string;
103104
readonlyinputRef:React.RefObject<InputRef>;
104105
footerRef=React.createRef<HTMLDivElement>();
105106

106107
constructor(props:ThemeDetailPageProps){
107108
super(props);
108-
const{ name, id, theme, type}=props.location.state||{};
109-
if(!name||!id||!theme||!type){
110-
history.replace(BASE_URL);
111-
window.location.reload();
112-
}
113-
114-
if(theme.chart){
115-
this.themeDefault=theme;
116-
}else{
117-
this.themeDefault={
118-
...theme,
119-
chart:undefined,
120-
};
121-
}
109+
this.id=this.props.match.params.themeId;
122110

123-
this.id=id;
124-
this.type=type;
125111
this.state={
126-
theme,
127-
name,
128112
canLeave:false,
129113
compDsl:undefined,
130114
};
131115
this.inputRef=React.createRef();
132116
}
133117

118+
findCurrentTheme(){
119+
constthemeDetail=this.props.themeList?.find(item=>item.id===this.id);
120+
this.setState({
121+
name:themeDetail?.name,
122+
theme:themeDetail?.theme,
123+
});
124+
this.themeDefault=themeDetail?.theme;
125+
}
126+
127+
componentDidMount(){
128+
if(this.props.themeList?.length){
129+
this.findCurrentTheme();
130+
}
131+
}
132+
133+
componentDidUpdate(prevProps:ThemeDetailPageProps,prevState:ThemeDetailPageState){
134+
if(prevProps.themeList?.length!==this.props.themeList?.length){
135+
this.findCurrentTheme();
136+
}
137+
}
138+
134139
handleReset(){
135140
this.setState({theme:this.themeDefault});
136141
}
@@ -164,6 +169,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
164169
}
165170

166171
configChange(params:configChangeParams){
172+
if(!this.state.theme)return;
173+
167174
this.setState({
168175
theme:{
169176
...this.state.theme,
@@ -194,25 +201,25 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
194201
settingsKey:'primary',
195202
name:trans('themeDetail.primary'),
196203
desc:trans('themeDetail.primaryDesc'),
197-
color:this.state.theme.primary,
204+
color:this.state.theme?.primary,
198205
},
199206
{
200207
settingsKey:'canvas',
201208
name:trans('themeDetail.canvas'),
202209
desc:trans('themeDetail.canvasDesc'),
203-
color:this.state.theme.canvas,
210+
color:this.state.theme?.canvas,
204211
},
205212
{
206213
settingsKey:'primarySurface',
207214
name:trans('themeDetail.primarySurface'),
208215
desc:trans('themeDetail.primarySurfaceDesc'),
209-
color:this.state.theme.primarySurface,
216+
color:this.state.theme?.primarySurface,
210217
},
211218
{
212219
settingsKey:'border',
213220
name:trans('themeDetail.borderColor'),
214221
desc:trans('themeDetail.borderColorDesc'),
215-
color:this.state.theme.border||this.state.theme.borderColor,
222+
color:this.state.theme?.border||this.state.theme?.borderColor,
216223
}
217224
]
218225
},
@@ -224,13 +231,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
224231
settingsKey:'textLight',
225232
name:trans('themeDetail.textLight'),
226233
desc:trans('themeDetail.textLightDesc'),
227-
color:this.state.theme.textLight,
234+
color:this.state.theme?.textLight,
228235
},
229236
{
230237
settingsKey:'textDark',
231238
name:trans('themeDetail.textDark'),
232239
desc:trans('themeDetail.textDarkDesc'),
233-
color:this.state.theme.textDark,
240+
color:this.state.theme?.textDark,
234241
}
235242
]
236243
}
@@ -245,7 +252,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
245252
name:trans('themeDetail.fontFamily'),
246253
desc:trans('themeDetail.fontFamilyDesc'),
247254
type:"fontFamily",
248-
value:this.state.theme.fontFamily,
255+
value:this.state.theme?.fontFamily,
249256
}
250257
]
251258
},
@@ -260,21 +267,21 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
260267
name:trans('themeDetail.borderRadius'),
261268
desc:trans('themeDetail.borderRadiusDesc'),
262269
type:"radius",
263-
value:this.state.theme.radius||this.state.theme.borderRadius,
270+
value:this.state.theme?.radius||this.state.theme?.borderRadius,
264271
},
265272
{
266273
settingsKey:'borderWidth',
267274
name:trans('themeDetail.borderWidth'),
268275
desc:trans('themeDetail.borderWidthDesc'),
269276
type:"borderWidth",
270-
value:this.state.theme.borderWidth,
277+
value:this.state.theme?.borderWidth,
271278
},
272279
{
273280
settingsKey:'borderStyle',
274281
name:trans('themeDetail.borderStyle'),
275282
desc:trans('themeDetail.borderStyleDesc'),
276283
type:"borderStyle",
277-
value:this.state.theme.borderStyle,
284+
value:this.state.theme?.borderStyle,
278285
}
279286
]
280287
},
@@ -286,26 +293,39 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
286293
name:trans('themeDetail.margin'),
287294
desc:trans('themeDetail.marginDesc'),
288295
type:"margin",
289-
value:this.state.theme.margin,
296+
value:this.state.theme?.margin,
290297
},
291298
{
292299
settingsKey:'padding',
293300
name:trans('themeDetail.padding'),
294301
desc:trans('themeDetail.paddingDesc'),
295302
type:"padding",
296-
value:this.state.theme.padding,
303+
value:this.state.theme?.padding,
297304
},
298305
{
299306
settingsKey:'gridColumns',
300307
name:trans('themeDetail.gridColumns'),
301308
desc:trans('themeDetail.gridColumnsDesc'),
302309
type:"gridColumns",
303-
value:this.state.theme.gridColumns,
310+
value:this.state.theme?.gridColumns,
304311
}
305312
]
306313
},
307314
];
308315

316+
if(!this.themeDefault){
317+
return(
318+
<Flexalign="center"justify="center"verticalstyle={{
319+
height:'300px',
320+
width:'400px',
321+
margin:'0 auto',
322+
}}>
323+
<h4>Oops! Theme not found.</h4>
324+
<buttononClick={()=>history.push(THEME_SETTING)}style={{background:'#4965f2',border:'1px solid #4965f2',color:'#ffffff',borderRadius:'6px'}}>Back to Themes</button>
325+
</Flex>
326+
)
327+
}
328+
309329
return(
310330
<>
311331
<Prompt
@@ -363,7 +383,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
363383
</List.Item>
364384
)}
365385
{item.items.map((colorItem)=>(
366-
<Tooltiptitle={colorItem.desc}placement="right">
386+
<Tooltipkey={colorItem.settingsKey}title={colorItem.desc}placement="right">
367387
<List.Itemkey={colorItem.settingsKey}>
368388
<ThemeSettingsSelector
369389
themeSettingKey={colorItem.settingsKey}
@@ -381,7 +401,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
381401
)}
382402
/>
383403
<Dividertype="vertical"style={{height:"610px"}}/>
384-
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme}dsl={dsl}/>
404+
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme!}dsl={dsl}/>
385405
</Flex>
386406
</Card>
387407
</ThemeSettingsView>
@@ -403,7 +423,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
403423
</List.Item>
404424
)}
405425
{item.items.map((layoutSettingsItem)=>(
406-
<Tooltiptitle={layoutSettingsItem.desc}placement="right">
426+
<Tooltipkey={layoutSettingsItem.settingsKey}title={layoutSettingsItem.desc}placement="right">
407427
<List.Itemkey={layoutSettingsItem.settingsKey}>
408428
{layoutSettingsItem.type=="fontFamily"&&
409429
<ThemeSettingsSelector
@@ -425,7 +445,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
425445
)}
426446
/>
427447
<Dividertype="vertical"style={{height:"610px"}}/>
428-
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme}dsl={dsl}/>
448+
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme!}dsl={dsl}/>
429449
</Flex>
430450
</Card>
431451
</ThemeSettingsView>
@@ -447,7 +467,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
447467
</List.Item>
448468
)}
449469
{item.items.map((layoutSettingsItem)=>(
450-
<Tooltiptitle={layoutSettingsItem.desc}placement="right">
470+
<Tooltipkey={layoutSettingsItem.settingsKey}title={layoutSettingsItem.desc}placement="right">
451471
<List.Itemkey={layoutSettingsItem.settingsKey}>
452472
{layoutSettingsItem.type=="radius"&&
453473
<ThemeSettingsSelector
@@ -516,7 +536,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
516536
)}
517537
/>
518538
<Dividertype="vertical"style={{height:"610px"}}/>
519-
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme}dsl={dsl}/>
539+
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme!}dsl={dsl}/>
520540
</Flex>
521541
</Card>
522542
</ThemeSettingsView>
@@ -534,18 +554,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
534554
styleKey:string,
535555
compStyle:Record<string,string>
536556
)=>{
537-
this.setState({
538-
theme:{
539-
...this.state.theme,
540-
components:{
541-
...this.state.theme.components,
542-
[compName]:{
543-
...this.state.theme.components?.[compName],
544-
[styleKey]:compStyle,
557+
if(this.state.theme){
558+
this.setState({
559+
theme:{
560+
...this.state.theme,
561+
components:{
562+
...this.state.theme.components,
563+
[compName]:{
564+
...this.state.theme.components?.[compName],
565+
[styleKey]:compStyle,
566+
}
545567
}
546-
}
547-
},
548-
});
568+
},
569+
});
570+
}
549571
}}
550572
/>
551573
</Card>
@@ -571,7 +593,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
571593
</List.Item>
572594
<List.Itemstyle={{width :"260px",height:"370px",padding:"10px"}}>
573595
<CodeEditor
574-
value={this.state.theme.chart||""}
596+
value={this.state.theme?.chart||""}
575597
onChange={(value)=>this.configChange({
576598
themeSettingKey:"chart",
577599
chart:value.doc.toString() ?value.doc.toString() :undefined,
@@ -585,7 +607,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
585607
</List>
586608
</ChartInput>
587609
<Dividertype="vertical"style={{height:"370px"}}/>
588-
<PreviewAppstyle={{height:"380px",width:"100%",margin:"0"}}theme={this.state.theme}dsl={chartDsl}/>
610+
<PreviewAppstyle={{height:"380px",width:"100%",margin:"0"}}theme={this.state.theme!}dsl={chartDsl}/>
589611
</Flex>
590612
</Card>
591613
</ThemeSettingsView>
Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import{Route,Switch}from"react-router";
22
importThemePagefrom"./themePage";
33
importThemeDetailPagefrom"./detail";
4-
import{THEME_DETAIL,THEME_SETTING}from"constants/routesURL";
4+
import{THEME_DETAIL_URL,THEME_SETTING}from"constants/routesURL";
5+
import{useDispatch,useSelector}from"react-redux";
6+
import{getUser}from"@lowcoder-ee/redux/selectors/usersSelectors";
7+
import{useEffect}from"react";
8+
import{fetchCommonSettings}from"@lowcoder-ee/redux/reduxActions/commonSettingsActions";
59

610
exportconstThemeHome=()=>{
11+
constdispatch=useDispatch();
12+
constuser=useSelector(getUser);
13+
constorgId=user.currentOrgId;
14+
15+
useEffect(()=>{
16+
dispatch(fetchCommonSettings({ orgId}));
17+
},[]);
18+
719
return(
820
<Switch>
921
<Routepath={THEME_SETTING}component={ThemePage}exact/>
10-
<Routepath={THEME_DETAIL}component={ThemeDetailPage}exact/>
22+
<Routepath={THEME_DETAIL_URL}component={ThemeDetailPage}exact/>
1123
</Switch>
1224
);
1325
};

‎client/packages/lowcoder/src/pages/setting/theme/themePage.tsx‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,6 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
4343
modalVisible:false,
4444
};
4545
}
46-
componentDidMount(){
47-
if(this.props.orgId){
48-
this.props.fetchCommonSettings(this.props.orgId);
49-
}
50-
}
51-
52-
componentDidUpdate(prevProps:ThemeProps,prevState:ThemeState){
53-
if(prevProps.orgId!==this.props.orgId){
54-
this.props.fetchCommonSettings(this.props.orgId);
55-
}
56-
}
5746

5847
GoDetail(params:ThemeType,themeList:ThemeType[],type:string){
5948
this.props.setCommonSettings({
@@ -62,10 +51,9 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
6251
key:"themeList",
6352
value:themeList,
6453
},
65-
});
66-
history.push({
67-
pathname:THEME_DETAIL,
68-
state:{ ...params, type},
54+
onSuccess:()=>{
55+
history.push(`${THEME_DETAIL}/${params.id}`)
56+
},
6957
});
7058
}
7159

@@ -152,13 +140,7 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
152140
this.copyTheme(info.themeId);
153141
break;
154142
caseMENU_TYPE.EDIT:
155-
history.push({
156-
pathname:THEME_DETAIL,
157-
state:{
158-
...this.props.themeList?.find((theme)=>theme.id===info.themeId),
159-
type:DETAIL_TYPE.EDIT,
160-
},
161-
});
143+
history.push(`${THEME_DETAIL}/${info.themeId}`)
162144
break;
163145
caseMENU_TYPE.RENAME:
164146
this.setCommonSettings(

0 commit comments

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