ar-design
Version:
AR Design is a (react | nextjs) ui library.
25 lines (24 loc) • 1.44 kB
JavaScript
"use client";
import Utils from "../../../libs/infrastructure/shared/Utils";
import React, { forwardRef, useRef } from "react";
import "../../../assets/css/components/form/checkbox/checkbox.css";
const Checkbox = forwardRef(({ label, color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
// refs
const _checkbox = useRef(null);
const _checkboxClassName = ["ar-checkbox"];
_checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
return (React.createElement("div", { className: "ar-checkbox-wrapper" },
React.createElement("label", null,
React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
// (() => {
// const _current = _checkbox.current;
// if (!_current) return;
// })();
(() => attributes.onChange && attributes.onChange(event))();
} }),
React.createElement("span", null,
React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)))));
});
Checkbox.displayName = "Checkbox";
export default Checkbox;