ar-design
Version:
AR Design is a (react | nextjs) ui library.
39 lines (38 loc) • 2.37 kB
JavaScript
"use client";
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import "../../../assets/css/components/form/radio/radio.css";
import Utils from "../../../libs/infrastructure/shared/Utils";
const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "pill" }, trace, pastTrace, upperCase, validation, ...attributes }, ref) => {
// refs
const _innerRef = useRef(null);
const _checkbox = useRef(null);
const _checkboxClassName = ["ar-radio"];
const _traceClassName = ["trace", "filled"];
const _pastTraceClassName = ["past-trace", "filled"];
// hooks
// Dışarıdan gelen ref'i _innerRef'e bağla.
useImperativeHandle(ref, () => _innerRef.current);
_checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
if (trace && Object.keys(trace).length > 0)
_traceClassName.push(trace.color);
if (pastTrace && Object.keys(pastTrace).length > 0)
_pastTraceClassName.push(pastTrace.color);
return (React.createElement("div", { className: "ar-radio-wrapper" },
React.createElement("label", null,
React.createElement("input", { ref: _innerRef, type: "radio", ...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(" ") }),
trace && Object.keys(trace).length > 0 && (React.createElement("span", { className: _traceClassName.map((c) => c).join(" ") })),
pastTrace && Object.keys(pastTrace).length > 0 && (React.createElement("span", { className: _pastTraceClassName.map((c) => c).join(" ") })),
label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)),
validation?.text && React.createElement("span", { className: "validation" }, validation.text))));
});
Radio.displayName = "Radio";
export default Radio;