Merge pull request #1225 from MenamAfzal/fix/stepControl

Added Min-Width in Step control
lowcoder-org · Oct 9, 2024 · 31f1cac · 31f1cac
2 parents 8393147 + 4a9e441
commit 31f1cac
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -95,7 +95,7 @@ const StepsChildrenMap = {
  style: styleControl(StepsStyle , 'style'),
  viewRef: RefControl<HTMLDivElement>,
  animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
- showVerticalScrollbar: withDefault(BoolControl, false),
+ showScrollBars: withDefault(BoolControl, false),
  minHorizontalWidth: withDefault(RadiusControl, ''),
 };
 
@@ -182,7 +182,7 @@ let StepControlBasicComp = (function () {
  padding: "0px",
  }}
  overflow="scroll"
- hideScrollbar={!props.showVerticalScrollbar}>
+ hideScrollbar={!props.showScrollBars}>
  <Steps 
  initial={props.initialValue.value -1}
  current={current}
@@ -197,6 +197,7 @@ let StepControlBasicComp = (function () {
  >
  {props.options.map((option, index) => (
  <Steps.Step 
+ style={{minWidth:props.minHorizontalWidth || '100%'}}
  key={index}
  title={option.label}
  subTitle={option.subTitle}
@@ -234,15 +235,6 @@ let StepControlBasicComp = (function () {
  {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
  <Section name={sectionNames.layout}>
  {children.autoHeight.getPropertyView()}
- {!children.autoHeight.getView() && (
- children.showVerticalScrollbar.propertyView({
- label: trans("prop.showVerticalScrollbar"),
- })
- )}
- {children.minHorizontalWidth.propertyView({
- label: trans("prop.minHorizontalWidth"),
- placeholder: '100px',
- })}
  {children.size.propertyView({
  label: trans("step.size"),
  radioButton: true,
@@ -261,15 +253,23 @@ let StepControlBasicComp = (function () {
  radioButton: true,
  })
  }
+ {children.direction.getView() == "horizontal" && (
+ children.minHorizontalWidth.propertyView({
+ label: trans("prop.minHorizontalWidth"),
+ placeholder: '100px',
+ })
+ )}
+ {!children.autoHeight.getView() && (
+ children.showScrollBars.propertyView({
+ label: trans("prop.scrollbar"),
+ })
+ )}
  { children.displayType.getView() != "inline" && !children.showIcons.getView() && (
  children.showDots.propertyView({label: trans("step.showDots")}
  ))}
  { children.displayType.getView() != "inline" && !children.showDots.getView() && (
  children.showIcons.propertyView({label: trans("step.showIcons")}
  ))}
- {!children.autoHeight.getView() && (
- children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")})
- )}
  </Section>
  )}