@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
208 lines (207 loc) • 5.91 kB
JavaScript
import { Component, Element, h, Host, Prop, State } from "@stencil/core";
import { getElementDir, getElementTheme } from "../../utils/dom";
import { isValidHex } from "../calcite-color/utils";
import { hexToHue, stringToHex } from "./utils";
export class CalciteAvatar {
constructor() {
/** specify the scale of the avatar, defaults to m */
this.scale = "m";
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
/** True if thumnail fails to load */
this.error = false;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
// prop validations
const scale = ["s", "m", "l"];
if (!scale.includes(this.scale))
this.scale = "m";
}
render() {
const dir = getElementDir(this.el);
const content = this.determineContent();
return h(Host, { dir: dir }, content);
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
determineContent() {
if (this.thumbnail && !this.error) {
return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
}
const initials = this.generateInitials();
const backgroundColor = this.generateFillColor();
return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale, theme: this.theme }))));
}
/**
* Generate a valid background color that is consistent and unique to this user
*/
generateFillColor() {
const { userId, username, fullName } = this;
const theme = getElementTheme(this.el);
const id = userId && `#${userId.substr(userId.length - 6)}`;
const name = username || fullName || "";
const hex = id && isValidHex(id) ? id : stringToHex(name);
// if there is not unique information, or an invalid hex is produced, return a default
if ((!userId && !name) || !isValidHex(hex)) {
return `var(--calcite-ui-foreground-2)`;
}
const hue = hexToHue(hex);
const l = theme === "dark" ? 20 : 90;
return `hsl(${hue}, 60%, ${l}%)`;
}
/**
* Use fullname or username to generate initials
*/
generateInitials() {
const { fullName, username } = this;
if (fullName) {
return fullName
.trim()
.split(" ")
.map((name) => name.substring(0, 1))
.join("");
}
else if (username) {
return username.substring(0, 2);
}
return false;
}
static get is() { return "calcite-avatar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["calcite-avatar.scss"]
}; }
static get styleUrls() { return {
"$": ["calcite-avatar.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Theme",
"resolved": "\"dark\" | \"light\"",
"references": {
"Theme": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Select theme (light or dark)"
},
"attribute": "theme",
"reflect": true
},
"scale": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "specify the scale of the avatar, defaults to m"
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
},
"thumbnail": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "src to an image (remember to add a token if the user is private)"
},
"attribute": "thumbnail",
"reflect": false
},
"fullName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "full name of the user"
},
"attribute": "full-name",
"reflect": false
},
"username": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "user name"
},
"attribute": "username",
"reflect": false
},
"userId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "unique id for user"
},
"attribute": "user-id",
"reflect": false
}
}; }
static get states() { return {
"error": {}
}; }
static get elementRef() { return "el"; }
}