@yandex/ui
Version:
Yandex UI components
123 lines (122 loc) • 6.97 kB
JavaScript
;
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.cnButton = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var mergeRefs_1 = require("../lib/mergeRefs");
var keyboard_1 = require("../lib/keyboard");
var Button_Icon_1 = require("./Icon/Button-Icon");
var Button_Text_1 = require("./Text/Button-Text");
require("./Button.css");
exports.cnButton = classname_1.cn('Button2');
var defaultProps = {
autoComplete: 'off',
pressKeys: [keyboard_1.Keys.SPACE, keyboard_1.Keys.ENTER],
prvntKeys: [],
as: 'button',
type: 'button',
};
/**
* Компонент для создания кнопок.
* @param {IButtonProps} props
*/
exports.Button = (_a = /** @class */ (function (_super) {
tslib_1.__extends(class_1, _super);
function class_1() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
pressed: false,
};
/**
* Ссылка на верхний DOM узел.
*/
_this.internalInnerRef = react_1.createRef();
_this.onKeyDown = function (event) {
if (keyboard_1.isKeyCode(event.keyCode, _this.props.pressKeys)) {
_this.setState({ pressed: true });
if (keyboard_1.isKeyCode(event.keyCode, _this.props.prvntKeys)) {
event.preventDefault();
}
}
if (_this.props.onKeyDown !== undefined) {
_this.props.onKeyDown(event);
}
};
_this.onKeyUp = function (event) {
if (keyboard_1.isKeyCode(event.keyCode, _this.props.prvntKeys)) {
event.preventDefault();
}
if (keyboard_1.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 = tslib_1.__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] = mergeRefs_1.mergeAllRefs(this.internalInnerRef, innerRef, controlRef);
var iconLeftOrIcon = iconLeft || icon;
return (react_1.default.createElement(Component, tslib_1.__assign({}, props, { type: type, disabled: Boolean(progress || disabled), className: exports.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_1.default.createElement(Button_Icon_1.ButtonIcon, { provider: iconLeftOrIcon, side: children && iconLeft ? 'left' : undefined }),
iconRight && react_1.default.createElement(Button_Icon_1.ButtonIcon, { provider: iconRight, side: children ? 'right' : undefined }),
children && react_1.default.createElement(Button_Text_1.ButtonText, null, children),
addonAfter));
};
return class_1;
}(react_1.PureComponent)),
_a.displayName = exports.cnButton(),
_a.defaultProps = defaultProps,
_a);