tntd 3.0.28 → 3.0.29

package/es/steps/stepStyle/index.less

@@ -1,12 +1,177 @@
-@import './small.less';
-@import './nav.less';
-
+@import './variables.less';
 @steps-prefix-cls: ~'@{ant-prefix}-steps';
 @step-prefix-cls: ~'@{ant-prefix}-step';
+@tnt-steps-cls: ~'tnt-steps';
+@tnt-step-cls: ~'tnt-step';
+
+.ellipsis{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.@{tnt-steps-cls} .@{steps-prefix-cls}{
+    &-description,
+    &-item-description {
+        font-size: @font-size-sm;
+        line-height: @td-steps-desc-height;
+        word-break: break-all;
+        color: tint(@text-color, 50%) !important;
+    }
+    &-item-title {
+        line-height: @td-steps-title-height;
+    }
+}
+
+// 水平 非点状步骤条 非导航模式
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        padding-top: 18px;
+        padding-bottom: 18px;
+        &-container{
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            min-height: @nav-min-height;
+            &::after{
+                content: '';
+                flex:1;
+                height:2px;
+                border-radius: 2px;
+                min-width: 8px;
+                margin-left:32px;
+                margin-top: calc(@nav-min-height / 2 - 1px);
+            }
+        }
+
+        &-finish > .@{steps-prefix-cls}-item-container {
+            &::after {
+              border-top: 2px solid @finish-border-color;
+            }
+        }
+
+        &-wait, &-error, &-process {
+            > .@{steps-prefix-cls}-item-container {
+                &::after {
+                  border: 2px solid transparent;
+                  background-color: @border-color;
+                  mask: url(../assets/horizontal_line.svg) repeat-x 0 0;
+                  -webkit-mask:url(../assets/horizontal_line.svg) repeat-x 0 0;
+                  background-size: 8px 2px;
+                }
+              }
+        }
+
+        &-content{
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            font-family: "PingFang SC";
+            min-height: @nav-min-height;
+            // 左侧圆形图标 12的margin边距  线条至少保留8px长
+            max-width: calc(100% - @td-steps-icon-size - 12px - 32px - 8px);
+        }
+
+        &-title {
+            width: 100%;
+            padding-right:0;
+            &::after{
+                display: none;
+            }
+            >.tntd-ellipsis, >.tnt-ellipsis{
+                align-items: center;
+            }
+            .ellipsis
+        }
+
+        .@{step-prefix-cls}-ellipsis-subtitle{
+            font-size: @font-size-sm;
+            color: tint(@text-color, 50%);
+            margin-left: 2px;
+        }
+
+        &-subtitle {
+            font-size: @font-size-sm;
+            max-width: 30%;
+            color: tint(@text-color, 50%);
+            .ellipsis;
+        }
+
+        // 最后一个处理
+        &:last-child > .@{steps-prefix-cls}-item-container {
+            &::after{
+                display: none;
+            }
+            .@{steps-prefix-cls}-item-content {
+                max-width: inherit;
+                flex:none;
+            }
+        }
+    }
+
+    &-small{
+        .@{steps-prefix-cls}-item {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            &-container{
+                min-height: @nav-small-min-height;
+                &::after{
+                    margin-top: calc(@nav-small-min-height / 2 - 1px);
+                }
+            }
+            &-content{
+                min-height: @nav-small-min-height;
+                max-width: calc(100% - @td-steps-small-icon-size - 12px - 32px - 8px);
+            }
+        }
+    }
+
+    &:not(.@{steps-prefix-cls}-label-vertical) {
+        .@{steps-prefix-cls}-item:not(:last-child) {
+            margin-right: 32px;
+        }
+    }
+}
+
+// 水平 非点状步骤条
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    &.@{steps-prefix-cls}-background{
+        border-radius: @border-radius-base @border-radius-base 0px 0px;
+        background: linear-gradient(90deg, #F5F7FD 9.61%, #FBFDFF 81.1%);
+        position: relative;
+        padding-left:100px;
+        padding-right: 100px;
+        overflow: hidden;
 
-@steps-nav-arrow-color: fade(@black, 25%);
-@steps-nav-finish-color: #5E9BFF;
-@steps-nav-active-color: @primary-color;
-@wait-icon-color: @disabled-color;
+        &::before{
+            content: '';
+            background-color: @primary-color;
+            mask: url(../assets/background_left.svg) no-repeat 0 0;
+            -webkit-mask:url(../assets/background_left.svg) no-repeat 0 0;
+            width: 157px;
+            height: 103px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            pointer-events: none;
+        }
+        &::after{
+            content: '';
+            background-color: @primary-color;
+            mask: url(../assets/background_right.svg) no-repeat 0 0;
+            -webkit-mask:url(../assets/background_right.svg) no-repeat 0 0;
+            width: 131px;
+            height: 80px;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+        }
+    }
+}
 
