@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/checkbox2.js

@@ -1,64 +1,32 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["icon", "label", "className", "activeIcon", "checked", "value", "defaultChecked", "shape", "disabled", "onChange", "indeterminate", "indeterminateIcon"], _excluded2 = ["labelPosition"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { createContext, useContext, useState, useEffect } from "react";
 import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react";
 import classNames from "classnames";
 import CheckboxGroup from "./CheckboxGroup.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,
-  shape: "round",
-  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 icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, 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({
+const CheckboxGroupContext = createContext(null);
+const Context = CheckboxGroupContext;
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { disabled: false, shape: "round", labelPosition: "right", icon: null, activeIcon: null, indeterminateIcon: null, onChange: (value) => {
+} });
+const classPrefix = "nut-checkbox";
+const Checkbox = (props) => {
+  const { children } = Object.assign(Object.assign({}, defaultProps), props);
+  const _a = props, { icon, label, className, activeIcon, checked, value, defaultChecked, shape, disabled, onChange, indeterminate, indeterminateIcon } = _a, others = __rest(_a, ["icon", "label", "className", "activeIcon", "checked", "value", "defaultChecked", "shape", "disabled", "onChange", "indeterminate", "indeterminateIcon"]);
+  let { labelPosition } = others, rest = __rest(others, ["labelPosition"]);
+  const ctx = useContext(Context);
+  let [innerChecked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
     finalValue: defaultChecked,
-    onChange: onChange2
-  }), _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), innerIndeterminate = _useState4[0], setIndeterminate = _useState4[1];
-  useEffect(function() {
+    onChange
+  });
+  let [innerDisabled, setDisabled] = useState(disabled);
+  const [innerIndeterminate, setIndeterminate] = useState(indeterminate);
+  useEffect(() => {
     setDisabled(disabled);
   }, [disabled]);
-  useEffect(function() {
+  useEffect(() => {
     setIndeterminate(indeterminate);
   }, [indeterminate]);
   if (ctx) {
@@ -67,7 +35,7 @@ var Checkbox = function Checkbox2(props) {
     }
     innerDisabled = ctx.disabled !== void 0 ? ctx.disabled : innerDisabled;
     innerChecked = ctx.value.includes(value);
-    setChecked = function setChecked2(checked2) {
+    setChecked = (checked2) => {
       if (ctx.disabled)
         return;
       if (checked2)
@@ -76,84 +44,90 @@ var Checkbox = function Checkbox2(props) {
         ctx.uncheck(value);
     };
   }
-  var renderIcon = function renderIcon2() {
+  const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return React__default.createElement(CheckDisabled, {
-          className: color()
-        });
+        return React__default.createElement(CheckDisabled, { className: color() });
       }
       if (innerChecked) {
-        return React__default.createElement(Checked, {
-          className: color()
-        });
+        return React__default.createElement(Checked, { className: color() });
       }
-      return React__default.createElement(CheckDisabled, {
-        className: color()
-      });
+      return React__default.createElement(CheckDisabled, { className: color() });
     }
     if (!innerChecked) {
-      return React__default.isValidElement(icon) ? icon : React__default.createElement(CheckNormal, {
-        className: color()
-      });
+      return React__default.isValidElement(icon) ? icon : React__default.createElement(CheckNormal, { className: color() });
     }
     if (innerIndeterminate) {
-      return React__default.isValidElement(indeterminateIcon) ? indeterminateIcon : React__default.createElement(CheckDisabled, {
-        className: color()
-      });
+      return React__default.isValidElement(indeterminateIcon) ? indeterminateIcon : React__default.createElement(CheckDisabled, { className: color() });
     }
-    return React__default.isValidElement(activeIcon) ? activeIcon : React__default.createElement(Checked, {
-      className: color()
-    });
+    return React__default.isValidElement(activeIcon) ? activeIcon : React__default.createElement(Checked, { className: color() });
   };
-  var color = function color2() {
-    var cls = "".concat(classPrefix, "-icon ");
+  const color = () => {
+    const cls = `${classPrefix}-icon `;
     if (innerDisabled) {
       if (innerChecked && !innerIndeterminate) {
-        return "".concat(cls).concat(classPrefix, "-icon-checked ").concat(classPrefix, "-icon-disabled");
+        return `${cls}${classPrefix}-icon-checked ${classPrefix}-icon-disabled`;
       }
       if (innerChecked && innerIndeterminate) {
-        return "".concat(cls).concat(classPrefix, "-icon-indeterminate ").concat(classPrefix, "-icon-disabled");
+        return `${cls}${classPrefix}-icon-indeterminate ${classPrefix}-icon-disabled`;
       }
-      return "".concat(cls).concat(classPrefix, "-icon-disabled");
+      return `${cls}${classPrefix}-icon-disabled`;
     }
     if (innerChecked) {
       if (innerIndeterminate) {
-        return "".concat(cls).concat(classPrefix, "-icon-indeterminate");
+        return `${cls}${classPrefix}-icon-indeterminate`;
       }
-      return "".concat(cls).concat(classPrefix, "-icon-checked");
+      return `${cls}${classPrefix}-icon-checked`;
     }
     return cls;
   };
-  var renderLabel = function renderLabel2() {
-    return React__default.createElement("span", {
-      className: classNames("".concat(classPrefix, "-label "), _defineProperty({}, "".concat(classPrefix, "-label-disabled"), innerDisabled))
-    }, children || label);
+  const renderLabel = () => {
+    return React__default.createElement("span", { className: classNames(`${classPrefix}-label `, {
+      [`${classPrefix}-label-disabled`]: innerDisabled
+    }) }, children || label);
   };
-  var handleClick = function handleClick2() {
+  const handleClick = () => {
     if (disabled)
       return;
-    var latestChecked = !innerChecked;
+    const latestChecked = !innerChecked;
     setChecked(latestChecked);
   };
-  var renderButton = function renderButton2() {
-    return React__default.createElement("div", {
-      className: classNames("".concat(classPrefix, "-button"), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-button-active"), innerChecked), "".concat(classPrefix, "-button-disabled"), disabled))
-    }, children || label, innerChecked && activeIcon ? React__default.createElement("div", {
-      className: classNames("".concat(classPrefix, "-button-icon"))
-    }, activeIcon) : null);
+  const renderButton = () => {
+    return React__default.createElement(
+      "div",
+      { className: classNames(`${classPrefix}-button`, {
+        [`${classPrefix}-button-active`]: innerChecked,
+        [`${classPrefix}-button-disabled`]: disabled
+      }) },
+      children || label,
+      innerChecked && activeIcon ? React__default.createElement("div", { className: classNames(`${classPrefix}-button-icon`) }, activeIcon) : null
+    );
   };
-  var renderCheckboxItem = function renderCheckboxItem2() {
+  const renderListItem = () => {
+    return React__default.createElement(
+      "div",
+      { className: `${classPrefix}-list-item` },
+      renderLabel(),
+      renderIcon()
+    );
+  };
+  const renderCheckboxItem = () => {
+    if (ctx === null || ctx === void 0 ? void 0 : ctx.list) {
+      return React__default.createElement(React__default.Fragment, null, renderListItem());
+    }
     if (shape === "button") {
       return renderButton();
     }
-    return React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      renderIcon(),
+      renderLabel()
+    );
   };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-reverse"), labelPosition === "left"), className)
-  }, rest), {}, {
-    onClick: handleClick
-  }), renderCheckboxItem());
+  return React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
+    [`${classPrefix}-reverse`]: labelPosition === "left"
+  }, className) }, rest, { onClick: handleClick }), renderCheckboxItem());
 };
 Checkbox.defaultProps = defaultProps;
 Checkbox.displayName = "NutCheckBox";

