Theme: apply theme styles in list/grid view

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -4,7 +4,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
 import { ConstructorToView, deferAction } from "lowcoder-core";
 import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
-import { RefObject, useContext, createContext, useMemo, useRef } from "react";
+import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import styled from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
@@ -19,6 +19,10 @@ import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
 import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -274,6 +278,25 @@ export function ListView(props: Props) {
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
   const paddingWidth = isMobile ? "4px" : "16px";
+
+  const childrenProps = childrenToProps(comp.children);
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (childrenProps as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch: comp.dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   // log.debug("renders: ", renders);
   return (
     <BackgroundColorContext.Provider value={style.background}>

client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

@@ -52,8 +52,8 @@ const childrenMap = {
   scrollbars: withDefault(BoolControl, false),
   showBorder: BoolControl,
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
-  style: styleControl(ListViewStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(ListViewStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
 };