gui-one-nutui-react-taro/dist/esm/avatar.taro-85ced995.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "prefixCls", "size", "shape", "bgColor", "color", "url", "icon", "iconSize", "className", "style", "activeAvatar", "onActiveAvatar", "onError", "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, { useState, useRef, useContext, useEffect } from 'react';
import classNames from 'classnames';
import { A as AvatarContext } from './AvatarContext-7153ad2b.js';
import { c as cn } from './bem-893ad28d.js';
import { Image } from '@tarojs/components';
import { I as Icon } from './icon.taro-1d0d4fb7.js';
import { C as ComponentDefaults } from './typings-1c5f2628.js';
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
  size: '',
  icon: '',
  iconSize: '',
  bgColor: '#eee',
  color: '#666',
  prefixCls: 'nut-avatar',
  url: ''
});
var Avatar = function Avatar(props) {
  var _parent$propAvatarGro, _parent$propAvatarGro2, _classNames, _parent$propAvatarGro3, _parent$propAvatarGro4, _parent$propAvatarGro5, _parent$propAvatarGro6, _parent$propAvatarGro7, _parent$propAvatarGro9, _parent$propAvatarGro10, _parent$propAvatarGro11, _parent$propAvatarGro12, _parent$propAvatarGro13, _parent$propAvatarGro14, _parent$propAvatarGro15, _parent$propAvatarGro16;
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    children = _defaultProps$props.children,
    prefixCls = _defaultProps$props.prefixCls,
    size = _defaultProps$props.size,
    shape = _defaultProps$props.shape,
    bgColor = _defaultProps$props.bgColor,
    color = _defaultProps$props.color,
    url = _defaultProps$props.url,
    icon = _defaultProps$props.icon,
    iconSize = _defaultProps$props.iconSize,
    className = _defaultProps$props.className,
    style = _defaultProps$props.style,
    activeAvatar = _defaultProps$props.activeAvatar,
    onActiveAvatar = _defaultProps$props.onActiveAvatar,
    onError = _defaultProps$props.onError,
    iconClassPrefix = _defaultProps$props.iconClassPrefix,
    iconFontClassName = _defaultProps$props.iconFontClassName,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    maxSum = _useState2[0],
    setMaxSum = _useState2[1]; // avatarGroup里的avatar的个数
  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]; // avatar的索引
  var avatarRef = useRef(null);
  var parent = useContext(AvatarContext);
  var b = cn('avatar');
  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-avatar-".concat(size || (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro = parent.propAvatarGroup) === null || _parent$propAvatarGro === void 0 ? void 0 : _parent$propAvatarGro.size) || 'normal'), true), _defineProperty(_classNames, "nut-avatar-".concat(shape || (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro2 = parent.propAvatarGroup) === null || _parent$propAvatarGro2 === void 0 ? void 0 : _parent$propAvatarGro2.shape) || 'round'), true), _classNames));
  var cls = classNames(b(''), classes, className);
  var sizeValue = ['large', 'normal', 'small'];
  var styles = _objectSpread({
    width: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
    height: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
    backgroundColor: "".concat(bgColor),
    color: "".concat(color),
    marginLeft: avatarIndex !== 1 && parent !== null && parent !== void 0 && (_parent$propAvatarGro3 = parent.propAvatarGroup) !== null && _parent$propAvatarGro3 !== void 0 && _parent$propAvatarGro3.span ? "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro4 = parent.propAvatarGroup) === null || _parent$propAvatarGro4 === void 0 ? void 0 : _parent$propAvatarGro4.span, "px") : '',
    zIndex: (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro5 = parent.propAvatarGroup) === null || _parent$propAvatarGro5 === void 0 ? void 0 : _parent$propAvatarGro5.zIndex) === 'right' ? "".concat(Math.abs(maxSum - avatarIndex)) : ''
  }, style);
  var maxStyles = {
    backgroundColor: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro6 = parent.propAvatarGroup) === null || _parent$propAvatarGro6 === void 0 ? void 0 : _parent$propAvatarGro6.maxBgColor),
    color: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro7 = parent.propAvatarGroup) === null || _parent$propAvatarGro7 === void 0 ? void 0 : _parent$propAvatarGro7.maxColor)
  };
  var iconStyles = icon || '';
  useEffect(function () {
    var _parent$avatarGroupRe;
    var avatarChildren = parent === null || parent === void 0 ? void 0 : (_parent$avatarGroupRe = parent.avatarGroupRef) === null || _parent$avatarGroupRe === void 0 ? void 0 : _parent$avatarGroupRe.current.children;
    if (avatarChildren) {
      avatarLength(avatarChildren);
    }
  }, []);
  var avatarLength = function avatarLength(children) {
    var _avatarRef$current, _avatarRef$current$da, _parent$propAvatarGro8;
    for (var i = 0; i < children.length; i++) {
      if (children[i] && children[i].classList && (children[i].classList[0] === 'nut-avatar' || children[i].classList.values().next().value === 'nut-avatar')) {
        children[i].setAttribute('data-index', i + 1);
      }
    }
    var index = avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 ? void 0 : (_avatarRef$current$da = _avatarRef$current.dataset) === null || _avatarRef$current$da === void 0 ? void 0 : _avatarRef$current$da.index;
    var maxCount = parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro8 = parent.propAvatarGroup) === null || _parent$propAvatarGro8 === void 0 ? void 0 : _parent$propAvatarGro8.maxCount;
    setMaxSum(children.length);
    setAvatarIndex(index);
    if (index === children.length && index !== maxCount && children.length > maxCount) {
      setShowMax(true);
    }
  };
  var errorEvent = function errorEvent(e) {
    if (props.onError) {
      props.onError(e);
    }
  };
  var clickAvatar = function clickAvatar(e) {
    activeAvatar && activeAvatar(e);
    onActiveAvatar && onActiveAvatar(e);
  };
  console.log('!parent?.propAvatarGroup?.maxCount', !(parent !== null && parent !== void 0 && (_parent$propAvatarGro9 = parent.propAvatarGroup) !== null && _parent$propAvatarGro9 !== void 0 && _parent$propAvatarGro9.maxCount), showMax);
  return React__default.createElement(React__default.Fragment, null, (showMax || !(parent !== null && parent !== void 0 && (_parent$propAvatarGro10 = parent.propAvatarGroup) !== null && _parent$propAvatarGro10 !== void 0 && _parent$propAvatarGro10.maxCount) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro11 = parent.propAvatarGroup) === null || _parent$propAvatarGro11 === void 0 ? void 0 : _parent$propAvatarGro11.maxCount)) && React__default.createElement("div", _objectSpread(_objectSpread({
    className: cls
  }, rest), {}, {
    style: !showMax ? styles : maxStyles,
    onClick: clickAvatar,
    ref: avatarRef
  }), (!(parent !== null && parent !== void 0 && (_parent$propAvatarGro12 = parent.propAvatarGroup) !== null && _parent$propAvatarGro12 !== void 0 && _parent$propAvatarGro12.maxCount) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro13 = parent.propAvatarGroup) === null || _parent$propAvatarGro13 === void 0 ? void 0 : _parent$propAvatarGro13.maxCount)) && React__default.createElement(React__default.Fragment, null, url && React__default.createElement(Image, {
    className: "avatar-img",
    src: url,
    onError: errorEvent
  }), icon && React__default.createElement(Icon, {
    classPrefix: iconClassPrefix,
    fontClassName: iconFontClassName,
    className: "icon",
    name: iconStyles,
    size: iconSize
  }), children && React__default.createElement("span", {
    className: "text"
  }, children)), showMax && React__default.createElement("div", {
    className: "text"
  }, parent !== null && parent !== void 0 && (_parent$propAvatarGro14 = parent.propAvatarGroup) !== null && _parent$propAvatarGro14 !== void 0 && _parent$propAvatarGro14.maxContent ? parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro15 = parent.propAvatarGroup) === null || _parent$propAvatarGro15 === void 0 ? void 0 : _parent$propAvatarGro15.maxContent : "+ ".concat(avatarIndex - (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro16 = parent.propAvatarGroup) === null || _parent$propAvatarGro16 === void 0 ? void 0 : _parent$propAvatarGro16.maxCount)))));
};
Avatar.defaultProps = defaultProps;
Avatar.displayName = 'NutAvatar';
export { Avatar as A };