adwaita-web
Version:
A GTK inspired toolkit designed to build awesome web apps
56 lines (55 loc) • 1.47 kB
JavaScript
import cx from "clsx";
import React from "react";
const noop = () => {
};
const DEFAULT_LABELS = ["On", "Off"];
let nextId = 1;
class Switch extends React.Component {
static defaultProps = {
size: "medium",
labels: false,
onChange: noop
};
id;
constructor(props) {
super(props);
this.id = `switch_${nextId++}`;
}
onChange = (ev) => {
if (this.props.onChange)
this.props.onChange(ev.target.checked, ev);
};
render() {
const {
id,
label,
labels: labelsValue,
className,
size,
value,
defaultValue,
disabled,
onChange,
...rest
} = this.props;
const labels = Array.isArray(labelsValue) ? labelsValue : DEFAULT_LABELS;
return /* @__PURE__ */ React.createElement("div", {
className: cx("Switch", className, size, { disabled })
}, /* @__PURE__ */ React.createElement("input", {
type: "checkbox",
id: id || this.id,
checked: value,
defaultChecked: defaultValue,
disabled,
onChange: this.onChange,
...rest
}), /* @__PURE__ */ React.createElement("label", {
htmlFor: id || this.id
}, labelsValue && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, labels[0]), /* @__PURE__ */ React.createElement("em", {
className: "sr-only"
}, label), /* @__PURE__ */ React.createElement("span", null, labels[1]))));
}
}
export {
Switch
};