@nutui/nutui-react-taro 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/cjs/packages/button/button.js

@@ -53,7 +53,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         "nativeType",
         "onClick"
     ]);
-    var getStyle = (0, _react.useCallback)(function() {
+    var getStyle = (0, _react.useMemo)(function() {
         var style = {};
         if (color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
@@ -63,7 +63,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
                 }
             } else {
                 style.color = '#fff';
-                if ((0, _platformtaro.harmonyAndRn)()) {
+                if ((0, _platformtaro.harmony)()) {
                     style.backgroundColor = color;
                 }
                 style.background = color;
@@ -75,7 +75,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         color,
         props.fill
     ]);
-    var getContStyle = (0, _react.useCallback)(function() {
+    var getContStyle = (0, _react.useMemo)(function() {
         var style = {};
         if (props.color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
@@ -88,26 +88,33 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
         return style;
     }, [
-        color
+        color,
+        props.fill,
+        props.color
     ]);
-    var handleClick = function handleClick(e) {
+    var handleClick = (0, _react.useCallback)(function(e) {
         if (!loading && !disabled && onClick) {
             onClick(e);
         }
-    };
+    }, [
+        loading,
+        disabled,
+        onClick
+    ]);
+    var _obj;
+    var buttonClassNames = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(size), size), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape), shape), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), (0, _define_property._)(_obj, "".concat(prefixCls, "-block"), block), (0, _define_property._)(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-loading"), loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
     if ((0, _taro.getEnv)() === 'WEB') {
         ;
         rest.type = rest.formType;
     }
-    var _obj;
     return(// eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     // eslint-disable-next-line react/button-has-type
     /*#__PURE__*/ /*#__PURE__*/ _react.default.createElement(_components.Button, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
         ref: ref,
         formType: nativeType,
-        className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(type), type === 'primary' && !props.fill ? "".concat(prefixCls, "-").concat(type, "-solid") : null, props.fill ? "".concat(prefixCls, "-").concat(fill) : null, props.fill ? "".concat(prefixCls, "-").concat(type, "-").concat(fill) : null, children ? '' : "".concat(prefixCls, "-icononly"), (_obj = {}, (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(size), size), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape), shape), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), (0, _define_property._)(_obj, "".concat(prefixCls, "-block"), block), (0, _define_property._)(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-loading"), loading), _obj), className),
-        style: (0, _object_spread._)({}, getStyle(), style),
+        className: buttonClassNames,
+        style: (0, _object_spread._)({}, getStyle, style),
         onClick: function onClick(e) {
             return handleClick(e);
         }
@@ -115,9 +122,9 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         className: "nut-button-wrap"
     }, loading && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
         className: "nut-icon-loading"
-    }), !loading && icon ? icon : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),
-        style: (0, _platformtaro.harmonyAndRn)() ? getContStyle() : {}
-    }, children), rightIcon || null)));
+    }), !loading && icon, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? ' nut-button-text-right' : ''),
+        style: (0, _platformtaro.harmony)() ? getContStyle : {}
+    }, children), rightIcon)));
 });
 Button.displayName = 'NutButton';

package/dist/cjs/packages/button/style/button.scss

@@ -2,10 +2,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -72,7 +72,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    /* #ifndef rn harmony */
+    /* #ifndef harmony */
     background: initial;
     /* #endif */
     .nut-icon {

package/dist/cjs/packages/button/style/style.css

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -29,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-gray-7));
+  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 0.5px);
 }
@@ -50,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -71,7 +71,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }
@@ -109,20 +109,20 @@
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -214,37 +214,37 @@
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary.nut-button-solid.nut-button-normal {
   font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
   color: var(--nutui-button-success-color, #ffffff);
-  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -256,15 +256,15 @@
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
@@ -298,7 +298,7 @@
 }
 .nut-button-danger {
   color: var(--nutui-button-danger-color, #ffffff);
-  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -306,26 +306,26 @@
   color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
-  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-warning {
   color: var(--nutui-button-warning-color, #ffffff);
-  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -338,15 +338,15 @@
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));