@nutui/nutui-react-taro 1.3.1 → 1.3.2-beta.0

package/dist/esm/{datepicker.taro-e385849d.js → datepicker.taro-440e6da6.js}

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChange", "className", "style", "threeDimensional", "swipeDuration"],
     _excluded2 = ["minDate", "maxDate", "type", "isShowChinese", "minuteStep", "modelValue", "visible", "title", "formatter", "onCloseDatePicker", "onConfirmDatePicker", "filter", "threeDimensional", "className", "style"];
 
@@ -9,20 +9,297 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React__default, { useState, useRef, useEffect } from 'react';
-import { P as Popup } from './popup-67173ec6.js';
-import { P as PickerSlot } from './pickerSlot-f8e4e542.js';
-import { u as useConfig } from './configprovider-9c393a29.js';
+import React__default, { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import { u as useRefs, P as Popup } from './useRefs-032cf186.js';
+import { u as useTouch } from './useTouch-a2ea68c6.js';
+import { u as useConfig } from './configprovider-3e87d67a.js';
 import { c as cn } from './bem-893ad28d.js';
 
+var InternalPickerSlot = function InternalPickerSlot(props, ref) {
+  var _props$keyIndex = props.keyIndex,
+      keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex,
+      defaultValue = props.defaultValue,
+      _props$listData = props.listData,
+      listData = _props$listData === void 0 ? [] : _props$listData,
+      _props$threeDimension = props.threeDimensional,
+      threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension,
+      _props$swipeDuration = props.swipeDuration,
+      swipeDuration = _props$swipeDuration === void 0 ? 1000 : _props$swipeDuration,
+      chooseItem = props.chooseItem;
+  var touch = useTouch();
+  var DEFAULT_DURATION = 200; // 触发惯性滑动条件:
+  // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
+  // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
+
+  var INERTIA_TIME = 300;
+  var INERTIA_DISTANCE = 15;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currIndex = _useState2[0],
+      setCurrIndex = _useState2[1];
+
+  var lineSpacing = 36;
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      touchTime = _useState4[0],
+      setTouchTime = _useState4[1];
+
+  var _useState5 = useState('0deg'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      touchDeg = _useState6[0],
+      setTouchDeg = _useState6[1];
+
+  var rotation = 20;
+  var moving = useRef(false);
+  var timer;
+  useRef(null);
+  var rollerRef = useRef(null);
+  var pickerSlotRef = useRef(null);
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      startTime = _useState8[0],
+      setStartTime = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      startY = _useState10[0],
+      setStartY = _useState10[1];
+
+  var transformY = useRef(0);
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      scrollDistance = _useState12[0],
+      setScrollDistance = _useState12[1];
+
+  var isHidden = function isHidden(index) {
+    if (index >= currIndex + 8 || index <= currIndex - 8) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var setTransform = function setTransform() {
+    var translateY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var type = arguments.length > 1 ? arguments[1] : undefined;
+    var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_DURATION;
+    var deg = arguments.length > 3 ? arguments[3] : undefined;
+    var nTime = time;
+
+    if (type !== 'end') {
+      nTime = 0;
+    }
+
+    setTouchTime(nTime);
+    setTouchDeg(deg);
+    setScrollDistance(translateY);
+  };
+
+  var setMove = function setMove(move, type, time) {
+    var updateMove = move + transformY.current;
+
+    if (type === 'end') {
+      // 限定滚动距离
+      if (updateMove > 0) {
+        updateMove = 0;
+      }
+
+      if (updateMove < -(listData.length - 1) * lineSpacing) {
+        updateMove = -(listData.length - 1) * lineSpacing;
+      } // 设置滚动距离为lineSpacing的倍数值
+
+
+      var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
+      var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
+      setTransform(endMove, type, time, deg);
+      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
+    } else {
+      var _deg = 0;
+      var currentDeg = (-updateMove / lineSpacing + 1) * rotation; // picker 滚动的最大角度
+
+      var maxDeg = (listData.length + 1) * rotation;
+      var minDeg = 0;
+      _deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+
+      if (minDeg < _deg && _deg < maxDeg) {
+        setTransform(updateMove, '', undefined, "".concat(_deg, "deg"));
+        setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
+      }
+    }
+  };
+
+  var setChooseValue = function setChooseValue(move) {
+    chooseItem && chooseItem(listData === null || listData === void 0 ? void 0 : listData[Math.round(-move / lineSpacing)], keyIndex);
+  }; // 开始滚动
+
+
+  var touchStart = function touchStart(event) {
+    touch.start(event);
+    setStartY(touch.deltaY);
+    setStartTime(Date.now());
+    transformY.current = scrollDistance;
+  };
+
+  var touchMove = function touchMove(event) {
+    touch.move(event);
+
+    if (touch.isVertical) {
+      moving.current = true;
+      preventDefault(event, true);
+    }
+
+    var move = touch.deltaY - startY;
+    setMove(move);
+  };
+
+  var touchEnd = function touchEnd(event) {
+    if (!moving.current) return;
+    var move = touch.deltaY - startY;
+    var moveTime = Date.now() - startTime; // 区分是否为惯性滚动
+
+    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+      // 惯性滚动
+      var distance = momentum(move, moveTime);
+      setMove(distance, 'end', +swipeDuration);
+    } else {
+      setMove(move, 'end');
+    }
+
+    setTimeout(function () {
+      // moving.current = false
+      touch.reset();
+    }, 0);
+  }; // 惯性滚动 距离
+
+
+  var momentum = function momentum(distance, duration) {
+    var nDistance = distance; // 惯性滚动的速度
+
+    var speed = Math.abs(nDistance / duration); // 惯性滚动的距离
+
+    nDistance = speed / 0.003 * (nDistance < 0 ? -1 : 1);
+    return nDistance;
+  };
+
+  var modifyStatus = function modifyStatus(type, val) {
+    var value = val || defaultValue;
+    var index = -1;
+
+    if (value) {
+      listData.some(function (item, idx) {
+        if (item.value === value) {
+          index = idx;
+          return true;
+        }
+
+        return false;
+      });
+    } else {
+      listData.forEach(function (item, i) {
+        if (item.value === defaultValue) {
+          index = i;
+        }
+      });
+    }
+
+    setCurrIndex(index === -1 ? 1 : index + 1);
+    var move = index === -1 ? 0 : index * lineSpacing;
+    type && setChooseValue(-move);
+    setMove(-move);
+  }; // 惯性滚动结束
+
+
+  var stopMomentum = function stopMomentum() {
+    moving.current = false;
+    setTouchTime(0);
+    setChooseValue(scrollDistance);
+  }; // 阻止默认事件
+
+
+  var preventDefault = function preventDefault(event, isStopPropagation) {
+    /* istanbul ignore else */
+    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (isStopPropagation) {
+      event.stopPropagation();
+    }
+  };
+
+  var touchRollerStyle = function touchRollerStyle() {
+    return {
+      transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
+      transform: "rotate3d(1, 0, 0, ".concat(touchDeg, ")")
+    };
+  };
+
+  var touchTileStyle = function touchTileStyle() {
+    return {
+      transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
+      transform: "translate3d(0, ".concat(scrollDistance, "px, 0)")
+    };
+  };
+
+  useEffect(function () {
+    setScrollDistance(0);
+    transformY.current = 0;
+    modifyStatus(false);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [listData]);
+  useImperativeHandle(ref, function () {
+    return {
+      stopMomentum: stopMomentum,
+      moving: moving.current
+    };
+  });
+  return React__default.createElement("div", {
+    className: "nut-picker-list",
+    ref: pickerSlotRef,
+    onTouchStart: touchStart,
+    onTouchMove: touchMove,
+    onTouchEnd: touchEnd
+  }, React__default.createElement("div", {
+    className: "nut-picker-roller",
+    ref: rollerRef,
+    style: threeDimensional ? touchRollerStyle() : touchTileStyle(),
+    onTransitionEnd: stopMomentum
+  }, threeDimensional && listData.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-picker-roller-item ".concat(isHidden(index + 1) && 'nut-picker-roller-item-hidden'),
+      style: {
+        transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
+      },
+      key: item.value ? item.value : index
+    }, React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
+  }), !threeDimensional && listData.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-picker-roller-item-tile",
+      key: item.value ? item.value : index
+    }, React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
+  })), React__default.createElement("div", {
+    className: "nut-picker-mask"
+  }), React__default.createElement("div", {
+    className: "nut-picker-indicator"
+  }));
+};
+
+var PickerSlot = React__default.forwardRef(InternalPickerSlot);
+
 var InternalPicker = function InternalPicker(props, ref) {
   var _useConfig = useConfig(),
       locale = _useConfig.locale;
 
   var isVisible = props.isVisible,
       title = props.title,
-      _props$listData = props.listData,
-      listData = _props$listData === void 0 ? [] : _props$listData,
+      _props$listData2 = props.listData,
+      listData = _props$listData2 === void 0 ? [] : _props$listData2,
       defaultValueData = props.defaultValueData,
       onConfirm = props.onConfirm,
       onClose = props.onClose,
@@ -34,27 +311,33 @@ var InternalPicker = function InternalPicker(props, ref) {
       swipeDuration = props.swipeDuration,
       rest = _objectWithoutProperties(props, _excluded);
 
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      chooseValueData = _useState2[0],
-      setchooseValueData = _useState2[1]; // 选择的数据的 value 值, 每一条数据的 value 值
+  var _useState13 = useState([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      chooseValueData = _useState14[0],
+      setchooseValueData = _useState14[1]; // 选择的数据的 value 值, 每一条数据的 value 值
 
 
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      columnIndex = _useState4[0],
-      setcolumnIndex = _useState4[1]; // 选中列
+  var _useState15 = useState(0),
+      _useState16 = _slicedToArray(_useState15, 2),
+      columnIndex = _useState16[0],
+      setcolumnIndex = _useState16[1]; // 选中列
 
 
   var pickerRef = useRef(null);
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      columnsList = _useState6[0],
-      setColumnsList = _useState6[1]; // 格式化后每一列的数据
+  var _useRefs = useRefs(),
+      _useRefs2 = _slicedToArray(_useRefs, 2),
+      refs = _useRefs2[0],
+      setRefs = _useRefs2[1];
+
+  var _useState17 = useState([]),
+      _useState18 = _slicedToArray(_useState17, 2),
+      columnsList = _useState18[0],
+      setColumnsList = _useState18[1]; // 格式化后每一列的数据
 
 
-  var b = cn('picker'); // 默认值修改
+  var b = cn('picker');
+  var isConfirmEvent = useRef(false); // 默认值修改
 
   useEffect(function () {
     if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString()) {
@@ -66,7 +349,13 @@ var InternalPicker = function InternalPicker(props, ref) {
   }, [defaultValueData]); // 选中值进行修改
 
   useEffect(function () {
+    console.log('修改');
     onChange && onChange(columnIndex, chooseValueData, selectedOptions());
+
+    if (isConfirmEvent.current) {
+      isConfirmEvent.current = false;
+      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    }
   }, [chooseValueData]); // 列表格式修改
 
   useEffect(function () {
@@ -80,8 +369,23 @@ var InternalPicker = function InternalPicker(props, ref) {
 
 
   var confirm = function confirm() {
-    onConfirm && onConfirm(chooseValueData, selectedOptions());
+    var movings = false;
+    refs.forEach(function (_ref) {
+      if (_ref.moving) movings = true;
+
+      _ref.stopMomentum();
+    });
+
+    if (movings) {
+      isConfirmEvent.current = true;
+    } else {
+      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    }
+
     onClose && onClose(chooseValueData, selectedOptions());
+    setTimeout(function () {
+      isConfirmEvent.current = false;
+    }, 0);
   };
 
   var selectedOptions = function selectedOptions() {
@@ -220,6 +524,22 @@ var InternalPicker = function InternalPicker(props, ref) {
     }
   };
 
+  var renderToolbar = function renderToolbar() {
+    return React__default.createElement("div", {
+      className: b('control')
+    }, React__default.createElement("span", {
+      className: b('cancel-btn'),
+      onClick: function onClick() {
+        return closeActionSheet();
+      }
+    }, locale.cancel), React__default.createElement("div", {
+      className: b('title')
+    }, title || ''), React__default.createElement("span", {
+      className: b('confirm-btn'),
+      onClick: confirm
+    }, locale.confirm));
+  };
+
   return React__default.createElement(Popup, {
     visible: isVisible,
     position: "bottom",
@@ -229,25 +549,12 @@ var InternalPicker = function InternalPicker(props, ref) {
   }, React__default.createElement("div", _objectSpread({
     className: "".concat(b(), " ").concat(className || ''),
     style: style
-  }, rest), React__default.createElement("div", {
-    className: b('control')
-  }, React__default.createElement("span", {
-    className: b('cancel-btn'),
-    onClick: function onClick() {
-      return closeActionSheet();
-    }
-  }, locale.cancel), React__default.createElement("div", {
-    className: b('title')
-  }, title || ''), React__default.createElement("span", {
-    className: b('confirm-btn'),
-    onClick: function onClick() {
-      return confirm();
-    }
-  }, locale.confirm)), React__default.createElement("div", {
+  }, rest), renderToolbar(), React__default.createElement("div", {
     className: b('panel'),
     ref: pickerRef
   }, columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function (item, index) {
     return React__default.createElement(PickerSlot, {
+      ref: setRefs(index),
       defaultValue: chooseValueData === null || chooseValueData === void 0 ? void 0 : chooseValueData[index],
       listData: item,
       threeDimensional: threeDimensional,
@@ -294,25 +601,25 @@ var DatePicker = function DatePicker(props) {
       style = _defaultProps$props.style,
       rest = _objectWithoutProperties(_defaultProps$props, _excluded2);
 
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      show = _useState8[0],
-      setShow = _useState8[1];
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      show = _useState20[0],
+      setShow = _useState20[1];
 
-  var _useState9 = useState(modelValue),
-      _useState10 = _slicedToArray(_useState9, 2),
-      currentDate = _useState10[0],
-      setCurrentDate = _useState10[1];
+  var _useState21 = useState(modelValue),
+      _useState22 = _slicedToArray(_useState21, 2),
+      currentDate = _useState22[0],
+      setCurrentDate = _useState22[1];
 
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      defaultValue = _useState12[0],
-      setDefaultValue = _useState12[1];
+  var _useState23 = useState([]),
+      _useState24 = _slicedToArray(_useState23, 2),
+      defaultValue = _useState24[0],
+      setDefaultValue = _useState24[1];
 
-  var _useState13 = useState([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      listData = _useState14[0],
-      setListData = _useState14[1];
+  var _useState25 = useState([]),
+      _useState26 = _slicedToArray(_useState25, 2),
+      listData = _useState26[0],
+      setListData = _useState26[1];
 
   var pickerRef = useRef(null);
 
@@ -346,7 +653,7 @@ var DatePicker = function DatePicker(props) {
   }
 
   var getBoundary = function getBoundary(type, value) {
-    var _ref;
+    var _ref2;
 
     var boundary = type === 'min' ? minDate : maxDate;
     var year = boundary.getFullYear();
@@ -380,7 +687,7 @@ var DatePicker = function DatePicker(props) {
       }
     }
 
-    return _ref = {}, _defineProperty(_ref, "".concat(type, "Year"), year), _defineProperty(_ref, "".concat(type, "Month"), month), _defineProperty(_ref, "".concat(type, "Date"), date), _defineProperty(_ref, "".concat(type, "Hour"), hour), _defineProperty(_ref, "".concat(type, "Minute"), minute), _defineProperty(_ref, "".concat(type, "Seconds"), seconds), _ref;
+    return _ref2 = {}, _defineProperty(_ref2, "".concat(type, "Year"), year), _defineProperty(_ref2, "".concat(type, "Month"), month), _defineProperty(_ref2, "".concat(type, "Date"), date), _defineProperty(_ref2, "".concat(type, "Hour"), hour), _defineProperty(_ref2, "".concat(type, "Minute"), minute), _defineProperty(_ref2, "".concat(type, "Seconds"), seconds), _ref2;
   };
 
   var ranges = function ranges(date) {

package/dist/esm/{dialog.taro-c80b7b5f.js → dialog.taro-0e53ade9.js}

@@ -1,19 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["visible", "footer", "noFooter", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"],
-    _excluded2 = ["visible", "footer", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"];
+var _excluded = ["color", "shape", "plain", "loading", "disabled", "type", "size", "block", "icon", "children", "onClick", "className", "style"],
+    _excluded2 = ["visible", "footer", "noFooter", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"],
+    _excluded3 = ["visible", "footer", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import * as React from 'react';
-import React__default, { forwardRef } from 'react';
+import React__default, { useCallback, useState, useEffect, forwardRef } from 'react';
 import classNames from 'classnames';
-import { B as Button } from './button-521a516b.js';
+import { B as Button$1 } from './button.taro-bffc9543.js';
 import { CSSTransition } from 'react-transition-group';
 import ReactDOM__default from 'react-dom';
-import { u as useConfig } from './configprovider-9c393a29.js';
+import { I as Icon } from './icon-8dc4de10.js';
+import { u as useConfig } from './configprovider.taro-6c7b3056.js';
 
 var Content = function Content(props) {
   var visible = props.visible,
@@ -126,6 +129,103 @@ var DialogWrapper = function DialogWrapper(props) {
 };
 
 DialogWrapper.displayName = 'NutDialogWrapper';
+var defaultProps$2 = {
+  className: '',
+  color: '',
+  shape: 'round',
+  plain: false,
+  loading: false,
+  disabled: false,
+  type: 'default',
+  size: 'normal',
+  block: false,
+  icon: '',
+  style: {},
+  children: undefined,
+  onClick: function onClick(e) {}
+};
+
+var Button = function Button(props) {
+  var _defaultProps$2$props = _objectSpread(_objectSpread({}, defaultProps$2), props),
+      color = _defaultProps$2$props.color,
+      shape = _defaultProps$2$props.shape,
+      plain = _defaultProps$2$props.plain,
+      loading = _defaultProps$2$props.loading,
+      disabled = _defaultProps$2$props.disabled,
+      type = _defaultProps$2$props.type,
+      size = _defaultProps$2$props.size,
+      block = _defaultProps$2$props.block,
+      icon = _defaultProps$2$props.icon,
+      children = _defaultProps$2$props.children,
+      onClick = _defaultProps$2$props.onClick,
+      className = _defaultProps$2$props.className,
+      style = _defaultProps$2$props.style,
+      rest = _objectWithoutProperties(_defaultProps$2$props, _excluded);
+
+  var getStyle = useCallback(function () {
+    var style = {};
+
+    if (color) {
+      if (plain) {
+        style.color = color;
+        style.background = '#fff';
+
+        if (!(color !== null && color !== void 0 && color.includes('gradient'))) {
+          style.borderColor = color;
+        }
+      } else {
+        style.color = '#fff';
+        style.background = color;
+      }
+    }
+
+    return style;
+  }, [color, plain]);
+  var classes = useCallback(function () {
+    var prefixCls = 'nut-button';
+    return [prefixCls, "".concat(type ? "".concat(prefixCls, "--").concat(type) : ''), "".concat(size ? "".concat(prefixCls, "--").concat(size) : ''), "".concat(shape ? "".concat(prefixCls, "--").concat(shape) : ''), "".concat(plain ? "".concat(prefixCls, "--plain") : ''), "".concat(block ? "".concat(prefixCls, "--block") : ''), "".concat(disabled ? "".concat(prefixCls, "--disabled") : ''), "".concat(loading ? "".concat(prefixCls, "--loading") : '')].filter(Boolean).join(' ');
+  }, [block, disabled, loading, plain, shape, size, type]);
+
+  var _useState = useState(classes()),
+      _useState2 = _slicedToArray(_useState, 2),
+      btnName = _useState2[0],
+      setBtnName = _useState2[1];
+
+  var _useState3 = useState(getStyle()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      btnStyle = _useState4[0],
+      setBtnStyle = _useState4[1];
+
+  useEffect(function () {
+    setBtnName(classes());
+    setBtnStyle(getStyle());
+  }, [className, color, shape, plain, loading, disabled, style, type, size, block, icon, children, onClick, classes, getStyle]);
+
+  var handleClick = function handleClick(e) {
+    if (!loading && !disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "".concat(btnName, " ").concat(className),
+    style: _objectSpread(_objectSpread({}, btnStyle), style)
+  }, rest), {}, {
+    onClick: function onClick(e) {
+      return handleClick(e);
+    }
+  }), React__default.createElement("div", {
+    className: "nut-button__warp",
+    style: getStyle()
+  }, loading && React__default.createElement(Icon, {
+    name: "loading"
+  }), !loading && icon ? React__default.createElement(Icon, {
+    name: icon
+  }) : '', children));
+};
+
+Button.defaultProps = defaultProps$2;
+Button.displayName = 'NutButton';
 var defaultProps$1 = {
   okText: '确认',
   cancelText: '取消',
@@ -155,7 +255,7 @@ var BaseDialog$1 = function BaseDialog$1(props, ref) {
       onClosed = props.onClosed,
       onCancel = props.onCancel,
       onOk = props.onOk,
-      restProps = _objectWithoutProperties(props, _excluded);
+      restProps = _objectWithoutProperties(props, _excluded2);
 
   var renderFooter = function renderFooter() {
     if (footer === null || noFooter) return '';
@@ -370,7 +470,7 @@ var BaseDialog = function BaseDialog(props, ref) {
       onClosed = props.onClosed,
       onCancel = props.onCancel,
       onOk = props.onOk,
-      restProps = _objectWithoutProperties(props, _excluded2);
+      restProps = _objectWithoutProperties(props, _excluded3);
 
   var renderFooter = function renderFooter() {
     if (footer === null) return '';
@@ -396,7 +496,7 @@ var BaseDialog = function BaseDialog(props, ref) {
       }
     };
 
-    var footerContent = footer || React__default.createElement(React__default.Fragment, null, !noCancelBtn && React__default.createElement(Button, {
+    var footerContent = footer || React__default.createElement(React__default.Fragment, null, !noCancelBtn && React__default.createElement(Button$1, {
       size: "small",
       plain: true,
       type: "primary",
@@ -404,7 +504,7 @@ var BaseDialog = function BaseDialog(props, ref) {
       onClick: function onClick(e) {
         return handleCancel(e);
       }
-    }, cancelText || locale.cancel), !noOkBtn && React__default.createElement(Button, {
+    }, cancelText || locale.cancel), !noOkBtn && React__default.createElement(Button$1, {
       size: "small",
       type: "primary",
       className: classNames('nut-dialog__footer-ok', {