@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.11

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());

package/dist/esm/collapseitem2.js

@@ -0,0 +1,129 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "title", "isOpen", "name", "disabled", "expandIcon", "rotate", "extra"];
+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, { createContext, useContext, useRef, useState, useMemo, useEffect } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var collapseContext = {
+  isOpen: function isOpen(name) {
+    return true;
+  },
+  updateValue: function updateValue(name) {
+  },
+  expandIcon: null,
+  rotate: 180
+};
+var CollapseContext = createContext(collapseContext);
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: null,
+  name: "",
+  isOpen: false,
+  expandIcon: null,
+  disabled: false,
+  rotate: 180,
+  extra: null
+});
+var CollapseItem = function CollapseItem2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, title = _defaultProps$props.title, isOpen2 = _defaultProps$props.isOpen, name = _defaultProps$props.name, disabled = _defaultProps$props.disabled, expandIcon = _defaultProps$props.expandIcon, rotate = _defaultProps$props.rotate, extra = _defaultProps$props.extra, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-collapse-item";
+  var context = useContext(CollapseContext);
+  var wrapperRef = useRef(null);
+  var contentRef = useRef(null);
+  var _useState = useState({
+    transform: "translateY(-50%)"
+  }), _useState2 = _slicedToArray(_useState, 2), iconStyle = _useState2[0], setIconStyle = _useState2[1];
+  var expanded = useMemo(function() {
+    if (context) {
+      return context.isOpen(name);
+    }
+    return false;
+  }, [name, context.isOpen]);
+  var handleClick = function handleClick2() {
+    context.updateValue(name);
+  };
+  var onTransitionEnd = function onTransitionEnd2() {
+    if (expanded) {
+      if (wrapperRef.current) {
+        wrapperRef.current.style.height = "";
+      }
+    }
+  };
+  var getOffsetHeight = function getOffsetHeight2() {
+    var _contentRef$current;
+    var height = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetHeight;
+    return height ? "".concat(height, "px") : "";
+  };
+  var toggle = function toggle2() {
+    var start = expanded ? "0px" : getOffsetHeight();
+    if (wrapperRef.current) {
+      wrapperRef.current.style.height = start;
+    }
+    var newIconStyle = expanded ? {
+      transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
+    } : {
+      transform: "translateY(-50%)"
+    };
+    setIconStyle(newIconStyle);
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        var end = expanded ? getOffsetHeight() : "0px";
+        if (wrapperRef.current) {
+          wrapperRef.current.style.height = end;
+        }
+      });
+    });
+  };
+  useEffect(toggle, [expanded]);
+  return React__default.createElement("div", _objectSpread({
+    className: classPrefix
+  }, rest), React__default.createElement("div", {
+    className: classNames("".concat(classPrefix, "__header"), {
+      disabled
+    }),
+    onClick: handleClick
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__title")
+  }, title), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__extra")
+  }, extra), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__icon-box")
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__icon"),
+    style: iconStyle
+  }, expandIcon || context.expandIcon))), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__content"),
+    onTransitionEnd,
+    ref: wrapperRef
+  }, React__default.createElement("div", {
+    ref: contentRef,
+    className: "".concat(classPrefix, "__content-text")
+  }, children)));
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = "NutCollapseItem";
+export {
+  CollapseContext as C,
+  CollapseItem as a
+};