added trigger mode option in dropdown comp

raheeliftikhar5 · raheeliftikhar5 · commit f65005a0eda6 · 2025-01-15T21:23:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -11,12 +11,12 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
-    &&& {
+    & {
       border-radius: ${buttonStyle.radius};
       border-width:${buttonStyle.borderWidth};
       margin: ${buttonStyle.margin};
       padding: ${buttonStyle.padding};
-      rotate: ${buttonStyle.rotation&&buttonStyle.rotation};
+      rotate: ${buttonStyle.rotation};
       &:not(:disabled) {
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -22,18 +22,18 @@ import {
   getButtonStyle,
 } from "./buttonCompConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
   
   .ant-btn-group {
     width: 100%;
-   
   }
 `;
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
-  width: calc(100%);
+  flex: 1;
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
   .ant-btn span {
@@ -42,12 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
   }
   
   .ant-btn {
-    ${(props) => getButtonStyle(props.$buttonStyle)}
+    ${(props) => getButtonStyle(props.$buttonStyle as any)}
     margin: 0 !important;
     height: 100%;
     &.ant-btn-default {
       margin: 0 !important;
-
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
       ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
       ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
@@ -65,11 +64,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
-  // width: 32px;
+  width: 32px;
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-left: -1px;
   .ant-btn {
-    ${(props) => getButtonStyle(props.$buttonStyle)}
+    ${(props) => getButtonStyle(props.$buttonStyle as any)}
     margin: 0 !important;
     height: 100%;
     &.ant-btn-default {
@@ -80,10 +79,16 @@ const RightButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
   }
 `;
 
+const triggerOptions = [
+  { label: "Hover", value: "hover" },
+  { label: "Click", value: "click" },
+] as const;
+
 const DropdownTmpComp = (function () {
   const childrenMap = {
     text: withDefault(StringControl, trans("menu")),
     onlyMenu: BoolControl,
+    triggerMode: dropdownControl(triggerOptions, "hover"),
     options: DropdownOptionControl,
     disabled: BoolCodeControl,
     onEvent: ButtonEventHandlerControl,
@@ -121,15 +126,17 @@ const DropdownTmpComp = (function () {
           <Dropdown
             disabled={props.disabled}
             dropdownRender={() => menu}
+            trigger={[props.triggerMode]}
           >
-            <Button100 $buttonStyle={props.style} disabled={props.disabled}>
+            <Button100 $buttonStyle={props.style as any} disabled={props.disabled}>
               {props.text || " " /* Avoid button disappearing */}
             </Button100>
           </Dropdown>
         ) : (
           <StyledDropdownButton
             disabled={props.disabled}
             dropdownRender={() => menu}
+            trigger={[props.triggerMode]}
             onClick={() => props.onEvent("click")}
             buttonsRender={([left, right]) => [
               <LeftButtonWrapper $buttonStyle={props.style}>
@@ -170,6 +177,10 @@ const DropdownTmpComp = (function () {
           <>
             <Section name={sectionNames.layout}>
               {children.text.propertyView({ label: trans("label") })}
+              {children.triggerMode.propertyView({
+                label: trans("dropdown.triggerMode"),
+                radioButton: true,
+              })}
               {children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
             </Section>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -965,7 +965,7 @@ export const ButtonStyle = [
 ] as const;
 
 export const DropdownStyle = [
-  getBackground('primary'),
+  getBackground(),
   ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
 ] as const;
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1927,7 +1927,8 @@ export const en = {
   },
   "dropdown": {
     "onlyMenu": "Display with Label Only",
-    "textDesc": "Text Currently Displayed on Button"
+    "textDesc": "Text Currently Displayed on Button",
+    "triggerMode": "Trigger Mode"
   },
   "textShow": {
     "text": "### 👋 Hello, {name}",
