fix: 修复 Step 组件设置 disabled 属性后功能失效的问题 (#854)

* fix: 修复 `Step` 组件设置 `disabled` 属性后功能失效的问题 --------- Co-authored-by: 颜宇浩 <[email protected]>
sheinsight · Dec 6, 2024 · 3155ab3 · 3155ab3
1 parent 2647694
commit 3155ab3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.4-beta.6",
+  "version": "3.5.4-beta.7",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/base/src/steps/step.tsx b/packages/base/src/steps/step.tsx
@@ -29,6 +29,7 @@ const Step = (props: StepProps) => {
     onClick,
     onChange,
   } = props;
+
   const config = useConfig();
   const styles = jssStyle?.steps?.() || ({} as StepsClasses);
   const getLabelPlacement = () => {
@@ -63,6 +64,7 @@ const Step = (props: StepProps) => {
   });
 
   const handleChange = (e: React.MouseEvent<HTMLElement>) => {
+    if (disabled) return;
     onClick?.(e, index, id);
     onChange?.(index);
   };
@@ -101,7 +103,11 @@ const Step = (props: StepProps) => {
     );
   };
 
-  return <div className={rootClass} dir={config.direction}>{renderStep()}</div>;
+  return (
+    <div className={rootClass} dir={config.direction}>
+      {renderStep()}
+    </div>
+  );
 };
 
 const StepWidthContext = (props: BaseStepProps) => {

diff --git a/packages/shineout-style/src/steps/steps.ts b/packages/shineout-style/src/steps/steps.ts
@@ -22,20 +22,20 @@ const stepsStyle: JsStyles<StepsClassType> = {
       transition: 'color ease 0.3s',
     },
     '&$arrow': {
-      '& $step': {
+      '& $step:not($disabled)': {
         cursor: 'pointer',
       },
     },
     '&$default': {
-      '& $step:not($process)': {
+      '& $step:not($process):not($disabled)': {
         cursor: 'pointer',
       },
-      '& $step$wait:hover': {
+      '& $step$wait:not($disabled):hover': {
         '& $title,$description': {
           color: Token.stepsWaitHoverFontColor,
         },
       },
-      '& $step$finish:hover': {
+      '& $step$finish:not($disabled):hover': {
         '& $title,$description': {
           color: Token.stepsFinishHoverFontColor,
         },
@@ -257,7 +257,14 @@ const stepsStyle: JsStyles<StepsClassType> = {
       marginRight: 0,
     },
   },
-  disabled: {},
+  disabled: {
+    '&$step': {
+      cursor: 'not-allowed',
+    },
+    '& $icon:not($process)': {
+      cursor: 'not-allowed',
+    },
+  },
   horizontalLabel: {
     '&$step': {
       overflow: 'hidden',

diff --git a/packages/shineout/src/steps/__doc__/changelog.cn.md b/packages/shineout/src/steps/__doc__/changelog.cn.md
@@ -1,3 +1,9 @@
+## 3.5.4-beta.7
+2024-12-06
+### 🐞 BugFix
+
+- 修复 `Step` 组件设置 `disabled` 属性后功能失效的问题 ([#854](https://github.com/sheinsight/shineout-next/pull/854))
+
 ## 3.3.0
 2024-07-23
 ### 🐞 BugFix