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

Commit 1cd0379

Browse files
Merge pull request #1217 from lowcoder-org/theme-style-fixes
[WIP] Theme style fixes relative to active/inactive preventOverwriteStyles flag
2 parents 61261a0 + 9481da0 commit 1cd0379

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
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
32+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3233

3334
const childrenMap = {
3435
header: SimpleContainerComp,
@@ -65,6 +66,7 @@ const childrenMap = {
6566
// Compatible with old style data 2022年8月15日
6667
const layoutBaseComp = migrateOldData(
6768
new MultiCompBuilder(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
import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
3434
import { Resizable } from "react-resizable";
3535
import styled, { 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
const pageDataInfo = useMemo(() => {
908907
// Data pagination
909908
let pagedData = data;
@@ -928,6 +927,11 @@ export function TableCompView(props: {
928927

929928
const childrenProps = childrenToProps(comp.children);
930929

930+
useMergeCompStyles(
931+
childrenProps as Record<string, any>,
932+
comp.dispatch
933+
);
934+
931935
const handleChangeEvent = 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
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
31+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3132

3233
const childrenMap = {
3334
header: SimpleContainerComp,
@@ -53,6 +54,7 @@ const childrenMap = {
5354
// Compatible with old style data 2022年8月15日
5455
const TriContainerBaseComp = migrateOldData(
5556
new MultiCompBuilder(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-
} else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
677-
res[name] = bgColor;
678676
} else if ((config?.depType || config?.depName) && compTheme?.[name]) {
679677
res[name] = compTheme[name];
678+
} else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
679+
res[name] = bgColor;
680680
} else {
681681
const rest = [];
682682
config.depName && rest.push(res[config.depName]);
@@ -900,22 +900,21 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
900900

901901
const appSettingsComp = editorState?.getAppSettingsComp();
902902
const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
903-
const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp||{};
903+
const { appliedThemeId, preventStyleOverwriting } = (comp?.comp || {});
904904
const appTheme = isPreviewTheme || isDefaultTheme || (!preventStyleOverwriting && !preventAppStylesOverwriting)
905905
? theme?.theme
906906
: defaultTheme;
907-
const compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
908-
? {
909-
...(omit(defaultTheme, 'components', 'chart')),
910-
...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
911-
...(omit(theme?.theme, 'components', 'chart')),
912-
...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<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+
let compTheme: JSONValue|undefined = {};
908+
if (appliedThemeId !== themeId) {
909+
compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
910+
? {
911+
...(omit(defaultTheme, 'components', 'chart')),
912+
...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
913+
...(omit(theme?.theme, 'components', 'chart')),
914+
...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
915+
}
916+
: defaultTheme.components?.[compType]?.[styleKey];
917+
}
919918
const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
920919
? props as ColorMap
921920
: {} as ColorMap;

‎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-
childrenJsonProps as Record<string, any>,
293+
childrenProps as Record<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
const builtInRemoteComps: 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
const builtInRemoteComps: 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
const actions: Record<string, any> = {
3939
appliedThemeId: changeValueAction(themeId || '', true),
4040
};
41+
4142
styleKeys.forEach(styleKey => {
4243
actions[styleKey] = changeValueAction({
4344
...(compTheme?.[styleKey] as object || {}),
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
import React, {
33
Dispatch,
44
SetStateAction,
5+
useCallback,
56
useContext,
67
useEffect,
78
useMemo,
@@ -179,28 +180,49 @@ export function useMergeCompStyles(
179180
const themeId = theme?.themeId;
180181
const appSettingsComp = editorState?.getAppSettingsComp();
181182
const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
182-
const { preventStyleOverwriting } = props;
183+
const { preventStyleOverwriting, appliedThemeId } = props;
183184

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

191+
const mergeStyles = 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)

AltStyle によって変換されたページ (->オリジナル) /