added background style utility

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -40,14 +40,17 @@ const alphaOfRgba = (rgba: string) => {
   return colord(rgba).alpha().toString();
 };
 
-const isValidGradient = (color: string) => {
+const isValidGradient = (color?: string) => {
+  if (!color) return false;
+
   const linearGradientRegex = /^linear-gradient\((\d+deg|to\s+(top|right|bottom|left)(\s+(top|right|bottom|left))?)\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
   const radialGradientRegex = /^radial-gradient\(\s*(circle|ellipse)?\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
 
   return linearGradientRegex.test(color) || radialGradientRegex.test(color);
 }
 
-const isValidColor = (str: string) => {
+const isValidColor = (str?: string) => {
+  if (!str) return false;
   return colord(str).isValid();
 };
 

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -22,6 +22,7 @@ import { isValidColor, isValidGradient, ScrollBar } from "lowcoder-design";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { isEqual } from "lodash";
 import { DEFAULT_GRID_COLUMNS, DEFAULT_ROW_COUNT, DEFAULT_ROW_HEIGHT } from "@lowcoder-ee/layout/calculateUtils";
+import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 
 const UICompContainer = styled.div<{
   $maxWidth?: number;
@@ -36,15 +37,15 @@ const UICompContainer = styled.div<{
   height: auto;
   margin: 0 auto;
   max-width: ${(props) => props.$maxWidth || 1600}px;
-  ${(props) => isValidColor(props.$bgColor) && `background-color: ${props.$bgColor};`};
-  ${(props) => isValidGradient(props.$bgColor) && !Boolean(props.$bgImage) && `background-image: ${props.$bgColor}`};
-  ${(props) => isValidGradient(props.$bgColor) && Boolean(props.$bgImage) && `background-image: url(${props.$bgImage}), ${props.$bgColor}`};
-  ${(props) => !isValidGradient(props.$bgColor) && Boolean(props.$bgImage) && `background-image: ${props.$bgColor}`};
-  // ${(props) => props.$bgImage && `background-image: url(${props.$bgImage});`}; 
-  ${(props) => props.$bgImageRepeat && `background-repeat: ${props.$bgImageRepeat};`}; 
-  ${(props) => props.$bgImageSize && `background-size: ${props.$bgImageSize};`}; 
-  ${(props) => props.$bgImageOrigin && `background-origin: ${props.$bgImageOrigin};`}; 
-  ${(props) => props.$bgImagePosition && `background-position: ${props.$bgImagePosition};`}; 
+  
+  ${props => getBackgroundStyle({
+    background: props.$bgColor,
+    backgroundImage: props.$bgImage,
+    backgroundImageSize: props.$bgImageSize,
+    backgroundImageRepeat: props.$bgImageRepeat,
+    backgroundImageOrigin: props.$bgImageOrigin,
+    backgroundImagePosition: props.$bgImagePosition,
+  })}
 `;
 
 // modal/drawer container
@@ -122,8 +123,11 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
   const isModule = appType === AppTypeEnum.Module;
 
   const bgColor = useMemo(
-    () => (currentTheme || defaultTheme).canvas,
-    [currentTheme, defaultTheme]
+    () => {
+      const themeGridBgColor = preventStylesOverwriting ? undefined : currentTheme?.canvas;
+      return themeGridBgColor || appSettings.gridBg || defaultTheme.canvas;
+    },
+    [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]
   );
 
   const bgImage = useMemo(

client/packages/lowcoder/src/util/styleUtils.tsx

@@ -0,0 +1,20 @@
+import { isValidColor, isValidGradient } from "components/colorSelect/colorUtils"
+import { css } from "styled-components";
+
+const getBackgroundStyle = (style: Record<string, string | undefined>) => {
+  return css`
+    ${isValidColor(style.background) && `background-color: ${style.background}`};
+    ${isValidGradient(style.background) && !Boolean(style.backgroundImage) && `background-image: ${style.background}`};
+    ${!isValidGradient(style.background) && Boolean(style.backgroundImage) && `background-image: ${style.backgroundImage}`};
+    ${isValidGradient(style.background) && Boolean(style.backgroundImage) && `background-image: url(${style.backgroundImage}), ${style.background}`};
+
+    ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}; 
+    ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}; 
+    ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`}; 
+    ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`};
+  `;
+}
+
+export {
+  getBackgroundStyle,
+}