@votercircle/clay-v2-avatar 1.0.0

package/avatar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type AvatarProps = {
+    label: string;
+    img?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

package/avatar.js

@@ -0,0 +1,58 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Avatar = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var classnames_1 = __importDefault(require("classnames"));
+var cui_typography_text_1 = require("@clay/cui.typography.text");
+var colorArray = [
+    '#90D8FF',
+    '#CBEBCB',
+    '#FFD9C6',
+    '#FFE6BB',
+    '#B0B0B0',
+    '#FFE9E8',
+    '#56C7FF',
+    '#9BDD9E',
+    '#FFAD84',
+    '#B0B0B0',
+];
+var AvatarContainer = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 4px;\n  overflow: hidden;\n  color: #2a2a2a;\n  .label {\n    font-size: 14px;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &._xs {\n    width: 23px;\n    height: 23px;\n    .label {\n      font-size: 12px;\n    }\n  }\n\n  &._sm {\n    width: 30px;\n    height: 30px;\n    .label {\n      font-size: 16px;\n    }\n  }\n\n  &._md {\n    width: 40px;\n    height: 40px;\n    .label {\n      font-size: 18px;\n    }\n  }\n\n  &._lg {\n    width: 50px;\n    height: 50px;\n    .label {\n      font-size: 22px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 4px;\n  overflow: hidden;\n  color: #2a2a2a;\n  .label {\n    font-size: 14px;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &._xs {\n    width: 23px;\n    height: 23px;\n    .label {\n      font-size: 12px;\n    }\n  }\n\n  &._sm {\n    width: 30px;\n    height: 30px;\n    .label {\n      font-size: 16px;\n    }\n  }\n\n  &._md {\n    width: 40px;\n    height: 40px;\n    .label {\n      font-size: 18px;\n    }\n  }\n\n  &._lg {\n    width: 50px;\n    height: 50px;\n    .label {\n      font-size: 22px;\n    }\n  }\n"])));
+function getHashCodeFromString(s) {
+    var str = String(s);
+    var hash = 0;
+    var char;
+    if (str.trim().length === 0)
+        return hash;
+    for (var i = 0; i < str.length; i++) {
+        char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash &= hash;
+    }
+    return Math.abs(hash);
+}
+function sumOfDigits(s) {
+    var array = ('' + s).match(/.{1}/g);
+    var sum = (array === null || array === void 0 ? void 0 : array.reduce(function (acc, num) { return acc + parseInt(num); }, 0)) || 0;
+    if (('' + sum).length > 1) {
+        return sumOfDigits(sum);
+    }
+    return sum;
+}
+function minifyLabel(label) {
+    var _a;
+    return (_a = label
+        .match(/\b(\w)/g)) === null || _a === void 0 ? void 0 : _a.join('').substr(0, 2).toUpperCase();
+}
+exports.Avatar = react_1["default"].forwardRef(function (_a, ref) {
+    var label = _a.label, img = _a.img, size = _a.size;
+    return (react_1["default"].createElement(AvatarContainer, { ref: ref, className: (0, classnames_1["default"])('_' + size), style: { backgroundColor: colorArray[sumOfDigits(getHashCodeFromString(label))] } }, img ? (react_1["default"].createElement("img", { src: img, alt: minifyLabel(label), title: label })) : (react_1["default"].createElement(cui_typography_text_1.Text, { className: 'label' }, minifyLabel(label)))));
+});
+var templateObject_1;

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export type { AvatarProps } from './avatar';

package/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+__createBinding(exports, avatar_1, "Avatar");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-avatar",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}