zangai-react
Version:
111 lines (110 loc) • 5.36 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { buildClassName } from '../core/css-builder';
import { ConnectedOverlay } from '../overlay/connected-overlay';
import Transition from 'react-transition-group/Transition';
import { DropDownDefaultStyle, DropDownTransitionStyles, } from '../core/animations';
import { Subject, Subscription } from 'rxjs';
import { auditTime } from 'rxjs/operators';
import { ChildrenWithProp } from '../core/common';
import AtAnimationHeight from '../animation';
var AtSubMenuComponent = /** @class */ (function (_super) {
tslib_1.__extends(AtSubMenuComponent, _super);
function AtSubMenuComponent(props) {
var _this = _super.call(this, props) || this;
_this.$mouseSubject = new Subject();
_this.$mouseSub = Subscription.EMPTY;
_this.setTitle = function (ref) {
_this.setState({
titleRef: ref,
});
};
_this.handleClick = function (event) {
var open = !_this.state.open;
_this.setState({
open: open,
});
};
_this.handleEnter = function (event) {
event.preventDefault();
var open = true;
if (_this.props.atType !== 'inline')
_this.$mouseSubject.next(open);
};
_this.handleLeave = function (event) {
event.preventDefault();
var open = false;
if (_this.props.atType !== 'inline')
_this.$mouseSubject.next(open);
};
_this.close = function () {
_this.$mouseSubject.next(false);
};
_this.state = {
titleRef: null,
open: props.open,
animation: false,
};
return _this;
}
AtSubMenuComponent.prototype.componentDidMount = function () {
var _this = this;
this.$mouseSubject.asObservable().pipe(auditTime(150)).subscribe(function (value) {
_this.setState({
open: value,
});
});
};
AtSubMenuComponent.prototype.componentWillUnmount = function () {
this.$mouseSub.unsubscribe();
};
AtSubMenuComponent.prototype.render = function () {
var _this = this;
var _a, _b;
var classes = buildClassName({
'at-menu__submenu': true,
'at-menu__submenu--opened': this.state.open,
});
var overlayClasses = buildClassName((_a = {
'overlay-menu': true
},
_a["overlay-menu-" + this.props.atType] = true,
_a["at-menu--" + this.props.theme] = true,
_a));
var titleClasses = buildClassName((_b = {
'at-menu__submenu-title': true
},
_b["menu-item-on-hover-" + this.props.atType] = this.state.open,
_b));
var position = (this.props.level === 0 && this.props.atType === 'horizontal') ? 'bottom' : 'right';
var titlePadding = this.props.atType === 'inline' ? { paddingLeft: (this.props.level + 1) * 23 } : {};
var common = React.createElement(Transition, { in: this.state.open, timeout: 15 }, function (state) { return (React.createElement(ConnectedOverlay, { position: position, origin: _this.state.titleRef, open: _this.state.open },
React.createElement("div", { onMouseLeave: _this.handleLeave, onMouseEnter: _this.handleEnter, className: overlayClasses, style: tslib_1.__assign({}, DropDownDefaultStyle, DropDownTransitionStyles[state]) },
React.createElement("div", { className: "at-menu-dropdown__popover" },
React.createElement("div", { className: "at-dropdown-menu" }, ChildrenWithProp(_this.props.children, {
level: _this.props.level + 1,
atType: _this.props.atType,
theme: _this.props.theme,
})))))); });
var inline = React.createElement(AtAnimationHeight, { duration: 150, height: this.state.open ? 'auto' : 0 },
React.createElement("ul", { className: "at-sub-dropdown-menu" }, ChildrenWithProp(this.props.children, {
level: this.props.level + 1,
atType: this.props.atType,
theme: this.props.theme,
})));
return (React.createElement("li", { className: classes },
React.createElement("div", { onClick: this.handleClick, onMouseEnter: this.handleEnter, onMouseLeave: this.handleLeave, ref: this.setTitle, className: titleClasses, style: tslib_1.__assign({}, titlePadding) },
this.props.title,
((this.props.level > 0 && this.props.atType === 'horizontal') || (this.props.atType === 'vertical' && this.props.children)) ?
React.createElement("i", { className: "icon icon-chevron-right right-arrow" }) : null,
(this.props.atType === 'inline' && this.props.children) ?
React.createElement("i", { className: "icon icon-chevron-up " + (this.state.open ? 'chevron_open' : '') }) : null),
this.props.atType === 'inline' ? inline : common));
};
AtSubMenuComponent.defaultProps = {
level: 0,
open: false,
};
return AtSubMenuComponent;
}(React.Component));
export { AtSubMenuComponent };