@nutui/nutui-react-taro 3.0.4 → 3.0.6

package/dist/cjs/packages/pickerview/pickerroller.js

@@ -8,35 +8,46 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _usetouch = require("../../hooks/use-touch");
 var _supportspassive = require("../../utils/supports-passive");
 var _platformtaro = require("../../utils/platform-taro");
 var _utils = require("../../utils");
 var _utils1 = require("./utils");
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
+var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var InternalPickerRoller = function InternalPickerRoller(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function renderLabel(item) {
         return item.label;
     } : _props_renderLabel;
+    var classPrefix = 'nut-pickerview-roller';
+    var uuid = (0, _useuuid.default)();
     var DEFAULT_DURATION = 200;
     var INERTIA_TIME = 300;
     var INERTIA_DISTANCE = 15;
     var ROTATION = 20;
     var touch = (0, _usetouch.useTouch)();
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(1), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
     var lineSpacing = (0, _react.useRef)(36);
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
     var _useState2 = (0, _sliced_to_array._)((0, _react.useState)('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
     var isMoving = (0, _react.useRef)(false);
     var rollerRef = (0, _react.useRef)(null);
     var pickerRollerRef = (0, _react.useRef)(null);
+    var placeholderRef = (0, _react.useRef)(null);
     var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startTime = _useState3[0], setStartTime = _useState3[1];
     var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startY = _useState4[0], setStartY = _useState4[1];
     var transformY = (0, _react.useRef)(0);
     var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
+    var _useState6 = (0, _sliced_to_array._)((0, _react.useState)((0, _platformtaro.web)()), 2), isGetLineSpacing = _useState6[0], setGetStatus = _useState6[1];
     var _useStyles = (0, _utils1.useStyles)(touchTime, touchDeg, scrollDistance, lineSpacing, ROTATION), touchRollerStyle = _useStyles.touchRollerStyle, touchTiledStyle = _useStyles.touchTiledStyle, rollerStyle = _useStyles.rollerStyle;
     var isItemHidden = function isItemHidden(index) {
         return index >= currentIndex + 8 || index <= currentIndex - 8;
@@ -61,7 +72,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
             var deg1 = Math.min(Math.max(currentDeg, 0), (options.length + 1) * ROTATION);
             if (deg1 >= 0 && deg1 < (options.length + 1) * ROTATION) {
                 applyTransform('', "".concat(deg1, "deg"), undefined, updatedMove);
-                setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
+                deg1 > 0 && setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
             }
         }
     };
@@ -102,7 +113,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
         var index = options.findIndex(function(item) {
             return item.value === selectedValue;
         });
-        setCurrentIndex(index === -1 ? 1 : index + 1);
+        setCurrentIndex(index === -1 ? 0 : index + 1);
         var move = index * lineSpacing.current;
         shouldSelect && selectValue(-move);
         handleMove(-move);
@@ -112,16 +123,69 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
         setTouchTime(0);
         selectValue(scrollDistance);
     };
+    var getReactHeight = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function() {
+            var placeholder, placeholderHeight, error;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        return [
+                            4,
+                            (0, _getrectbytaro.getRectByTaro)(placeholderRef.current)
+                        ];
+                    case 1:
+                        placeholder = _state.sent();
+                        placeholderHeight = placeholder.height || 0;
+                        return [
+                            2,
+                            placeholderHeight
+                        ];
+                    case 2:
+                        error = _state.sent();
+                        console.error('获取高度失败:', error);
+                        return [
+                            2,
+                            0
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function getReactHeight() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     // lineSpacing.current CSS variable
     (0, _react.useEffect)(function() {
         var element = pickerRollerRef.current;
+        var currentLineSpacing;
         if (element && (0, _platformtaro.web)()) {
             var computedStyle = getComputedStyle(element);
-            var currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
-            !!currentLineSpacing && (lineSpacing.current = parseFloat(currentLineSpacing));
+            currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
+            if (currentLineSpacing) {
+                lineSpacing.current = parseFloat(currentLineSpacing);
+            }
+        } else {
+            getReactHeight().then(function(height) {
+                currentLineSpacing = height;
+                if (currentLineSpacing) {
+                    lineSpacing.current = currentLineSpacing;
+                    setGetStatus(true);
+                }
+            });
         }
     }, [
-        pickerRollerRef.current
+        pickerRollerRef.current,
+        placeholderRef.current
     ]);
     (0, _react.useEffect)(function() {
         isMoving.current = false;
@@ -163,21 +227,27 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
         className: "nut-pickerview-list",
         ref: pickerRollerRef
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-pickerview-roller",
+        className: "".concat(classPrefix, "-placeholder"),
+        ref: placeholderRef,
+        id: "".concat(classPrefix, "-placeholder-").concat(uuid)
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: classPrefix,
+        id: "".concat(classPrefix, "-").concat(uuid),
         ref: rollerRef,
         style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
         onTransitionEnd: stopMomentumScroll
     }, threeDimensional && options.map(function(item, index) {
         var _item_value;
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-pickerview-roller-item ".concat(isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'),
+        var _obj;
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, isGetLineSpacing ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-item"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-item-hidden"), isItemHidden(index + 1)), (0, _define_property._)(_obj, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex), _obj)),
             style: rollerStyle(index),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
-        }, renderLabel(item));
+        }, renderLabel(item)) : null);
     }), !threeDimensional && options.map(function(item, index) {
         var _item_value;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-pickerview-roller-item-tiled",
+            className: (0, _classnames.default)("".concat(classPrefix, "-item-tiled"), (0, _define_property._)({}, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex)),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
         }, renderLabel(item));
     })));

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

