@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
182 lines (178 loc) • 8.24 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useRef, useEffect, forwardRef, useState } from 'react';
import classnames from 'classnames';
import { u as useId } from './useId-Jj9hXm-g.js';
import 'react-router-dom';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import { h as hyphenize } from './index-DzZtLRHp.js';
import 'qs';
import Label from './Label.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var useSyncedRef = function useSyncedRef(ref) {
var innerRef = useRef();
useEffect(function () {
if (!ref) return;
if (typeof ref === "function") {
ref(innerRef.current);
} else {
ref.current = innerRef.current;
}
});
return innerRef;
};
var _excluded = ["size", "resize", "suffix", "prefix", "disabled", "required", "nakedTextarea", "helpText", "error", "label", "className", "maxLength", "unlimitedChars", "labelProps", "onBlur", "disableTrimOnBlur"];
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), true).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; }
var SIZES = {
small: "small",
medium: "medium",
large: "large"
};
var ROWS = {
small: 1,
medium: 3,
large: 4
};
var RESIZE = {
vertical: "vertical",
none: "none"
};
var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref2, _otherProps$value, _otherProps$onChange;
var _ref$size = _ref.size,
size = _ref$size === void 0 ? SIZES.medium : _ref$size,
_ref$resize = _ref.resize,
resize = _ref$resize === void 0 ? RESIZE.vertical : _ref$resize,
_ref$suffix = _ref.suffix,
suffix = _ref$suffix === void 0 ? null : _ref$suffix,
_ref$prefix = _ref.prefix,
prefix = _ref$prefix === void 0 ? null : _ref$prefix,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
_ref$nakedTextarea = _ref.nakedTextarea,
nakedTextarea = _ref$nakedTextarea === void 0 ? false : _ref$nakedTextarea,
_ref$helpText = _ref.helpText,
helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
_ref$error = _ref.error,
error = _ref$error === void 0 ? "" : _ref$error,
_ref$label = _ref.label,
label = _ref$label === void 0 ? "" : _ref$label,
_ref$className = _ref.className,
className = _ref$className === void 0 ? "" : _ref$className,
maxLength = _ref.maxLength,
_ref$unlimitedChars = _ref.unlimitedChars,
unlimitedChars = _ref$unlimitedChars === void 0 ? false : _ref$unlimitedChars,
labelProps = _ref.labelProps,
onBlur = _ref.onBlur,
_ref$disableTrimOnBlu = _ref.disableTrimOnBlur,
disableTrimOnBlur = _ref$disableTrimOnBlu === void 0 ? false : _ref$disableTrimOnBlu,
otherProps = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
valueInternal = _useState2[0],
setValueInternal = _useState2[1];
var value = (_ref2 = (_otherProps$value = otherProps.value) !== null && _otherProps$value !== void 0 ? _otherProps$value : valueInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
var id = useId(otherProps.id);
var errorId = "error_".concat(id);
var helpTextId = "helpText_".concat(id);
var textareaRef = useSyncedRef(ref);
var describedByIds = [].concat(_toConsumableArray(error ? [errorId] : []), _toConsumableArray(helpText ? [helpTextId] : [])).join(" ");
var valueLength = (value === null || value === void 0 ? void 0 : value.toString().length) || 0;
var isCharacterLimitVisible = valueLength >= maxLength * 0.85;
var maxLengthError = unlimitedChars && valueLength > maxLength;
var onChangeInternal = function onChangeInternal(e) {
return setValueInternal(e.target.value);
};
var onChange = (_otherProps$onChange = otherProps.onChange) !== null && _otherProps$onChange !== void 0 ? _otherProps$onChange : onChangeInternal;
var isMaxLengthPresent = !!maxLength || maxLength === 0;
useEffect(function () {
textareaRef.current.style.minHeight = "22px";
textareaRef.current.style.height = "auto";
var scrollHeight = textareaRef.current.scrollHeight;
textareaRef.current.style.height = "".concat(scrollHeight + 1, "px");
}, [value]);
var handleTrimmedChangeOnBlur = function handleTrimmedChangeOnBlur(e) {
if (disableTrimOnBlur || typeof value !== "string") return;
var trimmedValue = value.trim();
if (value === trimmedValue) return;
e.target.value = trimmedValue;
onChange(e);
};
var handleOnBlur = function handleOnBlur(e) {
handleTrimmedChangeOnBlur(e);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
};
return /*#__PURE__*/jsxs("div", {
className: classnames(["neeto-ui-input__wrapper", className]),
"data-testid": "nui-textarea-wrapper",
children: [/*#__PURE__*/jsxs("div", {
className: "neeto-ui-input__label-wrapper",
children: [label && /*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({
required: required,
"data-testid": "".concat(hyphenize(label), "-label"),
htmlFor: id
}, labelProps), {}, {
children: label
})), isCharacterLimitVisible && /*#__PURE__*/jsxs("p", {
className: classnames("neeto-ui-input__max-length", {
"neeto-ui-input__max-length--error": maxLengthError
}),
children: [valueLength, "/", maxLength]
})]
}), /*#__PURE__*/jsxs("div", {
"data-testid": "".concat(hyphenize(label), "-text-input-label"),
className: classnames("neeto-ui-input", "neeto-ui-input--textarea", {
"neeto-ui-input--error": !!error,
"neeto-ui-input--disabled": !!disabled,
"neeto-ui-input--naked": !!nakedTextarea,
"neeto-ui-input--small": size === SIZES.small,
"neeto-ui-input--medium": size === SIZES.medium,
"neeto-ui-input--large": size === SIZES.large,
"neeto-ui-input--resize--vertical": resize === RESIZE.vertical,
"neeto-ui-input--resize--none": resize === RESIZE.none
}),
children: [prefix && /*#__PURE__*/jsx("div", {
className: "neeto-ui-input__prefix",
children: prefix
}), /*#__PURE__*/jsx("textarea", _objectSpread(_objectSpread({
"data-testid": "".concat(hyphenize(label), "-text-input"),
ref: textareaRef,
rows: ROWS[size]
}, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, describedByIds && {
"aria-describedby": describedByIds
}), {}, {
"aria-invalid": !!error,
"aria-required": required,
disabled: disabled
}, isMaxLengthPresent && !unlimitedChars && {
maxLength: maxLength
}), otherProps), {}, {
onChange: onChange,
value: value
})), {}, {
onBlur: handleOnBlur
})), suffix && /*#__PURE__*/jsx("div", {
className: "neeto-ui-input__suffix",
children: suffix
})]
}), !!error && /*#__PURE__*/jsx("p", {
className: "neeto-ui-input__error",
"data-testid": "".concat(hyphenize(label), "-input-error"),
id: errorId,
children: error
}), helpText && /*#__PURE__*/jsx("p", {
className: "neeto-ui-input__help-text",
id: helpTextId,
children: helpText
})]
});
});
Textarea.displayName = "Textarea";
export { Textarea as T, useSyncedRef as u };
//# sourceMappingURL=Textarea-D-SsRQdG.js.map