@nutui/nutui-react 1.3.5 → 1.3.7

package/dist/esm/SearchBar.js

@@ -1,17 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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 React__default, { useRef, useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
 import { useConfig } from './ConfigProvider.js';
 import Icon from './Icon.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
 import '@bem-react/classname';
-
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   placeholder: '',
   shape: 'square',
@@ -27,71 +23,62 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
     size: "12"
   })
 });
-
 var SearchBar = function SearchBar(props) {
   var searchbarBem = cn('searchbar');
-
   var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
+    locale = _useConfig.locale;
   var searchRef = useRef(null);
-
   var _useState = useState(function () {
-    return props.value;
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+      return props.value;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      placeholder = _defaultProps$props.placeholder,
-      shape = _defaultProps$props.shape,
-      className = _defaultProps$props.className,
-      disabled = _defaultProps$props.disabled,
-      maxLength = _defaultProps$props.maxLength,
-      clearable = _defaultProps$props.clearable,
-      align = _defaultProps$props.align,
-      readOnly = _defaultProps$props.readOnly,
-      autoFocus = _defaultProps$props.autoFocus,
-      label = _defaultProps$props.label,
-      actionText = _defaultProps$props.actionText,
-      leftinIcon = _defaultProps$props.leftinIcon,
-      rightinIcon = _defaultProps$props.rightinIcon,
-      leftoutIcon = _defaultProps$props.leftoutIcon,
-      rightoutIcon = _defaultProps$props.rightoutIcon,
-      onChange = _defaultProps$props.onChange,
-      onFocus = _defaultProps$props.onFocus,
-      onBlur = _defaultProps$props.onBlur,
-      onClear = _defaultProps$props.onClear,
-      onSearch = _defaultProps$props.onSearch,
-      onClickInput = _defaultProps$props.onClickInput,
-      onClickLeftinIcon = _defaultProps$props.onClickLeftinIcon,
-      onClickLeftoutIcon = _defaultProps$props.onClickLeftoutIcon,
-      onClickRightinIcon = _defaultProps$props.onClickRightinIcon,
-      onClickRightoutIcon = _defaultProps$props.onClickRightoutIcon,
-      iconClassPrefix = _defaultProps$props.iconClassPrefix,
-      iconFontClassName = _defaultProps$props.iconFontClassName;
-
+    placeholder = _defaultProps$props.placeholder,
+    shape = _defaultProps$props.shape,
+    className = _defaultProps$props.className,
+    disabled = _defaultProps$props.disabled,
+    maxLength = _defaultProps$props.maxLength,
+    clearable = _defaultProps$props.clearable,
+    align = _defaultProps$props.align,
+    readOnly = _defaultProps$props.readOnly,
+    autoFocus = _defaultProps$props.autoFocus,
+    label = _defaultProps$props.label,
+    actionText = _defaultProps$props.actionText,
+    leftinIcon = _defaultProps$props.leftinIcon,
+    rightinIcon = _defaultProps$props.rightinIcon,
+    leftoutIcon = _defaultProps$props.leftoutIcon,
+    rightoutIcon = _defaultProps$props.rightoutIcon,
+    onChange = _defaultProps$props.onChange,
+    onFocus = _defaultProps$props.onFocus,
+    onBlur = _defaultProps$props.onBlur,
+    onClear = _defaultProps$props.onClear,
+    onCancel = _defaultProps$props.onCancel,
+    onSearch = _defaultProps$props.onSearch,
+    onClickInput = _defaultProps$props.onClickInput,
+    onClickLeftinIcon = _defaultProps$props.onClickLeftinIcon,
+    onClickLeftoutIcon = _defaultProps$props.onClickLeftoutIcon,
+    onClickRightinIcon = _defaultProps$props.onClickRightinIcon,
+    onClickRightoutIcon = _defaultProps$props.onClickRightoutIcon,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName;
   var alignClass = "".concat(align);
-
   var change = function change(event) {
     var value = event.target.value;
     onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, event));
     setValue(value);
   };
-
   var focus = function focus(event) {
     var value = event.target.value;
     onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
   };
-
   var blur = function blur(event) {
     var searchSelf = searchRef.current;
     searchSelf && searchSelf.blur();
     var value = event.target.value;
     onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
   };
-
   useEffect(function () {
     setValue(props.value);
   }, [props.value]);
@@ -101,7 +88,6 @@ var SearchBar = function SearchBar(props) {
       searchSelf && searchSelf.focus();
     }
   }, [autoFocus]);