@@ -1,5 +1,4 @@
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -50,6 +49,9 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
+    &-placeholder {
+      height: $picker-item-height;
+    }
   }
 
   &-roller-item {

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

@@ -3,7 +3,6 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;
@@ -49,6 +48,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: var(--nutui-picker-item-height, 36px);
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

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

@@ -48,6 +48,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: 36px;
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

package/dist/cjs/packages/resultpage/style/index.js

@@ -1 +1,2 @@
+import '../../button/style';
 import './resultpage.scss';

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

@@ -2,6 +2,395 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-button {
+  position: relative;
+  display: flex;
+  display: inline-block;
+  /* #ifdef harmony*/
+  width: 80px;
+  /* #endif */
+  /* #ifndef harmony*/
+  width: auto;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: var(--nutui-button-default-height, 32px);
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-weight: var(--nutui-font-weight, 400);
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  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);
+}
+.nut-button-text {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-text-right {
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-children {
+  display: flex;
+  flex-direction: row;
+  background: transparent;
+}
+.nut-button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border: inherit;
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: " ";
+}
+.nut-button::after {
+  border: none;
+}
+.nut-button:active::before {
+  opacity: 0.1;
+}
+.nut-button-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* #ifndef harmony */
+  background: initial;
+  /* #endif */
+}
+.nut-button-wrap .nut-icon {
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-button-loading::before, .nut-button-disabled::before {
+  display: none;
+}
+.nut-button-disabled {
+  cursor: not-allowed;
+  color: #ffffff;
+}
+.nut-button.nut-button-icononly {
+  width: var(--nutui-button-default-height, 32px);
+  padding: 0;
+}
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
+}
+.nut-button-default {
+  padding: var(--nutui-button-default-padding, 0px 12px);
+  border-style: solid;
+  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-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-color-text-help, #888b94));
+}
+.nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
+  background: transparent;
+  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);
+}
+.nut-button-xlarge {
+  height: var(--nutui-button-xlarge-height, 48px);
+  padding: var(--nutui-button-xlarge-padding, 0px 24px);
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-icon {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-xlarge-children {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-large {
+  height: var(--nutui-button-large-height, 40px);
+  padding: var(--nutui-button-large-padding, 0px 16px);
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  border-radius: var(--nutui-radius-s, 6px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-icon {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-large-children {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-small {
+  height: var(--nutui-button-small-height, 28px);
+  padding: var(--nutui-button-small-padding, 0px 8px);
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-small .nut-icon {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-small-children {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-mini {
+  height: var(--nutui-button-mini-height, 24px);
+  padding: var(--nutui-button-mini-padding, 0px 8px);
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-mini .nut-icon {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-mini-children {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-primary {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-primary-children {
+  color: var(--nutui-button-primary-color, #ffffff);
+}
+.nut-button-primary-solid {
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  color: var(--nutui-button-primary-color, #ffffff);
+  border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-button-primary-disabled, .nut-button-primary-disabled.nut-button-icononly, .nut-button-primary-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
+  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-color-primary, #ff0f23));
+}
+.nut-button-primary-none-disabled {
+  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-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-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-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-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-color-success, #00d900));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-success-children {
+  color: var(--nutui-button-success-color, #ffffff);
+}
+.nut-button-success-solid-disabled {
+  background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+  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-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-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-color-success, #00d900));
+}
+.nut-button-success-none-disabled {
+  color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+}
+.nut-button-info {
+  color: var(--nutui-button-info-color, #ffffff);
+  background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-info-children {
+  color: var(--nutui-button-info-color, #ffffff);
+}
+.nut-button-info-solid-disabled {
+  background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-outline, .nut-button-info-dashed {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+  border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-outline-disabled, .nut-button-info-dashed-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-none {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-none-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-danger {
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-danger-children {
+  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-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-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-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-color-danger, #ff0f23));
+}
+.nut-button-danger-none-disabled {
+  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-color-warning, #ffbf00));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-warning-children {
+  color: var(--nutui-button-warning-color, #ffffff);
+}
+.nut-button-warning-disabled, .nut-button-warning-solid-disabled {
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: 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-outline, .nut-button-warning-dashed {
+  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-color-warning, #ffbf00));
+}
+.nut-button-warning-none-disabled {
+  color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-block {
+  display: block;
+  width: 100%;
+}
+.nut-button-outline {
+  background: transparent;
+  border-style: solid;
+}
+.nut-button-dashed {
+  background: transparent;
+  border-style: dashed;
+}
+.nut-button-none {
+  background: transparent;
+  border-color: transparent;
+}
+.nut-button-loading {
+  cursor: default;
+  opacity: 0.9;
+}
+.nut-button-square {
+  border-radius: var(--nutui-button-square-border-radius, 0);
+}
+
+[dir=rtl] .nut-button-text,
+.nut-rtl .nut-button-text {
+  margin-left: 0;
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button-text.right,
+.nut-rtl .nut-button-text.right {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button::before,
+.nut-rtl .nut-button::before {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
 .nut-resultpage {
   width: 100%;
   display: flex;

package/dist/cjs/packages/searchbar/searchbar.js

@@ -8,10 +8,12 @@ Object.defineProperty(exports, "SearchBar", {
         return SearchBar;
     }
 });
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
@@ -69,7 +71,9 @@ var SearchBar = function SearchBar(props) {
         outerValue
     ]);
     (0, _react.useEffect)(function() {
-        autoFocus && forceFocus();
+        if (_taro.default.getEnv() === 'WEB') {
+            autoFocus && forceFocus();
+        }
     }, [
         autoFocus
     ]);
@@ -77,10 +81,12 @@ var SearchBar = function SearchBar(props) {
         return /*#__PURE__*/ _react.default.createElement(_components.Input, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
-            value: value || '',
+            style: style,
+            value: (value || '').toString(),
             placeholder: placeholder || locale.placeholder,
             disabled: disabled || readOnly,
             maxlength: maxLength,
+            autoFocus: autoFocus,
             onInput: onInput,
             onFocus: focus,
             onBlur: blur,