ar-design
Version:
AR Design is a (react | nextjs) ui library.
37 lines (36 loc) • 1.97 kB
JavaScript
"use client";
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import "../../../assets/css/components/form/switch/styles.css";
import Utils from "../../../libs/infrastructure/shared/Utils";
const Switch = forwardRef(({ label, color, border = { radius: "pill" }, ...attributes }, ref) => {
// refs
let _switchInput = useRef(null);
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(undefined, undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
// hooks
// Dışarıdan gelen ref'i _innerRef'e bağla.
useImperativeHandle(ref, () => _switchInput.current);
// useEffects
useEffect(() => {
setChecked(attributes.checked ?? false);
}, [attributes.checked]);
return (React.createElement("div", { className: "ar-switch-wrapper" },
React.createElement("label", null,
React.createElement("input", { ref: _switchInput, 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;