@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/Uploader.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "uploadIcon", "uploadIconSize", "uploadIconTip", "name", "accept", "defaultFileList", "listType", "disabled", "multiple", "url", "defaultImg", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "isPreview", "isDeletable", "maximum", "capture", "maximize", "className", "autoUpload", "clearInput", "onStart", "onRemove", "onChange", "onFileItemClick", "onProgress", "onSuccess", "onUpdate", "onFailure", "onOversize", "onBeforeUpload", "onBeforeXhrUpload", "onBeforeDelete"];
+var _excluded = ["children", "uploadIcon", "uploadLabel", "name", "accept", "defaultValue", "value", "previewType", "imageFit", "disabled", "multiple", "url", "previewUrl", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "preview", "deletable", "maxCount", "capture", "maxFileSize", "className", "autoUpload", "clearInput", "onStart", "onDelete", "onChange", "onFileItemClick", "onProgress", "onSuccess", "onUpdate", "onFailure", "onOversize", "beforeUpload", "beforeXhrUpload", "beforeDelete"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -30,11 +30,9 @@ import React__default, { useState, useEffect, useImperativeHandle } from "react"
 import classNames from "classnames";
 import { Failure, Loading, Link, Del, Photograph } from "@nutui/icons-react";
 import Progress from "./Progress.js";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
 import { i as isPromise } from "./index.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var UploadOptions = /* @__PURE__ */ _createClass(function UploadOptions2() {
   _classCallCheck(this, UploadOptions2);
   _defineProperty(this, "url", "");
@@ -126,29 +124,26 @@ var funcInterceptor = function funcInterceptor2(interceptor, _ref) {
 };
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   url: "",
-  maximum: 1,
-  uploadIcon: null,
-  uploadIconSize: "",
-  uploadIconTip: "",
-  listType: "picture",
+  maxCount: 1,
+  previewType: "picture",
+  imageFit: "cover",
   name: "file",
   accept: "*",
   disabled: false,
   autoUpload: true,
   multiple: false,
-  maximize: Number.MAX_VALUE,
+  maxFileSize: Number.MAX_VALUE,
   data: {},
   headers: {},
   method: "post",
-  defaultImg: "",
   xhrState: 200,
   timeout: 1e3 * 30,
   withCredentials: false,
   clearInput: true,
-  isPreview: true,
-  isDeletable: true,
+  preview: true,
+  deletable: true,
   capture: false,
-  onBeforeDelete: function onBeforeDelete(file, files) {
+  beforeDelete: function beforeDelete(file, files) {
     return true;
   }
 });
