@sky-mavis/tanto-widget
Version:
Tanto Widget
105 lines • 11.3 kB
JavaScript
import _styled from'@emotion/styled/base';import {jsxs,jsx}from'@emotion/react/jsx-runtime';import {useTheme}from'@emotion/react';import BoringAvatarModule from'boring-avatars';const BoringAvatar =
// BoringAvatarModule can be either a function (the component itself)
// or an object with a `.default` property depending on how the module is imported,
// especially when using Rollup with 'external' and consuming ESM-only packages.
// This check ensures compatibility across different bundlers and environments.
// @ts-expect-error
typeof BoringAvatarModule === 'function' ? BoringAvatarModule : BoringAvatarModule.default ?? BoringAvatarModule;
const COLOR_GROUPS = [['#2065EE', '#FFAEFC'], ['#5CFFFF', '#00D4FF'], ['#FFC34D', '#E3E8F2'], ['#4BFFD4', '#8833FF'], ['#2B4DFF', '#0035FF']];
function hashCode(seed) {
let hash = 0;
for (let i = 0; i < seed.length; i++) {
const character = seed.charCodeAt(i);
hash = (hash << 5) - hash + character;
hash &= hash;
}
return Math.abs(hash);
}
function getColors(seed) {
return COLOR_GROUPS.map((colorGroup, index) => {
const hash = hashCode(index + seed);
return colorGroup[hash % colorGroup.length];
});
}
const AvatarSizeMap = {
XXS: 16,
XS: 20,
S: 24,
M: 32,
L: 48,
XL: 64,
XXL: 80,
XXXL: 160
};
const Container = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
target: "e1v20u9i1"
} : {
target: "e1v20u9i1",
label: "Container"
})("display:inline-block;overflow:hidden;position:relative;", ({
size
}) => ({
width: AvatarSizeMap[size],
height: AvatarSizeMap[size]
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkNrQiIsImZpbGUiOiJBdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IEJvcmluZ0F2YXRhck1vZHVsZSBmcm9tICdib3JpbmctYXZhdGFycyc7XG5jb25zdCBCb3JpbmdBdmF0YXIgPSBcbi8vIEJvcmluZ0F2YXRhck1vZHVsZSBjYW4gYmUgZWl0aGVyIGEgZnVuY3Rpb24gKHRoZSBjb21wb25lbnQgaXRzZWxmKVxuLy8gb3IgYW4gb2JqZWN0IHdpdGggYSBgLmRlZmF1bHRgIHByb3BlcnR5IGRlcGVuZGluZyBvbiBob3cgdGhlIG1vZHVsZSBpcyBpbXBvcnRlZCxcbi8vIGVzcGVjaWFsbHkgd2hlbiB1c2luZyBSb2xsdXAgd2l0aCAnZXh0ZXJuYWwnIGFuZCBjb25zdW1pbmcgRVNNLW9ubHkgcGFja2FnZXMuXG4vLyBUaGlzIGNoZWNrIGVuc3VyZXMgY29tcGF0aWJpbGl0eSBhY3Jvc3MgZGlmZmVyZW50IGJ1bmRsZXJzIGFuZCBlbnZpcm9ubWVudHMuXG4vLyBAdHMtZXhwZWN0LWVycm9yXG50eXBlb2YgQm9yaW5nQXZhdGFyTW9kdWxlID09PSAnZnVuY3Rpb24nID8gQm9yaW5nQXZhdGFyTW9kdWxlIDogQm9yaW5nQXZhdGFyTW9kdWxlLmRlZmF1bHQgPz8gQm9yaW5nQXZhdGFyTW9kdWxlO1xuY29uc3QgQ09MT1JfR1JPVVBTID0gW1xuICAgIFsnIzIwNjVFRScsICcjRkZBRUZDJ10sXG4gICAgWycjNUNGRkZGJywgJyMwMEQ0RkYnXSxcbiAgICBbJyNGRkMzNEQnLCAnI0UzRThGMiddLFxuICAgIFsnIzRCRkZENCcsICcjODgzM0ZGJ10sXG4gICAgWycjMkI0REZGJywgJyMwMDM1RkYnXSxcbl07XG5mdW5jdGlvbiBoYXNoQ29kZShzZWVkKSB7XG4gICAgbGV0IGhhc2ggPSAwO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgc2VlZC5sZW5ndGg7IGkrKykge1xuICAgICAgICBjb25zdCBjaGFyYWN0ZXIgPSBzZWVkLmNoYXJDb2RlQXQoaSk7XG4gICAgICAgIGhhc2ggPSAoaGFzaCA8PCA1KSAtIGhhc2ggKyBjaGFyYWN0ZXI7XG4gICAgICAgIGhhc2ggJj0gaGFzaDtcbiAgICB9XG4gICAgcmV0dXJuIE1hdGguYWJzKGhhc2gpO1xufVxuZnVuY3Rpb24gZ2V0Q29sb3JzKHNlZWQpIHtcbiAgICByZXR1cm4gQ09MT1JfR1JPVVBTLm1hcCgoY29sb3JHcm91cCwgaW5kZXgpID0+IHtcbiAgICAgICAgY29uc3QgaGFzaCA9IGhhc2hDb2RlKGluZGV4ICsgc2VlZCk7XG4gICAgICAgIHJldHVybiBjb2xvckdyb3VwW2hhc2ggJSBjb2xvckdyb3VwLmxlbmd0aF07XG4gICAgfSk7XG59XG5jb25zdCBBdmF0YXJTaXplTWFwID0ge1xuICAgIFhYUzogMTYsXG4gICAgWFM6IDIwLFxuICAgIFM6IDI0LFxuICAgIE06IDMyLFxuICAgIEw6IDQ4LFxuICAgIFhMOiA2NCxcbiAgICBYWEw6IDgwLFxuICAgIFhYWEw6IDE2MCxcbn07XG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59LCAoeyBzaXplIH0pID0+ICh7XG4gICAgd2lkdGg6IEF2YXRhclNpemVNYXBbc2l6ZV0sXG4gICAgaGVpZ2h0OiBBdmF0YXJTaXplTWFwW3NpemVdLFxufSkpO1xuY29uc3QgRG90Q29udGFpbmVyID0gc3R5bGVkKCdkaXYnLCB7XG4gICAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3BOYW1lID0+IHByb3BOYW1lICE9PSAnZG90U2l6ZScsXG59KSh7XG4gICAgYm9yZGVyUmFkaXVzOiAnNTAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgcmlnaHQ6IDAsXG59LCAoeyBkb3RTaXplIH0pID0+ICh7XG4gICAgJyYgPiBzdmcnOiB7XG4gICAgICAgIHdpZHRoOiBkb3RTaXplLFxuICAgICAgICBoZWlnaHQ6IGRvdFNpemUsXG4gICAgfSxcbn0pKTtcbmV4cG9ydCBmdW5jdGlvbiBBdmF0YXIoeyBjbGFzc05hbWUsIHNlZWQsIHNpemUgPSAnTScsIHNob3dEb3QgPSBmYWxzZSB9KSB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IGNvbG9ycyA9IHNlZWQgPyBnZXRDb2xvcnMoc2VlZCkgOiBbdGhlbWUuc2tlbGV0b25Db2xvcl07XG4gICAgY29uc3QgZG90U2l6ZSA9IEF2YXRhclNpemVNYXBbc2l6ZV0gLyA0O1xuICAgIHJldHVybiAoX2pzeHMoQ29udGFpbmVyLCB7IGNsYXNzTmFtZTogY2xhc3NOYW1lLCBzaXplOiBzaXplLCBjaGlsZHJlbjogW19qc3goQm9yaW5nQXZhdGFyLCB7IHZhcmlhbnQ6IFwibWFyYmxlXCIsIHNpemU6IEF2YXRhclNpemVNYXBbc2l6ZV0sIG5hbWU6IHNlZWQsIGNvbG9yczogY29sb3JzIH0pLCBzaG93RG90ICYmIChfanN4KERvdENvbnRhaW5lciwgeyBkb3RTaXplOiBkb3RTaXplLCBjaGlsZHJlbjogX2pzeHMoXCJzdmdcIiwgeyB4bWxuczogXCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiLCB3aWR0aDogXCIyMFwiLCBoZWlnaHQ6IFwiMjBcIiwgdmlld0JveDogXCIwIDAgMjAgMjBcIiwgZmlsbDogXCJub25lXCIsIGNoaWxkcmVuOiBbX2pzeChcImNpcmNsZVwiLCB7IGN4OiBcIjEwXCIsIGN5OiBcIjEwXCIsIHI6IFwiMTBcIiwgZmlsbDogdGhlbWUubW9kYWxCYWNrZ3JvdW5kIH0pLCBfanN4KFwiY2lyY2xlXCIsIHsgb3BhY2l0eTogXCIwLjNcIiwgY3g6IFwiMTAuMTQyOVwiLCBjeTogXCIxMC4wMDAzXCIsIHI6IFwiOC4wMDAyOFwiLCBmaWxsOiB0aGVtZS5zdWNjZXNzQ29sb3IgfSksIF9qc3goXCJjaXJjbGVcIiwgeyBjeDogXCIxMC4xNDI4XCIsIGN5OiBcIjEwLjAwMDdcIiwgcjogXCI2LjQwMDIyXCIsIGZpbGw6IHRoZW1lLnN1Y2Nlc3NDb2xvciB9KV0gfSkgfSkpXSB9KSk7XG59XG4iXX0= */");
const DotContainer = /*#__PURE__*/_styled('div', process.env.NODE_ENV === "production" ? {
shouldForwardProp: propName => propName !== 'dotSize',
target: "e1v20u9i0"
} : {
shouldForwardProp: propName => propName !== 'dotSize',
target: "e1v20u9i0",
label: "DotContainer"
})("border-radius:50%;position:absolute;top:0;right:0;", ({
dotSize
}) => ({
'& > svg': {
width: dotSize,
height: dotSize
}
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURxQiIsImZpbGUiOiJBdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IEJvcmluZ0F2YXRhck1vZHVsZSBmcm9tICdib3JpbmctYXZhdGFycyc7XG5jb25zdCBCb3JpbmdBdmF0YXIgPSBcbi8vIEJvcmluZ0F2YXRhck1vZHVsZSBjYW4gYmUgZWl0aGVyIGEgZnVuY3Rpb24gKHRoZSBjb21wb25lbnQgaXRzZWxmKVxuLy8gb3IgYW4gb2JqZWN0IHdpdGggYSBgLmRlZmF1bHRgIHByb3BlcnR5IGRlcGVuZGluZyBvbiBob3cgdGhlIG1vZHVsZSBpcyBpbXBvcnRlZCxcbi8vIGVzcGVjaWFsbHkgd2hlbiB1c2luZyBSb2xsdXAgd2l0aCAnZXh0ZXJuYWwnIGFuZCBjb25zdW1pbmcgRVNNLW9ubHkgcGFja2FnZXMuXG4vLyBUaGlzIGNoZWNrIGVuc3VyZXMgY29tcGF0aWJpbGl0eSBhY3Jvc3MgZGlmZmVyZW50IGJ1bmRsZXJzIGFuZCBlbnZpcm9ubWVudHMuXG4vLyBAdHMtZXhwZWN0LWVycm9yXG50eXBlb2YgQm9yaW5nQXZhdGFyTW9kdWxlID09PSAnZnVuY3Rpb24nID8gQm9yaW5nQXZhdGFyTW9kdWxlIDogQm9yaW5nQXZhdGFyTW9kdWxlLmRlZmF1bHQgPz8gQm9yaW5nQXZhdGFyTW9kdWxlO1xuY29uc3QgQ09MT1JfR1JPVVBTID0gW1xuICAgIFsnIzIwNjVFRScsICcjRkZBRUZDJ10sXG4gICAgWycjNUNGRkZGJywgJyMwMEQ0RkYnXSxcbiAgICBbJyNGRkMzNEQnLCAnI0UzRThGMiddLFxuICAgIFsnIzRCRkZENCcsICcjODgzM0ZGJ10sXG4gICAgWycjMkI0REZGJywgJyMwMDM1RkYnXSxcbl07XG5mdW5jdGlvbiBoYXNoQ29kZShzZWVkKSB7XG4gICAgbGV0IGhhc2ggPSAwO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgc2VlZC5sZW5ndGg7IGkrKykge1xuICAgICAgICBjb25zdCBjaGFyYWN0ZXIgPSBzZWVkLmNoYXJDb2RlQXQoaSk7XG4gICAgICAgIGhhc2ggPSAoaGFzaCA8PCA1KSAtIGhhc2ggKyBjaGFyYWN0ZXI7XG4gICAgICAgIGhhc2ggJj0gaGFzaDtcbiAgICB9XG4gICAgcmV0dXJuIE1hdGguYWJzKGhhc2gpO1xufVxuZnVuY3Rpb24gZ2V0Q29sb3JzKHNlZWQpIHtcbiAgICByZXR1cm4gQ09MT1JfR1JPVVBTLm1hcCgoY29sb3JHcm91cCwgaW5kZXgpID0+IHtcbiAgICAgICAgY29uc3QgaGFzaCA9IGhhc2hDb2RlKGluZGV4ICsgc2VlZCk7XG4gICAgICAgIHJldHVybiBjb2xvckdyb3VwW2hhc2ggJSBjb2xvckdyb3VwLmxlbmd0aF07XG4gICAgfSk7XG59XG5jb25zdCBBdmF0YXJTaXplTWFwID0ge1xuICAgIFhYUzogMTYsXG4gICAgWFM6IDIwLFxuICAgIFM6IDI0LFxuICAgIE06IDMyLFxuICAgIEw6IDQ4LFxuICAgIFhMOiA2NCxcbiAgICBYWEw6IDgwLFxuICAgIFhYWEw6IDE2MCxcbn07XG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59LCAoeyBzaXplIH0pID0+ICh7XG4gICAgd2lkdGg6IEF2YXRhclNpemVNYXBbc2l6ZV0sXG4gICAgaGVpZ2h0OiBBdmF0YXJTaXplTWFwW3NpemVdLFxufSkpO1xuY29uc3QgRG90Q29udGFpbmVyID0gc3R5bGVkKCdkaXYnLCB7XG4gICAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3BOYW1lID0+IHByb3BOYW1lICE9PSAnZG90U2l6ZScsXG59KSh7XG4gICAgYm9yZGVyUmFkaXVzOiAnNTAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgcmlnaHQ6IDAsXG59LCAoeyBkb3RTaXplIH0pID0+ICh7XG4gICAgJyYgPiBzdmcnOiB7XG4gICAgICAgIHdpZHRoOiBkb3RTaXplLFxuICAgICAgICBoZWlnaHQ6IGRvdFNpemUsXG4gICAgfSxcbn0pKTtcbmV4cG9ydCBmdW5jdGlvbiBBdmF0YXIoeyBjbGFzc05hbWUsIHNlZWQsIHNpemUgPSAnTScsIHNob3dEb3QgPSBmYWxzZSB9KSB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IGNvbG9ycyA9IHNlZWQgPyBnZXRDb2xvcnMoc2VlZCkgOiBbdGhlbWUuc2tlbGV0b25Db2xvcl07XG4gICAgY29uc3QgZG90U2l6ZSA9IEF2YXRhclNpemVNYXBbc2l6ZV0gLyA0O1xuICAgIHJldHVybiAoX2pzeHMoQ29udGFpbmVyLCB7IGNsYXNzTmFtZTogY2xhc3NOYW1lLCBzaXplOiBzaXplLCBjaGlsZHJlbjogW19qc3goQm9yaW5nQXZhdGFyLCB7IHZhcmlhbnQ6IFwibWFyYmxlXCIsIHNpemU6IEF2YXRhclNpemVNYXBbc2l6ZV0sIG5hbWU6IHNlZWQsIGNvbG9yczogY29sb3JzIH0pLCBzaG93RG90ICYmIChfanN4KERvdENvbnRhaW5lciwgeyBkb3RTaXplOiBkb3RTaXplLCBjaGlsZHJlbjogX2pzeHMoXCJzdmdcIiwgeyB4bWxuczogXCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiLCB3aWR0aDogXCIyMFwiLCBoZWlnaHQ6IFwiMjBcIiwgdmlld0JveDogXCIwIDAgMjAgMjBcIiwgZmlsbDogXCJub25lXCIsIGNoaWxkcmVuOiBbX2pzeChcImNpcmNsZVwiLCB7IGN4OiBcIjEwXCIsIGN5OiBcIjEwXCIsIHI6IFwiMTBcIiwgZmlsbDogdGhlbWUubW9kYWxCYWNrZ3JvdW5kIH0pLCBfanN4KFwiY2lyY2xlXCIsIHsgb3BhY2l0eTogXCIwLjNcIiwgY3g6IFwiMTAuMTQyOVwiLCBjeTogXCIxMC4wMDAzXCIsIHI6IFwiOC4wMDAyOFwiLCBmaWxsOiB0aGVtZS5zdWNjZXNzQ29sb3IgfSksIF9qc3goXCJjaXJjbGVcIiwgeyBjeDogXCIxMC4xNDI4XCIsIGN5OiBcIjEwLjAwMDdcIiwgcjogXCI2LjQwMDIyXCIsIGZpbGw6IHRoZW1lLnN1Y2Nlc3NDb2xvciB9KV0gfSkgfSkpXSB9KSk7XG59XG4iXX0= */");
function Avatar({
className,
seed,
size = 'M',
showDot = false
}) {
const theme = useTheme();
const colors = seed ? getColors(seed) : [theme.skeletonColor];
const dotSize = AvatarSizeMap[size] / 4;
return jsxs(Container, {
className: className,
size: size,
children: [jsx(BoringAvatar, {
variant: "marble",
size: AvatarSizeMap[size],
name: seed,
colors: colors
}), showDot && jsx(DotContainer, {
dotSize: dotSize,
children: jsxs("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
children: [jsx("circle", {
cx: "10",
cy: "10",
r: "10",
fill: theme.modalBackground
}), jsx("circle", {
opacity: "0.3",
cx: "10.1429",
cy: "10.0003",
r: "8.00028",
fill: theme.successColor
}), jsx("circle", {
cx: "10.1428",
cy: "10.0007",
r: "6.40022",
fill: theme.successColor
})]
})
})]
});
}export{Avatar};