@yandex/ui
Version:
Yandex UI components
91 lines (90 loc) • 4.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.withControl = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var getDisplayName_1 = require("../lib/getDisplayName");
function withControl(WrappedComponent) {
var WithControl = /** @class */ (function (_super) {
tslib_1.__extends(WithControl, _super);
function WithControl() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
focused: _this.props.focused,
pressed: _this.props.pressed,
disabled: _this.props.disabled,
};
_this.onMouseDown = function (event) {
// по нажатию правой кнопки мыши
// не нужно выставлять pressed
if (event.nativeEvent.which === 3) {
return;
}
_this.setState({ pressed: true });
_this.docOnMouseDown();
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.docOnMouseDown = function () {
// необходимо слушать mouseup вне блока, иначе
// при отпущенной вовне кнопке мыши блок остается pressed
document.addEventListener('mouseup', _this.docOnMouseUp);
// необходимо для button2_type_link
document.addEventListener('dragend', _this.docOnMouseUp);
};
_this.docOnMouseUp = function () {
_this.setState({ pressed: false });
document.removeEventListener('mouseup', _this.docOnMouseUp);
document.removeEventListener('dragend', _this.docOnMouseUp);
};
_this.onFocus = function (event) {
_this.setState({ focused: true });
if (_this.props.onFocus !== undefined) {
_this.props.onFocus(event);
}
};
_this.onBlur = function (event) {
_this.setState({ focused: false });
if (_this.props.onBlur !== undefined) {
_this.props.onBlur(event);
}
};
return _this;
}
// TODO: https://st.yandex-team.ru/ISL-5863
// eslint-disable-next-line camelcase
WithControl.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
if (this.props.disabled !== nextProps.disabled) {
this.setState({ disabled: nextProps.disabled });
}
if (this.props.focused !== nextProps.focused) {
this.setState({ focused: nextProps.focused });
}
if (this.props.pressed !== nextProps.pressed) {
this.setState({ pressed: nextProps.pressed });
}
if (nextProps.disabled) {
this.setState({ focused: false, pressed: false });
}
};
WithControl.prototype.render = function () {
var _a = this.state, disabled = _a.disabled, focused = _a.focused, pressed = _a.pressed;
// Оборачиваемый компонент явно может не реализовывать интерфейс для передаваемых свойств,
// но все компоненты обязаны поддержать передачу всех свойств на DOM узел, поэтому тут мы
// приводим тип оборачиваемого компонента к нужному виду.
var Component = WrappedComponent;
return (react_1.default.createElement(Component, tslib_1.__assign({}, this.props, { focused: !disabled ? focused : undefined, pressed: !disabled ? pressed : undefined, onMouseDown: !disabled ? this.onMouseDown : undefined, onMouseUp: !disabled ? this.onMouseUp : undefined, onFocus: !disabled ? this.onFocus : undefined, onBlur: !disabled ? this.onBlur : undefined })));
};
WithControl.displayName = "WithControl(" + getDisplayName_1.getDisplayName(WrappedComponent) + ")";
return WithControl;
}(react_1.PureComponent));
return WithControl;
}
exports.withControl = withControl;