zangai-react
Version:
101 lines (100 loc) • 4.77 kB
JavaScript
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';
export class AtSubMenuComponent extends React.Component {
constructor(props) {
super(props);
this.$mouseSubject = new Subject();
this.$mouseSub = Subscription.EMPTY;
this.setTitle = (ref) => {
this.setState({
titleRef: ref,
});
};
this.handleClick = (event) => {
const open = !this.state.open;
this.setState({
open: open,
});
};
this.handleEnter = (event) => {
event.preventDefault();
const open = true;
if (this.props.atType !== 'inline')
this.$mouseSubject.next(open);
};
this.handleLeave = (event) => {
event.preventDefault();
const open = false;
if (this.props.atType !== 'inline')
this.$mouseSubject.next(open);
};
this.close = () => {
this.$mouseSubject.next(false);
};
this.state = {
titleRef: null,
open: props.open,
animation: false,
};
}
componentDidMount() {
this.$mouseSubject.asObservable().pipe(auditTime(150)).subscribe(value => {
this.setState({
open: value,
});
});
}
componentWillUnmount() {
this.$mouseSub.unsubscribe();
}
render() {
const classes = buildClassName({
'at-menu__submenu': true,
'at-menu__submenu--opened': this.state.open,
});
const overlayClasses = buildClassName({
'overlay-menu': true,
[`overlay-menu-${this.props.atType}`]: true,
[`at-menu--${this.props.theme}`]: true,
});
const titleClasses = buildClassName({
'at-menu__submenu-title': true,
[`menu-item-on-hover-${this.props.atType}`]: this.state.open,
});
const position = (this.props.level === 0 && this.props.atType === 'horizontal') ? 'bottom' : 'right';
const titlePadding = this.props.atType === 'inline' ? { paddingLeft: (this.props.level + 1) * 23 } : {};
const common = React.createElement(Transition, { in: this.state.open, timeout: 15 }, (state) => (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: Object.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,
})))))));
const 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: Object.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,
};