@yandex/ui
Version:
Yandex UI components
120 lines (119 loc) • 6.65 kB
JavaScript
var _a;
import { __assign, __extends, __rest } from "tslib";
import React, { PureComponent, createRef, } from 'react';
import { cn } from '@bem-react/classname';
import { mergeAllRefs } from '../lib/mergeRefs';
import { Keys, isKeyCode } from '../lib/keyboard';
import { ButtonIcon as Icon } from './Icon/Button-Icon';
import { ButtonText as Text } from './Text/Button-Text';
import './Button.css';
export var cnButton = cn('Button2');
var defaultProps = {
autoComplete: 'off',
pressKeys: [Keys.SPACE, Keys.ENTER],
prvntKeys: [],
as: 'button',
type: 'button',
};
/**
* Компонент для создания кнопок.
* @param {IButtonProps} props
*/
export var Button = (_a = /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
pressed: false,
};
/**
* Ссылка на верхний DOM узел.
*/
_this.internalInnerRef = createRef();
_this.onKeyDown = function (event) {
if (isKeyCode(event.keyCode, _this.props.pressKeys)) {
_this.setState({ pressed: true });
if (isKeyCode(event.keyCode, _this.props.prvntKeys)) {
event.preventDefault();
}
}
if (_this.props.onKeyDown !== undefined) {
_this.props.onKeyDown(event);
}
};
_this.onKeyUp = function (event) {
if (isKeyCode(event.keyCode, _this.props.prvntKeys)) {
event.preventDefault();
}
if (isKeyCode(event.keyCode, _this.props.pressKeys)) {
_this.setState({ pressed: false });
}
if (_this.props.onKeyUp !== undefined) {
_this.props.onKeyUp(event);
}
};
_this.onClick = function (event) {
if (_this.internalInnerRef.current !== null) {
// Выставляем программно focus, т.к. в браузерах Safari и Firefox
// клик по кнопке не выставляет фокус автоматически.
_this.internalInnerRef.current.focus();
}
if (_this.props.onClick !== undefined) {
_this.props.onClick(event);
}
};
_this.onMouseDown = function (event) {
// Нельзя делать preventDefault для всех браузеров, т.к. в Firefox перестает работать active состояние.
if (navigator.userAgent.match(/safari/i)) {
// Предотвращаем всплытие события, т.к. в браузерах Safari происходит blur после нажатия на кнопку.
event.preventDefault();
}
_this.setState({ pressed: true });
if (_this.props.onMouseDown !== undefined) {
_this.props.onMouseDown(event);
}
};
_this.onMouseUp = function (event) {
_this.setState({ pressed: false });
if (_this.props.onMouseUp !== undefined) {
_this.props.onMouseUp(event);
}
};
_this.onMouseLeave = function (event) {
_this.setState({ pressed: false });
if (_this.props.onMouseLeave !== undefined) {
_this.props.onMouseLeave(event);
}
};
_this.onBlur = function (event) {
_this.setState({ pressed: false });
if (_this.props.onBlur !== undefined) {
_this.props.onBlur(event);
}
};
return _this;
}
class_1.prototype.render = function () {
var _a = this.props, addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, autoComplete = _a.autoComplete, checked = _a.checked, children = _a.children, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, progress = _a.progress, disabled = _a.disabled, AsComponent = _a.as, type = _a.type, className = _a.className, innerRef = _a.innerRef, controlRef = _a.controlRef, title = _a.title, role = _a.role, _pressKeys = _a.pressKeys, _prvntKeys = _a.prvntKeys,
// Извлекаем свойства, т.к. они не нужны на DOM узле
// FIXME: https://github.com/bem/bem-react/issues/381
_view = _a.view, _theme = _a.theme, _baseline = _a.baseline, _pin = _a.pin, _width = _a.width, props = __rest(_a, ["addonAfter", "addonBefore", "autoComplete", "checked", "children", "icon", "iconLeft", "iconRight", "progress", "disabled", "as", "type", "className", "innerRef", "controlRef", "title", "role", "pressKeys", "prvntKeys", "view", "theme", "baseline", "pin", "width"]);
var pressed = this.state.pressed;
var Component = AsComponent;
var refKey = typeof AsComponent === 'string' ? 'ref' : 'innerRef';
props[refKey] = mergeAllRefs(this.internalInnerRef, innerRef, controlRef);
var iconLeftOrIcon = iconLeft || icon;
return (React.createElement(Component, __assign({}, props, { type: type, disabled: Boolean(progress || disabled), className: cnButton({ checked: checked, progress: progress, pressed: pressed }, [className]), onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onClick: this.onClick, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, onMouseLeave: this.onMouseLeave, onBlur: this.onBlur, "aria-pressed": checked, "aria-disabled": disabled,
// https://st.yandex-team.ru/ISL-1667
autoComplete: autoComplete, title: title, role: role, "aria-busy": progress }),
addonBefore,
iconLeftOrIcon && React.createElement(Icon, { provider: iconLeftOrIcon, side: children && iconLeft ? 'left' : undefined }),
iconRight && React.createElement(Icon, { provider: iconRight, side: children ? 'right' : undefined }),
children && React.createElement(Text, null, children),
addonAfter));
};
return class_1;
}(PureComponent)),
_a.displayName = cnButton(),
_a.defaultProps = defaultProps,
_a);