40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Component, createRef } from "preact";
|
|
|
|
export class ToggleableBox extends Component<{
|
|
title: string,
|
|
id: string,
|
|
checked?: boolean;
|
|
onChange?: (checked: boolean) => void,
|
|
}> {
|
|
inputRef = createRef<HTMLInputElement>();
|
|
|
|
onChangeInternal(newState: boolean) {
|
|
console.debug(`Changed state of ${this.props.id} to ${newState}`);
|
|
if (this.props.onChange) {
|
|
this.props.onChange(newState);
|
|
}
|
|
}
|
|
|
|
public forceChange(status: boolean) {
|
|
if (this.inputRef.current) {
|
|
let inputElement = this.inputRef.current;
|
|
inputElement.checked = status;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return <>
|
|
<div class="form-check form-switch">
|
|
<input
|
|
class="form-check-input" type="checkbox" role="switch"
|
|
id={this.props.id}
|
|
ref={this.inputRef}
|
|
onChange={() => {
|
|
this.onChangeInternal(this.inputRef.current.checked);
|
|
}}
|
|
/>
|
|
<label class="form-check-label" for={this.props.id}>{this.props.title}</label>
|
|
</div>
|
|
</>;
|
|
}
|
|
} |