@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/cjs/packages/shortpassword/style/style.harmony.css

@@ -0,0 +1,132 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-shortpassword-popup {
+  padding: 32px 24px 28px 24px;
+  border-radius: 12px;
+  text-align: center;
+}
+.nut-shortpassword-title {
+  display: flex;
+  justify-content: center;
+  line-height: 1;
+  font-size: 16px;
+  color: #1a1a1a;
+}
+.nut-shortpassword-description {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  margin-bottom: 24px;
+  line-height: 1;
+  font-size: 12px;
+  color: #505259;
+}
+.nut-shortpassword-input {
+  padding: 0 0 10px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.nut-shortpassword-input-real {
+  position: absolute;
+  right: 0;
+  width: 247px;
+  height: 41px;
+  outline: 0 none;
+  border: 0;
+  text-decoration: none;
+  z-index: -99;
+}
+.nut-shortpassword-input-site {
+  width: 247px;
+  height: 41px;
+  border-radius: 4px;
+}
+.nut-shortpassword-input-fake {
+  top: 5%;
+  width: 100%;
+  height: 41px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: #f2f3f5;
+  border-radius: 4px;
+  border: 1px solid #f2f3f5;
+  display: flex;
+  position: absolute;
+  left: 0;
+}
+.nut-shortpassword-input-fake-li {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nut-shortpassword-input-fake-li-icon {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background: #000;
+  display: inline-block;
+}
+.nut-shortpassword-message {
+  margin-top: 9px;
+  display: flex;
+  justify-content: space-between;
+  width: 247px;
+}
+.nut-shortpassword-message-error {
+  line-height: 1;
+  font-size: 11px;
+  color: #ff0f23;
+}
+.nut-shortpassword-message-forget {
+  line-height: 1;
+  font-size: 12px;
+  color: #888b94;
+  display: flex;
+  align-items: center;
+}
+.nut-shortpassword-message-forget .nut-icon {
+  margin-right: 3px;
+}
+.nut-shortpassword-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.nut-shortpassword-footer-cancel {
+  background: #ffffff;
+  border: 1px solid #ff0f23;
+  border-radius: 15px;
+  padding: 8px 38px;
+  line-height: 1;
+  font-size: 14px;
+  color: #ff0f23;
+}
+.nut-shortpassword-footer-sure {
+  background: linear-gradient(135deg, #ff0f23 0%, #ff0f23 100%);
+  border-radius: 15px;
+  padding: 8px 38px;
+  line-height: 1;
+  font-size: 14px;
+  color: #ffffff;
+}
+
+[dir=rtl] .nut-shortpassword-input-real,
+.nut-rtl .nut-shortpassword-input-real {
+  right: auto;
+  left: 0;
+}
+[dir=rtl] .nut-shortpassword-input-fake,
+.nut-rtl .nut-shortpassword-input-fake {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-shortpassword-footer-sure {
+  background: linear-gradient(-135deg, #ff0f23 0%, #ff0f23 100%);
+}
+.nut-rtl .nut-shortpassword-footer-sure {
+  background: linear-gradient(-135deg, #ff0f23 0%, #ff0f23 100%);
+}

package/dist/cjs/packages/sidebar/style/style.harmony.css

@@ -0,0 +1,63 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sidebar {
+  display: flex;
+}
+.nut-sidebar-content {
+  flex-direction: column;
+  height: 100%;
+}
+.nut-sidebar-content-wrap {
+  flex: 1;
+  overflow: hidden;
+}
+.nut-sidebar-titles {
+  background: #f2f3f5;
+  flex-direction: column;
+  border-radius: 0;
+  height: 100%;
+  width: 104px;
+  max-width: 128px;
+  flex-shrink: 0;
+}
+.nut-sidebar-titles::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+.nut-sidebar-titles .nut-sidebar-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.nut-sidebar-titles-scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.nut-sidebar-titles-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 52px;
+  font-size: 14px;
+  color: #505259;
+}
+.nut-sidebar-titles-item-text {
+  text-align: center;
+  white-space: normal;
+  width: 104px;
+}
+.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text {
+  font-family: PingFangSC-Semibold;
+  color: #ff0f23;
+  font-weight: 600;
+  font-size: 16px;
+}
+.nut-sidebar-titles-item-disabled {
+  color: #c2c4cc;
+  cursor: not-allowed;
+}

package/dist/cjs/packages/sidebaritem/style/style.harmony.css

@@ -0,0 +1,19 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sidebaritem {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  display: block;
+  background-color: #ffffff;
+  color: #1a1a1a;
+  padding: 24px 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.nut-sidebaritem.inactive {
+  overflow: visible;
+  height: 0;
+}

package/dist/cjs/packages/signature/style/style.harmony.css

@@ -0,0 +1,22 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-signature .spcanvas_WEAPP {
+  width: 100%;
+  height: 100%;
+}
+.nut-signature .spcanvas_WEAPP Canvas {
+  width: 100%;
+}
+.nut-signature-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10rem;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+.nut-signature-unsupport {
+  font-size: 14px;
+}

package/dist/cjs/packages/skeleton/style/style.harmony.css

@@ -0,0 +1,69 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-skeleton {
+  line-height: 0px;
+  font-size: 0px;
+}
+.nut-skeleton-content {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  background: #f7f8fc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.nut-skeleton-content-normal {
+  height: 24px;
+}
+.nut-skeleton-content-large {
+  height: 32px;
+}
+.nut-skeleton-content-small {
+  height: 16px;
+  margin-top: 8px;
+}
+.nut-skeleton-content-small-0 {
+  margin-top: 0;
+}
+.nut-skeleton-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
+  animation-name: nut-skeleton;
+  animation-delay: 0s;
+  animation-duration: 0.6s;
+  animation-direction: normal;
+  animation-fill-mode: both;
+  animation-play-state: running;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+}
+@keyframes nut-skeleton {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+[dir=rtl] .nut-skeleton-animation,
+.nut-rtl .nut-skeleton-animation {
+  left: auto;
+  right: 0;
+  animation: nut-skeleton-rtl 2s linear 0s infinite;
+}
+@keyframes nut-skeleton-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}

package/dist/cjs/packages/space/style/style.harmony.css

@@ -0,0 +1,83 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-space {
+  display: flex;
+}
+.nut-space-item {
+  flex: none;
+}
+.nut-space-vertical {
+  flex-direction: column;
+}
+.nut-space-vertical-item {
+  margin-bottom: 8px;
+}
+.nut-space-vertical-item-last {
+  margin-bottom: 0;
+}
+.nut-space-horizontal {
+  flex-direction: row;
+}
+.nut-space-horizontal-item {
+  margin-right: 8px;
+}
+.nut-space-horizontal-item-last {
+  margin-right: 0;
+}
+.nut-space-horizontal-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(8px * -1);
+}
+.nut-space-horizontal-wrap-item {
+  padding-bottom: 8px;
+}
+.nut-space-align-center {
+  align-items: center;
+}
+.nut-space-align-start {
+  align-items: flex-start;
+}
+.nut-space-align-end {
+  align-items: flex-end;
+}
+.nut-space-align-baseline {
+  align-items: baseline;
+}
+.nut-space-justify-center {
+  justify-content: center;
+}
+.nut-space-justify-start {
+  justify-content: flex-start;
+}
+.nut-space-justify-end {
+  justify-content: flex-end;
+}
+.nut-space-justify-between {
+  justify-content: space-between;
+}
+.nut-space-justify-around {
+  justify-content: space-around;
+}
+.nut-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.nut-space-justify-stretch {
+  justify-content: stretch;
+}
+
+[dir=rtl] .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+.nut-rtl .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+[dir=rtl] .nut-space-horizontal > .nut-space-item:last-child,
+.nut-rtl .nut-space-horizontal > .nut-space-item:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}

package/dist/cjs/packages/step/step.d.ts

@@ -1,3 +1,3 @@
 import React, { FunctionComponent } from 'react';
-import { WebStepProps } from "../../types";
-export declare const Step: FunctionComponent<Partial<WebStepProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>>;
+import { TaroStepProps } from "../../types";
+export declare const Step: FunctionComponent<Partial<TaroStepProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>>;

package/dist/cjs/packages/step/step.js

@@ -13,7 +13,6 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
@@ -26,54 +25,90 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     icon: null
 });
 var Step = function Step(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, title = _ref.title, description = _ref.description, value = _ref.value, icon = _ref.icon, className = _ref.className, restProps = (0, _object_without_properties._)(_ref, [
-        "children",
-        "title",
-        "description",
-        "value",
-        "icon",
-        "className"
-    ]);
+    var _$_object_spread = (0, _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 = (0, _react.useContext)(_context.DataContext);
-    var dot = parent.propSteps.dot;
-    var getCurrentStatus = function getCurrentStatus() {
-        var index = value;
-        if (index < +parent.propSteps.value) return 'finish';
-        return index === +parent.propSteps.value ? 'process' : 'wait';
-    };
-    var handleClickStep = function handleClickStep() {
-        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 = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(getCurrentStatus()), true), className);
-    var renderIconClass = function renderIconClass() {
-        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 = (0, _react.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 = (0, _react.useCallback)(function() {
+        onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(value);
+    }, [
+        onStepClick,
+        value
+    ]);
+    var classPrefix = "nut-step";
+    // className计算
+    var classes = (0, _react.useMemo)(function() {
+        var _obj;
+        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(currentStatus), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type || parentType), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-special"), description), _obj), className);
+    }, [
+        currentStatus,
+        type,
+        className,
+        description,
+        classPrefix
+    ]);
+    // 头部渲染
+    var renderHeadType = (0, _react.useMemo)(function() {
+        switch(type || parentType){
+            case 'text':
+                return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                    className: "".concat(classPrefix, "-head-text")
+                }, value);
+            case 'dot':
+                return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                    className: "".concat(classPrefix, "-head-dot")
+                });
+            case 'icon':
+                return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                    className: "".concat(classPrefix, "-head-icon")
+                }, icon || parentIcon);
+            default:
+                return null;
         }
-        return "".concat(classPrefix, "-icon");
-    };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
-        className: classes
-    }, restProps), {
+    }, [
+        type,
+        value,
+        icon
+    ]);
+    // 内容渲染
+    var renderContent = (0, _react.useMemo)(function() {
+        if (!title && !description) return null;
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-main")
+        }, title && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-title")
+        }, title), description && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-description")
+        }, description));
+    }, [
+        title,
+        description
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: classes,
+        style: style,
         onClick: handleClickStep
-    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-step-head"
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-step-line"
-    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: renderIconClass()
-    }, icon || !dot && /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-inner"
-    }, value))), (title || description) && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-step-main"
-    }, /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-title"
-    }, title), description && /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-description"
-    }, description)));
+        className: "".concat(classPrefix, "-head")
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-head-").concat(type || parentType, "-wrap")
+    }, renderHeadType)), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-line")
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-line-inner")
+    })), renderContent);
 };
 Step.displayName = 'NutStep';