diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index 2a921432f..d4c890015 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -29,6 +29,7 @@ import { trans } from "i18n"; import { ControlNode } from "lowcoder-design"; import { StringControl } from "comps/controls/codeControl"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const childrenMap = { header: SimpleContainerComp, @@ -65,6 +66,7 @@ const childrenMap = { // Compatible with old style data 2022-8-15 const layoutBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props, dispatch); return { ...props, dispatch }; }).build(), fixOldStyleData diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 48434e2cb..f68edddaf 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -33,7 +33,7 @@ import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design"; import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; import { Resizable } from "react-resizable"; import styled, { css } from "styled-components"; -import { useUserViewMode } from "util/hooks"; +import { useMergeCompStyles, useUserViewMode } from "util/hooks"; import { TableImplComp } from "./tableComp"; import { useResizeDetector } from "react-resize-detector"; import { SlotConfigContext } from "comps/controls/slotControl"; @@ -903,7 +903,6 @@ export function TableCompView(props: { updateEmptyRows(); }, [updateEmptyRows]); - const pageDataInfo = useMemo(() => { // Data pagination let pagedData = data; @@ -928,6 +927,11 @@ export function TableCompView(props: { const childrenProps = childrenToProps(comp.children); + useMergeCompStyles( + childrenProps as Record, + comp.dispatch + ); + const handleChangeEvent = useCallback( (eventName: TableEventOptionValues) => { if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) { diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx index 2da8d1454..307531ccf 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx @@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp"; import { trans } from "i18n"; import { ControlNode } from "lowcoder-design"; import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; const childrenMap = { header: SimpleContainerComp, @@ -53,6 +54,7 @@ const childrenMap = { // Compatible with old style data 2022-8-15 const TriContainerBaseComp = migrateOldData( new MultiCompBuilder(childrenMap, (props, dispatch) => { + useMergeCompStyles(props, dispatch); return { ...props, dispatch }; }).build(), fixOldStyleData diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index a1fa7f993..a61df72f0 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -673,10 +673,10 @@ function calcColors>( themeWithDefault.textDark, themeWithDefault.textLight ); - } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) { - res[name] = bgColor; } else if ((config?.depType || config?.depName) && compTheme?.[name]) { res[name] = compTheme[name]; + } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) { + res[name] = bgColor; } else { const rest = []; config.depName && rest.push(res[config.depName]); @@ -900,22 +900,21 @@ export function styleControl( const appSettingsComp = editorState?.getAppSettingsComp(); const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting; - const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {}; + const { appliedThemeId, preventStyleOverwriting } = (comp?.comp || {}); const appTheme = isPreviewTheme || isDefaultTheme || (!preventStyleOverwriting && !preventAppStylesOverwriting) ? theme?.theme : defaultTheme; - const compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting) - ? { - ...(omit(defaultTheme, 'components', 'chart')), - ...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record, - ...(omit(theme?.theme, 'components', 'chart')), - ...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record, - // ...( - // theme?.theme?.components?.[compType]?.[styleKey] - // // || defaultTheme.components?.[compType]?.[styleKey] - // ) as unknown as Record - } - : defaultTheme.components?.[compType]?.[styleKey]; + let compTheme: JSONValue|undefined = {}; + if (appliedThemeId !== themeId) { + compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting) + ? { + ...(omit(defaultTheme, 'components', 'chart')), + ...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record, + ...(omit(theme?.theme, 'components', 'chart')), + ...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record, + } + : defaultTheme.components?.[compType]?.[styleKey]; + } const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId ? props as ColorMap : {} as ColorMap; diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index 56146a712..e64b82cf3 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -290,7 +290,7 @@ const UIView = React.memo((props: { } useMergeCompStyles( - childrenJsonProps as Record, + childrenProps as Record, comp.dispatch ); diff --git a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx index 4ae9e7927..0a4439c6e 100644 --- a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx @@ -88,7 +88,8 @@ const TitleHookComp = withPropertyViewFn(TitleTmp2Comp, (comp) => { ); }); const builtInRemoteComps: Omit = { - source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm", + // source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm", + source: "npm", isRemote: true, packageName: "lowcoder-comps", }; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 8f4a20dd1..a90262fd7 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -119,7 +119,8 @@ type Registry = { }; const builtInRemoteComps: Omit = { - source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm", + // source: !!REACT_APP_BUNDLE_BUILTIN_PLUGIN ? "bundle" : "npm", + source: "npm", isRemote: true, packageName: "lowcoder-comps", }; diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts index b3fc1d52b..ffdfd942f 100644 --- a/client/packages/lowcoder/src/comps/utils/themeUtil.ts +++ b/client/packages/lowcoder/src/comps/utils/themeUtil.ts @@ -38,10 +38,11 @@ export function setInitialCompStyles({ const actions: Record = { appliedThemeId: changeValueAction(themeId || '', true), }; + styleKeys.forEach(styleKey => { actions[styleKey] = changeValueAction({ ...(compTheme?.[styleKey] as object || {}), - // ...styleProps[styleKey], + ...styleProps[styleKey], }, true); }) diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts index 76065e5fa..3bc5a2ed6 100644 --- a/client/packages/lowcoder/src/util/hooks.ts +++ b/client/packages/lowcoder/src/util/hooks.ts @@ -2,6 +2,7 @@ import { AppPathParams } from "constants/applicationConstants"; import React, { Dispatch, SetStateAction, + useCallback, useContext, useEffect, useMemo, @@ -179,7 +180,7 @@ export function useMergeCompStyles( const themeId = theme?.themeId; const appSettingsComp = editorState?.getAppSettingsComp(); const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting; - const { preventStyleOverwriting } = props; + const { preventStyleOverwriting, appliedThemeId } = props; const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style' || 'styles')); const styleProps: Record = {}; @@ -187,20 +188,41 @@ export function useMergeCompStyles( styleProps[key] = (props as any)[key]; }); + const mergeStyles = useCallback( + ({ + dispatch, + compTheme, + styleProps, + themeId + }: any) => { + setInitialCompStyles({ + dispatch, + compTheme, + styleProps, + themeId, + }) + }, + [] + ); + useEffect(() => { - if (preventAppStylesOverwriting || preventStyleOverwriting) return; - setInitialCompStyles({ + if ( + preventAppStylesOverwriting + || preventStyleOverwriting + || themeId === appliedThemeId + ) return; + mergeStyles({ dispatch, compTheme, styleProps, themeId, - }); + }) }, [ themeId, JSON.stringify(styleProps), JSON.stringify(compTheme), - setInitialCompStyles, + mergeStyles, preventAppStylesOverwriting, preventStyleOverwriting, ]); -} \ No newline at end of file +}