fix(Steps)：Steps 点状步骤条显示问题 #554 (#607)

uiwjs · Mar 3, 2022 · 90d47f2 · 90d47f2
1 parent ed0bdbb
commit 90d47f2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/react-steps/src/Step.tsx b/packages/react-steps/src/Step.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import Icon, { IconProps } from '@uiw/react-icon';
+import Icon, { IconProps, IconsName } from '@uiw/react-icon';
 import { IProps, HTMLDivProps } from '@uiw/utils';
 import './style/index.less';
 
@@ -57,14 +57,16 @@ export default function Step(props: StepProps) {
   } else if ((icon && typeof icon === 'string') || status === 'finish' || status === 'error') {
     iconNode = (
       <Icon
-        type={[
-          icon && typeof icon === 'string' ? `${icon}` : null,
-          !icon && status === 'finish' ? 'check' : null,
-          !icon && status === 'error' ? 'close' : null,
-        ]
-          .filter(Boolean)
-          .join(' ')
-          .trim()}
+        type={
+          [
+            icon && typeof icon === 'string' ? `${icon}` : null,
+            !icon && status === 'finish' ? 'check' : null,
+            !icon && status === 'error' ? 'close' : null,
+          ]
+            .filter(Boolean)
+            .join(' ')
+            .trim() as IconsName | null
+        }
       />
     );
   } else {
@@ -73,7 +75,7 @@ export default function Step(props: StepProps) {
   return (
     <div {...restProps} className={classString} style={stepItemStyle}>
       <div className={`${prefixCls}-item-tail`} style={stepItemDotStyle}>
-        <i />
+        <i style={{ paddingRight: '100%' }} />
       </div>
       <div className={`${prefixCls}-item-head`}>
         <div className={[`${prefixCls}-item-inner`, !!icon && 'is-icon'].filter(Boolean).join(' ').trim()}>

diff --git a/packages/react-steps/src/Steps.tsx b/packages/react-steps/src/Steps.tsx
@@ -3,8 +3,8 @@ import { IProps, HTMLDivProps } from '@uiw/utils';
 import Step, { StepProps } from './Step';
 
 export interface StepsProps<T> extends IProps, HTMLDivProps {
-  status?: StepProps<T>['status'];
-  progressDot?: StepProps<T>['progressDot'];
+  status?: StepProps['status'];
+  progressDot?: StepProps['progressDot'];
   direction?: 'horizontal' | 'vertical';
   /**
    * 指定当前步骤，从 `0` 开始记数。
@@ -71,7 +71,7 @@ function InternalSteps<T>(props: StepsProps<T>) {
           childProps.className = `${prefixCls}-next-error`;
         }
         if (!child.props.status) {
-          if (index === current) {
+          if (index === current!) {
             childProps.status = status;
           } else if (index < (current as number)) {
             childProps.status = 'finish';