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

Commit1cd0379

Browse files
authored
Merge pull request#1217 from lowcoder-org/theme-style-fixes
[WIP] Theme style fixes relative to active/inactive preventOverwriteStyles flag
2 parents61261a0 +9481da0 commit1cd0379

File tree

9 files changed

+59
-27
lines changed

9 files changed

+59
-27
lines changed

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { trans } from "i18n";
2929
import{ControlNode}from"lowcoder-design";
3030
import{StringControl}from"comps/controls/codeControl";
3131
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
32+
import{useMergeCompStyles}from"@lowcoder-ee/util/hooks";
3233

3334
constchildrenMap={
3435
header:SimpleContainerComp,
@@ -65,6 +66,7 @@ const childrenMap = {
6566
// Compatible with old style data 2022-8-15
6667
constlayoutBaseComp=migrateOldData(
6768
newMultiCompBuilder(childrenMap,(props,dispatch)=>{
69+
useMergeCompStyles(props,dispatch);
6870
return{ ...props, dispatch};
6971
}).build(),
7072
fixOldStyleData

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design";
3333
importReact,{Children,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";
3434
import{Resizable}from"react-resizable";
3535
importstyled,{css}from"styled-components";
36-
import{useUserViewMode}from"util/hooks";
36+
import{useMergeCompStyles,useUserViewMode}from"util/hooks";
3737
import{TableImplComp}from"./tableComp";
3838
import{useResizeDetector}from"react-resize-detector";
3939
import{SlotConfigContext}from"comps/controls/slotControl";
@@ -903,7 +903,6 @@ export function TableCompView(props: {
903903
updateEmptyRows();
904904
},[updateEmptyRows]);
905905

906-
907906
constpageDataInfo=useMemo(()=>{
908907
// Data pagination
909908
letpagedData=data;
@@ -928,6 +927,11 @@ export function TableCompView(props: {
928927

929928
constchildrenProps=childrenToProps(comp.children);
930929

930+
useMergeCompStyles(
931+
childrenPropsasRecord<string,any>,
932+
comp.dispatch
933+
);
934+
931935
consthandleChangeEvent=useCallback(
932936
(eventName:TableEventOptionValues)=>{
933937
if(eventName==="saveChanges"&&!compChildren.onEvent.isBind(eventName)){

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
2828
import{trans}from"i18n";
2929
import{ControlNode}from"lowcoder-design";
3030
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
31+
import{useMergeCompStyles}from"@lowcoder-ee/util/hooks";
3132

3233
constchildrenMap={
3334
header:SimpleContainerComp,
@@ -53,6 +54,7 @@ const childrenMap = {
5354
// Compatible with old style data 2022-8-15
5455
constTriContainerBaseComp=migrateOldData(
5556
newMultiCompBuilder(childrenMap,(props,dispatch)=>{
57+
useMergeCompStyles(props,dispatch);
5658
return{ ...props, dispatch};
5759
}).build(),
5860
fixOldStyleData

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -673,10 +673,10 @@ function calcColors<ColorMap extends Record<string, string>>(
673673
themeWithDefault.textDark,
674674
themeWithDefault.textLight
675675
);
676-
}elseif(config?.depType===DEP_TYPE.SELF&&config.depTheme==="canvas"&&bgColor){
677-
res[name]=bgColor;
678676
}elseif((config?.depType||config?.depName)&&compTheme?.[name]){
679677
res[name]=compTheme[name];
678+
}elseif(config?.depType===DEP_TYPE.SELF&&config.depTheme==="canvas"&&bgColor){
679+
res[name]=bgColor;
680680
}else{
681681
constrest=[];
682682
config.depName&&rest.push(res[config.depName]);
@@ -900,22 +900,21 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
900900

901901
constappSettingsComp=editorState?.getAppSettingsComp();
902902
constpreventAppStylesOverwriting=appSettingsComp?.getView()?.preventAppStylesOverwriting;
903-
const{ appliedThemeId, preventStyleOverwriting}=comp?.comp?.container||comp?.comp||{};
903+
const{ appliedThemeId, preventStyleOverwriting}=(comp?.comp||{});
904904
constappTheme=isPreviewTheme||isDefaultTheme||(!preventStyleOverwriting&&!preventAppStylesOverwriting)
905905
?theme?.theme
906906
:defaultTheme;
907-
constcompTheme=isPreviewTheme||isDefaultTheme||(compType&&!preventStyleOverwriting&&!preventAppStylesOverwriting)
908-
?{
909-
...(omit(defaultTheme,'components','chart')),
910-
...defaultTheme.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
911-
...(omit(theme?.theme,'components','chart')),
912-
...theme?.theme?.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
913-
// ...(
914-
// theme?.theme?.components?.[compType]?.[styleKey]
915-
// // || defaultTheme.components?.[compType]?.[styleKey]
916-
// ) as unknown as Record<string, string>
917-
}
918-
:defaultTheme.components?.[compType]?.[styleKey];
907+
letcompTheme:JSONValue|undefined={};
908+
if(appliedThemeId!==themeId){
909+
compTheme=isPreviewTheme||isDefaultTheme||(compType&&!preventStyleOverwriting&&!preventAppStylesOverwriting)
910+
?{
911+
...(omit(defaultTheme,'components','chart')),
912+
...defaultTheme.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
913+
...(omit(theme?.theme,'components','chart')),
914+
...theme?.theme?.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
915+
}
916+
:defaultTheme.components?.[compType]?.[styleKey];
917+
}
919918
conststyleProps=(!comp&&!compType)||preventStyleOverwriting||preventAppStylesOverwriting||appliedThemeId===themeId
920919
?propsasColorMap
921920
:{}asColorMap;

‎client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ const UIView = React.memo((props: {
290290
}
291291

292292
useMergeCompStyles(
293-
childrenJsonPropsasRecord<string,any>,
293+
childrenPropsasRecord<string,any>,
294294
comp.dispatch
295295
);
296296

‎client/packages/lowcoder/src/comps/hooks/hookComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ const TitleHookComp = withPropertyViewFn(TitleTmp2Comp, (comp) => {
8888
);
8989
});
9090
constbuiltInRemoteComps:Omit<RemoteCompInfo,"compName">={
91-
source:!!REACT_APP_BUNDLE_BUILTIN_PLUGIN ?"bundle" :"npm",
91+
// source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
92+
source:"npm",
9293
isRemote:true,
9394
packageName:"lowcoder-comps",
9495
};

‎client/packages/lowcoder/src/comps/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,8 @@ type Registry = {
119119
};
120120

121121
constbuiltInRemoteComps:Omit<RemoteCompInfo,"compName">={
122-
source:!!REACT_APP_BUNDLE_BUILTIN_PLUGIN ?"bundle" :"npm",
122+
// source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm",
123+
source:"npm",
123124
isRemote:true,
124125
packageName:"lowcoder-comps",
125126
};

‎client/packages/lowcoder/src/comps/utils/themeUtil.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@ export function setInitialCompStyles({
3838
constactions:Record<string,any>={
3939
appliedThemeId:changeValueAction(themeId||'',true),
4040
};
41+
4142
styleKeys.forEach(styleKey=>{
4243
actions[styleKey]=changeValueAction({
4344
...(compTheme?.[styleKey]asobject||{}),
44-
//...styleProps[styleKey],
45+
...styleProps[styleKey],
4546
},true);
4647
})
4748

‎client/packages/lowcoder/src/util/hooks.ts

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { AppPathParams } from "constants/applicationConstants";
22
importReact,{
33
Dispatch,
44
SetStateAction,
5+
useCallback,
56
useContext,
67
useEffect,
78
useMemo,
@@ -179,28 +180,49 @@ export function useMergeCompStyles(
179180
constthemeId=theme?.themeId;
180181
constappSettingsComp=editorState?.getAppSettingsComp();
181182
constpreventAppStylesOverwriting=appSettingsComp?.getView()?.preventAppStylesOverwriting;
182-
const{ preventStyleOverwriting}=props;
183+
const{ preventStyleOverwriting, appliedThemeId}=props;
183184

184185
conststyleKeys=Object.keys(props).filter(key=>key.toLowerCase().endsWith('style'||'styles'));
185186
conststyleProps:Record<string,any>={};
186187
styleKeys.forEach((key:string)=>{
187188
styleProps[key]=(propsasany)[key];
188189
});
189190

191+
constmergeStyles=useCallback(
192+
({
193+
dispatch,
194+
compTheme,
195+
styleProps,
196+
themeId
197+
}:any)=>{
198+
setInitialCompStyles({
199+
dispatch,
200+
compTheme,
201+
styleProps,
202+
themeId,
203+
})
204+
},
205+
[]
206+
);
207+
190208
useEffect(()=>{
191-
if(preventAppStylesOverwriting||preventStyleOverwriting)return;
192-
setInitialCompStyles({
209+
if(
210+
preventAppStylesOverwriting
211+
||preventStyleOverwriting
212+
||themeId===appliedThemeId
213+
)return;
214+
mergeStyles({
193215
dispatch,
194216
compTheme,
195217
styleProps,
196218
themeId,
197-
});
219+
})
198220
},[
199221
themeId,
200222
JSON.stringify(styleProps),
201223
JSON.stringify(compTheme),
202-
setInitialCompStyles,
224+
mergeStyles,
203225
preventAppStylesOverwriting,
204226
preventStyleOverwriting,
205227
]);
206-
}
228+
}

0 commit comments

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