From b8256e1206de9a36137c695394acf56604beae09 Mon Sep 17 00:00:00 2001
From: MenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 26 Sep 2024 19:48:43 +0500
Subject: [PATCH] StepControl: Added min width and a horizontal scroll

---
 .../comps/selectInputComp/stepControl.tsx     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index 00e64b75c..12f295f18 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -1,5 +1,5 @@
 import { ConfigProvider, Steps} from "antd";
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, RadiusControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -96,10 +96,19 @@ const StepsChildrenMap = {
   viewRef: RefControl<HTMLDivElement>,
   animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
   showVerticalScrollbar: withDefault(BoolControl, false),
+  minHorizontalWidth: withDefault(RadiusControl, ''),
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
+
+    const ScrollWrapper = styled.div<{ $showHorizontalScroll: boolean }>`
+      overflow-x: scroll;
+      ::-webkit-scrollbar {
+        display: ${props => props.$showHorizontalScroll ? "block" : "none"};
+      }
+    `;
+
     const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
     ${props=>props.$animationStyle}
       height: 100%;
@@ -176,6 +185,7 @@ let StepControlBasicComp = (function () {
           <ScrollBar
             style={{
               height: props.autoHeight ? "auto" : "100%",
+              minWidth: props.minHorizontalWidth,
               margin: "0px",
               padding: "0px",
             }}
@@ -232,6 +242,18 @@ let StepControlBasicComp = (function () {
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
+<<<<<<< Updated upstream
+=======
+            {!children.autoHeight.getView() && (
+              children.showVerticalScrollbar.propertyView({
+                label: trans("prop.showVerticalScrollbar"),
+              })
+            )}
+            {children.minHorizontalWidth.propertyView({
+                label: trans("prop.minHorizontalWidth"),
+                placeholder: '100px',
+              })}
+>>>>>>> Stashed changes
             {children.size.propertyView({
               label: trans("step.size"),
               radioButton: true,