radh-ui
Version:
Stencil Component Starter
67 lines (66 loc) • 2.01 kB
JavaScript
import { Component, Event, Listen, State, h } from '@stencil/core';
export class RadhGithubSearchUserWidget {
handleClick() {
const username = this.value;
fetch(`https://api.github.com/users/${username}`)
.then(resp => resp.json())
.then(user => {
this.user = JSON.stringify(user);
this.userSearched.emit(user);
});
}
handleChange(event) {
this.value = event.target.value;
}
onchanged(ev) {
this.value = ev.detail;
}
render() {
const user = (() => {
if (this.user) {
return (h("radh-user", { user: this.user }));
}
else {
return (h("p", null, "No data"));
}
})();
return (h("div", null,
h("radh-input-text", { label: "Username:", name: "username" }),
h("radh-button", { onClick: () => this.handleClick() }, "Search"),
user));
}
static get is() { return "radh-github-search-user-widget"; }
static get originalStyleUrls() { return {
"$": ["radh-github-search-user-widget.css"]
}; }
static get styleUrls() { return {
"$": ["radh-github-search-user-widget.css"]
}; }
static get states() { return {
"value": {},
"user": {}
}; }
static get events() { return [{
"method": "userSearched",
"name": "userSearched",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get listeners() { return [{
"name": "changed",
"method": "onchanged",
"target": undefined,
"capture": false,
"passive": false
}]; }
}