ar-design
Version:
AR Design is a (react | nextjs) ui library.
51 lines (50 loc) • 2.87 kB
JavaScript
"use client";
import React from "react";
import "../../../assets/css/components/feedback/alert/styles.css";
import Utils from "../../../libs/infrastructure/shared/Utils";
const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "sm" }, emphasize, }) => {
const _className = ["ar-alert"];
_className.push(...Utils.GetClassName(variant, status, undefined, border, undefined, undefined, undefined));
// methods
const formattedTags = (message) => {
// TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
// TODO: Bu konu hakkında düşünüp karar verilecek.
if (!emphasize)
return message;
let _lowerCaseMessage = message.toLocaleLowerCase();
return emphasize.reduce((currentMessage, emphasize) => {
let _lowerCaseEmphasize = emphasize.toLocaleLowerCase();
let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
while (startIndex !== -1) {
const endIndex = startIndex + emphasize.length;
const firstValue = currentMessage.substring(0, startIndex);
const originalTag = currentMessage.substring(startIndex, endIndex);
const lastValue = currentMessage.substring(endIndex);
currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
_lowerCaseMessage = currentMessage.toLocaleLowerCase();
startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
}
return currentMessage;
}, message);
};
const createList = (message, isSubMessage) => {
let className = "";
if (isSubMessage)
className += "sub-message";
else
className += "message";
return (React.createElement("ul", null, Array.isArray(message)
? message.map((messageItem, index) => (React.createElement("li", { key: index, className: className }, Array.isArray(messageItem) ? (createList(messageItem, true)) : (React.createElement("div", { dangerouslySetInnerHTML: {
__html: formattedTags(cleanMessage(messageItem)) ?? "",
} })))))
: message));
};
/**
*
* @param message Yalnızca alfanümerik karakterleri (harfler ve sayılar) ve boşlukları tutar.
* @returns
*/
const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
return (React.createElement("div", { className: _className.map((c) => c).join(" ") }, message ? (Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))) : (children)));
};
export default Alert;