@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
230 lines • 11.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import * as React from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import HUDIcon from "./HUDIcon.js";
function HUDTextArea(_ref) {
var _ref$textAreaTextVali = _ref.textAreaTextValidationErrorConfigurationSettings,
textAreaTextValidationErrorConfigurationSettings = _ref$textAreaTextVali === void 0 ? {} : _ref$textAreaTextVali,
_ref$textAreaContaine = _ref.textAreaContainerContentConfigurationSettings,
textAreaContainerContentConfigurationSettings = _ref$textAreaContaine === void 0 ? {} : _ref$textAreaContaine,
_ref$textAreaCharacte = _ref.textAreaCharacterCounterConfigurationSettings,
textAreaCharacterCounterConfigurationSettings = _ref$textAreaCharacte === void 0 ? {} : _ref$textAreaCharacte,
_ref$textAreaContaine2 = _ref.textAreaContainerConfigurationSettings,
textAreaContainerConfigurationSettings = _ref$textAreaContaine2 === void 0 ? {} : _ref$textAreaContaine2,
_ref$textAreaConfigur = _ref.textAreaConfigurationSettings,
textAreaConfigurationSettings = _ref$textAreaConfigur === void 0 ? {} : _ref$textAreaConfigur,
_ref$textAreaTextVali2 = _ref.textAreaTextValidationErrorIconConfigurations,
textAreaTextValidationErrorIconConfigurations = _ref$textAreaTextVali2 === void 0 ? {} : _ref$textAreaTextVali2,
_ref$textAreaTextVali3 = _ref.textAreaTextValidationErrorConfigurations,
textAreaTextValidationErrorConfigurations = _ref$textAreaTextVali3 === void 0 ? {} : _ref$textAreaTextVali3,
_ref$textAreaContaine3 = _ref.textAreaContainerContentConfigurations,
textAreaContainerContentConfigurations = _ref$textAreaContaine3 === void 0 ? {} : _ref$textAreaContaine3,
_ref$textAreaCharacte2 = _ref.textAreaCharacterCounterConfigurations,
textAreaCharacterCounterConfigurations = _ref$textAreaCharacte2 === void 0 ? {} : _ref$textAreaCharacte2,
_ref$textAreaContaine4 = _ref.textAreaContainerConfigurations,
textAreaContainerConfigurations = _ref$textAreaContaine4 === void 0 ? {} : _ref$textAreaContaine4,
_ref$textAreaConfigur2 = _ref.textAreaConfigurations,
textAreaConfigurations = _ref$textAreaConfigur2 === void 0 ? {} : _ref$textAreaConfigur2,
onKeyDown = _ref.onKeyDown,
onKeyUp = _ref.onKeyUp,
onChange = _ref.onChange,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
_ref$keepTextValidati = _ref.keepTextValidationErrorOnBlur,
keepTextValidationErrorOnBlur = _ref$keepTextValidati === void 0 ? true : _ref$keepTextValidati,
_ref$textValidationDe = _ref.textValidationDebounceTime,
textValidationDebounceTime = _ref$textValidationDe === void 0 ? 300 : _ref$textValidationDe,
_ref$textValidations = _ref.textValidations,
textValidations = _ref$textValidations === void 0 ? [] : _ref$textValidations,
_ref$showCounter = _ref.showCounter,
showCounter = _ref$showCounter === void 0 ? true : _ref$showCounter,
_ref$autoResize = _ref.autoResize,
autoResize = _ref$autoResize === void 0 ? false : _ref$autoResize,
_ref$maxLength = _ref.maxLength,
maxLength = _ref$maxLength === void 0 ? 500 : _ref$maxLength,
_ref$minLength = _ref.minLength,
minLength = _ref$minLength === void 0 ? 0 : _ref$minLength,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? "Enter text..." : _ref$placeholder,
_ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? "dark" : _ref$theme,
_ref$value = _ref.value,
value = _ref$value === void 0 ? "" : _ref$value;
var _useState = useState(value),
_useState2 = _slicedToArray(_useState, 2),
inputValue = _useState2[0],
setInputValue = _useState2[1];
var _useState3 = useState(""),
_useState4 = _slicedToArray(_useState3, 2),
error = _useState4[0],
setError = _useState4[1];
var textAreaRef = useRef(null);
var timeoutRef = useRef(null);
var getStyle = useCallback(function () {
switch (theme) {
case "glassmorphism":
return {
backdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.4)",
borderRadius: "10px",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
background: "rgba(255, 255, 255, 0.2)",
color: "#fff",
padding: "12px"
};
case "neumorphism":
return {
border: "none",
borderRadius: "10px",
boxShadow: "8px 8px 16px #bebebe, -8px -8px 16px #ffffff",
background: "#e0e0e0",
color: "#333",
padding: "12px"
};
case "dark":
return {
border: "1px solid #333",
borderRadius: "10px",
background: "#333",
color: "#FFF",
padding: "10px"
};
default:
return {
border: "1px solid #ccc",
borderRadius: "10px",
background: "#FFF",
color: "#333",
padding: "10px"
};
}
}, [theme]);
var validateInput = useCallback(function (text) {
if (text.length < minLength) {
return "Minimum ".concat(minLength, " characters required.");
}
if (text.length > maxLength) {
return "Maximum ".concat(maxLength, " characters allowed.");
}
var _iterator = _createForOfIteratorHelper(textValidations),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var validateFn = _step.value;
var validationError = validateFn(text);
if (validationError) {
return validationError;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return "";
}, [minLength, maxLength, textValidations]);
var handleChange = useCallback(function (e) {
var text = e.target.value;
if (text.length > maxLength) {
text = text.substring(0, maxLength);
}
setInputValue(text);
if (textValidationDebounceTime > 0) {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(function () {
var validationError = validateInput(text);
setError(validationError);
if (onChange) {
onChange(text);
}
}, textValidationDebounceTime);
return;
}
var validationError = validateInput(text);
setError(validationError);
if (onChange) {
onChange(text);
}
}, [maxLength, textValidationDebounceTime, timeoutRef.current, onChange]);
var handleBlur = useCallback(function (e) {
var text = e.target.value;
if (!keepTextValidationErrorOnBlur) {
setError("");
}
if (onBlur) {
onBlur(text);
}
}, [keepTextValidationErrorOnBlur, onBlur]);
useEffect(function () {
if (autoResize && textAreaRef.current) {
textAreaRef.current.style.height = "auto";
textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
}
}, [inputValue, autoResize]);
useEffect(function () {
setInputValue(value);
}, [value]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "column",
width: "100%"
}, textAreaContainerConfigurationSettings)
}, textAreaContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column"
}, textAreaContainerContentConfigurationSettings)
}, textAreaContainerContentConfigurations), /*#__PURE__*/React.createElement("textarea", _extends({
ref: textAreaRef,
style: _objectSpread(_objectSpread({
msOverflowStyle: "none",
scrollbarWidth: "none",
outline: "none",
transition: "border 0.2s ease",
fontSize: "16px",
maxHeight: "269px",
minHeight: "100px",
width: "100%",
resize: autoResize ? "none" : "vertical"
}, getStyle()), {}, {
border: error ? "1px solid red" : getStyle().border
}, textAreaConfigurationSettings),
placeholder: placeholder,
onChange: handleChange,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onFocus: onFocus,
onBlur: handleBlur,
value: inputValue
}, textAreaConfigurations)), showCounter && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
textAlign: "right",
fontSize: "12px",
color: "#777",
marginTop: 4
}, textAreaCharacterCounterConfigurationSettings)
}, textAreaCharacterCounterConfigurations), inputValue.length, " / ", maxLength)), error && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
animation: "fadeIn 0.369s ease",
fontSize: "14px",
color: "red",
gap: "0.369rem",
marginTop: 2
}, textAreaTextValidationErrorConfigurationSettings)
}, textAreaTextValidationErrorConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "exclamation-triangle"
}, textAreaTextValidationErrorIconConfigurations)), " ", error));
}
;
export default HUDTextArea;