89873fdff1
Refactor the setting-group and setting-control a little to support passing in the Preferences.getSetting function rather pulling it off of window. Add basic Storybook stories for setting-group and setting-control. Differential Revision: https://phabricator.services.mozilla.com/D241130
62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
|
|
|
export class SettingControl extends MozLitElement {
|
|
#lastSetting;
|
|
|
|
static properties = {
|
|
setting: { type: Object },
|
|
config: { type: Object },
|
|
value: {},
|
|
};
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
onSettingChange = () => {
|
|
this.value = this.setting.value;
|
|
};
|
|
|
|
willUpdate(changedProperties) {
|
|
if (changedProperties.has("setting")) {
|
|
if (this.#lastSetting) {
|
|
this.#lastSetting.off("change", this.onSettingChange);
|
|
}
|
|
this.#lastSetting = this.setting;
|
|
this.value = this.getValue();
|
|
this.setting.on("change", this.onSettingChange);
|
|
}
|
|
}
|
|
|
|
getValue() {
|
|
return this.setting.value;
|
|
}
|
|
|
|
onChange(e) {
|
|
this.setting.userChange(e.target.checked);
|
|
this.value = this.getValue();
|
|
}
|
|
|
|
render() {
|
|
let { config } = this;
|
|
switch (config.control) {
|
|
case "checkbox":
|
|
default:
|
|
return html`<moz-checkbox
|
|
data-l10n-id=${config.l10nId}
|
|
.iconSrc=${config.iconSrc}
|
|
.checked=${this.value}
|
|
.supportPage=${this.config.supportPage}
|
|
data-subcategory=${ifDefined(this.config.subcategory)}
|
|
@change=${this.onChange}
|
|
></moz-checkbox>`;
|
|
}
|
|
}
|
|
}
|
|
customElements.define("setting-control", SettingControl);
|