@skbkontur/ui-kit
Version:
123 lines • 5.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var InternalMenu_1 = tslib_1.__importDefault(require("../InternalMenu/InternalMenu"));
var Popup_1 = tslib_1.__importDefault(require("../Popup"));
var RenderLayer_1 = tslib_1.__importDefault(require("../RenderLayer"));
var PopupMenuPositions_1 = tslib_1.__importDefault(require("./PopupMenuPositions"));
var PopupMenuView_1 = require("./PopupMenuView");
var validatePositions_1 = tslib_1.__importDefault(require("./validatePositions"));
exports.PopupMenuType = {
Dropdown: 'dropdown',
Tooltip: 'tooltip'
};
var PopupMenu = /** @class */ (function (_super) {
tslib_1.__extends(PopupMenu, _super);
function PopupMenu() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
menuVisible: false,
firstItemShouldBeSelected: false
};
_this.captionWrapper = null;
_this.savedFocusableElement = null;
_this.toggleMenu = function () {
_this.state.menuVisible ? _this.hideMenu() : _this.showMenu();
};
_this.showMenu = function (firstItemShouldBeSelected) {
if (_this.props.disabled) {
return;
}
_this.saveFocus();
_this.setState({
menuVisible: true,
firstItemShouldBeSelected: firstItemShouldBeSelected
}, function () {
_this.handleChangeMenuVisible(false);
});
};
_this.hideMenu = function (restoreFocus) {
_this.setState({
menuVisible: false,
firstItemShouldBeSelected: false
}, function () {
_this.handleChangeMenuVisible(!!restoreFocus);
});
};
_this.handleCaptionClick = function () {
_this.toggleMenu();
};
_this.handleCaptionKeyDown = function (event) {
switch (event.key) {
case 'Enter':
case ' ':
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
_this.showMenu(true);
break;
default:
break;
}
};
_this.handleKeyDown = function (event) {
switch (event.key) {
case 'Escape':
var restoreFocus = true;
_this.hideMenu(restoreFocus);
break;
default:
break;
}
};
_this.saveFocus = function () {
if (document) {
_this.savedFocusableElement = document.activeElement;
}
};
_this.restoreFocus = function () {
if (_this.savedFocusableElement) {
_this.savedFocusableElement.focus();
_this.savedFocusableElement = null;
}
};
_this.handleChangeMenuVisible = function (focusShouldBeRestored) {
if (focusShouldBeRestored) {
_this.restoreFocus();
}
if (typeof _this.props.onChangeMenuState === 'function') {
_this.props.onChangeMenuState(_this.state.menuVisible, focusShouldBeRestored);
}
};
_this.handleItemSelection = function (eventType) {
var restoreFocus = eventType === 'keydown';
_this.hideMenu(restoreFocus);
};
return _this;
}
PopupMenu.prototype.render = function () {
var _this = this;
return (React.createElement(RenderLayer_1.default, { onClickOutside: function () { return _this.hideMenu(); }, onFocusOutside: function () { return _this.hideMenu(); }, active: this.state.menuVisible },
React.createElement(PopupMenuView_1.PopupMenuWrapper, null,
React.createElement(PopupMenuView_1.PopupMenuCaption, { onClick: this.handleCaptionClick, onKeyDown: this.handleCaptionKeyDown, innerRef: function (element) { return (_this.captionWrapper = element); } }, this.props.caption),
this.captionWrapper &&
this.props.children && (React.createElement(Popup_1.default, { anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: this.props.popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions() },
React.createElement(InternalMenu_1.default, { hasShadow: false, maxHeight: this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, width: this.props.menuWidth || 'auto', onItemClick: this.handleItemSelection, cyclicSelection: false, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1 }, this.props.children))))));
};
PopupMenu.prototype.getPositions = function () {
if (validatePositions_1.default(this.props.positions)) {
return this.props.positions;
}
return PopupMenuPositions_1.default;
};
PopupMenu.defaultProps = {
positions: PopupMenuPositions_1.default,
type: exports.PopupMenuType.Tooltip,
popupHasPin: true
};
PopupMenu.Type = exports.PopupMenuType;
return PopupMenu;
}(React.Component));
exports.default = PopupMenu;
//# sourceMappingURL=PopupMenu.js.map