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

package/dist/esm/Avatar.js

@@ -1,28 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"];
-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, { useState, useRef, useContext, useEffect } from "react";
 import classNames from "classnames";
 import { User } from "@nutui/icons-react";
@@ -30,93 +6,70 @@ import { A as AvatarContext } from "./context2.js";
 import Image from "./Image.js";
 import { C as ComponentDefaults } from "./typings.js";
 import AvatarGroup from "./AvatarGroup.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  size: "",
-  shape: "round",
-  icon: "",
-  background: "#eee",
-  color: "#666",
-  fit: "cover",
-  src: "",
-  alt: ""
-});
-var classPrefix = "nut-avatar";
-var Avatar = function Avatar2(props) {
-  var _parent$propAvatarGro, _parent$propAvatarGro2, _parent$propAvatarGro3, _parent$propAvatarGro4, _parent$propAvatarGro5, _parent$propAvatarGro6, _parent$propAvatarGro7, _parent$propAvatarGro9, _parent$propAvatarGro10, _parent$propAvatarGro11, _parent$propAvatarGro12, _parent$propAvatarGro13, _parent$propAvatarGro14, _parent$propAvatarGro15;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, size = _defaultProps$props.size, shape = _defaultProps$props.shape, background = _defaultProps$props.background, color = _defaultProps$props.color, src = _defaultProps$props.src, alt = _defaultProps$props.alt, icon = _defaultProps$props.icon, fit = _defaultProps$props.fit, className = _defaultProps$props.className, style = _defaultProps$props.style, onClick = _defaultProps$props.onClick, onError = _defaultProps$props.onError, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), maxSum = _useState2[0], setMaxSum = _useState2[1];
-  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), showMax = _useState4[0], setShowMax = _useState4[1];
-  var _useState5 = useState(1), _useState6 = _slicedToArray(_useState5, 2), avatarIndex = _useState6[0], setAvatarIndex = _useState6[1];
-  var avatarRef = useRef(null);
-  var parent = useContext(AvatarContext);
-  var sizeValue = ["large", "normal", "small"];
-  var classes = classNames(_defineProperty(_defineProperty({}, "nut-avatar-".concat((parent === null || parent === void 0 || (_parent$propAvatarGro = parent.propAvatarGroup) === null || _parent$propAvatarGro === void 0 ? void 0 : _parent$propAvatarGro.size) || size || "normal"), true), "nut-avatar-".concat((parent === null || parent === void 0 || (_parent$propAvatarGro2 = parent.propAvatarGroup) === null || _parent$propAvatarGro2 === void 0 ? void 0 : _parent$propAvatarGro2.shape) || shape), true));
-  var cls = classNames(classPrefix, classes, className);
-  var styles = _objectSpread({
-    width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-    height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-    backgroundColor: "".concat(background),
-    color,
-    marginLeft: avatarIndex !== 1 && parent !== null && parent !== void 0 && (_parent$propAvatarGro3 = parent.propAvatarGroup) !== null && _parent$propAvatarGro3 !== void 0 && _parent$propAvatarGro3.gap ? "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro4 = parent.propAvatarGroup) === null || _parent$propAvatarGro4 === void 0 ? void 0 : _parent$propAvatarGro4.gap, "px") : "",
-    zIndex: (parent === null || parent === void 0 || (_parent$propAvatarGro5 = parent.propAvatarGroup) === null || _parent$propAvatarGro5 === void 0 ? void 0 : _parent$propAvatarGro5.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
-  }, style);
-  var maxStyles = {
-    backgroundColor: "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro6 = parent.propAvatarGroup) === null || _parent$propAvatarGro6 === void 0 ? void 0 : _parent$propAvatarGro6.maxBackground),
-    color: "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro7 = parent.propAvatarGroup) === null || _parent$propAvatarGro7 === void 0 ? void 0 : _parent$propAvatarGro7.maxColor)
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { size: "", shape: "round", icon: "", background: "#eee", color: "#666", fit: "cover", src: "", alt: "" });
+const classPrefix = `nut-avatar`;
+const Avatar = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  const _q = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _q, rest = __rest(_q, ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"]);
+  const [maxSum, setMaxSum] = useState(0);
+  const [showMax, setShowMax] = useState(false);
+  const [avatarIndex, setAvatarIndex] = useState(1);
+  const avatarRef = useRef(null);
+  const parent = useContext(AvatarContext);
+  const sizeValue = ["large", "normal", "small"];
+  const classes = classNames({
+    [`nut-avatar-${((_a = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _a === void 0 ? void 0 : _a.size) || size || "normal"}`]: true,
+    [`nut-avatar-${((_b = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _b === void 0 ? void 0 : _b.shape) || shape}`]: true
+  });
+  const cls = classNames(classPrefix, classes, className);
+  const styles = Object.assign({ width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, backgroundColor: `${background}`, color, marginLeft: avatarIndex !== 1 && ((_c = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c === void 0 ? void 0 : _c.gap) ? `${(_d = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _d === void 0 ? void 0 : _d.gap}px` : "", zIndex: ((_e = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _e === void 0 ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
+  const maxStyles = {
+    backgroundColor: `${(_f = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _f === void 0 ? void 0 : _f.maxBackground}`,
+    color: `${(_g = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _g === void 0 ? void 0 : _g.maxColor}`
   };
-  useEffect(function() {
-    var _parent$avatarGroupRe;
-    var avatarChildren = parent === null || parent === void 0 || (_parent$avatarGroupRe = parent.avatarGroupRef) === null || _parent$avatarGroupRe === void 0 ? void 0 : _parent$avatarGroupRe.current.children;
+  useEffect(() => {
+    var _a2;
+    const avatarChildren = (_a2 = parent === null || parent === void 0 ? void 0 : parent.avatarGroupRef) === null || _a2 === void 0 ? void 0 : _a2.current.children;
     if (avatarChildren) {
       avatarLength(avatarChildren);
     }
   }, []);
-  var avatarLength = function avatarLength2(children2) {
-    var _avatarRef$current, _parent$propAvatarGro8;
-    for (var i = 0; i < children2.length; i++) {
+  const avatarLength = (children2) => {
+    var _a2, _b2, _c2;
+    for (let i = 0; i < children2.length; i++) {
       if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
         children2[i].setAttribute("data-index", i + 1);
       }
     }
-    var index = Number(avatarRef === null || avatarRef === void 0 || (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 || (_avatarRef$current = _avatarRef$current.dataset) === null || _avatarRef$current === void 0 ? void 0 : _avatarRef$current.index);
-    var maxCount = parent === null || parent === void 0 || (_parent$propAvatarGro8 = parent.propAvatarGroup) === null || _parent$propAvatarGro8 === void 0 ? void 0 : _parent$propAvatarGro8.max;
+    const index = Number((_b2 = (_a2 = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b2 === void 0 ? void 0 : _b2.index);
+    const maxCount = (_c2 = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c2 === void 0 ? void 0 : _c2.max;
     setMaxSum(children2.length);
     setAvatarIndex(index);
     if (index === children2.length && index !== maxCount && children2.length > maxCount) {
       setShowMax(true);
     }
   };
-  var errorEvent = function errorEvent2() {
+  const errorEvent = () => {
     if (props.onError) {
       props.onError();
     }
   };
-  var clickAvatar = function clickAvatar2(e) {
+  const clickAvatar = (e) => {
     onClick && onClick(e);
   };
-  return React__default.createElement(React__default.Fragment, null, (showMax || !(parent !== null && parent !== void 0 && (_parent$propAvatarGro9 = parent.propAvatarGroup) !== null && _parent$propAvatarGro9 !== void 0 && _parent$propAvatarGro9.max) || avatarIndex <= (parent === null || parent === void 0 || (_parent$propAvatarGro10 = parent.propAvatarGroup) === null || _parent$propAvatarGro10 === void 0 ? void 0 : _parent$propAvatarGro10.max)) && React__default.createElement("div", _objectSpread(_objectSpread({
-    className: cls
-  }, rest), {}, {
-    style: !showMax ? styles : maxStyles,
-    onClick: clickAvatar,
-    ref: avatarRef
-  }), (!(parent !== null && parent !== void 0 && (_parent$propAvatarGro11 = parent.propAvatarGroup) !== null && _parent$propAvatarGro11 !== void 0 && _parent$propAvatarGro11.max) || avatarIndex <= (parent === null || parent === void 0 || (_parent$propAvatarGro12 = parent.propAvatarGroup) === null || _parent$propAvatarGro12 === void 0 ? void 0 : _parent$propAvatarGro12.max)) && React__default.createElement(React__default.Fragment, null, src && React__default.createElement(Image, {
-    className: "avatar-img",
-    src,
-    alt,
-    style: {
-      objectFit: fit
-    },
-    onError: errorEvent
-  }), React__default.isValidElement(icon) ? React__default.cloneElement(icon, _objectSpread(_objectSpread({}, icon.props), {}, {
-    className: "".concat(icon.props.className || "", " icon")
-  })) : null, children && React__default.createElement("span", {
-    className: "text"
-  }, children), !src && !icon && !children && React__default.createElement(User, {
-    className: "icon"
-  })), showMax && React__default.createElement("div", {
-    className: "text"
-  }, parent !== null && parent !== void 0 && (_parent$propAvatarGro13 = parent.propAvatarGroup) !== null && _parent$propAvatarGro13 !== void 0 && _parent$propAvatarGro13.maxContent ? parent === null || parent === void 0 || (_parent$propAvatarGro14 = parent.propAvatarGroup) === null || _parent$propAvatarGro14 === void 0 ? void 0 : _parent$propAvatarGro14.maxContent : "+ ".concat(avatarIndex - Number((parent === null || parent === void 0 || (_parent$propAvatarGro15 = parent.propAvatarGroup) === null || _parent$propAvatarGro15 === void 0 ? void 0 : _parent$propAvatarGro15.max) || 0)))));
+  return React__default.createElement(React__default.Fragment, null, (showMax || !((_h = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _h === void 0 ? void 0 : _h.max) || avatarIndex <= ((_j = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _j === void 0 ? void 0 : _j.max)) && React__default.createElement(
+    "div",
+    Object.assign({ className: cls }, rest, { style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef }),
+    (!((_k = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _k === void 0 ? void 0 : _k.max) || avatarIndex <= ((_l = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _l === void 0 ? void 0 : _l.max)) && React__default.createElement(
+      React__default.Fragment,
+      null,
+      src && React__default.createElement(Image, { className: "avatar-img", src, alt, style: { objectFit: fit }, onError: errorEvent }),
+      React__default.isValidElement(icon) ? React__default.cloneElement(icon, Object.assign(Object.assign({}, icon.props), { className: `${icon.props.className || ""} icon` })) : null,
+      children && React__default.createElement("span", { className: "text" }, children),
+      !src && !icon && !children && React__default.createElement(User, { className: "icon" })
+    ),
+    showMax && React__default.createElement("div", { className: "text" }, ((_m = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _m === void 0 ? void 0 : _m.maxContent) ? (_o = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _o === void 0 ? void 0 : _o.maxContent : `+ ${avatarIndex - Number(((_p = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _p === void 0 ? void 0 : _p.max) || 0)}`)
+  ));
 };
 Avatar.defaultProps = defaultProps;
 Avatar.displayName = "NutAvatar";