@yandex/ui
Version:
Yandex UI components
64 lines (63 loc) • 3.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Textarea = exports.cnTextarea = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var di_1 = require("@bem-react/di");
var classname_1 = require("@bem-react/classname");
var render_override_1 = require("../lib/render-override");
var useUpdateEffect_1 = require("../useUpdateEffect");
var withControl_1 = require("../withControl/withControl");
require("./Textarea.css");
exports.cnTextarea = classname_1.cn('Textarea');
/**
* Многострочное текстовое поле.
* @param {ITextareaProps} props
*/
var TextareaBase = function (_a) {
var addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, disabled = _a.disabled, focused = _a.focused, hovered = _a.hovered, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, innerRef = _a.innerRef, wrapRef = _a.wrapRef, textareaClassName = _a.className,
// Извлекаем свойства, т.к. они не нужны на DOM узле
// FIXME: https://github.com/bem/bem-react/issues/381
_pressed = _a.pressed,
// @ts-ignore
_view = _a.view,
// @ts-ignore
_size = _a.size,
// @ts-ignore
_theme = _a.theme, htmlHint = _a.hint, state = _a.state, title = _a.title, renderControl = _a.renderControl, props = tslib_1.__rest(_a, ["addonAfter", "addonBefore", "disabled", "focused", "hovered", "onMouseEnter", "onMouseLeave", "innerRef", "wrapRef", "className", "pressed", "view", "size", "theme", "hint", "state", "title", "renderControl"]);
var className = exports.cnTextarea({
hovered: hovered,
focused: focused,
disabled: disabled,
state: state,
}, [textareaClassName]);
var _b = di_1.useComponentRegistry(exports.cnTextarea()), Wrap = _b.Wrap, ControlOriginal = _b.Control, Box = _b.Box, Hint = _b.Hint;
var Control = render_override_1.useRenderOverride(ControlOriginal, renderControl);
var _c = tslib_1.__read(react_1.useState(htmlHint), 2), hint = _c[0], setHint = _c[1];
var _d = tslib_1.__read(react_1.useState(false), 2), hintLeave = _d[0], setHintLeave = _d[1];
var prevHint = react_1.useRef(htmlHint);
useUpdateEffect_1.useUpdateEffect(function () {
if (htmlHint) {
setHint(htmlHint);
}
else if (prevHint.current) {
setHintLeave(true);
}
prevHint.current = htmlHint;
}, [htmlHint]);
var onAnimationEnd = react_1.useCallback(function () {
if (!htmlHint) {
setHint('');
setHintLeave(false);
}
}, [htmlHint]);
return (react_1.default.createElement("span", { ref: innerRef, className: className, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, title: title },
addonBefore,
react_1.default.createElement(Wrap, { innerRef: wrapRef },
react_1.default.createElement(Control, tslib_1.__assign({}, props, { "aria-invalid": state === 'error', disabled: disabled })),
react_1.default.createElement(Box, null)),
addonAfter,
hint && (react_1.default.createElement(Hint, { leave: hintLeave, onAnimationEnd: onAnimationEnd }, hint))));
};
TextareaBase.displayName = exports.cnTextarea();
exports.Textarea = withControl_1.withControl(TextareaBase);