@nutui/nutui-react-taro 3.0.4 → 3.0.6

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

@@ -1,44 +1,29 @@
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 
   &-content {
-    display: flex;
-    flex-direction: row;
+    position: relative;
+    display: inline-flex;
+    width: $skeleton-line-width;
+    background: $skeleton-background;
+    border-radius: $skeleton-line-border-radius;
+    overflow: hidden;
 
-    &-avatar {
-      margin-right: 20px;
-      background: $skeleton-background !important;
+    &-normal {
+      height: $skeleton-line-normal-height;
     }
 
-    &-block {
-      width: $skeleton-line-width;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-      margin-top: 10px;
-      border-radius: $skeleton-line-border-radius;
+    &-large {
+      height: $skeleton-line-large-height;
     }
 
-    &-line {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      .nut-skeleton-content-block:last-child {
-        width: 70%;
-      }
+    &-small {
+      height: $skeleton-line-small-height;
+      margin-top: 8px;
     }
-
-    &-title {
-      width: 30%;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-    }
-
-    &-block-last-child {
-      width: 55%;
+    &-small-0 {
+      margin-top: 0;
     }
   }
 
@@ -49,41 +34,50 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    animation: nut-skeleton 2s ease-in-out 0s infinite;
+    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 {
-    0% {
-      background-position-x: -500px;
+    from {
+      transform: translateX(-100%);
     }
 
     to {
-      background-position-x: calc(500px + 100%);
+      transform: translateX(100%);
     }
   }
 }
 
 [dir='rtl'] .nut-skeleton,
 .nut-rtl .nut-skeleton {
-  &-content {
-    .nut-avatar {
-      margin-right: 0;
-      margin-left: 20px;
-    }
-  }
   &-animation {
     left: auto;
     right: 0;
-    animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+    animation: nut-skeleton-rtl 2s linear 0s infinite;
   }
 
   @keyframes nut-skeleton-rtl {
-    0% {
-      background-position-x: calc(500px + 100%);
+    from {
+      //background-position: -200% 0;
+      transform: translateX(100%);
     }
 
     to {
-      background-position-x: -500px;
+      //background-position: 200% 0;
+      transform: translateX(-100%);
     }
   }
 }

package/dist/es/packages/skeleton/style/style.css

@@ -2,176 +2,30 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-image {
-  display: block;
-  position: relative;
-}
-.nut-image-default {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.nut-image.nut-image-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
-.nut-image-loading {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--nutui-color-background, #f2f3f5);
-  background-size: 100% 100%;
-}
-.nut-image-error {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--nutui-color-background, #f2f3f5);
-  background-size: 100% 100%;
-}
-
-[dir=rtl] .nut-image .nut-img-loading,
-.nut-rtl .nut-image .nut-img-loading {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-image .nut-img-error,
-.nut-rtl .nut-image .nut-img-error {
-  left: auto;
-  right: 0;
-}
-
-.nut-avatar-group {
-  display: flex;
-  flex-direction: row;
-  flex: 0 0 auto;
-}
-.nut-avatar-group-avatar,
-.nut-avatar-group .nut-avatar {
-  border: 1px solid #fff;
-  margin-left: -8px;
-}
-.nut-avatar-group-avatar:not(:first-of-type),
-.nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: -8px;
-}
-
-[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
-.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: 0;
-  margin-right: -8px;
-}
-
-.nut-avatar {
-  position: relative;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-round {
-  border-radius: 999px;
-  overflow: hidden;
-}
-.nut-avatar-square {
-  border-radius: var(--nutui-avatar-square, 5px);
-}
-.nut-avatar-first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-.nut-avatar-img {
-  width: 100%;
-  height: 100%;
-  flex-shrink: 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.nut-avatar-icon {
-  background-size: 100% 100%;
-}
-.nut-avatar-text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.nut-avatar-large {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-img {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-icon {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-text {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-small {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-text {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 }
 .nut-skeleton-content {
-  display: flex;
-  flex-direction: row;
-}
-.nut-skeleton-content-avatar {
-  margin-right: 20px;
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5)) !important;
-}
-.nut-skeleton-content-block {
+  position: relative;
+  display: inline-flex;
   width: var(--nutui-skeleton-line-width, 100%);
-  height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
-  margin-top: 10px;
-  border-radius: var(--nutui-skeleton-line-border-radius, 0);
+  background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc));
+  border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4px));
+  overflow: hidden;
 }
-.nut-skeleton-content-line {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+.nut-skeleton-content-normal {
+  height: var(--nutui-skeleton-line-normal-height, 24px);
 }
-.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
-  width: 70%;
+.nut-skeleton-content-large {
+  height: var(--nutui-skeleton-line-large-height, 32px);
 }
-.nut-skeleton-content-title {
-  width: 30%;
-  height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
+.nut-skeleton-content-small {
+  height: var(--nutui-skeleton-line-small-height, 16px);
+  margin-top: 8px;
 }
-.nut-skeleton-content-block-last-child {
-  width: 55%;
+.nut-skeleton-content-small-0 {
+  margin-top: 0;
 }
 .nut-skeleton-animation {
   position: absolute;
@@ -180,33 +34,36 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  animation: nut-skeleton 2s ease-in-out 0s infinite;
+  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 {
-  0% {
-    background-position-x: -500px;
+  from {
+    transform: translateX(-100%);
   }
   to {
-    background-position-x: calc(500px + 100%);
+    transform: translateX(100%);
   }
 }
 
-[dir=rtl] .nut-skeleton-content .nut-avatar,
-.nut-rtl .nut-skeleton-content .nut-avatar {
-  margin-right: 0;
-  margin-left: 20px;
-}
 [dir=rtl] .nut-skeleton-animation,
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+  animation: nut-skeleton-rtl 2s linear 0s infinite;
 }
 @keyframes nut-skeleton-rtl {
-  0% {
-    background-position-x: calc(500px + 100%);
+  from {
+    transform: translateX(100%);
   }
   to {
-    background-position-x: -500px;
+    transform: translateX(-100%);
   }
 }

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

@@ -3,42 +3,29 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 }
 .nut-skeleton-content {
-  display: flex;
-  flex-direction: row;
-}
-.nut-skeleton-content-avatar {
-  margin-right: 20px;
-  background: #f2f3f5 !important;
-}
-.nut-skeleton-content-block {
+  position: relative;
+  display: inline-flex;
   width: 100%;
-  height: 15px;
-  background: #f2f3f5;
-  margin-top: 10px;
-  border-radius: 0;
+  background: #f7f8fc;
+  border-radius: 4px;
+  overflow: hidden;
 }
-.nut-skeleton-content-line {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+.nut-skeleton-content-normal {
+  height: 24px;
 }
-.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
-  width: 70%;
+.nut-skeleton-content-large {
+  height: 32px;
 }
-.nut-skeleton-content-title {
-  width: 30%;
-  height: 15px;
-  background: #f2f3f5;
+.nut-skeleton-content-small {
+  height: 16px;
+  margin-top: 8px;
 }
-.nut-skeleton-content-block-last-child {
-  width: 55%;
+.nut-skeleton-content-small-0 {
+  margin-top: 0;
 }
 .nut-skeleton-animation {
   position: absolute;
@@ -47,33 +34,36 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  animation: nut-skeleton 2s ease-in-out 0s infinite;
+  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 {
-  0% {
-    background-position-x: -500px;
+  from {
+    transform: translateX(-100%);
   }
   to {
-    background-position-x: calc(500px + 100%);
+    transform: translateX(100%);
   }
 }
 
-[dir=rtl] .nut-skeleton-content .nut-avatar,
-.nut-rtl .nut-skeleton-content .nut-avatar {
-  margin-right: 0;
-  margin-left: 20px;
-}
 [dir=rtl] .nut-skeleton-animation,
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+  animation: nut-skeleton-rtl 2s linear 0s infinite;
 }
 @keyframes nut-skeleton-rtl {
-  0% {
-    background-position-x: calc(500px + 100%);
+  from {
+    transform: translateX(100%);
   }
   to {
-    background-position-x: -500px;
+    transform: translateX(-100%);
   }
 }

package/dist/es/packages/switch/style/style.css

@@ -45,6 +45,11 @@
 .nut-switch-button-close-rtl {
   left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
+.nut-switch-button .nut-icon {
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  height: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
 .nut-switch-close {
   background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }

package/dist/es/packages/switch/style/style.harmony.css

@@ -45,6 +45,11 @@
 .nut-switch-button-close-rtl {
   left: calc(100% - 28px + 2px);
 }
+.nut-switch-button .nut-icon {
+  width: calc((28px - 2px * 2) / 2);
+  height: calc((28px - 2px * 2) / 2);
+  color: #ffadbe;
+}
 .nut-switch-close {
   background-color: #c2c4cc;
 }

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

@@ -40,6 +40,11 @@
         left: calc(100% - $switch-height + $switch-border-width);
       }
     }
+    .nut-icon {
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      height: calc(($switch-height - $switch-border-width * 2) / 2);
+      color: $switch-active-disabled-background-color;
+    }
   }
 
   &-close {

package/dist/es/packages/switch/switch.js

@@ -3,24 +3,27 @@ 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 { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "@tarojs/components";
 import classNames from "classnames";
+import { Loading1 } from "@nutui/icons-react-taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
 import { useRtl } from "../configprovider/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     activeText: '',
-    inactiveText: ''
+    inactiveText: '',
+    loadingIcon: /*#__PURE__*/ React.createElement(Loading1, null)
 });
 export var Switch = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
         "checked",
         "defaultChecked",
         "disabled",
         "activeText",
         "inactiveText",
+        "loadingIcon",
         "className",
         "style",
         "onChange"
@@ -31,6 +34,12 @@ export var Switch = function(props) {
         value: checked,
         defaultValue: defaultChecked
     }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    useEffect(function() {
+        changing && setChanging(false);
+    }, [
+        value
+    ]);
+    var _useState = _sliced_to_array(useState(false), 2), changing = _useState[0], setChanging = _useState[1];
     var classes = function() {
         var _obj;
         return classNames([
@@ -39,17 +48,18 @@ export var Switch = function(props) {
             (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-close"), !value), _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-disabled-close"), disabled && !value), _obj)
         ]);
     };
-    var onClick = function(event) {
-        if (disabled) return;
-        onChange && onChange(!value, event);
+    var onClick = function() {
+        if (disabled || changing) return;
+        if (props.onChange) {
+            setChanging(true);
+            props.onChange(!value);
+        }
         setValue(!value);
     };
     var _obj, _obj1;
     return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: classes(),
-        onClick: function(e) {
-            return onClick(e);
-        },
+        onClick: onClick,
         style: style
     }, rest), /*#__PURE__*/ React.createElement(View, {
         className: classNames([
@@ -61,9 +71,9 @@ export var Switch = function(props) {
             ],
             (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-open-rtl"), rtl && value), _define_property(_obj, "".concat(classPrefix, "-button-close-rtl"), rtl && !value), _obj)
         ])
-    }, !value && !activeText && /*#__PURE__*/ React.createElement(View, {
+    }, changing && loadingIcon ? /*#__PURE__*/ React.createElement(React.Fragment, null, loadingIcon) : /*#__PURE__*/ React.createElement(React.Fragment, null, !value && !activeText && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-close-line")
-    })), activeText && /*#__PURE__*/ React.createElement(View, {
+    }))), activeText && /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-label"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-label-open"), value), _define_property(_obj1, "".concat(classPrefix, "-label-close"), !value), _define_property(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), _define_property(_obj1, "".concat(classPrefix, "-label-close-rtl"), rtl && !value), _define_property(_obj1, "".concat(classPrefix, "-label-close-disabled"), disabled && !value), _obj1))
     }, value ? activeText : inactiveText));
 };