select and cascader style updated

lowcoder-org · FalkWolsky · May 10, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
commit 25f955c47dd16c514b5f920d7dd26e4a4c5ca823
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -1,20 +1,39 @@
 import { default as Cascader } from "antd/es/cascader";
-import { CascaderStyleType } from "comps/controls/styleControlConstants";
+import { CascaderStyleType, ChildrenMultiSelectStyleType } from "comps/controls/styleControlConstants";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { trans } from "i18n";
 import styled from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
-import { getStyle } from "./selectCompConstants";
 import { refMethods } from "comps/generators/withMethodExposing";
 
-const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
+const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
   width: 100%;
   font-family:"Montserrat";
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => { return props.$style && { ...props.$style, 'border-radius': props.$style.radius } }}
 `;
 
+const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMultiSelectStyleType }>`
+ background-color: ${props => props.$childrenInputFieldStyle?.background};
+    border: ${props => props.$childrenInputFieldStyle?.border};
+    border-style: ${props => props.$childrenInputFieldStyle?.borderStyle};
+    border-width: ${props => props.$childrenInputFieldStyle?.borderWidth};
+    border-radius: ${props => props.$childrenInputFieldStyle?.radius};
+    rotate: ${props => props.$childrenInputFieldStyle?.rotation};
+    margin: ${props => props.$childrenInputFieldStyle?.margin};
+    padding: ${props => props.$childrenInputFieldStyle?.padding};
+    .ant-cascader-menu-item-content{
+    font-size: ${props => props.$childrenInputFieldStyle?.textSize};
+    font-style: ${props => props.$childrenInputFieldStyle?.fontStyle};
+    font-family: ${props => props.$childrenInputFieldStyle?.fontFamily};
+    font-weight: ${props => props.$childrenInputFieldStyle?.textWeight};
+    text-transform: ${props => props.$childrenInputFieldStyle?.textTransform};
+    text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration};
+    color: ${props => props.$childrenInputFieldStyle?.text};
+    }
+`
+
 let CascaderBasicComp = (function () {
   const childrenMap = CascaderChildren;
 
@@ -23,6 +42,7 @@ let CascaderBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}
@@ -34,8 +54,14 @@ let CascaderBasicComp = (function () {
           placeholder={props.placeholder}
           showSearch={props.showSearch}
           $style={props.inputFieldStyle}
+          $childrenInputFieldStyle={props.childrenInputFieldStyle}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
+          dropdownRender={(menus: React.ReactNode) => (
+  <DropdownRenderStyle $childrenInputFieldStyle={props.childrenInputFieldStyle}>
+    {menus}
+            </DropdownRenderStyle>
+          )}
           onChange={(value: (string | number)[]) => {
             props.value.onChange(value as string[]);
             props.onEvent("change");

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
 import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CascaderStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   allowClearPropertyView,
   disabledPropertyView,
@@ -40,7 +40,8 @@ export const CascaderChildren = {
   viewRef: RefControl<CascaderRef>,
   margin: MarginControl,
   padding: PaddingControl,
-  inputFieldStyle:styleControl(CascaderStyle)
+  inputFieldStyle:styleControl(CascaderStyle),
+  childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle)
 };
 
 export const CascaderPropertyView = (
@@ -83,6 +84,9 @@ export const CascaderPropertyView = (
         <Section name={sectionNames.inputFieldStyle}>
           {children.inputFieldStyle.getPropertyView()}
         </Section>
+        <Section name={'Children Input Field Style'}>
+          {children.childrenInputFieldStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
+import {  ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -25,6 +25,7 @@ let MultiSelectBasicComp = (function () {
     style: styleControl(InputFieldStyle),
     labelStyle:styleControl(LabelStyle),
     inputFieldStyle:styleControl(MultiSelectStyle),
+    childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
     margin: MarginControl,	
     padding: PaddingControl,
   };
@@ -40,6 +41,7 @@ let MultiSelectBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <SelectUIView
           {...props}

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
+import {  ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { stringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -27,7 +27,8 @@ let SelectBasicComp = (function () {
     value: stringExposingStateControl("value"),
     style: styleControl(InputFieldStyle),
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(SelectStyle)
+    inputFieldStyle: styleControl(SelectStyle),
+    childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle)
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [
@@ -45,6 +46,7 @@ let SelectBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <SelectUIView
           {...props}

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -40,6 +40,7 @@ import {
   heightCalculator,
 
   SelectStyle,
+  ChildrenMultiSelectStyleType,
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "../../generators";
 import {
@@ -186,10 +187,25 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>`
-  ${(props) => props.$style && getDropdownStyle(props.$style)}
+const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
+ background-color: ${props => props.$style?.background};
+    border: ${props => props.$style?.border};
+    border-style: ${props => props.$style?.borderStyle};
+    border-width: ${props => props.$style?.borderWidth};
+    border-radius: ${props => props.$style?.radius};
+    rotate: ${props => props.$style?.rotation};
+    margin: ${props => props.$style?.margin};
+    padding: ${props => props.$style?.padding};
   .ant-select-item-option-content {
-    ${(props) => `padding: ${props.$style.padding}`};
+    font-size: ${props => props.$style?.textSize};
+    font-style: ${props => props.$style?.fontStyle};
+    font-family: ${props => props.$style?.fontFamily};
+    font-weight: ${props => props.$style?.textWeight};
+    text-transform: ${props => props.$style?.textTransform};
+    color: ${props => props.$style?.text};
+  }
+  .option-label{
+    text-decoration: ${props => props.$style?.textDecoration} !important;
   }
   .option-label img {
     min-width: 14px;
@@ -229,11 +245,12 @@ export const SelectUIView = (
     mode?: "multiple" | "tags";
     value: any;
     style: SelectStyleType | MultiSelectStyleType;
+    childrenInputFieldStyle: ChildrenMultiSelectStyleType;
     onChange: (value: any) => void;
     dispatch: DispatchType;
   }
-) => (
-  <Select
+) => {
+  return <Select
     ref={props.viewRef}
     mode={props.mode}
     $style={props.style as SelectStyleType & MultiSelectStyleType}
@@ -246,7 +263,7 @@ export const SelectUIView = (
       option?.label.toLowerCase().includes(input.toLowerCase())
     }
     dropdownRender={(originNode: ReactNode) => (
-      <DropdownStyled $style={props.style as MultiSelectStyleType}>
+      <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
         {originNode}
       </DropdownStyled>
     )}
@@ -282,7 +299,7 @@ export const SelectUIView = (
         </Select.Option>
       ))}
   </Select>
