@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
165 lines (161 loc) • 7.86 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { 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-Dxaw6gl9.js';
import 'qs';
import Label from './Label.js';
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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 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 || onBlur(e);
};
return /*#__PURE__*/React__default.createElement("div", {
className: classnames(["neeto-ui-input__wrapper", className])
}, /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__label-wrapper"
}, label && /*#__PURE__*/React__default.createElement(Label, _extends({
required: required,
"data-cy": "".concat(hyphenize(label), "-label"),
htmlFor: id
}, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default.createElement("p", {
className: classnames("neeto-ui-input__max-length", {
"neeto-ui-input__max-length--error": maxLengthError
})
}, valueLength, "/", maxLength)), /*#__PURE__*/React__default.createElement("div", {
"data-cy": "".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
})
}, prefix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__prefix"
}, prefix), /*#__PURE__*/React__default.createElement("textarea", _extends({
"data-cy": "".concat(hyphenize(label), "-text-input"),
ref: textareaRef,
rows: ROWS[size]
}, _objectSpread(_objectSpread(_objectSpread({
disabled: disabled
}, isMaxLengthPresent && !unlimitedChars && {
maxLength: maxLength
}), otherProps), {}, {
onChange: onChange,
value: value
}), {
onBlur: handleOnBlur
})), suffix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__suffix"
}, suffix)), !!error && /*#__PURE__*/React__default.createElement("p", {
className: "neeto-ui-input__error",
"data-cy": "".concat(hyphenize(label), "-input-error"),
id: errorId
}, error), helpText && /*#__PURE__*/React__default.createElement("p", {
className: "neeto-ui-input__help-text",
id: helpTextId
}, helpText));
});
Textarea.displayName = "Textarea";
export { Textarea as T, useSyncedRef as u };
//# sourceMappingURL=Textarea-B1Wqt9xd.js.map