@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
184 lines (183 loc) • 5.25 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h } from "@stencil/core";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
import { CSS, BREAKPOINTS } from "./resources";
import { createObserver } from "../../utils/observers";
/**
* @slot - A slot for adding custom content, primarily loading information.
*/
export class Scrim {
constructor() {
this.resizeObserver = createObserver("resize", () => this.handleResize());
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.storeLoaderEl = (el) => {
this.loaderEl = el;
this.handleResize();
};
this.loading = false;
this.messages = undefined;
this.messageOverrides = undefined;
this.loaderScale = undefined;
this.defaultMessages = undefined;
this.effectiveLocale = "";
}
onMessagesChange() {
/* wired up by t9n util */
}
effectiveLocaleChange() {
updateMessages(this, this.effectiveLocale);
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectLocalized(this);
connectMessages(this);
}
async componentWillLoad() {
await setUpMessages(this);
}
disconnectedCallback() {
disconnectLocalized(this);
disconnectMessages(this);
}
// --------------------------------------------------------------------------
//
// Render Method
//
// --------------------------------------------------------------------------
render() {
const { el, loading, messages } = this;
const hasContent = el.innerHTML.trim().length > 0;
const loaderNode = loading ? (h("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null;
const contentNode = hasContent ? (h("div", { class: CSS.content }, h("slot", null))) : null;
return (h("div", { class: CSS.scrim }, loaderNode, contentNode));
}
getScale(size) {
if (size < BREAKPOINTS.s) {
return "s";
}
else if (size >= BREAKPOINTS.l) {
return "l";
}
else {
return "m";
}
}
handleResize() {
const { loaderEl, el } = this;
if (!loaderEl) {
return;
}
this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);
}
static get is() { return "calcite-scrim"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["scrim.scss"]
};
}
static get styleUrls() {
return {
"$": ["scrim.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, a busy indicator is displayed."
},
"attribute": "loading",
"reflect": true,
"defaultValue": "false"
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "ScrimMessages",
"resolved": "{ loading: string; }",
"references": {
"ScrimMessages": {
"location": "import",
"path": "./assets/scrim/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<ScrimMessages>",
"resolved": "{ loading?: string; }",
"references": {
"Partial": {
"location": "global"
},
"ScrimMessages": {
"location": "import",
"path": "./assets/scrim/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
}
};
}
static get states() {
return {
"loaderScale": {},
"defaultMessages": {},
"effectiveLocale": {}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleChange"
}];
}
}