Steps Component finalized

FalkWolsky · FalkWolsky · commit f6bb40fbaa04 · 2024-04-21T00:58:05.000+02:00
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -3,12 +3,11 @@ import { BoolCodeControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { LabelControl } from "comps/controls/labelControl";
 import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType } from "comps/controls/styleControlConstants";
+import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
-import { UICompBuilder, withDefault } from "../../generators";
+import { UICompBuilder } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { selectDivRefMethods, } from "./selectInputConstants";
 import { Section, sectionNames } from "lowcoder-design";
@@ -17,7 +16,6 @@ import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-
 import { useContext, useState, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 
@@ -79,14 +77,16 @@ const statusOptions = [
 ]
 
 const StepsChildrenMap = {
-  initialValue: numberExposingStateControl("0"),
+  initialValue: numberExposingStateControl("1"),
   value: stringExposingStateControl("value"),
-  stepsStatus : stringExposingStateControl("process"),
+  stepStatus : stringExposingStateControl("process"),
+  stepPercent: numberExposingStateControl("60"),
   size: dropdownControl(sizeOptions, "default"),
   displayType : dropdownControl(typeOptions, "default"),
   direction: dropdownControl(directionOptions, "horizontal"),
   showDots : BoolControl,
   showIcons : BoolControl,
+  selectable : BoolControl,
   labelPlacement: dropdownControl(directionOptions, "horizontal"),
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
@@ -98,82 +98,108 @@ const StepsChildrenMap = {
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
 
-    // enabling user interaction to change the current step
-    const [current, setCurrent] = useState(0);
+    const StyledWrapper = styled.div<{ style: StepsStyleType }>`
+      min-height: 24px;
+      max-width: ${widthCalculator(props.style.margin)};
+      max-height: ${heightCalculator(props.style.margin)};
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-decoration: ${props.style.textDecoration};
+      font-style: ${props.style.fontStyle};
+      font-weight: ${props.style.textWeight};
+      font-size: ${props.style.textSize};
+      text-transform: ${props.style.textTransform};
+      margin: ${props.style.margin};
+      padding: ${props.style.padding};
+      background-color: ${props.style.background};
+      border: ${props.style.borderWidth} solid ${props.style.border};
+      border-radius: ${props.style.radius};
+      background-image: ${props.style.backgroundImage};
+      background-repeat: ${props.style.backgroundImageRepeat};
+      background-size: ${props.style.backgroundImageSize};
+      background-position: ${props.style.backgroundImagePosition};
+      background-origin: ${props.style.backgroundImageOrigin};
+      .ant-steps-item { padding-top: 5px !important; }
+      .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
+      .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
+      .ant-steps.ant-steps-dot .ant-steps-item-process .ant-steps-icon .ant-steps-icon-dot { margin-top: 4px !important; }
+      .ant-steps.ant-steps-default .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 9px !important; }
+      .ant-steps.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 4px !important; }
+      .ant-steps.ant-steps-dot .ant-steps-item-title { margin-top: 10px !important; }
+      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-horizontal .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:4px !important; }
+      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-vertical .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:17px !important; }
+      .ant-steps.ant-steps-dot.ant-steps-small.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -8px !important; inset-inline-start: -11px !important; }
+      .ant-steps.ant-steps-dot.ant-steps-default.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -7px !important; inset-inline-start: -13px !important; }
+      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
+      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
+      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -5px !important; inset-inline-start: -10px !important; }
+      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -4px !important; inset-inline-start: -13px !important; }
+    `;
+
+    const [current, setCurrent] = useState(props.initialValue.value - 1); // Convert 1-based index to 0-based.
 
-    // updating the state of current by the expose value
     useEffect(() => {
-      setCurrent(Number(props.value.value));
+      const newValue = Number(props.value.value);
+      setCurrent(newValue - 1); // Adjust for 0-based index.
     }, [props.value.value]);
 
-
-    const onChange = (current: number) => {
-      setCurrent(current);
-      if (props.options[current]?.value !== undefined) {
-        props.value.onChange(props.options[current].value+""); 
+    const onChange = (index: number) => {
+      if (props.selectable == false) return;
+      const newIndex = Math.max(0, index);
+      setCurrent(newIndex);
+      if (props.options[newIndex]?.value !== undefined) {
+        props.value.onChange(newIndex + 1 + ""); // Convert back to 1-based index for display.
         props.onEvent("change");
       }
     };
 
-    // margin-top: 17px; is important cause the dots where placed wrong.
-    /* 
-.ant-steps.ant-steps-small .ant-steps-item-icon {
-      margin-top: 17px;
-    }
-    */
-    const StepsWrapper = styled.div`
-      width: 100%;
-      min-height: 24px;
-    
-    `;
-
     return (
-      <StepsWrapper ref={props.viewRef}>
         <ConfigProvider
             theme={{
-              components: {
-                Steps: {
-                  colorPrimary: '#00b96b',
-                  algorithm: true, 
-                }
-              },
+              token: { 
+                colorPrimary: props.style.activeBackground,
+                colorText: props.style.titleText,
+                colorTextDescription: props.style.text,
+                fontFamily: props.style.fontFamily,
+              }
             }}
           >
-          <Steps 
-            initial={Number(props.initialValue.value) - 1}
-            current={current}
-            onChange={(current) => {
-              onChange(current);
-            }}
-            percent={60}
-            status={props.stepsStatus.value as "error" | "finish" | "process" | "wait"}
-            type={props.displayType}
-            size={props.size}
-            labelPlacement={props.labelPlacement}
-            progressDot={props.showDots}
-            direction={props.direction}
-          >
-            {props.options.map((option, index) => (
-              <Steps.Step 
-                key={index}
-                title={option.label}
-                subTitle={option.subTitle}
-                description={option.description}
-                status={option.status as "error" | "finish" | "wait" | "process" | undefined}
-                icon={props.showIcons && hasIcon(option.icon) && option.icon || undefined}
-              />
-            ))}
-          </Steps>
+          <StyledWrapper style={props.style}>
+            <Steps 
+              initial={props.initialValue.value -1}
+              current={current}
+              onChange={onChange}
+              percent={props.stepPercent.value}
+              status={props.stepStatus.value as "error" | "finish" | "process" | "wait"}
+              type={props.displayType}
+              size={props.size}
+              labelPlacement={props.labelPlacement}
+              progressDot={props.showDots}
+              direction={props.direction}
+            >
+              {props.options.map((option, index) => (
+                <Steps.Step 
+                  key={index}
+                  title={option.label}
+                  subTitle={option.subTitle}
+                  description={option.description}
+                  status={option.status as "error" | "finish" | "wait" | "process" | undefined}
+                  icon={props.showIcons && hasIcon(option.icon) && option.icon || undefined}
+                />
+              ))}
+            </Steps>
+          </StyledWrapper>
         </ConfigProvider>
-      </StepsWrapper>
     );
 
   })
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
-          {children.initialValue.propertyView({ label: trans("step.initialValue") })}
+          {children.initialValue.propertyView({ label: trans("step.initialValue"), tooltip : trans("step.initialValueTooltip")})}
         </Section>
 
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
@@ -182,7 +208,9 @@ let StepControlBasicComp = (function () {
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
             {hiddenPropertyView(children)}
-            {children.stepsStatus.propertyView({label: trans("step.status")})}
+            {children.stepStatus.propertyView({label: trans("step.status")})}
+            {children.stepPercent.propertyView({label: trans("step.percent")})}
+            {children.selectable.propertyView({label: trans("step.selectable")})}
           </Section></>
         )}
 
@@ -200,12 +228,18 @@ let StepControlBasicComp = (function () {
               label: trans("step.direction"),
               radioButton: true,
             })}
-            {children.labelPlacement.propertyView({
-              label: trans("step.labelPlacement"),
-              radioButton: true,
-            })}
-            {children.showDots.propertyView({label: trans("step.showDots")})}
-            {children.showIcons.propertyView({label: trans("step.showIcons")})}
+            { children.direction.getView() == "horizontal" && 
+              children.labelPlacement.propertyView({
+                label: trans("step.labelPlacement"),
+                radioButton: true,
+              })
+            }
+            { 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")}
+            ))}
           </Section>
         )}
 
