@nutui/nutui-react-taro 3.0.11-patch.0 → 3.0.12

package/dist/es/packages/step/step.js

@@ -1,8 +1,7 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import React, { useContext } from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { DataContext } from "../steps/context";
@@ -14,54 +13,90 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     icon: null
 });
 export var Step = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, title = _ref.title, description = _ref.description, value = _ref.value, icon = _ref.icon, className = _ref.className, restProps = _object_without_properties(_ref, [
-        "children",
-        "title",
-        "description",
-        "value",
-        "icon",
-        "className"
-    ]);
+    var _$_object_spread = _object_spread({}, defaultProps, props), type = _$_object_spread.type, title = _$_object_spread.title, description = _$_object_spread.description, value = _$_object_spread.value, icon = _$_object_spread.icon, className = _$_object_spread.className, style = _$_object_spread.style;
     var parent = useContext(DataContext);
-    var dot = parent.propSteps.dot;
-    var getCurrentStatus = function() {
-        var index = value;
-        if (index < +parent.propSteps.value) return 'finish';
-        return index === +parent.propSteps.value ? 'process' : 'wait';
-    };
-    var handleClickStep = function() {
-        var _parent_propSteps, _parent_propSteps1;
-        ((_parent_propSteps = parent.propSteps) === null || _parent_propSteps === void 0 ? void 0 : _parent_propSteps.onStepClick) && ((_parent_propSteps1 = parent.propSteps) === null || _parent_propSteps1 === void 0 ? void 0 : _parent_propSteps1.onStepClick(value));
-    };
-    var classPrefix = "nut-step";
-    var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(getCurrentStatus()), true), className);
-    var renderIconClass = function() {
-        if (icon) {
-            return "".concat(classPrefix, "-icon is-icon");
+    var _parent_propSteps = parent.propSteps, parentType = _parent_propSteps.type, parentValue = _parent_propSteps.value, status = _parent_propSteps.status, parentIcon = _parent_propSteps.icon, onStepClick = _parent_propSteps.onStepClick;
+    var currentStatus = useMemo(function() {
+        if ([
+            'default',
+            'business'
+        ].includes(status)) {
+            return status;
         }
-        if (!dot && !icon) {
-            return "".concat(classPrefix, "-icon is-text");
+        if (value < +parentValue) return 'finish';
+        return value === +parentValue ? 'process' : 'wait';
+    }, [
+        value,
+        parentValue,
+        status
+    ]);
+    var handleClickStep = useCallback(function() {
+        onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(value);
+    }, [
+        onStepClick,
+        value
+    ]);
+    var classPrefix = "nut-step";
+    // className计算
+    var classes = useMemo(function() {
+        var _obj;
+        return classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-").concat(currentStatus), true), _define_property(_obj, "".concat(classPrefix, "-").concat(type || parentType), true), _define_property(_obj, "".concat(classPrefix, "-special"), description), _obj), className);
+    }, [
+        currentStatus,
+        type,
+        className,
+        description,
+        classPrefix
+    ]);
+    // 头部渲染
+    var renderHeadType = useMemo(function() {
+        switch(type || parentType){
+            case 'text':
+                return /*#__PURE__*/ React.createElement(View, {
+                    className: "".concat(classPrefix, "-head-text")
+                }, value);
+            case 'dot':
+                return /*#__PURE__*/ React.createElement(View, {
+                    className: "".concat(classPrefix, "-head-dot")
+                });
+            case 'icon':
+                return /*#__PURE__*/ React.createElement(View, {
+                    className: "".concat(classPrefix, "-head-icon")
+                }, icon || parentIcon);
+            default:
+                return null;
         }
-        return "".concat(classPrefix, "-icon");
-    };
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
-        className: classes
-    }, restProps), {
+    }, [
+        type,
+        value,
+        icon
+    ]);
+    // 内容渲染
+    var renderContent = useMemo(function() {
+        if (!title && !description) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-main")
+        }, title && /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-title")
+        }, title), description && /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-description")
+        }, description));
+    }, [
+        title,
+        description
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classes,
+        style: style,
         onClick: handleClickStep
-    }), /*#__PURE__*/ React.createElement(View, {
-        className: "nut-step-head"
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "nut-step-line"
-    }), /*#__PURE__*/ React.createElement(View, {
-        className: renderIconClass()
-    }, icon || !dot && /*#__PURE__*/ React.createElement("span", {
-        className: "nut-step-inner"
-    }, value))), (title || description) && /*#__PURE__*/ React.createElement(View, {
-        className: "nut-step-main"
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: "nut-step-title"
-    }, title), description && /*#__PURE__*/ React.createElement("span", {
-        className: "nut-step-description"
-    }, description)));
+        className: "".concat(classPrefix, "-head")
+    }, /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-head-").concat(type || parentType, "-wrap")
+    }, renderHeadType)), /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-line")
+    }, /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-line-inner")
+    })), renderContent);
 };
 Step.displayName = 'NutStep';

