@nutui/nutui-react-taro 1.4.4 → 1.4.5

package/dist/esm/animatingnumbers.taro-6f40a2e9.js

@@ -1,145 +1,104 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLen", "endNumber", "delaySpeed", "easeSpeed", "className", "thousands"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-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, { useRef, useState, useEffect, Component } from 'react';
 import Taro from '@tarojs/taro';
 import { c as cn } from './bem-893ad28d.js';
-var defaultProps$1 = {
-  maxLen: 0,
-  endNumber: '',
-  delaySpeed: 300,
-  easeSpeed: 1,
-  thousands: false,
-  className: ''
+
+const defaultProps$1 = {
+    maxLen: 0,
+    endNumber: '',
+    delaySpeed: 300,
+    easeSpeed: 1,
+    thousands: false,
+    className: '',
 };
-var CountUp = function CountUp(props) {
-  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
-    maxLen = _defaultProps$1$props.maxLen,
-    endNumber = _defaultProps$1$props.endNumber,
-    delaySpeed = _defaultProps$1$props.delaySpeed,
-    easeSpeed = _defaultProps$1$props.easeSpeed,
-    className = _defaultProps$1$props.className,
-    thousands = _defaultProps$1$props.thousands,
-    reset = _objectWithoutProperties(_defaultProps$1$props, _excluded);
-  var b = cn('countup');
-  var countupRef = useRef(null);
-  var timerRef = useRef(0);
-  var numbers = Array.from({
-    length: 10
-  }, function (v, i) {
-    return i;
-  });
-  var getShowNumber = function getShowNumber() {
-    var splitArr = endNumber.split('.');
-    var intNumber = maxLen && splitArr[0].length < maxLen ? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen) : splitArr[0];
-    var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber).concat(splitArr[1] ? '.' : '').concat(splitArr[1] || '');
-    return currNumber.split('');
-  };
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    numerArr = _useState2[0],
-    setNumerArr = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transformArr = _useState4[0],
-    setTransformArr = _useState4[1];
-  var isLoaded = useRef(false);
-  var setNumberTransform = function setNumberTransform() {
-    if (countupRef.current && numerArr.length) {
-      Taro.createSelectorQuery().selectAll('.nut-countup__listitem').node(function (numberItems) {
-        var transformArrCache = [];
-        Object.keys(numberItems).forEach(function (key) {
-          var elem = numberItems[Number(key)];
-          var idx = Number(numerArr[Number(key)]);
-          if (elem) {
-            // 计算规则：父元素和实际列表高度的百分比，分割成20等份
-            var transform = idx || idx === 0 ? "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)") : '';
-            transformArrCache.push(transform);
-          }
-        });
-        setTransformArr([].concat(transformArrCache));
-      }).exec();
-    }
-  };
-  var numberEaseStyle = function numberEaseStyle(idx) {
-    return {
-      transition: "transform ".concat(easeSpeed, "s ease-in-out"),
-      transform: transformArr[idx] ? transformArr[idx] : null
+const CountUp = (props) => {
+    const { maxLen, endNumber, delaySpeed, easeSpeed, className, thousands, ...reset } = {
+        ...defaultProps$1,
+        ...props,
     };
-  };
-  useEffect(function () {
-    setNumberTransform();
-  }, [numerArr]);
-  useEffect(function () {
-    if (!isLoaded.current) {
-      isLoaded.current = true;
-      timerRef.current = window.setTimeout(function () {
-        setNumerArr(getShowNumber());
-      }, delaySpeed);
-    } else {
-      setNumerArr(getShowNumber());
-    }
-    return function () {
-      window.clearTimeout(timerRef.current);
+    const b = cn('countup');
+    const countupRef = useRef(null);
+    const timerRef = useRef(0);
+    const numbers = Array.from({ length: 10 }, (v, i) => i);
+    const getShowNumber = () => {
+        const splitArr = endNumber.split('.');
+        const intNumber = maxLen && splitArr[0].length < maxLen
+            ? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen)
+            : splitArr[0];
+        const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber}${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`;
+        return currNumber.split('');
+    };
+    const [numerArr, setNumerArr] = useState([]);
+    const [transformArr, setTransformArr] = useState([]);
+    const isLoaded = useRef(false);
+    const setNumberTransform = () => {
+        if (countupRef.current && numerArr.length) {
+            Taro.createSelectorQuery()
+                .selectAll('.nut-countup__listitem')
+                .node((numberItems) => {
+                const transformArrCache = [];
+                Object.keys(numberItems).forEach((key) => {
+                    const elem = numberItems[Number(key)];
+                    const idx = Number(numerArr[Number(key)]);
+                    if (elem) {
+                        // 计算规则：父元素和实际列表高度的百分比，分割成20等份
+                        const transform = idx || idx === 0
+                            ? `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)`
+                            : '';
+                        transformArrCache.push(transform);
+                    }
+                });
+                setTransformArr([...transformArrCache]);
+            })
+                .exec();
+        }
     };
-  }, [endNumber]);
-  return React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className),
-    ref: countupRef
-  }, React__default.createElement("ul", {
-    className: b('list')
-  }, numerArr.map(function (item, idx) {
-    return React__default.createElement("li", {
-      className: "".concat(b('listitem', {
-        number: !Number.isNaN(Number(item))
-      })),
-      key: idx
-    }, !Number.isNaN(Number(item)) ? React__default.createElement("span", {
-      className: b('number'),
-      style: numberEaseStyle(idx)
-    }, [].concat(numbers, numbers).map(function (number, subidx) {
-      return React__default.createElement("span", {
-        key: subidx
-      }, number);
-    })) : React__default.createElement("span", {
-      className: b('separator')
-    }, item));
-  })));
+    const numberEaseStyle = (idx) => {
+        return {
+            transition: `transform ${easeSpeed}s ease-in-out`,
+            transform: transformArr[idx] ? transformArr[idx] : null,
+        };
+    };
+    useEffect(() => {
+        setNumberTransform();
+    }, [numerArr]);
+    useEffect(() => {
+        if (!isLoaded.current) {
+            isLoaded.current = true;
+            timerRef.current = window.setTimeout(() => {
+                setNumerArr(getShowNumber());
+            }, delaySpeed);
+        }
+        else {
+            setNumerArr(getShowNumber());
+        }
+        return () => {
+            window.clearTimeout(timerRef.current);
+        };
+    }, [endNumber]);
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ref: countupRef },
+        React__default.createElement("ul", { className: b('list') }, numerArr.map((item, idx) => {
+            return (React__default.createElement("li", { className: `${b('listitem', {
+                    number: !Number.isNaN(Number(item)),
+                })}`, key: idx }, !Number.isNaN(Number(item)) ? (React__default.createElement("span", { className: b('number'), style: numberEaseStyle(idx) }, [...numbers, ...numbers].map((number, subidx) => {
+                return React__default.createElement("span", { key: subidx }, number);
+            }))) : (React__default.createElement("span", { className: b('separator') }, item))));
+        }))));
 };
 CountUp.defaultProps = defaultProps$1;
 CountUp.displayName = 'NutCountUp';
-var defaultProps = {};
-var AnimatingNumbers = /*#__PURE__*/function (_Component) {
-  _inherits(AnimatingNumbers, _Component);
-  var _super = _createSuper(AnimatingNumbers);
-  function AnimatingNumbers(props) {
-    var _this;
-    _classCallCheck(this, AnimatingNumbers);
-    _this = _super.call(this, props);
-    _this.state = {};
-    return _this;
-  }
-  _createClass(AnimatingNumbers, [{
-    key: "render",
-    value: function render() {
-      return React__default.createElement("div", {
-        className: "nut-animatingnumbers"
-      });
+
+const defaultProps = {};
+class AnimatingNumbers extends Component {
+    static defaultProps = defaultProps;
+    static displayName = 'NutAnimatingNumbers';
+    static CountUp = CountUp;
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        return React__default.createElement("div", { className: "nut-animatingnumbers" });
     }
-  }]);
-  return AnimatingNumbers;
-}(Component);
-_defineProperty(AnimatingNumbers, "defaultProps", defaultProps);
-_defineProperty(AnimatingNumbers, "displayName", 'NutAnimatingNumbers');
-_defineProperty(AnimatingNumbers, "CountUp", CountUp);
+}
+
 export { AnimatingNumbers as A };

package/dist/esm/audio.taro-4fadc583.js

@@ -0,0 +1,161 @@
+import React__default, { useState, useRef } from 'react';
+import Taro from '@tarojs/taro';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { R as Range } from './range.taro-5d6ff217.js';
+import { B as Button } from './button.taro-4ce133b9.js';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
+
+const b = cn('audio');
+const warn = console.warn;
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    url: '',
+    style: {},
+    autoplay: false,
+    loop: false,
+    type: 'progress',
+    onFastBack: (ctx) => { },
+    onForward: (ctx) => { },
+    onPause: (ctx) => { },
+    onPlay: (ctx) => { },
+    onPlayEnd: (ctx) => { },
+    onCanPlay: (ctx) => { },
+};
+const Audio = (props) => {
+    const { locale } = useConfig();
+    const { className, url, style, autoplay, loop, type, onFastBack, onForward, onPause, onPlay, onPlayEnd, onCanPlay, children, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [playing, setPlaying] = useState(false);
+    const [totalSeconds, setTotalSeconds] = useState(0);
+    const [percent, setPercent] = useState(0);
+    const [isCanPlay, setIsCanPlay] = useState(false);
+    const [currentDuration, setCurrentDuration] = useState('00:00:00');
+    const statusRef = useRef({
+        currentTime: 0,
+        currentDuration: '00:00:00',
+        percent: 0,
+    });
+    const audioRef = useRef(Taro.createInnerAudioContext());
+    const audioCtx = audioRef.current;
+    audioCtx.src = url;
+    audioCtx.autoplay = autoplay || false;
+    audioCtx.loop = loop || false;
+    audioCtx.onPause(() => {
+        props.onPause && props.onPause(audioCtx);
+    });
+    audioCtx.onEnded(() => {
+        if (props.loop) {
+            warn(locale.audio.tips || 'onPlayEnd事件在loop=false时才会触发');
+        }
+        else {
+            props.onPlayEnd && props.onPlayEnd(audioCtx);
+        }
+    });
+    audioCtx.onPlay(() => {
+        const { duration } = audioCtx;
+        setTotalSeconds(Math.floor(duration));
+        props.onPlay && props.onPlay(audioCtx);
+    });
+    audioCtx.onCanplay(() => {
+        const intervalID = setInterval(function () {
+            if (audioCtx.duration !== 0) {
+                setTotalSeconds(audioCtx.duration);
+                clearInterval(intervalID);
+            }
+        }, 500);
+        setIsCanPlay(true);
+        props.onCanPlay && props.onCanPlay(audioCtx);
+    });
+    audioCtx.onTimeUpdate(() => {
+        const time = parseInt(`${audioCtx.currentTime}`);
+        const formated = formatSeconds(`${time}`);
+        statusRef.current.currentDuration = formated;
+        setPercent((time / totalSeconds) * 100);
+        setCurrentDuration(formatSeconds(audioCtx.currentTime.toString()));
+    });
+    audioCtx.onError((res) => {
+        console.log('code', res.errCode);
+        console.log('message', res.errMsg);
+    });
+    function formatSeconds(value) {
+        if (!value) {
+            return '00:00:00';
+        }
+        const time = parseInt(value);
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time - hours * 3600) / 60);
+        const secondss = time - hours * 3600 - minutes * 60;
+        let result = '';
+        result += `${`0${hours.toString()}`.slice(-2)}:`;
+        result += `${`0${minutes.toString()}`.slice(-2)}:`;
+        result += `0${secondss.toString()}`.slice(-2);
+        return result;
+    }
+    const handleBack = () => {
+        const currentTime = Math.floor(audioCtx.currentTime);
+        statusRef.current.currentTime = Math.max(currentTime - 1, 0);
+        setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
+        audioCtx.seek(statusRef.current.currentTime);
+        props.onFastBack && props.onFastBack(audioCtx);
+    };
+    const handleForward = () => {
+        const currentTime = Math.floor(audioCtx.currentTime);
+        statusRef.current.currentTime = Math.min(currentTime + 1, audioCtx.duration);
+        setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
+        audioCtx.seek(statusRef.current.currentTime);
+        props.onForward && props.onForward(audioCtx);
+    };
+    const handleStatusChange = () => {
+        setPlaying(!playing);
+        if (!playing) {
+            audioCtx.play();
+        }
+        else {
+            audioCtx.pause();
+        }
+    };
+    const renderIcon = () => {
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: b('icon') },
+                React__default.createElement("div", { className: `${b('icon-box')} ${playing ? b('icon-play') : b('icon-stop')}`, onClick: handleStatusChange }, playing ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "service", className: "nut-icon-loading" })) : (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "service" }))))));
+    };
+    const renderProgerss = () => {
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: b('progress') },
+                React__default.createElement("div", { className: "time" }, currentDuration),
+                React__default.createElement("div", { className: b('progress-bar-wrapper') },
+                    React__default.createElement(Range, { modelValue: percent, hiddenTag: true, hiddenRange: true, "inactive-color": "#cccccc", "active-color": "#fa2c19" })),
+                React__default.createElement("div", { className: "time" }, formatSeconds(`${totalSeconds}`) || '00:00:00')),
+            React__default.createElement("div", { className: isCanPlay ? 'custom-button-group' : 'custom-button-group-disable' },
+                React__default.createElement(Button, { type: "primary", size: "small", className: "back", onClick: handleBack }, locale.audio.back || '快退'),
+                React__default.createElement(Button, { type: "primary", size: "small", className: "start", onClick: handleStatusChange }, playing
+                    ? `${locale.audio.pause || '暂停'}`
+                    : `${locale.audio.start || '开始'}`),
+                React__default.createElement(Button, { type: "primary", size: "small", onClick: handleForward }, locale.audio.forward || '快进'))));
+    };
+    const renderNone = () => {
+        return (React__default.createElement("div", { className: b('none-container'), onClick: handleStatusChange }, children));
+    };
+    const renderAudio = () => {
+        switch (type) {
+            case 'icon':
+                return renderIcon();
+            case 'progress':
+                return renderProgerss();
+            case 'none':
+                return renderNone();
+            default:
+                return null;
+        }
+    };
+    return (React__default.createElement("div", { className: `${b()} ${className}`, style: style, ...rest }, renderAudio()));
+};
+Audio.defaultProps = defaultProps;
+Audio.displayName = 'NutAudio';
+
+export { Audio as A };

package/dist/esm/avatar.taro-85ced995.js

@@ -1,9 +1,3 @@
-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';
@@ -11,120 +5,100 @@ 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)))));
+
+const defaultProps = {
+    ...ComponentDefaults,
+    size: '',
+    icon: '',
+    iconSize: '',
+    bgColor: '#eee',
+    color: '#666',
+    prefixCls: 'nut-avatar',
+    url: '',
+};
+const Avatar = (props) => {
+    const { children, prefixCls, size, shape, bgColor, color, url, icon, iconSize, className, style, activeAvatar, onActiveAvatar, onError, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [maxSum, setMaxSum] = useState(0); // avatarGroup里的avatar的个数
+    const [showMax, setShowMax] = useState(false); // 是否显示的最大头像个数
+    const [avatarIndex, setAvatarIndex] = useState(1); // avatar的索引
+    const avatarRef = useRef(null);
+    const parent = useContext(AvatarContext);
+    const b = cn('avatar');
+    const classes = classNames({
+        [`nut-avatar-${size || parent?.propAvatarGroup?.size || 'normal'}`]: true,
+        [`nut-avatar-${shape || parent?.propAvatarGroup?.shape || 'round'}`]: true,
+    });
+    const cls = classNames(b(''), classes, className);
+    const sizeValue = ['large', 'normal', 'small'];
+    const styles = {
+        width: sizeValue.indexOf(size) > -1 ? '' : `${size}px`,
+        height: sizeValue.indexOf(size) > -1 ? '' : `${size}px`,
+        backgroundColor: `${bgColor}`,
+        color: `${color}`,
+        marginLeft: avatarIndex !== 1 && parent?.propAvatarGroup?.span
+            ? `${parent?.propAvatarGroup?.span}px`
+            : '',
+        zIndex: parent?.propAvatarGroup?.zIndex === 'right'
+            ? `${Math.abs(maxSum - avatarIndex)}`
+            : '',
+        ...style,
+    };
+    const maxStyles = {
+        backgroundColor: `${parent?.propAvatarGroup?.maxBgColor}`,
+        color: `${parent?.propAvatarGroup?.maxColor}`,
+    };
+    const iconStyles = icon || '';
+    useEffect(() => {
+        const avatarChildren = parent?.avatarGroupRef?.current.children;
+        if (avatarChildren) {
+            avatarLength(avatarChildren);
+        }
+    }, []);
+    const avatarLength = (children) => {
+        for (let 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);
+            }
+        }
+        const index = avatarRef?.current?.dataset?.index;
+        const maxCount = parent?.propAvatarGroup?.maxCount;
+        setMaxSum(children.length);
+        setAvatarIndex(index);
+        if (index === children.length &&
+            index !== maxCount &&
+            children.length > maxCount) {
+            setShowMax(true);
+        }
+    };
+    const errorEvent = (e) => {
+        if (props.onError) {
+            props.onError(e);
+        }
+    };
+    const clickAvatar = (e) => {
+        activeAvatar && activeAvatar(e);
+        onActiveAvatar && onActiveAvatar(e);
+    };
+    console.log('!parent?.propAvatarGroup?.maxCount', !parent?.propAvatarGroup?.maxCount, showMax);
+    return (React__default.createElement(React__default.Fragment, null, (showMax ||
+        !parent?.propAvatarGroup?.maxCount ||
+        avatarIndex <= parent?.propAvatarGroup?.maxCount) && (React__default.createElement("div", { className: cls, ...rest, style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef },
+        (!parent?.propAvatarGroup?.maxCount ||
+            avatarIndex <= parent?.propAvatarGroup?.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?.propAvatarGroup?.maxContent
+            ? parent?.propAvatarGroup?.maxContent
+            : `+ ${avatarIndex - parent?.propAvatarGroup?.maxCount}`))))));
 };
 Avatar.defaultProps = defaultProps;
 Avatar.displayName = 'NutAvatar';
+
 export { Avatar as A };