fix default styles for comps

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -8,8 +8,8 @@ import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
 export function getButtonStyle(buttonStyle: ButtonStyleType) {
-  const hoverColor = genHoverColor(buttonStyle.background);
-  const activeColor = genActiveColor(buttonStyle.background);
+  const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
+  const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
     &&& {
       border-radius: ${buttonStyle.radius};

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -36,7 +36,7 @@ const Link = styled(Button)<{
     padding: ${props.$style.padding};
     font-size: ${props.$style.textSize};
     font-style:${props.$style.fontStyle};
-    font-family:${props.$style.fontFamily};
+    ${props.$style.fontFamily && `font-family: ${props.$style.fontFamily}`};
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} ${props.$style.borderStyle} ${props.$style.border};
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};

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

@@ -17,7 +17,7 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 type IProps = DividerProps & {
   $style: DividerStyleType;

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

@@ -22,6 +22,7 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 type IProps = {
   $justify: boolean;
@@ -135,16 +136,18 @@ const childrenMap = {
   logoUrl: StringControl,
   logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
   horizontalAlignment: alignWithJustifyControl(),
-  style: migrateOldData(styleControl(NavigationStyle), fixOldStyleData),
-  animationStyle: styleControl(AnimationStyle),
+  style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   items: withDefault(navListComp(), [
     {
       label: trans("menuItem") + " 1",
     },
   ]),
 };
 
-const NavCompBase = new UICompBuilder(childrenMap, (props) => {
+const NavCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
+  useMergeCompStyles(props, dispatch);
+
   const data = props.items;
   const items = (
     <>

client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

@@ -6,6 +6,7 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
 import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
 import { hasIcon } from "comps/utils";
 import { BoolControl } from "comps/controls/boolControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const RangeSliderBasicComp = (function () {
   const childrenMap = {
@@ -14,7 +15,8 @@ const RangeSliderBasicComp = (function () {
     end: numberExposingStateControl("end", 60),
     vertical: BoolControl,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,

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

@@ -73,7 +73,7 @@ function RootView(props: RootViewProps) {
     localDefaultTheme;
 
   const themeId = selectedTheme ? selectedTheme.id : (
-    previewTheme ? "" : 'default-theme-id'
+    previewTheme ? "preview-theme" : 'default-theme-id'
   ); 
 
   useEffect(() => {

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -75,14 +75,10 @@ export const getStyle = (style: CheckboxStyleType) => {
       &:hover .ant-checkbox-inner, 
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input + ant-checkbox-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground : '#fff'};
+        ${style.hoverBackground && `background-color: ${style.hoverBackground}`};
       }
 
-      &:hover .ant-checkbox-checked .ant-checkbox-inner, 
-      .ant-checkbox:hover .ant-checkbox-inner,
-      .ant-checkbox-input + ant-checkbox-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'};
-      }
+      
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,

client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx

@@ -25,9 +25,9 @@ let MultiSelectBasicComp = (function () {
     defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
     value: arrayStringExposingStateControl("value"),
     style: styleControl(InputFieldStyle , 'style'),
-    labelStyle:styleControl(LabelStyle , 'labelStyle'),
-    inputFieldStyle:styleControl(MultiSelectStyle , 'inputFieldStyle'),
-    childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
+    labelStyle: styleControl(LabelStyle , 'labelStyle'),
+    inputFieldStyle: styleControl(MultiSelectStyle , 'inputFieldStyle'),
+    childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
     margin: MarginControl,	
     padding: PaddingControl,
   };

client/packages/lowcoder/src/constants/themeConstants.ts

@@ -1,5 +1,29 @@
 import { ThemeDetail } from "@lowcoder-ee/api/commonSettingApi";
 
+const theme = {
+  primary: "#3377FF",
+  textDark: "#222222",
+  textLight: "#FFFFFF",
+  canvas: "#F5F5F6",
+  primarySurface: "#FFFFFF",
+  border: "#D7D9E0",
+  radius: "4px",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  margin: "3px",
+  padding: "3px",
+  gridColumns: "24",
+  textSize: "14px",
+  text: "#222222",
+  animation: "",
+  animationDelay: "",
+  animationDuration: "",
+  opacity: "1",
+  boxShadow: "",
+  boxShadowColor: "",
+  animationIterationCount: "",
+};
+
 const text = {
   style: {
     borderWidth: 0,
@@ -16,7 +40,14 @@ const input = {
   },
   inputFieldStyle: {
     borderWidth: '1px',
-    border: '#D7D9E0'
+    border: theme.border,
+  }
+};
+
+const select = {
+  ...input,
+  childrenInputFieldStyle: {
+    borderWidth: '0px',
   }
 };
 
@@ -77,12 +108,6 @@ const step  = {
   style: {text:'#D7D9E0'}
 };
 
-const treeSelect  = {
-  inputFieldStyle: {
-    borderWidth: '1px',
-  }
-};
-
 const pageLayout  = {
   style: {
     borderWidth: '1px',
@@ -95,34 +120,45 @@ const qrCode  = {
   }
 };
 
-const divider  = {
+const divider = {
   style: {
     radius: "0px"
   }
 };
 
+const navigation = {
+  style: {
+    borderWidth: '0px',
+  }
+}
+
+const slider = {
+  ...input,
+  inputFieldStyle: {
+    ...input.inputFieldStyle,
+    track: '#D7D9E0',
+  }
+}
+
+const switchComp = {
+  ...input,
+  inputFieldStyle: {
+    ...input.inputFieldStyle,
+    unchecked: '#D7D9E0',
+  }
+}
+
+const checkbox = {
+  ...input,
+  inputFieldStyle: {
+    ...input.inputFieldStyle,
+    uncheckedBorder: '#D7D9E0',
+  }
+}
+
+
 export const defaultTheme: ThemeDetail = {
-  primary: "#3377FF",
-  textDark: "#222222",
-  textLight: "#FFFFFF",
-  canvas: "#F5F5F6",
-  primarySurface: "#FFFFFF",
-  border: "#D7D9E0",
-  radius: "4px",
-  borderWidth: "1px",
-  borderStyle: "solid",
-  margin: "3px",
-  padding: "3px",
-  gridColumns: "24",
-  textSize: "14px",
-  text: "#222222",
-  animation: "",
-  animationDelay: "",
-  animationDuration: "",
-  opacity: "1",
-  boxShadow: "",
-  boxShadowColor: "",
-  animationIterationCount: "",
+  ...theme,
   components: {
     text,
     input,
@@ -133,24 +169,25 @@ export const defaultTheme: ThemeDetail = {
     tabbedContainer,
     step,
     qrCode,
-    treeSelect,
     pageLayout,
     divider,
+    navigation,
+    slider,
+    checkbox,
     password: input,
     numberInput: input,
     textArea: input,
     autocomplete: input,
-    switch: input,
-    checkbox: input,
-    radio: input,
+    switch: switchComp,
+    radio: checkbox,
     date: input,
     dateRange: input,
     time: input,
     timeRange: input,
-    slider: input,
-    rangeSlider: input,
+    rangeSlider: slider,
     segmentedControl,
-    select: input,
-    multiSelect: input,
+    select: select,
+    multiSelect: select,
+    treeSelect: select,
   },
 };