-
   var renderField = function renderField() {
     return React__default.createElement("input", {
       className: "".concat(searchbarBem('input'), "  ").concat(searchbarBem(alignClass), " ").concat(shape === 'round' ? searchbarBem('round') : '', " ").concat(clearable ? searchbarBem('input-clear') : ''),
@@ -114,6 +100,7 @@ var SearchBar = function SearchBar(props) {
       disabled: disabled,
       readOnly: readOnly,
       maxLength: maxLength,
+      onKeyPress: onKeypress,
       onChange: function onChange(e) {
         return change(e);
       },
@@ -128,11 +115,9 @@ var SearchBar = function SearchBar(props) {
       }
     });
   };
-
   var clickInput = function clickInput(e) {
     onClickInput && onClickInput(e);
   };
-
   var renderLeftinIcon = function renderLeftinIcon() {
     if (!leftinIcon) return null;
     return React__default.createElement("div", {
@@ -142,7 +127,6 @@ var SearchBar = function SearchBar(props) {
       }
     }, leftinIcon);
   };
-
   var renderLeftoutIcon = function renderLeftoutIcon() {
     if (!leftoutIcon) return null;
     return React__default.createElement("div", {
@@ -152,7 +136,6 @@ var SearchBar = function SearchBar(props) {
       }
     }, leftoutIcon);
   };
-
   var clickLeftIcon = function clickLeftIcon(flag, event) {
     if (flag === 'in-left') {
       onClickLeftinIcon && onClickLeftinIcon(value, event);
@@ -160,7 +143,6 @@ var SearchBar = function SearchBar(props) {
       onClickLeftoutIcon && onClickLeftoutIcon(value, event);
     }
   };
-
   var renderRightinIcon = function renderRightinIcon() {
     if (!rightinIcon) return null;
     return React__default.createElement("div", {
@@ -170,7 +152,6 @@ var SearchBar = function SearchBar(props) {
       }
     }, rightinIcon);
   };
-
   var renderRightoutIcon = function renderRightoutIcon() {
     if (!rightoutIcon) return null;
     return React__default.createElement("div", {
@@ -180,7 +161,6 @@ var SearchBar = function SearchBar(props) {
       }
     }, rightoutIcon);
   };
-
   var clickRightIcon = function clickRightIcon(flag, event) {
     if (flag === 'in-left') {
       onClickRightinIcon && onClickRightinIcon(value, event);
@@ -188,7 +168,6 @@ var SearchBar = function SearchBar(props) {
       onClickRightoutIcon && onClickRightoutIcon(value, event);
     }
   };
-
   var handleClear = function handleClear() {
     return React__default.createElement("div", {
       className: "".concat(searchbarBem('clear'), " ").concat(rightinIcon ? 'pos-right' : ''),
@@ -203,41 +182,42 @@ var SearchBar = function SearchBar(props) {
       color: "#555"
     }));
   };
-
   var clearaVal = function clearaVal(event) {
     if (disabled || readOnly) {
       return;
     }
-
     setValue('');
     onClear && onClear(event);
   };
-
   var renderRightLabel = function renderRightLabel() {
     if (actionText) {
       return React__default.createElement("div", {
         className: searchbarBem('action-text'),
-        onClick: search
+        onClick: cancel
       }, actionText);
     }
-
     return null;
   };
-
-  var search = function search() {
-    onSearch && onSearch(value);
+  var onKeypress = function onKeypress(e) {
+    if (e.key === 'Enter') {
+      var event = e.nativeEvent;
+      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault();
+      }
+      onSearch && onSearch(value);
+    }
+  };
+  var cancel = function cancel() {
+    onCancel && onCancel();
   };
-
   var renderLabel = function renderLabel() {
     if (label) {
       return React__default.createElement("div", {
         className: searchbarBem('label')
       }, label);
     }
-
     return null;
   };
-
   return React__default.createElement("div", {
     className: "".concat(searchbarBem(), " ").concat(disabled ? searchbarBem('disabled') : '', "  ").concat(className || ''),
     style: _objectSpread(_objectSpread({}, props.style), {}, {
@@ -247,7 +227,6 @@ var SearchBar = function SearchBar(props) {
     className: "".concat(searchbarBem('content'))
   }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
 };
-
 SearchBar.defaultProps = defaultProps;
 SearchBar.displayName = 'NutSearchBar';
 export { SearchBar as default };

package/dist/esm/ShortPassword.js

@@ -3,11 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["title", "desc", "tips", "visible", "modelValue", "errorMsg", "noButton", "closeOnClickOverlay", "length", "style", "className", "onChange", "onOk", "onTips", "onCancel", "onClose", "onComplete", "iconClassPrefix", "iconFontClassName"];
-
 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 React__default, { useRef, useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
 import Popup from './Popup.js';
@@ -15,7 +12,6 @@ import Icon from './Icon.js';
 import { useConfig } from './ConfigProvider.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
 import '@bem-react/classname';
-
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   title: '',
   desc: '',
@@ -34,54 +30,46 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   onTips: function onTips() {},
   onComplete: function onComplete(value) {}
 });
-
 var ShortPassword = function ShortPassword(props) {
   var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
+    locale = _useConfig.locale;
   var title = props.title,
-      desc = props.desc,
-      tips = props.tips,
-      visible = props.visible,
-      modelValue = props.modelValue,
-      errorMsg = props.errorMsg,
-      noButton = props.noButton,
-      closeOnClickOverlay = props.closeOnClickOverlay,
-      length = props.length,
-      style = props.style,
-      className = props.className,
-      onChange = props.onChange,
-      onOk = props.onOk,
-      onTips = props.onTips,
-      onCancel = props.onCancel,
-      onClose = props.onClose,
-      onComplete = props.onComplete,
-      iconClassPrefix = props.iconClassPrefix,
-      iconFontClassName = props.iconFontClassName,
-      reset = _objectWithoutProperties(props, _excluded);
-
+    desc = props.desc,
+    tips = props.tips,
+    visible = props.visible,
+    modelValue = props.modelValue,
+    errorMsg = props.errorMsg,
+    noButton = props.noButton,
+    closeOnClickOverlay = props.closeOnClickOverlay,
+    length = props.length,
+    style = props.style,
+    className = props.className,
+    onChange = props.onChange,
+    onOk = props.onOk,
+    onTips = props.onTips,
+    onCancel = props.onCancel,
+    onClose = props.onClose,
+    onComplete = props.onComplete,
+    iconClassPrefix = props.iconClassPrefix,
+    iconFontClassName = props.iconFontClassName,
+    reset = _objectWithoutProperties(props, _excluded);
   var b = cn('shortpassword');
   var textInput = useRef(null);
-
   var range = function range(val) {
     return Math.min(Math.max(4, val), 6);
   };
-
   var _useState = useState(visible),
-      _useState2 = _slicedToArray(_useState, 2),
-      innerVisible = _useState2[0],
-      setInnerVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    innerVisible = _useState2[0],
+    setInnerVisible = _useState2[1];
   var _useState3 = useState(range(Number(length))),
-      _useState4 = _slicedToArray(_useState3, 2),
-      comLen = _useState4[0],
-      setComLen = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    comLen = _useState4[0],
+    setComLen = _useState4[1];
   var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
   useEffect(function () {
     setInnerVisible(visible);
   }, [visible]);
@@ -90,58 +78,44 @@ var ShortPassword = function ShortPassword(props) {
       setInputValue(modelValue);
     }
   }, [modelValue]);
-
   var changeValue = function changeValue(e) {
     var inputValue = e.target.value;
-
     if (String(inputValue).length > comLen) {
       inputValue = inputValue.slice(0, comLen);
     }
-
     setInputValue(inputValue);
-
     if (String(inputValue).length === comLen) {
       onComplete && onComplete(inputValue);
     }
-
     onChange && onChange(inputValue);
   };
-
   var systemStyle = function systemStyle() {
     var u = navigator.userAgent;
     var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // g
-
     var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
-
     var style = {};
     console.log(isIOS, isAndroid);
-
     if (isIOS) {
       style = {
         paddingRight: '1200px'
       };
     }
-
     if (isAndroid) {
       style = {
         opacity: 0,
         zIndex: 10
       };
     }
-
     return style;
   };
-
   var focus = function focus() {
     if (textInput.current) {
       textInput.current.focus();
     }
   };
-
   var sure = function sure() {
     onOk && onOk(inputValue);
   };
-
   return React__default.createElement("div", null, React__default.createElement(Popup, {
     style: {
       padding: '32px 24px 28px 24px',
@@ -212,7 +186,6 @@ var ShortPassword = function ShortPassword(props) {
     }
   }, locale.confirm)) : null)));
 };
-
 ShortPassword.defaultProps = defaultProps;
 ShortPassword.displayName = 'NutShortPassword';
 export { ShortPassword as default };

package/dist/esm/SideNavBar.js

@@ -1,11 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["title", "visible", "width", "position", "children", "className", "showhead", "handleClose"];
-
 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 React__default from 'react';
 import { useConfig } from './ConfigProvider.js';
 import Popup from './Popup.js';
@@ -15,21 +12,18 @@ var defaultProps = {
   position: 'left',
   width: '80%'
 };
-
 var SideNavBar = function SideNavBar(props) {
   useConfig();
-
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      title = _defaultProps$props.title,
-      visible = _defaultProps$props.visible,
-      width = _defaultProps$props.width,
-      position = _defaultProps$props.position,
-      children = _defaultProps$props.children,
-      className = _defaultProps$props.className,
-      showhead = _defaultProps$props.showhead,
-      handleClose = _defaultProps$props.handleClose,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
+    title = _defaultProps$props.title,
+    visible = _defaultProps$props.visible,
+    width = _defaultProps$props.width,
+    position = _defaultProps$props.position,
+    children = _defaultProps$props.children,
+    className = _defaultProps$props.className,
+    showhead = _defaultProps$props.showhead,
+    handleClose = _defaultProps$props.handleClose,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var offset = props.offset ? Number(props.offset) : 20;
   return React__default.createElement(Popup, {
     visible: visible,
@@ -59,7 +53,6 @@ var SideNavBar = function SideNavBar(props) {
     className: "nut-sidenavbar__content"
   }, children))))));
 };
