diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index b3496eb12..9e568fc5f 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/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"), diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx index ff1478fe4..58af9f5eb 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx +++ b/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)} `; diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx index c00c05d61..7556037fa 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx +++ b/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)} `; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index b08a8276a..cba0023b9 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -14,7 +14,7 @@ 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 () { @@ -22,9 +22,9 @@ let MultiSelectBasicComp = (function () { ...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, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index 5224c1c98..5fd71ece6 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/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) => { diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index fd8f22a7b..554ef2ce5 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/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,6 +246,7 @@ export const SelectUIView = ( value: any; style: SelectStyleType | MultiSelectStyleType; childrenInputFieldStyle: ChildrenMultiSelectStyleType; + inputFieldStyle: SelectStyleType; onChange: (value: any) => void; dispatch: DispatchType; } @@ -253,6 +254,7 @@ export const SelectUIView = ( return