@sky-mavis/tanto-widget
Version:
Tanto Widget
105 lines • 11.4 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']];
const 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);
};
const 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENrQiIsImZpbGUiOiJBdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IEJvcmluZ0F2YXRhck1vZHVsZSBmcm9tICdib3JpbmctYXZhdGFycyc7XG5jb25zdCBCb3JpbmdBdmF0YXIgPSBcbi8vIEJvcmluZ0F2YXRhck1vZHVsZSBjYW4gYmUgZWl0aGVyIGEgZnVuY3Rpb24gKHRoZSBjb21wb25lbnQgaXRzZWxmKVxuLy8gb3IgYW4gb2JqZWN0IHdpdGggYSBgLmRlZmF1bHRgIHByb3BlcnR5IGRlcGVuZGluZyBvbiBob3cgdGhlIG1vZHVsZSBpcyBpbXBvcnRlZCxcbi8vIGVzcGVjaWFsbHkgd2hlbiB1c2luZyBSb2xsdXAgd2l0aCAnZXh0ZXJuYWwnIGFuZCBjb25zdW1pbmcgRVNNLW9ubHkgcGFja2FnZXMuXG4vLyBUaGlzIGNoZWNrIGVuc3VyZXMgY29tcGF0aWJpbGl0eSBhY3Jvc3MgZGlmZmVyZW50IGJ1bmRsZXJzIGFuZCBlbnZpcm9ubWVudHMuXG4vLyBAdHMtZXhwZWN0LWVycm9yXG50eXBlb2YgQm9yaW5nQXZhdGFyTW9kdWxlID09PSAnZnVuY3Rpb24nID8gQm9yaW5nQXZhdGFyTW9kdWxlIDogQm9yaW5nQXZhdGFyTW9kdWxlLmRlZmF1bHQgPz8gQm9yaW5nQXZhdGFyTW9kdWxlO1xuZXhwb3J0IGRlZmF1bHQgQm9yaW5nQXZhdGFyO1xuY29uc3QgQ09MT1JfR1JPVVBTID0gW1xuICAgIFsnIzIwNjVFRScsICcjRkZBRUZDJ10sXG4gICAgWycjNUNGRkZGJywgJyMwMEQ0RkYnXSxcbiAgICBbJyNGRkMzNEQnLCAnI0UzRThGMiddLFxuICAgIFsnIzRCRkZENCcsICcjODgzM0ZGJ10sXG4gICAgWycjMkI0REZGJywgJyMwMDM1RkYnXSxcbl07XG5jb25zdCBoYXNoQ29kZSA9IChzZWVkKSA9PiB7XG4gICAgbGV0IGhhc2ggPSAwO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgc2VlZC5sZW5ndGg7IGkrKykge1xuICAgICAgICBjb25zdCBjaGFyYWN0ZXIgPSBzZWVkLmNoYXJDb2RlQXQoaSk7XG4gICAgICAgIGhhc2ggPSAoaGFzaCA8PCA1KSAtIGhhc2ggKyBjaGFyYWN0ZXI7XG4gICAgICAgIGhhc2ggJj0gaGFzaDtcbiAgICB9XG4gICAgcmV0dXJuIE1hdGguYWJzKGhhc2gpO1xufTtcbmNvbnN0IGdldENvbG9ycyA9IChzZWVkKSA9PiB7XG4gICAgcmV0dXJuIENPTE9SX0dST1VQUy5tYXAoKGNvbG9yR3JvdXAsIGluZGV4KSA9PiB7XG4gICAgICAgIGNvbnN0IGhhc2ggPSBoYXNoQ29kZShpbmRleCArIHNlZWQpO1xuICAgICAgICByZXR1cm4gY29sb3JHcm91cFtoYXNoICUgY29sb3JHcm91cC5sZW5ndGhdO1xuICAgIH0pO1xufTtcbmNvbnN0IEF2YXRhclNpemVNYXAgPSB7XG4gICAgWFhTOiAxNixcbiAgICBYUzogMjAsXG4gICAgUzogMjQsXG4gICAgTTogMzIsXG4gICAgTDogNDgsXG4gICAgWEw6IDY0LFxuICAgIFhYTDogODAsXG4gICAgWFhYTDogMTYwLFxufTtcbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbn0sICh7IHNpemUgfSkgPT4gKHtcbiAgICB3aWR0aDogQXZhdGFyU2l6ZU1hcFtzaXplXSxcbiAgICBoZWlnaHQ6IEF2YXRhclNpemVNYXBbc2l6ZV0sXG59KSk7XG5jb25zdCBEb3RDb250YWluZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcE5hbWUgPT4gcHJvcE5hbWUgIT09ICdkb3RTaXplJyxcbn0pKHtcbiAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICByaWdodDogMCxcbn0sICh7IGRvdFNpemUgfSkgPT4gKHtcbiAgICAnJiA+IHN2Zyc6IHtcbiAgICAgICAgd2lkdGg6IGRvdFNpemUsXG4gICAgICAgIGhlaWdodDogZG90U2l6ZSxcbiAgICB9LFxufSkpO1xuZXhwb3J0IGNvbnN0IEF2YXRhciA9ICh7IGNsYXNzTmFtZSwgc2VlZCwgc2l6ZSA9ICdNJywgc2hvd0RvdCA9IGZhbHNlIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gICAgY29uc3QgY29sb3JzID0gc2VlZCA/IGdldENvbG9ycyhzZWVkKSA6IFt0aGVtZS5za2VsZXRvbkNvbG9yXTtcbiAgICBjb25zdCBkb3RTaXplID0gQXZhdGFyU2l6ZU1hcFtzaXplXSAvIDQ7XG4gICAgcmV0dXJuIChfanN4cyhDb250YWluZXIsIHsgY2xhc3NOYW1lOiBjbGFzc05hbWUsIHNpemU6IHNpemUsIGNoaWxkcmVuOiBbX2pzeChCb3JpbmdBdmF0YXIsIHsgdmFyaWFudDogXCJtYXJibGVcIiwgc2l6ZTogQXZhdGFyU2l6ZU1hcFtzaXplXSwgbmFtZTogc2VlZCwgY29sb3JzOiBjb2xvcnMgfSksIHNob3dEb3QgJiYgKF9qc3goRG90Q29udGFpbmVyLCB7IGRvdFNpemU6IGRvdFNpemUsIGNoaWxkcmVuOiBfanN4cyhcInN2Z1wiLCB7IHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsIHdpZHRoOiBcIjIwXCIsIGhlaWdodDogXCIyMFwiLCB2aWV3Qm94OiBcIjAgMCAyMCAyMFwiLCBmaWxsOiBcIm5vbmVcIiwgY2hpbGRyZW46IFtfanN4KFwiY2lyY2xlXCIsIHsgY3g6IFwiMTBcIiwgY3k6IFwiMTBcIiwgcjogXCIxMFwiLCBmaWxsOiB0aGVtZS5tb2RhbEJhY2tncm91bmQgfSksIF9qc3goXCJjaXJjbGVcIiwgeyBvcGFjaXR5OiBcIjAuM1wiLCBjeDogXCIxMC4xNDI5XCIsIGN5OiBcIjEwLjAwMDNcIiwgcjogXCI4LjAwMDI4XCIsIGZpbGw6IHRoZW1lLnN1Y2Nlc3NDb2xvciB9KSwgX2pzeChcImNpcmNsZVwiLCB7IGN4OiBcIjEwLjE0MjhcIiwgY3k6IFwiMTAuMDAwN1wiLCByOiBcIjYuNDAwMjJcIiwgZmlsbDogdGhlbWUuc3VjY2Vzc0NvbG9yIH0pXSB9KSB9KSldIH0pKTtcbn07XG4iXX0= */");
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0RxQiIsImZpbGUiOiJBdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IEJvcmluZ0F2YXRhck1vZHVsZSBmcm9tICdib3JpbmctYXZhdGFycyc7XG5jb25zdCBCb3JpbmdBdmF0YXIgPSBcbi8vIEJvcmluZ0F2YXRhck1vZHVsZSBjYW4gYmUgZWl0aGVyIGEgZnVuY3Rpb24gKHRoZSBjb21wb25lbnQgaXRzZWxmKVxuLy8gb3IgYW4gb2JqZWN0IHdpdGggYSBgLmRlZmF1bHRgIHByb3BlcnR5IGRlcGVuZGluZyBvbiBob3cgdGhlIG1vZHVsZSBpcyBpbXBvcnRlZCxcbi8vIGVzcGVjaWFsbHkgd2hlbiB1c2luZyBSb2xsdXAgd2l0aCAnZXh0ZXJuYWwnIGFuZCBjb25zdW1pbmcgRVNNLW9ubHkgcGFja2FnZXMuXG4vLyBUaGlzIGNoZWNrIGVuc3VyZXMgY29tcGF0aWJpbGl0eSBhY3Jvc3MgZGlmZmVyZW50IGJ1bmRsZXJzIGFuZCBlbnZpcm9ubWVudHMuXG4vLyBAdHMtZXhwZWN0LWVycm9yXG50eXBlb2YgQm9yaW5nQXZhdGFyTW9kdWxlID09PSAnZnVuY3Rpb24nID8gQm9yaW5nQXZhdGFyTW9kdWxlIDogQm9yaW5nQXZhdGFyTW9kdWxlLmRlZmF1bHQgPz8gQm9yaW5nQXZhdGFyTW9kdWxlO1xuZXhwb3J0IGRlZmF1bHQgQm9yaW5nQXZhdGFyO1xuY29uc3QgQ09MT1JfR1JPVVBTID0gW1xuICAgIFsnIzIwNjVFRScsICcjRkZBRUZDJ10sXG4gICAgWycjNUNGRkZGJywgJyMwMEQ0RkYnXSxcbiAgICBbJyNGRkMzNEQnLCAnI0UzRThGMiddLFxuICAgIFsnIzRCRkZENCcsICcjODgzM0ZGJ10sXG4gICAgWycjMkI0REZGJywgJyMwMDM1RkYnXSxcbl07XG5jb25zdCBoYXNoQ29kZSA9IChzZWVkKSA9PiB7XG4gICAgbGV0IGhhc2ggPSAwO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgc2VlZC5sZW5ndGg7IGkrKykge1xuICAgICAgICBjb25zdCBjaGFyYWN0ZXIgPSBzZWVkLmNoYXJDb2RlQXQoaSk7XG4gICAgICAgIGhhc2ggPSAoaGFzaCA8PCA1KSAtIGhhc2ggKyBjaGFyYWN0ZXI7XG4gICAgICAgIGhhc2ggJj0gaGFzaDtcbiAgICB9XG4gICAgcmV0dXJuIE1hdGguYWJzKGhhc2gpO1xufTtcbmNvbnN0IGdldENvbG9ycyA9IChzZWVkKSA9PiB7XG4gICAgcmV0dXJuIENPTE9SX0dST1VQUy5tYXAoKGNvbG9yR3JvdXAsIGluZGV4KSA9PiB7XG4gICAgICAgIGNvbnN0IGhhc2ggPSBoYXNoQ29kZShpbmRleCArIHNlZWQpO1xuICAgICAgICByZXR1cm4gY29sb3JHcm91cFtoYXNoICUgY29sb3JHcm91cC5sZW5ndGhdO1xuICAgIH0pO1xufTtcbmNvbnN0IEF2YXRhclNpemVNYXAgPSB7XG4gICAgWFhTOiAxNixcbiAgICBYUzogMjAsXG4gICAgUzogMjQsXG4gICAgTTogMzIsXG4gICAgTDogNDgsXG4gICAgWEw6IDY0LFxuICAgIFhYTDogODAsXG4gICAgWFhYTDogMTYwLFxufTtcbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbn0sICh7IHNpemUgfSkgPT4gKHtcbiAgICB3aWR0aDogQXZhdGFyU2l6ZU1hcFtzaXplXSxcbiAgICBoZWlnaHQ6IEF2YXRhclNpemVNYXBbc2l6ZV0sXG59KSk7XG5jb25zdCBEb3RDb250YWluZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcE5hbWUgPT4gcHJvcE5hbWUgIT09ICdkb3RTaXplJyxcbn0pKHtcbiAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICByaWdodDogMCxcbn0sICh7IGRvdFNpemUgfSkgPT4gKHtcbiAgICAnJiA+IHN2Zyc6IHtcbiAgICAgICAgd2lkdGg6IGRvdFNpemUsXG4gICAgICAgIGhlaWdodDogZG90U2l6ZSxcbiAgICB9LFxufSkpO1xuZXhwb3J0IGNvbnN0IEF2YXRhciA9ICh7IGNsYXNzTmFtZSwgc2VlZCwgc2l6ZSA9ICdNJywgc2hvd0RvdCA9IGZhbHNlIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gICAgY29uc3QgY29sb3JzID0gc2VlZCA/IGdldENvbG9ycyhzZWVkKSA6IFt0aGVtZS5za2VsZXRvbkNvbG9yXTtcbiAgICBjb25zdCBkb3RTaXplID0gQXZhdGFyU2l6ZU1hcFtzaXplXSAvIDQ7XG4gICAgcmV0dXJuIChfanN4cyhDb250YWluZXIsIHsgY2xhc3NOYW1lOiBjbGFzc05hbWUsIHNpemU6IHNpemUsIGNoaWxkcmVuOiBbX2pzeChCb3JpbmdBdmF0YXIsIHsgdmFyaWFudDogXCJtYXJibGVcIiwgc2l6ZTogQXZhdGFyU2l6ZU1hcFtzaXplXSwgbmFtZTogc2VlZCwgY29sb3JzOiBjb2xvcnMgfSksIHNob3dEb3QgJiYgKF9qc3goRG90Q29udGFpbmVyLCB7IGRvdFNpemU6IGRvdFNpemUsIGNoaWxkcmVuOiBfanN4cyhcInN2Z1wiLCB7IHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsIHdpZHRoOiBcIjIwXCIsIGhlaWdodDogXCIyMFwiLCB2aWV3Qm94OiBcIjAgMCAyMCAyMFwiLCBmaWxsOiBcIm5vbmVcIiwgY2hpbGRyZW46IFtfanN4KFwiY2lyY2xlXCIsIHsgY3g6IFwiMTBcIiwgY3k6IFwiMTBcIiwgcjogXCIxMFwiLCBmaWxsOiB0aGVtZS5tb2RhbEJhY2tncm91bmQgfSksIF9qc3goXCJjaXJjbGVcIiwgeyBvcGFjaXR5OiBcIjAuM1wiLCBjeDogXCIxMC4xNDI5XCIsIGN5OiBcIjEwLjAwMDNcIiwgcjogXCI4LjAwMDI4XCIsIGZpbGw6IHRoZW1lLnN1Y2Nlc3NDb2xvciB9KSwgX2pzeChcImNpcmNsZVwiLCB7IGN4OiBcIjEwLjE0MjhcIiwgY3k6IFwiMTAuMDAwN1wiLCByOiBcIjYuNDAwMjJcIiwgZmlsbDogdGhlbWUuc3VjY2Vzc0NvbG9yIH0pXSB9KSB9KSldIH0pKTtcbn07XG4iXX0= */");
const 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,BoringAvatar as default};