ar-design
Version:
AR Design is a (react | nextjs) ui library.
33 lines (32 loc) • 1.75 kB
JavaScript
"use client";
import React, { useEffect, useRef, useState } from "react";
import "../../../assets/css/components/form/switch/styles.css";
import Utils from "../../../libs/infrastructure/shared/Utils";
const Switch = ({ label, status = "primary", border = { radius: "pill" }, ...attributes }) => {
// refs
let _switch = useRef(null);
const _inputClassName = [];
const _switchClassName = ["ar-switch"];
// states
const [checked, setChecked] = useState(attributes.checked ?? false);
_inputClassName.push(attributes.checked ? "checked" : "unchecked");
_switchClassName.push(...Utils.GetClassName("filled", attributes.checked ? status : "light", border, undefined, undefined, attributes.className));
// useEffects
useEffect(() => {
setChecked(attributes.checked ?? false);
}, [attributes.checked]);
return (React.createElement("div", { className: "ar-switch-wrapper" },
React.createElement("label", null,
React.createElement("input", { type: "checkbox", ...attributes, className: _inputClassName.map((c) => c).join(" "), checked: checked, size: 0, onChange: (event) => {
event.stopPropagation();
(() => {
setChecked(event.target.checked);
})();
(() => attributes.onChange && attributes.onChange(event))();
} }),
React.createElement("span", { ref: _switch, className: _switchClassName.map((c) => c).join(" ") },
React.createElement("span", { className: "handle border-radius-pill" })),
label && React.createElement("span", { className: "label" }, label))));
};
Switch.displayName = "Switch";
export default Switch;