ar-design
Version:
AR Design is a (react | nextjs) ui library.
153 lines (152 loc) • 8.18 kB
JavaScript
"use client";
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import "../../../assets/css/components/form/input/styles.css";
import Button from "../button";
import Utils from "../../../libs/infrastructure/shared/Utils";
import { ARIcon } from "../../icons";
import Otp from "./otp/Otp";
import FormattedDecimal from "./formatted-decimal/FormattedDecimal";
import Phone from "./phone/Phone";
import Decimal from "./decimal/Decimal";
const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
// refs
const _innerRef = useRef(null);
const _label = useRef(null);
// states
const [value, setValue] = useState("");
// hooks
// Dışarıdan gelen ref'i _innerRef'e bağla.
useImperativeHandle(ref, () => _innerRef.current);
// variables
const _wrapperClassName = ["ar-input-wrapper"];
const _inputClassName = [];
const _addonBeforeClassName = ["addon-before"];
const _addonAfterClassName = ["addon-after"];
_inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, undefined, 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
const handleNumberChange = (delta) => {
const current = Number(value) || 0;
const newValue = current + delta;
const dataset = _innerRef.current?.dataset ?? {};
setValue(newValue);
attributes.onChange?.({
target: {
id: attributes.id ?? "",
name: attributes.name ?? "",
value: String(newValue),
type: attributes.type ?? "number",
dataset: dataset,
},
});
};
// Ö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", { ref: _label, className: value ? "visible" : "hidden", ...(value ? { style: { maxWidth: _innerRef.current?.getBoundingClientRect().width } } : {}) },
validation && "* ",
attributes.placeholder)),
React.createElement("div", { className: "input" },
React.createElement("input", { ref: _innerRef, ...attributes, type: attributes.type === "number" ? "text" : attributes.type, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: attributes.size || 20, className: _inputClassName.map((c) => c).join(" "), ...(attributes.type === "number"
? {
onKeyDown: (event) => {
const allowedKeys = ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"];
const isNumberKey = /^[0-9]$/.test(event.key);
if (!isNumberKey && !allowedKeys.includes(event.key))
event.preventDefault();
},
}
: {}), ...(value
? {
style: {
...attributes.style,
clipPath: `polygon(
-15px 0,
10px -5px,
10px 5px,
calc(${_label.current?.getBoundingClientRect().width}px + 7px) 5px,
calc(${_label.current?.getBoundingClientRect().width}px + 7px) -5px,
100% -70px,
calc(100% + 5px) calc(100% + 5px),
-5px calc(100% + 5px)
)`,
},
}
: { style: { ...attributes.style } }), 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 { value } = event.target;
const currentValue = upperCase ? convertToUpperCase(value) : 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: currentValue,
type: event.target.type,
dataset: event.target.dataset,
},
});
}
})();
} }),
!attributes.disabled && attributes.type === "number" && (React.createElement("div", { className: "handle-number-button" },
React.createElement("span", { onClick: () => handleNumberChange(1) },
React.createElement(ARIcon, { icon: "ChevronUp", size: 12, fill: "var(--gray-500)" })),
React.createElement("span", { onClick: () => handleNumberChange(-1) },
React.createElement(ARIcon, { icon: "ChevronDown", size: 12, fill: "var(--gray-500)" }))))),
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, border: { radius: border.radius }, disabled: attributes.disabled })));
});
const Input = BaseInput;
Input.Decimal = Decimal;
Input.FormattedDecimal = FormattedDecimal;
Input.Phone = Phone;
Input.Otp = Otp;
BaseInput.displayName = "Input";
export default Input;