package/dist/es/packages/step/style/step.scss

@@ -1,257 +1,166 @@
 .nut-step {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex: 1;
-  text-align: center;
-  font-size: 0;
+  position: relative;
+  display: flex;
 
-  &-head {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    margin-bottom: $steps-base-icon-margin-bottom;
-  }
-
-  // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2)
-  // 如 width=70%时，left=65%; width=100%,left=50%;
-  &-line {
-    position: absolute;
-    top: calc($steps-base-icon-height / 2);
-    left: calc(50% + (100% - $steps-base-line-width) / 2);
-    height: $steps-base-line-height;
-    width: $steps-base-line-width;
-    background: $steps-base-line-background;
+  &-last {
+    .nut-step-line {
+      display: none;
+    }
   }
 
-  &-icon {
+  &-head {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: $steps-base-icon-width;
-    height: $steps-base-icon-height;
-    line-height: $steps-base-icon-line-height;
-    font-size: $steps-base-icon-font-size;
-    background-color: $steps-wait-icon-bg-color;
-    border-color: $steps-wait-icon-bg-color;
-    color: $steps-wait-icon-color;
+    height: $steps-base-head-height;
+    position: relative;
     z-index: 1;
 
-    .nut-icon {
-      width: 100%;
-      height: 100%;
+    &-text {
+      height: $steps-base-head-text-size;
+      width: $steps-base-head-text-size;
+      background-color: $steps-base-head-background-color;
+      color: $steps-base-head-color;
+      font-size: $steps-base-head-size;
     }
 
-    &.is-text {
-      border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+    &-icon {
+      height: $steps-base-head-icon-size;
+      width: $steps-base-head-icon-size;
+      background-color: $steps-base-head-background-color;
+
+      .nut-icon {
+        color: white;
+      }
+    }
+
+    &-dot {
+      height: $steps-base-head-dot-size;
+      width: $steps-base-head-dot-size;
+      background-color: $steps-base-head-dot-background-color;
     }
 
-    &.is-icon {
+    &-dot,
+    &-icon,
+    &-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+      box-sizing: border-box;
+      border: $steps-base-head-border;
+    }
+  }
+
+  &-line {
+    position: absolute;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-inner {
+      display: flex;
+      flex: 1;
+      height: $steps-base-line-height;
+      background: $steps-base-line-background;
     }
   }
 
   &-main {
-    padding: 0 10%;
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    min-height: $steps-base-head-height;
+  }
+
+  &-line,
+  &-title {
+    background-color: #ffffff;
+  }
+
+  &-title {
+    position: relative;
+    z-index: 1;
   }
 
   &-title {
-    display: block;
-    margin-bottom: $steps-base-title-margin-bottom;
+    height: 14px;
+    line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   &-description {
-    display: block;
+    height: 16px;
+    line-height: 16px;
+    margin-top: $steps-base-description-margin-top;
     font-size: $steps-base-description-font-size;
     color: $steps-base-description-color;
+    overflow: hidden;
   }
 
-  &:last-child {
-    .nut-step-line {
-      display: none;
-    }
-  }
-
+  // 流程状态-当前
   &.nut-step-process {
-    .nut-step-icon {
-      background-color: $steps-process-icon-bg-color;
-      border-color: $steps-process-icon-bg-color;
-      color: $steps-process-icon-color;
-    }
-
-    .nut-step-title {
-      color: $steps-process-title-color;
-      font-size: $steps-process-title-font-size;
-      font-weight: $steps-process-title-font-weight;
+    .nut-step-head-icon,
+    .nut-step-head-text,
+    .nut-step-head-dot {
+      background-color: $steps-process-head-background-color;
     }
 
-    .nut-step-description {
-      color: $steps-process-description-color;
+    .nut-step-head-text {
+      color: $steps-process-color;
     }
   }
 
+  // 流程状态-等待
   &.nut-step-wait {
-    .nut-step-title {
-      color: $steps-wait-title-color;
-    }
-
-    .nut-step-description {
-      color: $steps-wait-description-color;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-wait-icon-color;
+      }
     }
   }
 
+  // 流程状态-完成
   &.nut-step-finish {
-    .nut-step-icon {
-      background-color: $steps-finish-icon-bg-color;
-      border-color: $steps-finish-icon-border-color;
-      color: $steps-finish-icon-color;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-finish-icon-color;
+      }
     }
+  }
 
-    .nut-step-line {
-      background: $steps-finish-line-background;
+  // 强化业务属性展示
+  &.nut-step-business {
+    .nut-step-head-text {
+      color: $steps-business-head-text-color;
     }
 
     .nut-step-title {
-      color: $steps-finish-title-color;
+      color: $steps-business-title-color;
     }
 
     .nut-step-description {
-      color: $steps-finish-description-color;
+      color: $steps-business-description-color;
     }
-  }
-}
-
-.nut-steps-dot {
-  .nut-step-head {
-    margin: $steps-dot-head-margin;
-  }
-
-  .nut-step-line {
-    top: 7px;
-  }
-
-  .nut-step-icon {
-    width: $steps-dot-icon-width;
-    height: $steps-dot-icon-height;
-    border: $steps-dot-icon-border;
-    border-radius: 50%;
-    box-sizing: content-box;
-  }
 
-  .nut-step-wait {
-    .nut-step-icon {
-      background-color: $steps-dot-wait-icon-bg-color;
+    .nut-step-head-dot {
+      background-color: $steps-business-head-dot-background-color;
     }
-  }
 
-  .nut-step-finish {
-    .nut-step-icon {
-      background-color: $steps-dot-finish-icon-bg-color;
-      border-color: $steps-dot-finish-icon-border-color;
+    .nut-step-head-icon,
+    .nut-step-head-text {
+      background-color: $steps-business-head-background-color;
     }
-  }
-
-  .nut-step-process {
-    .nut-step-icon {
-      position: relative;
 
-      &:before {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        margin-left: -7px;
-        margin-top: -7px;
-        width: 14px;
-        height: 14px;
-        background-color: $steps-process-icon-before-bg-color;
-        border-radius: 50%;
-        opacity: 0.23;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-business-head-icon-color;
       }
     }
   }
 }
-
-.nut-steps-horizontal {
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: 50%;
-      bottom: -50%;
-    }
-  }
-}
-
-.nut-steps-vertical {
-  .nut-step {
-    display: flex;
-    height: 33.34%;
-  }
-
-  .nut-step-line {
-    position: absolute;
-    display: inline-block;
-    width: 1px;
-    height: $steps-base-line-width;
-    background: $steps-base-line-background;
-    top: calc(
-      $steps-base-icon-height +
-        (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2
-    );
-    left: calc(50% - 1px);
-  }
-
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2);
-    }
-  }
-
-  .nut-step-main {
-    display: inline-block;
-    padding-left: 6%;
-    text-align: start;
-  }
-}
-[dir='rtl'] .nut-step,
-.nut-rtl .nut-step {
-  &-line {
-    left: auto;
-    right: calc(50% + (100% - $steps-base-line-width) / 2);
-  }
-}
-[dir='rtl'] .nut-steps-dot,
-.nut-rtl .nut-steps-dot {
-  .nut-step-process {
-    .nut-step-icon {
-      &:before {
-        left: auto;
-        right: 50%;
-        margin-left: 0;
-        margin-right: -7px;
-      }
-    }
-  }
-}
-[dir='rtl'] .nut-steps-vertical,
-.nut-rtl .nut-steps-vertical {
-  .nut-step-line {
-    left: auto;
-    right: calc(50% - 1px);
-  }
-
-  .nut-step-main {
-    padding-left: 0;
-    padding-right: 6%;
-  }
-}