-);
+}
 
 export const SelectPropertyView = (
   children: RecordConstructorToComp<
@@ -295,6 +312,7 @@ export const SelectPropertyView = (
     style: { getPropertyView: () => ControlNode };
     labelStyle: { getPropertyView: () => ControlNode };
     inputFieldStyle: { getPropertyView: () => ControlNode };
+    childrenInputFieldStyle: { getPropertyView: () => ControlNode };
   }
 ) => (
   <>
@@ -343,6 +361,9 @@ export const SelectPropertyView = (
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={'Children Input Field Styles'}>
+            {children.childrenInputFieldStyle.getPropertyView()}
+          </Section>
         </>
       )}
   </>

diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -23,6 +23,7 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   labelStyle?: Record<string, string>;
   field?: Record<string, string>;
   inputFieldStyle?: Record<string, string>;
+  childrenInputFieldStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -168,8 +169,9 @@ export const LabelControl = (function () {
     align: dropdownControl(AlignOptions, "left"),
   };
 
-  return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
- <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
+  return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => 
+  {
+    return <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
       <MainWrapper
         $position={props.position}
         $hasLabel={!!props.text}
@@ -246,8 +248,8 @@ export const LabelControl = (function () {
           {args.help}
         </HelpWrapper>
       )}
-    </LabelViewWrapper>
-))
+    </LabelViewWrapper>}
+)
     .setPropertyViewFn((children) => (
       <Section name={trans("label")}>
         {children.text.propertyView({ label: trans("labelProp.text") })}

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -976,6 +976,18 @@ export const MultiSelectStyle = [
   ...ACCENT_VALIDATE,
 ] as const;
 
+export const ChildrenMultiSelectStyle = [
+  ...multiSelectCommon,
+  {
+    name: "multiIcon",
+    label: trans("style.multiIcon"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+    platform: "pc",
+  },
+] as const;
+
 export const TabContainerStyle = [
   // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
   ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{
@@ -1618,6 +1630,7 @@ export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
 export type SelectStyleType = StyleConfigType<typeof SelectStyle>;
 export type MultiSelectStyleType = StyleConfigType<typeof MultiSelectStyle>;
+export type ChildrenMultiSelectStyleType = StyleConfigType<typeof ChildrenMultiSelectStyle>;
 export type TabContainerStyleType = StyleConfigType<typeof TabContainerStyle>;
 export type ModalStyleType = StyleConfigType<typeof ModalStyle>;
 export type CascaderStyleType = StyleConfigType<typeof CascaderStyle>;