@elacity-js/uikit/dist/components/Avatar.js

React / Material UI Design kit for Elacity project

import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsx } from 'react/jsx-runtime';
import Avatar$1 from '@mui/material/Avatar';
import { baseURL } from '@elacity-js/lib';
import { useImageGracefullyLoad } from './Image.js';

var Avatar = (_a) => {
    var { 
    // basics
    src, alt, sx, 
    // Image component
    fallbackImage, errorImage, retries, retryInterval, backoffFactor } = _a, 
    // Avatar props
    props = __rest(_a, ["src", "alt", "sx", "fallbackImage", "errorImage", "retries", "retryInterval", "backoffFactor"]);
    const { source, isLoading } = useImageGracefullyLoad(src || '', {
        fallbackImage: fallbackImage || baseURL('/static/elacity/elanaut-icon.png'),
        errorImage: errorImage || fallbackImage || baseURL('/static/elacity/elanaut-icon.png'),
        retries: retries || 10,
        retryInterval,
        backoffFactor,
        disabled: src === null || src === void 0 ? void 0 : src.startsWith('data:image/'),
    });
    return (jsx(Avatar$1, Object.assign({ src: source, alt: alt, sx: Object.assign(Object.assign(Object.assign({}, (sx || {})), (isLoading && {
            animation: 'op 2s infinite',
            filter: 'grayscale(0.7)',
        })), { transition: 'filter 1.5s' }) }, props, { children: jsx("img", { alt: alt, src: fallbackImage || baseURL('/static/elacity/elanaut-icon.png'), style: {
                width: '100%',
                height: '100%',
                filter: 'grayscale(0.7)',
                transition: 'filter 1.5s',
            } }) })));
};

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