@yandex/ui
Version:
Yandex UI components
61 lines (60 loc) • 3.05 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React, { useState, useCallback, useRef } from 'react';
import { useComponentRegistry } from '@bem-react/di';
import { cn } from '@bem-react/classname';
import { useRenderOverride } from '../lib/render-override';
import { useUpdateEffect } from '../useUpdateEffect';
import { withControl } from '../withControl/withControl';
import './Textarea.css';
export var cnTextarea = 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 = __rest(_a, ["addonAfter", "addonBefore", "disabled", "focused", "hovered", "onMouseEnter", "onMouseLeave", "innerRef", "wrapRef", "className", "pressed", "view", "size", "theme", "hint", "state", "title", "renderControl"]);
var className = cnTextarea({
hovered: hovered,
focused: focused,
disabled: disabled,
state: state,
}, [textareaClassName]);
var _b = useComponentRegistry(cnTextarea()), Wrap = _b.Wrap, ControlOriginal = _b.Control, Box = _b.Box, Hint = _b.Hint;
var Control = useRenderOverride(ControlOriginal, renderControl);
var _c = __read(useState(htmlHint), 2), hint = _c[0], setHint = _c[1];
var _d = __read(useState(false), 2), hintLeave = _d[0], setHintLeave = _d[1];
var prevHint = useRef(htmlHint);
useUpdateEffect(function () {
if (htmlHint) {
setHint(htmlHint);
}
else if (prevHint.current) {
setHintLeave(true);
}
prevHint.current = htmlHint;
}, [htmlHint]);
var onAnimationEnd = useCallback(function () {
if (!htmlHint) {
setHint('');
setHintLeave(false);
}
}, [htmlHint]);
return (React.createElement("span", { ref: innerRef, className: className, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, title: title },
addonBefore,
React.createElement(Wrap, { innerRef: wrapRef },
React.createElement(Control, __assign({}, props, { "aria-invalid": state === 'error', disabled: disabled })),
React.createElement(Box, null)),
addonAfter,
hint && (React.createElement(Hint, { leave: hintLeave, onAnimationEnd: onAnimationEnd }, hint))));
};
TextareaBase.displayName = cnTextarea();
export var Textarea = withControl(TextareaBase);