package/dist/esm/collapseitem2.js

@@ -1,99 +1,66 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "title", "name", "disabled", "expandIcon", "rotate", "extra", "style", "className"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { createContext, useContext, useRef, useMemo, useEffect } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
-var collapseContext = {
-  isOpen: function isOpen(name) {
+const collapseContext = {
+  isOpen: (name) => {
     return true;
   },
-  updateValue: function updateValue(name) {
+  updateValue: (name) => {
   },
   expandIcon: null,
   rotate: 180
 };
-var CollapseContext = createContext(collapseContext);
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: null,
-  name: "",
-  expandIcon: null,
-  disabled: false,
-  extra: null
-});
-var CollapseItem = function CollapseItem2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, title = _defaultProps$props.title, name = _defaultProps$props.name, disabled = _defaultProps$props.disabled, expandIcon = _defaultProps$props.expandIcon, rotate = _defaultProps$props.rotate, extra = _defaultProps$props.extra, style = _defaultProps$props.style, className = _defaultProps$props.className, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-collapse-item";
-  var context = useContext(CollapseContext);
-  var wrapperRef = useRef(null);
-  var contentRef = useRef(null);
-  var expanded = useMemo(function() {
+const CollapseContext = createContext(collapseContext);
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: null, name: "", expandIcon: null, disabled: false, extra: null });
+const CollapseItem = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, title, name, disabled, expandIcon, rotate, extra, style, className } = _a, rest = __rest(_a, ["children", "title", "name", "disabled", "expandIcon", "rotate", "extra", "style", "className"]);
+  const classPrefix = "nut-collapse-item";
+  const context = useContext(CollapseContext);
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
+  const expanded = useMemo(() => {
     if (context) {
       return context.isOpen(name);
     }
     return false;
   }, [name, context.isOpen]);
