@yandex/ui
Version:
Yandex UI components
66 lines (65 loc) • 3.45 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 { useUniqId } from '../useUniqId';
import { useUpdateEffect } from '../useUpdateEffect';
import { withControl } from '../withControl/withControl';
import './Textinput.css';
export var cnTextinput = 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 = __rest(_a, ["addonAfter", "addonBefore", "className", "disabled", "focused", "iconLeft", "iconRight", "innerRef", "onMouseEnter", "onMouseLeave", "style", "pressed", "view", "pin", "size", "theme", "hint", "state", "title", "renderControl"]);
var _b = useComponentRegistry(cnTextinput()), ControlOriginal = _b.Control, Box = _b.Box, Icon = _b.Icon, 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);
var hintId = useUniqId('hint');
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", { className: 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.createElement(Icon, { side: "left", component: iconLeft }),
iconRight && React.createElement(Icon, { side: "right", component: iconRight }),
React.createElement(Control, __assign({}, props, { "aria-invalid": state === 'error', disabled: disabled, "aria-describedby": hint ? hintId : undefined })),
React.createElement(Box, null),
addonAfter,
hint && (React.createElement(Hint, { leave: hintLeave, onAnimationEnd: onAnimationEnd, id: hintId }, hint))));
};
TextinputPresenter.displayName = cnTextinput();
export var Textinput = withControl(TextinputPresenter);