@uimkit/uikit-react/dist/esm/components/Avatar/Avatar.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

import React__default, { useState, useRef, useEffect } from 'react';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import { getWholeChar } from '../../utils.js';

function Avatar(props) {
    var image = props.image, name = props.name, _a = props.size, size = _a === void 0 ? 32 : _a, _b = props.shape, shape = _b === void 0 ? 'circle' : _b, update = props.update, onClick = props.onClick, _c = props.list, list = _c === void 0 ? [] : _c;
    var nameStr = (name === null || name === void 0 ? void 0 : name.toString()) || '';
    var alt = getWholeChar(nameStr, 0);
    var _d = useState(false), error = _d[0], setError = _d[1];
    var _e = useState(false), loaded = _e[0], setLoaded = _e[1];
    var _f = useState(false), isEdit = _f[0], setIsEdit = _f[1];
    var _g = useState(200), avatarListWidth = _g[0], setAvatarListWidth = _g[1];
    var avatarRef = useRef();
    var avatarListRef = useRef();
    useEffect(function () {
        setError(false);
        setLoaded(false);
    }, [image]);
    useEffect(function () {
        var _a, _b, _c;
        if (isEdit && update) {
            window.addEventListener('mouseup', toggle, false);
            (_a = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', stopImmediatePropagation);
            setAvatarListWidth((_b = avatarListRef === null || avatarListRef === void 0 ? void 0 : avatarListRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
        }
        else {
            window.removeEventListener('mouseup', toggle, false);
            (_c = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseup', stopImmediatePropagation);
        }
        return function () {
            var _a;
            window.removeEventListener('mouseup', toggle, false);
            (_a = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', stopImmediatePropagation);
        };
    }, [isEdit]);
    var stopImmediatePropagation = function (e) {
        e.stopPropagation();
    };
    var toggle = function () {
        setIsEdit(!isEdit);
    };
    var handleUpdate = function (value) {
        toggle();
        update(value);
    };
    return (React__default.createElement("div", { className: "uim-kit-avatar ".concat(shape), style: {
            flexBasis: "".concat(size, "px"),
            height: "".concat(size, "px"),
            objectFit: 'cover',
            width: "".concat(size, "px"),
        }, ref: avatarRef, role: "button", tabIndex: 0, onClick: onClick },
        image && !error ? (React__default.createElement("img", { className: "avatar-image ".concat(loaded ? 'avatar-image-loaded' : ''), onError: function () { return setError(true); }, onLoad: function () { return setLoaded(true); }, alt: alt, src: image })) : (React__default.createElement("div", { className: "uim-kit-avatar ".concat(shape), style: {
                flexBasis: "".concat(size, "px"),
                height: "".concat(size, "px"),
                objectFit: 'cover',
                width: "".concat(size, "px"),
                backgroundColor: 'black',
                borderRadius: "".concat(shape === 'circle' ? '50%' : '4px'),
            } })),
        update && (React__default.createElement("div", { className: "uim-kit-avatar-edit ".concat(isEdit ? 'displayFlex' : ''), role: "button", tabIndex: 0, onClick: toggle },
            React__default.createElement(Icon, { className: "icon-camera", width: 33, height: 30, type: IconTypes.CAMERA }))),
        update && isEdit && (React__default.createElement("ul", { className: "uim-kit-avatar-list", ref: avatarListRef, style: {
                left: "-".concat((avatarListWidth - size) / 2, "px"),
            } }, list.map(function (item, index) {
            var key = "".concat(item).concat(index);
            return (React__default.createElement("li", { className: "uim-kit-avatar-list-item", role: "menuitem", key: key, tabIndex: index, onClick: function () { handleUpdate(item); } },
                React__default.createElement("img", { className: "avatar-image", alt: item, src: item })));
        })))));
}

export { Avatar };
//# sourceMappingURL=Avatar.js.map