-
 SideNavBar.defaultProps = defaultProps;
 SideNavBar.displayName = 'NutSideNavBar';
 export { SideNavBar as default };

package/dist/esm/SideNavBarItem.js

@@ -1,20 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["title", "ikey", "children", "click"];
-
 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 React__default from 'react';
-
 var SideNavBarItem = function SideNavBarItem(props) {
   var title = props.title,
-      ikey = props.ikey,
-      children = props.children,
-      click = props.click,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    ikey = props.ikey,
+    children = props.children,
+    click = props.click,
+    rest = _objectWithoutProperties(props, _excluded);
   var clickFn = function clickFn(e) {
     e.stopPropagation();
     click && click({
@@ -22,11 +17,9 @@ var SideNavBarItem = function SideNavBarItem(props) {
       ikey: ikey
     });
   };
-
   return React__default.createElement("div", _objectSpread({
     className: "nut-subsidenavbar__item border-bt",
     onClick: clickFn
   }, rest), title);
 };
-
 export { SideNavBarItem as default };

package/dist/esm/Signature.js

@@ -2,11 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["type", "lineWidth", "strokeStyle", "unSupportTpl", "className"];
-
 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 React__default, { useRef, useState, useEffect } from 'react';
 import Button from './Button.js';
 import { c as cn } from './bem-893ad28d.js';
@@ -19,40 +16,32 @@ var defaultProps = {
   unSupportTpl: '对不起，当前浏览器不支持Canvas，无法使用本控件！',
   className: ''
 };
-
 var Signature = function Signature(props) {
   var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
+    locale = _useConfig.locale;
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      type = _defaultProps$props.type,
-      lineWidth = _defaultProps$props.lineWidth,
-      strokeStyle = _defaultProps$props.strokeStyle,
-      unSupportTpl = _defaultProps$props.unSupportTpl,
-      className = _defaultProps$props.className,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
+    type = _defaultProps$props.type,
+    lineWidth = _defaultProps$props.lineWidth,
+    strokeStyle = _defaultProps$props.strokeStyle,
+    unSupportTpl = _defaultProps$props.unSupportTpl,
+    className = _defaultProps$props.className,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var b = cn('signature');
   var canvasRef = useRef(null);
   var wrapRef = useRef(null);
-
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      canvasHeight = _useState2[0],
-      setCanvasHeight = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    canvasHeight = _useState2[0],
+    setCanvasHeight = _useState2[1];
   var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      canvasWidth = _useState4[0],
-      setCanvasWidth = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    canvasWidth = _useState4[0],
+    setCanvasWidth = _useState4[1];
   var ctx = useRef(null);
-
   var isCanvasSupported = function isCanvasSupported() {
     var elem = document.createElement('canvas');
     return !!(elem.getContext && elem.getContext('2d'));
   };
-
   var isSupportTouch = ('ontouchstart' in window);
   var events = isSupportTouch ? ['touchstart', 'touchmove', 'touchend', 'touchleave'] : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];
   useEffect(function () {
@@ -63,10 +52,8 @@ var Signature = function Signature(props) {
       addEvent();
     }
   }, []);
-
   var startEventHandler = function startEventHandler(event) {
     event.preventDefault();
-
     if (ctx.current && canvasRef.current) {
       ctx.current.beginPath();
       ctx.current.lineWidth = lineWidth;
@@ -76,17 +63,14 @@ var Signature = function Signature(props) {
       canvasRef.current.addEventListener(events[3], leaveEventHandler, false);
     }
   };
-
   var addEvent = function addEvent() {
     if (canvasRef.current) {
       canvasRef.current.addEventListener(events[0], startEventHandler, false);
     }
   };
-
   var moveEventHandler = function moveEventHandler(event) {
     event.preventDefault();
     var evt = isSupportTouch ? event.touches[0] : event;
-
     if (canvasRef.current && ctx.current) {
       var coverPos = canvasRef.current.getBoundingClientRect();
       var mouseX = evt.clientX - coverPos.left;
@@ -95,59 +79,46 @@ var Signature = function Signature(props) {
       ctx.current.stroke();
     }
   };
-
   var endEventHandler = function endEventHandler(event) {
     event.preventDefault();
-
     if (canvasRef.current) {
       canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
       canvasRef.current.removeEventListener(events[2], endEventHandler, false);
     }
   };
-
   var leaveEventHandler = function leaveEventHandler(event) {
     event.preventDefault();
-
     if (canvasRef.current) {
       canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
       canvasRef.current.removeEventListener(events[2], endEventHandler, false);
     }
   };
-
   var clear = function clear() {
     if (canvasRef.current && ctx.current) {
       canvasRef.current.addEventListener(events[2], endEventHandler, false);
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx.current.closePath();
     }
-
     props.clear && props.clear();
   };
-
   var confirm = function confirm() {
     onSave(canvasRef.current);
   };
-
   var onSave = function onSave(canvas) {
     var dataurl;
-
     switch (type) {
       case 'png':
         dataurl = canvas.toDataURL('image/png');
         break;
-
       case 'jpg':
         dataurl = canvas.toDataURL('image/jpeg', 0.8);
         break;
-
       default:
         dataurl = canvas.toDataURL('image/png');
     }
-
     clear();
     props.confirm && props.confirm(canvas, dataurl);
   };
-
   return React__default.createElement("div", _objectSpread({
     className: "".concat(b(), " ").concat(className)
   }, rest), React__default.createElement("div", {
@@ -173,7 +144,6 @@ var Signature = function Signature(props) {
     }
   }, locale.confirm));
 };
-
 Signature.defaultProps = defaultProps;
 Signature.displayName = 'NutSignature';
 export { Signature as default };