ar-design
Version:
AR Design is a (react | nextjs) ui library.
90 lines (89 loc) • 4.79 kB
JavaScript
"use client";
import React, { forwardRef, useEffect, useState } from "react";
import "../../../assets/css/components/form/input/input.css";
import Button from "../button";
import Utils from "../../../libs/infrastructure/shared/Utils";
const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
// states
const [value, setValue] = useState("");
// variable/s
const _wrapperClassName = ["ar-input-wrapper"];
const _addonBeforeClassName = ["addon-before"];
const _addonAfterClassName = ["addon-after"];
const _inputClassName = [];
_inputClassName.push(...Utils.GetClassName(variant, !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border, size, icon, attributes.className));
// addon className
if (addon) {
_wrapperClassName.push("addon");
_addonBeforeClassName.push(`${addon.variant || "filled"}`);
_addonBeforeClassName.push(`${status}`);
_addonAfterClassName.push(`${addon.variant || "filled"}`);
_addonAfterClassName.push(`${status}`);
_addonBeforeClassName.push(`border-radius-${border.radius}`);
_addonAfterClassName.push(`border-radius-${border.radius}`);
}
// methods
// Özel büyük harfe dönüştürme işlevi.
const convertToUpperCase = (str) => {
return str
.replace(/ş/g, "S")
.replace(/Ş/g, "S")
.replace(/ı/g, "I")
.replace(/I/g, "I")
.replace(/ç/g, "C")
.replace(/Ç/g, "C")
.replace(/ğ/g, "G")
.replace(/Ğ/g, "G")
.replace(/ö/g, "O")
.replace(/Ö/g, "O")
.replace(/ü/g, "U")
.replace(/Ü/g, "U")
.replace(/[a-z]/g, (match) => match.toUpperCase());
};
// useEffects
useEffect(() => {
if (attributes.value !== undefined)
setValue(attributes.value ?? "");
}, [attributes.value]);
return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
addon?.before && React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before),
React.createElement("div", { className: "ar-input" },
icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
attributes.placeholder && (React.createElement("label", { className: value ? "visible" : "hidden" },
validation && "* ",
attributes.placeholder)),
React.createElement("input", { ref: ref, ...attributes, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
// Disabled gelmesi durumunda işlem yapmasına izin verme...
if (attributes.disabled)
return;
(() => {
if (upperCase)
event.target.value = convertToUpperCase(event.target.value);
setValue(event.target.value);
})();
(() => {
if (attributes.onChange) {
// Mevcut değeri alın
const _target = event.target;
const currentValue = upperCase ? convertToUpperCase(_target.value) : _target.value;
// Yeni değeri oluşturun ve onChange fonksiyonunu çağırın
const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
attributes.onChange({
...event,
target: {
...event.target,
id: event.target.id,
name: event.target.name,
value: newValue,
type: event.target.type,
},
});
}
})();
} }),
validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
addon?.after && React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after),
button && (React.createElement(Button, { ...button, status: status, border: { radius: border.radius }, disabled: attributes.disabled }))));
});
Input.displayName = "Input";
export default Input;