@nutui/nutui-react-taro 3.1.0-beta.1 → 4.0.0-beta.1

package/dist/es/packages/button/button.js

@@ -24,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var _ref = _object_spread({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, // formType,
-    nativeType = _ref.nativeType, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
+    nativeType = _ref.nativeType, description = _ref.description, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
         "color",
         "shape",
         "fill",
@@ -39,8 +39,22 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "className",
         "style",
         "nativeType",
+        "description",
         "onClick"
     ]);
+    var mappedSize = useMemo(function() {
+        if (!size) return 'normal';
+        var sizeMap = {
+            '48': 'xlarge',
+            '40': 'large',
+            '32': 'normal',
+            '28': 'small',
+            '24': 'mini'
+        };
+        return sizeMap[size] || size;
+    }, [
+        size
+    ]);
     var getStyle = useMemo(function() {
         var style = {};
         if (color) {
@@ -50,7 +64,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                     style.borderColor = color;
                 }
             } else {
-                style.color = '#fff';
+                style.color = 'var(--nutui-color-primary-text, #fff)';
                 if (harmony()) {
                     style.backgroundColor = color;
                 }
@@ -69,7 +83,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
                 style.color = color;
             } else {
-                style.color = '#fff';
+                style.color = 'var(--nutui-color-primary-text, #fff)';
                 style.background = 'transparent';
                 style.borderColor = 'transparent';
             }
@@ -90,29 +104,44 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         onClick
     ]);
     var _obj;
-    var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
+    var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(mappedSize), mappedSize), _define_property(_obj, "".concat(prefixCls, "-has-desc"), !!description), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
     // if (getEnv() === 'WEB') {
     //   ;(rest as any).type = formType
     // }
     return (
+        // <TaroButton>
         // @ts-ignore
-        // <TaroButton
         /*#__PURE__*/ (React.createElement(View, _object_spread_props(_object_spread({}, rest), {
             ref: ref,
             // formType={formType || nativeType}
             className: buttonClassNames,
             style: _object_spread({}, getStyle, style),
+            ariaRole: "button",
+            role: "button",
+            ariaDisabled: disabled || loading,
+            "aria-disabled": disabled || loading,
+            ariaBusy: loading,
+            "aria-busy": loading,
             onClick: function(e) {
                 return handleClick(e);
             }
         }), /*#__PURE__*/ React.createElement(View, {
             className: "nut-button-wrap"
         }, loading && /*#__PURE__*/ React.createElement(Loading, {
-            className: "nut-icon-loading"
+            className: "nut-icon-loading",
+            ariaHidden: true,
+            "aria-hidden": true
         }), !loading && icon, children && /*#__PURE__*/ React.createElement(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' : ''),
+            className: classNames('nut-button-children', "nut-button-".concat(mappedSize, "-children"), "nut-button-".concat(type, "-children"), {
+                'nut-button-text': icon || loading,
+                'nut-button-text-right': rightIcon
+            }),
             style: harmony() ? getContStyle : {}
-        }, children), rightIcon)))
+        }, description ? /*#__PURE__*/ React.createElement(View, {
+            className: "nut-button-title"
+        }, children) : children, description && /*#__PURE__*/ React.createElement(View, {
+            className: "nut-button-desc"
+        }, description)), rightIcon)))
     );
 });
 Button.displayName = 'NutButton';