@@ -166,16 +161,15 @@ var FileItem = /* @__PURE__ */ _createClass(function FileItem2() {
 });
 var InternalUploader = function InternalUploader2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, uploadIcon = _defaultProps$props.uploadIcon, uploadIconSize = _defaultProps$props.uploadIconSize, uploadIconTip = _defaultProps$props.uploadIconTip, name = _defaultProps$props.name, accept = _defaultProps$props.accept, defaultFileList = _defaultProps$props.defaultFileList, listType = _defaultProps$props.listType, disabled = _defaultProps$props.disabled, multiple = _defaultProps$props.multiple, url = _defaultProps$props.url, defaultImg = _defaultProps$props.defaultImg, headers = _defaultProps$props.headers, timeout = _defaultProps$props.timeout, method = _defaultProps$props.method, xhrState = _defaultProps$props.xhrState, withCredentials = _defaultProps$props.withCredentials, data = _defaultProps$props.data, isPreview = _defaultProps$props.isPreview, isDeletable = _defaultProps$props.isDeletable, maximum = _defaultProps$props.maximum, capture = _defaultProps$props.capture, maximize = _defaultProps$props.maximize, className = _defaultProps$props.className, autoUpload = _defaultProps$props.autoUpload, clearInput = _defaultProps$props.clearInput, onStart = _defaultProps$props.onStart, onRemove = _defaultProps$props.onRemove, onChange = _defaultProps$props.onChange, onFileItemClick = _defaultProps$props.onFileItemClick, onProgress = _defaultProps$props.onProgress, onSuccess = _defaultProps$props.onSuccess, onUpdate = _defaultProps$props.onUpdate, onFailure = _defaultProps$props.onFailure, onOversize = _defaultProps$props.onOversize, onBeforeUpload = _defaultProps$props.onBeforeUpload, onBeforeXhrUpload = _defaultProps$props.onBeforeXhrUpload, onBeforeDelete2 = _defaultProps$props.onBeforeDelete, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState([]), _useState2 = _slicedToArray(_useState, 2), fileList = _useState2[0], setFileList = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, uploadIcon = _defaultProps$props.uploadIcon, uploadLabel = _defaultProps$props.uploadLabel, name = _defaultProps$props.name, accept = _defaultProps$props.accept, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, previewType = _defaultProps$props.previewType, imageFit = _defaultProps$props.imageFit, disabled = _defaultProps$props.disabled, multiple = _defaultProps$props.multiple, url = _defaultProps$props.url, previewUrl = _defaultProps$props.previewUrl, headers = _defaultProps$props.headers, timeout = _defaultProps$props.timeout, method = _defaultProps$props.method, xhrState = _defaultProps$props.xhrState, withCredentials = _defaultProps$props.withCredentials, data = _defaultProps$props.data, preview = _defaultProps$props.preview, deletable = _defaultProps$props.deletable, maxCount = _defaultProps$props.maxCount, capture = _defaultProps$props.capture, maxFileSize = _defaultProps$props.maxFileSize, className = _defaultProps$props.className, autoUpload = _defaultProps$props.autoUpload, clearInput = _defaultProps$props.clearInput, onStart = _defaultProps$props.onStart, onDelete = _defaultProps$props.onDelete, onChange = _defaultProps$props.onChange, onFileItemClick = _defaultProps$props.onFileItemClick, onProgress = _defaultProps$props.onProgress, onSuccess = _defaultProps$props.onSuccess, onUpdate = _defaultProps$props.onUpdate, onFailure = _defaultProps$props.onFailure, onOversize = _defaultProps$props.onOversize, beforeUpload = _defaultProps$props.beforeUpload, beforeXhrUpload = _defaultProps$props.beforeXhrUpload, beforeDelete2 = _defaultProps$props.beforeDelete, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(defaultValue || []), _useState2 = _slicedToArray(_useState, 2), fileList = _useState2[0], setFileList = _useState2[1];
   var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), uploadQueue = _useState4[0], setUploadQueue = _useState4[1];
   useEffect(function() {
-    if (defaultFileList) {
-      setFileList(defaultFileList);
+    if (value) {
+      setFileList(value);
     }
-  }, [defaultFileList]);
-  var b = cn("uploader");
-  var classes = classNames(className, b(""));
+  }, [value]);
+  var classes = classNames(className, "nut-uploader");
   useImperativeHandle(ref, function() {
     return {
       submit: function submit() {
@@ -208,8 +202,8 @@ var InternalUploader = function InternalUploader2(props, ref) {
     var uploadOption = new UploadOptions();
     uploadOption.url = url;
     for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), key = _Object$entries2$_i[0], value = _Object$entries2$_i[1];
-      fileItem.formData.append(key, value);
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), key = _Object$entries2$_i[0], value2 = _Object$entries2$_i[1];
+      fileItem.formData.append(key, value2);
     }
     uploadOption.formData = fileItem.formData;
     uploadOption.timeout = timeout * 1;
@@ -217,7 +211,7 @@ var InternalUploader = function InternalUploader2(props, ref) {
     uploadOption.xhrState = xhrState;
     uploadOption.headers = headers;
     uploadOption.withCredentials = withCredentials;
-    uploadOption.beforeXhrUpload = onBeforeXhrUpload;
+    uploadOption.beforeXhrUpload = beforeXhrUpload;
     try {
       uploadOption.sourceFile = fileItem.formData.get(name);
     } catch (error) {
@@ -315,7 +309,7 @@ var InternalUploader = function InternalUploader2(props, ref) {
         fileItem.message = locale.uploader.waitingUpload;
       }
       executeUpload(fileItem, index);
-      if (isPreview && file.type.includes("image")) {
+      if (preview && file.type.includes("image")) {
         var reader = new FileReader();
         reader.onload = function(event) {
           fileItem.url = event.target.result;
@@ -330,10 +324,10 @@ var InternalUploader = function InternalUploader2(props, ref) {
     });
   };
   var filterFiles = function filterFiles2(files) {
-    var maximum2 = props.maximum * 1;
+    var maximum = props.maxCount * 1;
     var oversizes = new Array();
     var filterFile = files.filter(function(file) {
-      if (file.size > maximize) {
+      if (file.size > maxFileSize) {
         oversizes.push(file);
         return false;
       }
@@ -342,23 +336,23 @@ var InternalUploader = function InternalUploader2(props, ref) {
     if (oversizes.length) {
       onOversize && onOversize(files);
     }
-    if (filterFile.length > maximum2) {
-      filterFile.splice(maximum2, filterFile.length - maximum2);
+    if (filterFile.length > maximum) {
+      filterFile.splice(maximum, filterFile.length - maximum);
     }
     if (fileList.length !== 0) {
-      var index = maximum2 - fileList.length;
+      var index = maximum - fileList.length;
       filterFile.splice(index, filterFile.length - index);
     }
     return filterFile;
   };
   var deleted = function deleted2(file, index) {
     fileList.splice(index, 1);
-    onRemove && onRemove(file, fileList);
+    onDelete && onDelete(file, fileList);
     setFileList(_toConsumableArray(fileList));
   };
-  var onDelete = function onDelete2(file, index) {
+  var onDeleteItem = function onDeleteItem2(file, index) {
     clearUploadQueue(index);
-    funcInterceptor(onBeforeDelete2, {
+    funcInterceptor(beforeDelete2, {
       args: [file, fileList],
       done: function done() {
         return deleted(file, index);
@@ -371,8 +365,8 @@ var InternalUploader = function InternalUploader2(props, ref) {
     }
     var $el = event.target;
     var files = $el.files;
-    if (onBeforeUpload) {
-      onBeforeUpload(new Array().slice.call(files)).then(function(f) {
+    if (beforeUpload) {
+      beforeUpload(new Array().slice.call(files)).then(function(f) {
         var _files2 = filterFiles(new Array().slice.call(f));
         readFile(_files2);
       });
@@ -395,7 +389,7 @@ var InternalUploader = function InternalUploader2(props, ref) {
     className: classes
   }, restProps), children && React__default.createElement("div", {
     className: "nut-uploader__slot"
-  }, React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
+  }, React__default.createElement(React__default.Fragment, null, children, maxCount > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
     capture: "user",
@@ -414,15 +408,15 @@ var InternalUploader = function InternalUploader2(props, ref) {
     onChange: fileChange
   })))), fileList.length !== 0 && fileList.map(function(item, index) {
     return React__default.createElement("div", {
-      className: "nut-uploader__preview ".concat(listType),
+      className: "nut-uploader__preview ".concat(previewType),
       key: item.uid
-    }, listType === "picture" && !children && React__default.createElement("div", {
+    }, previewType === "picture" && !children && React__default.createElement("div", {
       className: "nut-uploader__preview-img"
-    }, isDeletable && React__default.createElement(Failure, {
+    }, deletable && React__default.createElement(Failure, {
       color: "rgba(0,0,0,0.6)",
       className: "close",
       onClick: function onClick() {
-        return onDelete(item, index);
+        return onDeleteItem(item, index);
       }
     }), item.status === "ready" ? React__default.createElement("div", {
       className: "nut-uploader__preview__progress"
@@ -433,19 +427,23 @@ var InternalUploader = function InternalUploader2(props, ref) {
     }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || React__default.createElement(Failure, {
       color: "#fff"
     }) : item.loadingIcon || React__default.createElement(Loading, {
+      className: "nut-icon-loading",
       color: "#fff"
     })), React__default.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
     }, item.message)), item.type.includes("image") ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
+      style: {
+        objectFit: imageFit
+      },
       src: item.url,
       alt: "",
       onClick: function onClick() {
         return handleItemClick(item);
       }
-    })) : React__default.createElement(React__default.Fragment, null, defaultImg ? React__default.createElement("img", {
+    })) : React__default.createElement(React__default.Fragment, null, previewUrl ? React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
-      src: defaultImg,
+      src: previewUrl,
       alt: "",
       onClick: function onClick() {
         return handleItemClick(item);
@@ -461,36 +459,35 @@ var InternalUploader = function InternalUploader2(props, ref) {
       color: "#808080"
     }), " ", item.name))), item.status === "success" ? React__default.createElement("div", {
       className: "tips"
-    }, item.name) : null), listType === "list" && React__default.createElement("div", {
+    }, item.name) : null), previewType === "list" && React__default.createElement("div", {
       className: "nut-uploader__preview-list"
     }, React__default.createElement("div", {
       className: "nut-uploader__preview-img__file__name ".concat(item.status),
       onClick: function onClick() {
         return handleItemClick(item);
       }
-    }, React__default.createElement(Link, null), " ", item.name), isDeletable && React__default.createElement(Del, {
+    }, React__default.createElement(Link, null), " ", item.name), deletable && React__default.createElement(Del, {
       color: "#808080",
       className: "nut-uploader__preview-img__file__del",
       onClick: function onClick() {
-        return onDelete(item, index);
+        return onDeleteItem(item, index);
       }
     }), item.status === "uploading" && React__default.createElement(Progress, {
-      size: "small",
-      percentage: item.percentage,
-      strokeColor: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+      percent: item.percentage,
+      color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
       showText: false
     })));
-  }), maximum > fileList.length && listType === "picture" && !children && React__default.createElement("div", {
-    className: "nut-uploader__upload ".concat(listType, " ").concat(disabled ? "nut-uploader__upload-disabled" : "")
+  }), maxCount > fileList.length && previewType === "picture" && !children && React__default.createElement("div", {
+    className: "nut-uploader__upload ".concat(previewType, " ").concat(disabled ? "nut-uploader__upload-disabled" : "")
   }, React__default.createElement("div", {
     className: "nut-uploader__icon"
   }, uploadIcon || React__default.createElement(Photograph, {
-    width: uploadIconSize,
-    height: uploadIconSize,
+    width: "20px",
+    height: "20px",
     color: "#808080"
   }), React__default.createElement("span", {
     className: "nut-uploader__icon-tip"
-  }, uploadIconTip)), capture ? React__default.createElement("input", {
+  }, uploadLabel)), capture ? React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
     capture: "user",

package/dist/esm/badge2.js

@@ -0,0 +1,69 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+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), true).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 classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  value: "",
+  dot: false,
+  max: 99,
+  top: "0",
+  right: "5",
+  color: ""
+});
+var Badge = function Badge2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, value = _defaultProps$props.value, max = _defaultProps$props.max, children = _defaultProps$props.children, dot = _defaultProps$props.dot, top = _defaultProps$props.top, right = _defaultProps$props.right, color = _defaultProps$props.color;
+  var classPrefix = "nut-badge";
+  var classes = classNames(classPrefix, className);
+  var contentClasses = classNames(_defineProperty({}, "".concat(classPrefix, "__dot"), dot), "".concat(classPrefix, "__content"), "".concat(classPrefix, "__sup"));
+  function content() {
+    if (dot || _typeof(value) === "object")
+      return null;
+    if (typeof value === "number" && typeof max === "number") {
+      return max < value ? "".concat(max, "+") : value;
+    }
+    return value;
+  }
+  var getStyle = function getStyle2() {
+    var style2 = {};
+    style2.top = "".concat(Number(top) || parseFloat(top) || 0, "px");
+    style2.right = "".concat(Number(right) || parseFloat(right) || 0, "px");
+    style2.background = color;
+    return style2;
+  };
+  return React__default.createElement("div", {
+    className: classes,
+    style
+  }, _typeof(value) === "object" && value && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__icon")
+  }, value), React__default.createElement("div", null, children), React__default.createElement("div", {
+    className: contentClasses,
+    style: getStyle()
+  }, content()));
+};
+Badge.defaultProps = defaultProps;
+Badge.displayName = "NutBadge";
+export {
+  Badge as B
+};

package/dist/esm/cellgroup2.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "style", "title", "description"];
+var _excluded = ["children", "className", "style", "title", "description", "divider"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -27,11 +27,12 @@ import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   title: "",
-  description: ""
+  description: "",
+  divider: true
 });
 var classPrefix = "nut-cell-group";
 var CellGroup = function CellGroup2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, title = _defaultProps$props.title, description = _defaultProps$props.description, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, title = _defaultProps$props.title, description = _defaultProps$props.description, divider = _defaultProps$props.divider, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   return React__default.createElement("div", _objectSpread({
     className: classNames(classPrefix, className)
   }, rest), title ? React__default.createElement("div", {
@@ -39,7 +40,7 @@ var CellGroup = function CellGroup2(props) {
   }, title) : null, description ? React__default.createElement("div", {
     className: "".concat(classPrefix, "__description")
   }, description) : null, React__default.createElement("div", {
-    className: "".concat(classPrefix, "__wrap")
+    className: "".concat(classPrefix, "__wrap ").concat(divider ? "".concat(classPrefix, "__wrap--divider") : "")
   }, children));
 };
 CellGroup.defaultProps = defaultProps;

package/dist/esm/checkbox2.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["icon", "iconSize", "label", "className", "checkedIcon", "checked", "defaultChecked", "disabled", "onChange", "indeterminate", "iconClassPrefix", "iconFontClassName", "indeterminateIcon"], _excluded2 = ["textPosition"];
+var _excluded = ["icon", "label", "className", "activeIcon", "checked", "value", "defaultChecked", "disabled", "onChange", "indeterminate", "indeterminateIcon"], _excluded2 = ["labelPosition"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -25,113 +25,100 @@ function _objectSpread(target) {
 }
 import React__default, { createContext, useContext, useState, useEffect } from "react";
 import { CheckNormal, CheckDisabled, Checked } from "@nutui/icons-react";
+import classNames from "classnames";
 import CheckboxGroup from "./CheckboxGroup.js";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
 var CheckboxGroupContext = createContext(null);
 var Context = CheckboxGroupContext;
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   disabled: false,
-  textPosition: "right",
-  iconSize: 18,
-  icon: "check-normal",
-  checkedIcon: "checked",
-  iconClassPrefix: "nut-icon",
-  iconFontClassName: "nutui-iconfont",
-  indeterminateIcon: "check-disabled",
-  onChange: function onChange(state) {
+  labelPosition: "right",
+  icon: null,
+  activeIcon: null,
+  indeterminateIcon: null,
+  onChange: function onChange(value) {
   }
 });
+var classPrefix = "nut-checkbox";
 var Checkbox = function Checkbox2(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children;
-  var b = cn("checkbox");
-  var icon = props.icon, iconSize = props.iconSize, label = props.label, className = props.className, checkedIcon = props.checkedIcon, checked = props.checked, defaultChecked = props.defaultChecked, disabled = props.disabled, onChange2 = props.onChange, indeterminate = props.indeterminate, iconClassPrefix = props.iconClassPrefix, iconFontClassName = props.iconFontClassName, indeterminateIcon = props.indeterminateIcon, others = _objectWithoutProperties(props, _excluded);
-  var textPosition = others.textPosition, rest = _objectWithoutProperties(others, _excluded2);
+  var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, disabled = props.disabled, onChange2 = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = _objectWithoutProperties(props, _excluded);
+  var labelPosition = others.labelPosition, rest = _objectWithoutProperties(others, _excluded2);
   var ctx = useContext(Context);
   var _usePropsValue = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
     finalValue: defaultChecked,
     onChange: onChange2
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), _checked = _usePropsValue2[0], setChecked = _usePropsValue2[1];
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerChecked = _usePropsValue2[0], setChecked = _usePropsValue2[1];
   var _useState = useState(disabled), _useState2 = _slicedToArray(_useState, 2), innerDisabled = _useState2[0], setDisabled = _useState2[1];
-  var _useState3 = useState(indeterminate), _useState4 = _slicedToArray(_useState3, 2), _indeterminate = _useState4[0], setIndeterminate = _useState4[1];
+  var _useState3 = useState(indeterminate), _useState4 = _slicedToArray(_useState3, 2), innerIndeterminate = _useState4[0], setIndeterminate = _useState4[1];
   useEffect(function() {
-    !ctx && setChecked(checked);
     setDisabled(disabled);
+  }, [disabled]);
+  useEffect(function() {
     setIndeterminate(indeterminate);
-  }, [disabled, indeterminate]);
+  }, [indeterminate]);
   if (ctx) {
-    if (ctx.textPosition !== void 0) {
-      textPosition = ctx.textPosition;
+    if (ctx.labelPosition !== void 0) {
+      labelPosition = ctx.labelPosition;
     }
-    innerDisabled = ctx.disabled;
-    _checked = ctx.checkedValue.includes(label);
+    innerDisabled = ctx.disabled !== void 0 ? ctx.disabled : innerDisabled;
+    innerChecked = ctx.value.includes(value);
     setChecked = function setChecked2(checked2) {
       if (ctx.disabled)
         return;
       if (checked2)
-        ctx.check(label);
+        ctx.check(value);
       if (!checked2)
-        ctx.uncheck(label);
+        ctx.uncheck(value);
     };
   }
   var renderIcon = function renderIcon2() {
-    if (!_checked) {
+    if (!innerChecked) {
       return React__default.isValidElement(icon) ? icon : React__default.createElement(CheckNormal, {
-        width: iconSize,
-        height: iconSize,
         className: color()
       });
     }
-    if (_indeterminate) {
+    if (innerIndeterminate) {
       return React__default.isValidElement(indeterminateIcon) ? indeterminateIcon : React__default.createElement(CheckDisabled, {
-        width: iconSize,
-        height: iconSize,
         className: color()
       });
     }
-    return React__default.isValidElement(checkedIcon) ? checkedIcon : React__default.createElement(Checked, {
-      width: iconSize,
-      height: iconSize,
+    return React__default.isValidElement(activeIcon) ? activeIcon : React__default.createElement(Checked, {
       className: color()
     });
   };
   var color = function color2() {
     if (innerDisabled) {
-      return "nut-checkbox__icon--disable";
+      return "".concat(classPrefix, "__icon--disable");
     }
-    if (_checked) {
-      if (_indeterminate) {
-        return "nut-checkbox__icon--indeterminate";
+    if (innerChecked) {
+      if (innerIndeterminate) {
+        return "".concat(classPrefix, "__icon--indeterminate");
       }
-      return "nut-checkbox__icon";
+      return "".concat(classPrefix, "__icon");
     }
-    return "nut-checkbox__icon--unchecked";
+    return "".concat(classPrefix, "__icon--unchecked");
   };
   var renderLabel = function renderLabel2() {
     return React__default.createElement("span", {
-      className: "".concat(b("label", {
-        disabled: innerDisabled
-      }), " ")
+      className: classNames("".concat(classPrefix, "__label "), _defineProperty({}, "".concat(classPrefix, "__label--disabled"), innerDisabled))
     }, children || label);
   };
   var handleClick = function handleClick2() {
     if (disabled)
       return;
-    var latestChecked = !_checked;
+    var latestChecked = !innerChecked;
     if (ctx && ctx.max !== void 0) {
-      if (latestChecked && ctx.checkedValue.length >= ctx.max)
+      if (latestChecked && ctx.value.length >= ctx.max)
         return;
     }
-    onChange2 && onChange2(latestChecked, label || children);
     setChecked(latestChecked);
   };
   return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "".concat(b({
-      reverse: textPosition === "left"
-    }), " ").concat(className || "")
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "--reverse"), labelPosition === "left"))
   }, rest), {}, {
     onClick: handleClick
   }), renderIcon(), renderLabel());