Merge pull request #935 from MenamAfzal/feature/update-styles

Feature/update styles

Author: FalkWolsky

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

@@ -76,7 +76,7 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
   animationStyle: styleControl(AnimationStyle),
   labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),

client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx

@@ -13,8 +13,10 @@ import { omit } from "lodash";
 
 const { RangePicker } = DatePicker;
 
-const RangePickerStyled = styled(RangePicker)<{ $style: DateTimeStyleType }>`
+const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
   width: 100%;
+  box-shadow: ${(props) =>
+    `${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx

@@ -11,6 +11,7 @@ import { default as DatePicker } from "antd/es/date-picker";
 
 const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
   width: 100%;
+  box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

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

@@ -14,17 +14,17 @@ import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputC
 
 import { PaddingControl } from "../../controls/paddingControl";	
 import { MarginControl } from "../../controls/marginControl";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 let MultiSelectBasicComp = (function () {
   const childrenMap = {
     ...SelectChildrenMap,
     defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
     value: arrayStringExposingStateControl("value"),
-    style: styleControl(InputFieldStyle),
+    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
     labelStyle:styleControl(LabelStyle),
-    inputFieldStyle:styleControl(MultiSelectStyle),
+    inputFieldStyle:withDefault(styleControl(MultiSelectStyle),{borderWidth:'1px'}),
     childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
     margin: MarginControl,	
     padding: PaddingControl,

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

@@ -18,16 +18,16 @@ import {
 import { useRef } from "react";
 import { RecordConstructorToView } from "lowcoder-core";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 
 let SelectBasicComp = (function () {
   const childrenMap = {
     ...SelectChildrenMap,
     defaultValue: stringExposingStateControl("defaultValue"),
     value: stringExposingStateControl("value"),
-    style: styleControl(InputFieldStyle),
+    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(SelectStyle),
+    inputFieldStyle: withDefault(styleControl(SelectStyle),{borderWidth:'1px'}),
     childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle)
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {

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

@@ -109,6 +109,7 @@ export const getStyle = (
         background-color: ${style.background};
         border-color: ${style.border};
         border-width:${(style as SelectStyleType).borderWidth};
+        box-shadow:${(style as SelectStyleType).boxShadow} ${(style as SelectStyleType).boxShadowColor};
       }
 
       &.ant-select-focused,
@@ -181,10 +182,9 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
   `;
 };
 
-const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType }>`
+const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType,$inputFieldStyle:SelectStyleType }>`
   width: 100%;
-
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => props.$inputFieldStyle && getStyle(props.$inputFieldStyle)}
 `;
 
 const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
@@ -246,13 +246,15 @@ export const SelectUIView = (
     value: any;
     style: SelectStyleType | MultiSelectStyleType;
     childrenInputFieldStyle: ChildrenMultiSelectStyleType;
+    inputFieldStyle: SelectStyleType;
     onChange: (value: any) => void;
     dispatch: DispatchType;
   }
 ) => {
   return <Select
     ref={props.viewRef}
     mode={props.mode}
+    $inputFieldStyle={props.inputFieldStyle}
     $style={props.style as SelectStyleType & MultiSelectStyleType}
     disabled={props.disabled}
     allowClear={props.allowClear}

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1192,6 +1192,8 @@ export const SelectStyle = [
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [
     ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   ]),
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -1225,6 +1227,8 @@ export const MultiSelectStyle = [
     transformer: toSelf,
     platform: "pc",
   },
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -1584,6 +1588,8 @@ export const DateTimeStyle = [
   PADDING,
   BORDER_STYLE,
   BORDER_WIDTH,
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
   ...ACCENT_VALIDATE,
 ] as const;