@fluido/react-components
Version:
Fluido webapp components
78 lines (76 loc) • 3.13 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const color_1 = __importDefault(require("color"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const StyledButton = styled_components_1.default.button `
position: relative;
display: flex;
flex: 0 0 fit-content;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
border: none;
background-color: var(--secondary);
color: var(--on-secondary);
border-radius: 9999px;
overflow: hidden;
outline: none;
cursor: default;
& img {
display: block;
object-fit: cover;
}
`;
const Avatar = react_1.forwardRef((_a, fRef) => {
var { picture, name = '', render = 'initials', size = 48, className, backgroundColor, config = {} } = _a, props = __rest(_a, ["picture", "name", "render", "size", "className", "backgroundColor", "config"]);
let cBackgroundColor;
try {
cBackgroundColor = color_1.default(backgroundColor);
}
catch (err) {
cBackgroundColor = color_1.default('transparent');
}
const handleRef = (node) => {
if (fRef) {
if (typeof fRef === 'function') {
fRef(node);
}
else {
fRef.current = node;
}
}
};
return (jsx_runtime_1.jsx(StyledButton, Object.assign({ ref: handleRef, style: {
backgroundColor: cBackgroundColor.rgb().string(),
color: (backgroundColor &&
(cBackgroundColor.isLight() ? 'black' : 'white')) ||
'inherit',
}, className: className }, props, { children: jsx_runtime_1.jsx("img", { draggable: 'false', width: size + 'px', height: size + 'px', src: picture ||
`https://avatars.dicebear.com/api/${render}/${encodeURI(name)}.svg?${backgroundColor
? 'b=%23' + cBackgroundColor.hex().substr(1) + '&'
: ''}w=${+size}&h=${+size}&${Object.entries(config)
.map((e) => e.join('='))
.join('&')}`, alt: name, onError: (ev) => {
const el = ev.target;
if (!el.src.includes('/images/fallback-avatar.jpg'))
el.src = '/images/fallback-avatar.jpg';
} }, void 0) }), void 0));
});
exports.default = Avatar;