@@ -222,5 +256,7 @@ let StepControlBasicComp = (function () {
 
 export const StepComp = withExposingConfigs(StepControlBasicComp, [
   new NameConfig("value", trans("step.valueDesc")),
+  new NameConfig("stepStatus", trans("step.status") ),
+  new NameConfig("stepPercent", trans("step.percent")),
   ...CommonNameConfig,
 ]);
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -651,7 +651,7 @@ StepOption = class extends StepOption implements OptionCompProperty {
   propertyView(param: { autoMap?: boolean }) {
     return (
       <>
-        {this.children.value.propertyView({ label: trans("stepOptionsControl.value") })}
+        {this.children.value.propertyView({ label: trans("stepOptionsControl.value"), tooltip: trans("stepOptionsControl.valueTooltip") })}
         {this.children.label.propertyView({ label: trans("stepOptionsControl.title") })}
         {this.children.subTitle.propertyView({ label: trans("stepOptionsControl.subTitle") })}
         {this.children.description.propertyView({ label: trans("stepOptionsControl.description") })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -964,26 +964,46 @@ export const SegmentStyle = [
 ] as const;
 
 export const StepsStyle = [
-  LABEL,
-  ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
-  {
-    name: "indicatorBackground",
-    label: trans("style.indicatorBackground"),
-    color: SURFACE_COLOR,
-  },
   {
-    name: "background",
-    label: trans("style.background"),
-    depName: "indicatorBackground",
+    name: "activeBackground",
+    label: trans("style.accent"),
+    depName: "activeBackground",
     transformer: handleToSegmentBackground,
   },
   {
-    name: "text",
-    label: trans("text"),
-    depName: "indicatorBackground",
+    name: "titleText",
+    label: trans("title"),
+    depName: "background",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  ...STYLING_FIELDS_SEQUENCE.filter((style) => ['background', 'textSize','textDecoration'].includes(style.name) === false),
+  getBackground(),
+  {
+    name: "backgroundImage",
+    label: trans("style.backgroundImage"),
+    backgroundImage: "backgroundImage",
+  },
+  {
+    name: "backgroundImageRepeat",
+    label: trans("style.backgroundImageRepeat"),
+    backgroundImageRepeat: "backgroundImageRepeat",
+  },
+  {
+    name: "backgroundImageSize",
+    label: trans("style.backgroundImageSize"),
+    backgroundImageSize: "backgroundImageSize",
+  },
+  {
+    name: "backgroundImagePosition",
+    label: trans("style.backgroundImagePosition"),
+    backgroundImagePosition: "backgroundImagePosition",
+  },
+  {
+    name: "backgroundImageOrigin",
+    label: trans("style.backgroundImageOrigin"),
+    backgroundImageOrigin: "backgroundImageOrigin",
+  },
 ] as const;
 
 const LinkTextStyle = [
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1260,14 +1260,16 @@ export const en = {
   },
   "stepOptionsControl": {
     "value": "Value / Key",
+    "valueTooltip": "Step Value must be a number. For the first Step, it must be equal to the initial value. Numbers must be in consistent and ascending order",
     "title": "Step Title",
     "subTitle": "Step Subtitle",
     "description": "Step Description",
     "status": "Step Status",
     "icon": "Step Icon",
   },
   "step" : {
-    "initialValue": "Start Numbers from",
+    "initialValue": "Start Numbers at",
+    "initialValueTooltip": "Where to start the visual Numbering. Must be 1 or higher.",
     "valueDesc": "Current Value",
     "size" : "Steps Size",
     "sizeSmall" : "Small",
@@ -1289,6 +1291,7 @@ export const en = {
     "showDots" : "Show Dots instead Symbols",
     "showIcons" : "Show Icons instead Symbols",
     "responsive" : "Responsive",
+    "selectable" : "Selectable",
   },
   "radio": {
     "options": "Options",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1186,6 +1186,32 @@ optionsControl: {
     "description": "描述",
     "status": "状态",
 },
+"step" : {
+    "initialValue": "初始值",
+    "initialValueTooltip": "视觉编号的起始位置。必须是 1 或更高。",
+    "valueDesc": "当前价值",
+    "size" : "台阶大小",
+    "sizeSmall" : "小型",
+    "sizeDefault" : "默认值",
+    "percent" : "步骤 百分比",
+    "type" : "步骤类型",
+    "typeDefault" : "标准",
+    "typeNavigation" : "导航",
+    "typeInline" : "内联",
+    "direction" : "步骤 方向",
+    "directionVertical" : "垂直",
+    "directionHorizontal" : "横向",
+    "labelPlacement" : "步骤 标签放置",
+    "status" : "步骤状态",
+    "statusWait" : "等待",
+    "statusProcess" : "过程",
+    "statusFinish" : "完成",
+    "statusError" : "错误",
+    "showDots" : "用圆点代替数字",
+    "showIcons" : "显示图标而不是数字",
+    "responsive" : "响应式",
+    "selectable" : "可选择",
+},
 radio: {
     options: "选项",
     horizontal: "水平",
