@yandex/ui
Version:
Yandex UI components
69 lines (68 loc) • 3.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Textinput = exports.cnTextinput = 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 useUniqId_1 = require("../useUniqId");
var useUpdateEffect_1 = require("../useUpdateEffect");
var withControl_1 = require("../withControl/withControl");
require("./Textinput.css");
exports.cnTextinput = classname_1.cn('Textinput');
/**
* Однострочное текстовое поле.
* @param {ITextinputProps} props
*/
var TextinputPresenter = function (_a) {
var addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, className = _a.className, disabled = _a.disabled, focused = _a.focused, iconLeft = _a.iconLeft, iconRight = _a.iconRight, innerRef = _a.innerRef, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, style = _a.style,
// Извлекаем свойства, т.к. они не нужны на DOM узле
// FIXME: https://github.com/bem/bem-react/issues/381
_pressed = _a.pressed,
// @ts-ignore
_view = _a.view,
// @ts-ignore
_pin = _a.pin,
// @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", "className", "disabled", "focused", "iconLeft", "iconRight", "innerRef", "onMouseEnter", "onMouseLeave", "style", "pressed", "view", "pin", "size", "theme", "hint", "state", "title", "renderControl"]);
var _b = di_1.useComponentRegistry(exports.cnTextinput()), ControlOriginal = _b.Control, Box = _b.Box, Icon = _b.Icon, 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);
var hintId = useUniqId_1.useUniqId('hint');
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", { className: exports.cnTextinput({
disabled: disabled,
focused: focused,
iconRight: iconRight !== undefined,
iconLeft: iconLeft !== undefined,
state: state,
}, [className]), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: innerRef, style: style, title: title },
addonBefore,
iconLeft && react_1.default.createElement(Icon, { side: "left", component: iconLeft }),
iconRight && react_1.default.createElement(Icon, { side: "right", component: iconRight }),
react_1.default.createElement(Control, tslib_1.__assign({}, props, { "aria-invalid": state === 'error', disabled: disabled, "aria-describedby": hint ? hintId : undefined })),
react_1.default.createElement(Box, null),
addonAfter,
hint && (react_1.default.createElement(Hint, { leave: hintLeave, onAnimationEnd: onAnimationEnd, id: hintId }, hint))));
};
TextinputPresenter.displayName = exports.cnTextinput();
exports.Textinput = withControl_1.withControl(TextinputPresenter);