-@steps-nav-content-max-width: auto;
+@import "./icon.less";
+@import "./vertical.less";
+@import "./nav.less";
+@import "./progress-dot.less";

package/es/steps/stepStyle/nav.less

@@ -1,281 +1,73 @@
-@normal-steps-desc-height: 68px;
-@normal-steps-height: 48px;
-@small-steps-height: 36px;
-@color-white: @white;
-@container-padding-left: 40px;
 
-.tnt-steps{
-    // 水平方向的步骤条
-    &.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-horizontal{
-        overflow: hidden;
-        padding-top: 12px;
-    
-        // 小尺寸
-        &.@{steps-prefix-cls}-small {
-          .@{steps-prefix-cls}-item {
-            height: @small-steps-height;
-            min-height: @small-steps-height;
-            &-container {
-              margin-left: 0;
-              padding-bottom:0;
-            }
-    
-            &::after {
-                content: '';
-                border-top: @small-steps-height/2 solid transparent;
-                border-bottom: @small-steps-height/2 solid transparent;
-                border-left: @small-steps-height/2 solid @border-color-split;
-                right: -@small-steps-height/2;
-              }
-    
-            &::before {
-                content: '';
-                border-top: @small-steps-height/2 solid @border-color-split;
-                border-bottom: @small-steps-height/2 solid @border-color-split;
-                border-left: @small-steps-height/2 solid @color-white;
-            }
-          }
-        }
-    
-        // 默认尺寸
-        .@{steps-prefix-cls}-item {
-          overflow: visible;
-          position: relative;
-          text-align: left;
-          display: flex;
-          min-height: @normal-steps-height;
-          &:not(:last-of-type){
-            margin-right: 2px !important;
-          }
-          background: @border-color-split;
-          width : 0 !important;
-          &-container {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            text-align: left;
-            padding-left: @container-padding-left + 24px;
-            padding-bottom: 0;
-            margin-left: 0;
-            transition: opacity 0.3s;
-            z-index: 11;
-    
-            .@{steps-prefix-cls}-item-content {
-              max-width: calc(100% - @container-padding-left);
-            }
-    
-            .@{steps-prefix-cls}-item-title {
-              max-width: 100%;
-              padding-right: 0;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              line-height: 1.5;
-              font-size: 14px;
-              font-weight: normal;
-              color:@text-color;
-              &::after {
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}-navigation.@{steps-prefix-cls} {
+    padding-top: 0;
+    .@{steps-prefix-cls}-item {
+        &-container{
+            padding-bottom:0;
+            margin-left: -@td-steps-icon-size / 2;
+            &::after{
                 display: none;
-              }
-              .@{steps-prefix-cls}-item-subtitle{
-                color:fade(@text-color,80%);
-              }
-            }
-    
-            .@{steps-prefix-cls}-item-description{
-                margin-top: 5px;
-                line-height: 14px;
-                font-size: 12px;
-                max-width: 100%;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-    
-        &:not(.@{steps-prefix-cls}-item-active) {
-            .@{steps-prefix-cls}-item-container[role='button'] {
-              cursor: pointer;
-              &:hover {
-                opacity: 0.85;
-              }
             }
         }
-    
-        &:last-child {
-            flex: 1;
-            &::after {
-              display: none;
-            }
+        &-content{
+            max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
         }
-    
-        &:first-child {
-            &.@{steps-prefix-cls}-item-container{
-                padding-left: @container-padding-left;
-            }
-            &:before {
-                display: none;
+         // 最后一个处理
+         &:last-child > .@{steps-prefix-cls}-item-container {
+            .@{steps-prefix-cls}-item-content {
+                max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
             }
         }
-    
-        &::after {
-            content: '';
-            display: block;
-            border:none;
-            border-top: @normal-steps-height/2 solid transparent;
-            border-bottom: @normal-steps-height/2 solid transparent;
-            border-left: @normal-steps-height/2 solid @border-color-split;
-            position: absolute;
-            right: -@normal-steps-height/2;
-            top: 0;
-            z-index: 10;
-            transform: rotate(0deg);
-            margin-top:0;
-            margin-left: 0;
-        }
-    
+
         &::before {
             content: '';
-            display: block;
-            background: none;;
-            border-top: @normal-steps-height/2 solid @border-color-split;
-            border-bottom: @normal-steps-height/2 solid @border-color-split;
-            border-left: @normal-steps-height/2 solid @color-white;
-            position: absolute;
-            height: 0;
-            width: 0;
-            left: 0px;
-            top: 0;
-            transition: none;
+            height: 1px;
+            left: -10px;
         }
-    
-        &-finish{
-            background-color:  @steps-nav-finish-color !important;
-            border-color: @steps-nav-finish-color !important;
-            &::before{
-                border-top-color:  @steps-nav-finish-color !important;
-                border-bottom-color:  @steps-nav-finish-color !important;
-            }
-            &::after{
-                border-left-color:  @steps-nav-finish-color !important;
-            }
-            .@{steps-prefix-cls}-item-title,
-            .@{steps-prefix-cls}-item-subtitle{
-                color:@color-white !important;
-            }
-            .@{steps-prefix-cls}-item-description{
-                color:fade(@color-white,80%) !important;
-            }
+
+        &-active::before {
+            content: '';
+            width: calc(100% + 20px);
         }
-    
-        &-process{
-            background-color:  @steps-nav-active-color !important;
-            border-color: @steps-nav-active-color !important;
-            &::before{
-                border-top-color:  @steps-nav-active-color !important;
-                border-bottom-color:  @steps-nav-active-color !important;
-            }
+    }
+
+    &.@{steps-prefix-cls}-background{
+        .@{steps-prefix-cls}-item{
+           &:not(:last-child){
+                margin-right: 48px;
+           }
             &::after{
-                border-left-color:  @steps-nav-active-color !important;
-            }
-            .@{steps-prefix-cls}-item-title,
-            .@{steps-prefix-cls}-item-subtitle{
-                color:@color-white !important;
+                content:"";
+                margin-left: 12px;
+                margin-top: 34px;
+                top: 0;
+                border: 1px solid @text-color-tertiary;
+                border-bottom: none;
+                border-left: none;
             }
-            .@{steps-prefix-cls}-item-description{
-                color:fade(@color-white,80%) !important;
-            }
-          }
         }
-    
-        // 存在描述的导航步骤
-        &.@{steps-prefix-cls}-navigation-contain-desc{
-            .@{steps-prefix-cls}-item {
-                height: @normal-steps-desc-height;
-                &::after {
-                    content: '';
-                    border-top: @normal-steps-desc-height/2 solid transparent;
-                    border-bottom: @normal-steps-desc-height/2 solid transparent;
-                    border-left: @normal-steps-desc-height/2 solid @border-color-split;
-                    position: absolute;
-                    right: -@normal-steps-desc-height/2;
+    }
+
+    &-small{
+        &.@{steps-prefix-cls}-background{
+            .@{steps-prefix-cls}-item{
+                &::after{
+                    content:"";
+                    margin-top: 18px;
                 }
-                &::before {
-                    content: '';
-                    border-top: @normal-steps-desc-height/2 solid @border-color-split;
-                    border-bottom: @normal-steps-desc-height/2 solid @border-color-split;
-                    border-left: @normal-steps-desc-height/2 solid @color-white;
-                    position: absolute;
-                    height: 0;
-                    width: 0;
-                    left: 0px;
-                    top: 0;
-                    transition: none;
+
+                &-content{
+                    max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
                 }
-            }
-        }
-    
-        // icon控制
-        .@{steps-prefix-cls}-item-icon{
-            display: none;
-        }
-        .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active{
-            .@{steps-prefix-cls}-item-container{
-                border-top:1px solid @steps-nav-active-color !important;
-                border-bottom:1px solid @steps-nav-active-color !important;
-            }
-            &.@{step-prefix-cls}-navigation-desc{
-                .@{steps-prefix-cls}-item-icon{
-                    margin-top: -18px;
+                 // 最后一个处理
+                 &:last-child > .@{steps-prefix-cls}-item-container {
+                    .@{steps-prefix-cls}-item-content {
+                        max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
+                    }
                 }
-            }
-            .@{steps-prefix-cls}-item-icon{
-                .@{steps-prefix-cls}-icon{
-                    display: none;
-                }
-                display: inline-block;
-                width: 6px;
-                height:6px;
-                border-radius: 100%;
-                background: @color-white;
-                border: 1px solid @color-white;
-                margin-right: 6px;
-            }
-        }
-    }
-}
-
 
-  @media (max-width: @screen-xs) {
-    .tnt-steps.@{steps-prefix-cls}-navigation {
-      > .@{steps-prefix-cls}-item {
-        margin-right: 0 !important;
-        &::before {
-          display: none;
-        }
-        &.@{steps-prefix-cls}-item-active::before {
-          top: 0;
-          right: 0;
-          left: unset;
-          display: block;
-          width: 3px;
-          height: calc(100% - 24px);
-        }
-        &::after {
-          position: relative;
-          top: -2px;
-          left: 50%;
-          display: block;
-          width: 8px;
-          height: 8px;
-          margin-bottom: 8px;
-          text-align: center;
-          transform: rotate(135deg);
-        }
-        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-          visibility: hidden;
+            }
         }
-      }
     }
 }
 

package/es/steps/stepStyle/progress-dot.less

@@ -0,0 +1,10 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot,
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
+  .@{steps-prefix-cls}-item {
+    &-tail {
+        &::after {
+            height: 2px;
+        }
+    }
+  }
+}

package/es/steps/stepStyle/variables.less

@@ -0,0 +1,8 @@
+@td-steps-icon-size: 40px;
+@td-steps-small-icon-size: 24px;
+@td-steps-title-height: 24px;
+@td-steps-desc-height: 20px;
+@nav-min-height: 44px;
+@nav-small-min-height: 28px;
+@finish-border-color:  @primary-color;
+

package/es/steps/stepStyle/vertical.less

@@ -0,0 +1,41 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-vertical:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation):not(.@{steps-prefix-cls}-small).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        &-icon  >.@{steps-prefix-cls}-icon{
+            i{
+                vertical-align: middle;
+            }
+        }
+
+        &-content {
+            min-height: 94px;
+        }
+
+        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail{
+            padding: calc(@td-steps-icon-size + 15px) 0 15px;
+            left: 18px;
+            &::after{
+                width:0;
+                border-radius: 2px;
+                background-color: transparent;
+            }
+        }
+
+        &-finish > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+            &::after {
+                border-left: 2px solid @finish-border-color;
+            }
+        }
+
+        &-wait, &-error, &-process {
+            > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+                &::after {
+                  border-left: 2px solid transparent;
+                  background-color: @border-color;
+                  mask: url(../assets/vertical_line.svg) repeat-y 0 0;
+                  -webkit-mask:url(../assets/vertical_line.svg) repeat-y 0 0;
+                }
+            }
+        }
+    }
+}
+

package/es/steps/steps.js

@@ -8,55 +8,81 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import Icon from '../icon';
+import Ellipsis from '../ellipsis';
 import { ConfigConsumer } from '../config-provider';
 import { default as AntdSteps } from 'antd/es/steps';
 export * from 'antd/es/steps';
 export function Steps(_a) {
   var {
       className,
-      type,
-      children
+      size,
+      showBackground = true,
+      labelPlacement
     } = _a,
-    rest = __rest(_a, ["className", "type", "children"]);
-  let navContainDesc = false;
-  if (children) {
-    if (Array.isArray(children)) {
-      navContainDesc = children.some(child => {
-        if (child && child instanceof Object && child.props && child.props instanceof Object && child.props.hasOwnProperty('description')) {
-          return child.props.description;
-        }
-      });
-    }
-  }
+    rest = __rest(_a, ["className", "size", "showBackground", "labelPlacement"]);
   return React.createElement(ConfigConsumer, null, ({
     getPrefixCls
   }) => {
     const prefixCls = getPrefixCls('steps');
+    const tdSteps = !labelPlacement || labelPlacement === 'horizontal';
+    let iconsInfo = {};
+    if (tdSteps) {
+      iconsInfo = {
+        icons: {
+          finish: React.createElement(Icon, {
+            type: size === 'small' ? 'check-circle' : 'step-check',
+            className: `${prefixCls}-finish-icon`
+          }),
+          error: React.createElement(Icon, {
+            type: "close-circle",
+            className: `${prefixCls}-error-icon`
+          })
+        }
+      };
+    }
     return React.createElement(AntdSteps, Object.assign({
-      className: classNames(prefixCls, 'tnt-steps', {
-        [`${prefixCls}-navigation`]: type === 'navigation',
-        [`${prefixCls}-navigation-contain-desc`]: type === 'navigation' && navContainDesc
-      }, className),
-      type: type,
-      children: children
+      className: classNames(className, {
+        ['tnt-steps']: tdSteps,
+        [`${prefixCls}-background`]: (!(rest === null || rest === void 0 ? void 0 : rest.direction) || (rest === null || rest === void 0 ? void 0 : rest.direction) === 'horizontal') && showBackground // 水平方向的才支持背景图
+      })
+    }, iconsInfo, {
+      size: size,
+      labelPlacement: labelPlacement
     }, rest));
   });
 }
 Steps.Step = function (_a) {
   var {
-      description,
-      className
+      className,
+      title,
+      subTitle,
+      titleEllipsis = true
     } = _a,
-    rest = __rest(_a, ["description", "className"]);
+    rest = __rest(_a, ["className", "title", "subTitle", "titleEllipsis"]);
   return React.createElement(ConfigConsumer, null, ({
     getPrefixCls
   }) => {
     const prefixCls = getPrefixCls('step');
+    const stepTitle = {
+      title,
+      subTitle
+    };
+    if (titleEllipsis) {
+      stepTitle.title = React.createElement(Ellipsis, {
+        suffix: React.createElement(Ellipsis, {
+          widthLimit: "30%",
+          title: subTitle,
+          className: `${prefixCls}-ellipsis-subtitle`
+        }),
+        title: title
+      });
+      stepTitle.subTitle = null;
+    }
     return React.createElement(AntdSteps.Step, Object.assign({
-      className: classNames(prefixCls, 'tnt-step', {
-        [`${prefixCls}-navigation-desc`]: !!description
-      }, className),
-      description: description
-    }, rest));
+      className: classNames('tnt-step', className, {
+        [`${prefixCls}-default-icon`]: !(rest === null || rest === void 0 ? void 0 : rest.icon)
+      })
+    }, rest, stepTitle));
   });
 };