-  var iconStyle = useMemo(function() {
-    return expanded ? {
-      transform: "translateY(-50%) rotate(".concat(rotate || context.rotate, "deg)")
-    } : {
-      transform: "translateY(-50%)"
-    };
+  const iconStyle = useMemo(() => {
+    return expanded ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` } : { transform: "translateY(-50%)" };
   }, [expanded, rotate]);
-  var handleClick = function handleClick2() {
+  const handleClick = () => {
     if (!disabled) {
       context.updateValue(name);
     }
   };
-  var onTransitionEnd = function onTransitionEnd2() {
+  const onTransitionEnd = () => {
     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") : "";
+  const getOffsetHeight = () => {
+    var _a2;
+    const height = (_a2 = contentRef.current) === null || _a2 === void 0 ? void 0 : _a2.offsetHeight;
+    return height ? `${height}px` : "";
   };
-  var toggle = function toggle2() {
-    var start = expanded ? "0px" : getOffsetHeight();
+  const toggle = () => {
+    const start = expanded ? "0px" : getOffsetHeight();
     if (wrapperRef.current) {
       wrapperRef.current.style.height = start;
     }
-    requestAnimationFrame(function() {
-      requestAnimationFrame(function() {
-        var end = expanded ? getOffsetHeight() : "0px";
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const end = expanded ? getOffsetHeight() : "0px";
         if (wrapperRef.current) {
           wrapperRef.current.style.height = end;
         }
       });
     });
   };
-  var init = useRef(true);
-  useEffect(function() {
+  const init = useRef(true);
+  useEffect(() => {
     if (init.current) {
       init.current = false;
       if (!expanded) {
@@ -103,31 +70,26 @@ var CollapseItem = function CollapseItem2(props) {
       toggle();
     }
   }, [expanded]);
-  return React__default.createElement("div", _objectSpread({
-    className: classNames(classPrefix, className),
-    style
-  }, 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)));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: classNames(classPrefix, className), style }, rest),
+    React__default.createElement(
+      "div",
+      { className: classNames(`${classPrefix}-header`, { disabled }), onClick: handleClick },
+      React__default.createElement("div", { className: `${classPrefix}-title` }, title),
+      React__default.createElement("div", { className: `${classPrefix}-extra` }, extra),
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-icon-box` },
+        React__default.createElement("div", { className: `${classPrefix}-icon`, style: iconStyle }, expandIcon || context.expandIcon)
+      )
+    ),
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-content`, onTransitionEnd, ref: wrapperRef },
+      React__default.createElement("div", { ref: contentRef, className: `${classPrefix}-content-text` }, children)
+    )
+  );
 };
 CollapseItem.defaultProps = defaultProps;
 CollapseItem.displayName = "NutCollapseItem";