2019-07-30 11:17:19 +00:00
|
|
|
import React from 'react';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import GroupButton from '../group-button';
|
|
|
|
import DropDownItem from '../drop-down-item';
|
2019-08-22 08:05:03 +00:00
|
|
|
import throttle from 'lodash/throttle';
|
2019-08-26 13:08:50 +00:00
|
|
|
import { isArrayEqual } from '../../utils/array';
|
2019-06-17 08:58:02 +00:00
|
|
|
|
|
|
|
const StyledGroupButtonsMenu = styled.div`
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
2019-06-25 15:01:04 +00:00
|
|
|
background: #FFFFFF;
|
|
|
|
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.100306);
|
|
|
|
height: 56px;
|
2019-06-17 08:58:02 +00:00
|
|
|
list-style: none;
|
2019-06-25 15:01:04 +00:00
|
|
|
padding: 0 18px 19px 0;
|
2019-07-08 07:12:43 +00:00
|
|
|
width: 100%;
|
|
|
|
white-space: nowrap;
|
2019-08-22 08:05:03 +00:00
|
|
|
display: ${props => props.visible ? 'block' : 'none'};
|
2019-07-25 08:28:19 +00:00
|
|
|
z-index: 350;
|
2019-06-17 08:58:02 +00:00
|
|
|
`;
|
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
const CloseButton = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 20px;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:before, &:after {
|
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
content: ' ';
|
|
|
|
height: 20px;
|
|
|
|
width: 1px;
|
|
|
|
background-color: #D8D8D8;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-07-31 11:43:05 +00:00
|
|
|
const GroupMenuWrapper = styled.div`
|
|
|
|
display: inline-block;
|
|
|
|
`;
|
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
class GroupButtonsMenu extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-06-17 08:58:02 +00:00
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
this.state = {
|
|
|
|
priorityItems: props.menuItems,
|
|
|
|
moreItems: [],
|
|
|
|
visible: true
|
2019-06-17 08:58:02 +00:00
|
|
|
}
|
2019-08-22 08:05:03 +00:00
|
|
|
|
2019-08-22 12:26:48 +00:00
|
|
|
this.throttledResize = throttle(this.updateMenu, 300);
|
2019-07-30 11:17:19 +00:00
|
|
|
}
|
2019-07-25 11:00:03 +00:00
|
|
|
|
2019-07-31 11:43:05 +00:00
|
|
|
closeMenu = (e) => {
|
|
|
|
this.setState({ visible: false });
|
|
|
|
this.props.onClose && this.props.onClose(e);
|
|
|
|
};
|
|
|
|
|
|
|
|
groupButtonClick = (item) => {
|
2019-08-21 11:44:30 +00:00
|
|
|
if (item.disabled) return;
|
2019-07-31 11:43:05 +00:00
|
|
|
item.onClick();
|
|
|
|
this.closeMenu();
|
|
|
|
};
|
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
componentDidMount() {
|
2019-08-22 08:05:03 +00:00
|
|
|
const groupMenuItems = [... document.getElementById("groupMenu").children];
|
|
|
|
|
|
|
|
this.widthsArray = groupMenuItems.map(item => item.getBoundingClientRect().width);
|
|
|
|
window.addEventListener('resize', this.throttledResize);
|
2019-07-30 11:17:19 +00:00
|
|
|
this.updateMenu();
|
|
|
|
}
|
2019-06-17 08:58:02 +00:00
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.visible !== prevProps.visible) {
|
|
|
|
this.setState({ visible: this.props.visible });
|
2019-07-08 07:12:43 +00:00
|
|
|
}
|
2019-08-22 08:05:03 +00:00
|
|
|
|
2019-08-26 13:08:50 +00:00
|
|
|
if(!isArrayEqual(this.props.menuItems, prevProps.menuItems)){
|
2019-08-21 14:05:43 +00:00
|
|
|
this.setState({ priorityItems: this.props.menuItems, });
|
2019-08-22 08:05:03 +00:00
|
|
|
this.updateMenu();
|
2019-08-21 14:05:43 +00:00
|
|
|
}
|
2019-07-30 11:17:19 +00:00
|
|
|
};
|
|
|
|
|
2019-08-22 08:05:03 +00:00
|
|
|
countMenuItems = (array, outerWidth, initialWidth) => {
|
2019-07-30 11:17:19 +00:00
|
|
|
let total = (initialWidth + 80);
|
|
|
|
for (let i = 0, len = array.length; i < len; i++) {
|
|
|
|
if (total + array[i] > outerWidth) {
|
|
|
|
return i < 1 ? 1 : i;
|
|
|
|
} else {
|
|
|
|
total += array[i];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
updateMenu = () => {
|
|
|
|
const moreMenuElement = document.getElementById("moreMenu");
|
2019-07-31 11:43:05 +00:00
|
|
|
const groupMenuOuterElement = document.getElementById("groupMenuOuter");
|
2019-08-22 08:05:03 +00:00
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
const moreMenuWidth = moreMenuElement ? moreMenuElement.getBoundingClientRect().width : 0;
|
2019-08-22 08:05:03 +00:00
|
|
|
const groupMenuOuterWidth = groupMenuOuterElement ? groupMenuOuterElement.getBoundingClientRect().width : 0;
|
|
|
|
|
|
|
|
const visibleItemsCount = this.countMenuItems(this.widthsArray, groupMenuOuterWidth, moreMenuWidth);
|
|
|
|
const navItemsCopy = this.props.menuItems;
|
|
|
|
|
|
|
|
const priorityItems = navItemsCopy.slice(0, visibleItemsCount);
|
|
|
|
const moreItems = priorityItems.length !== navItemsCopy.length ? navItemsCopy.slice(visibleItemsCount, navItemsCopy.length) : [];
|
2019-07-30 11:17:19 +00:00
|
|
|
|
|
|
|
this.setState({
|
|
|
|
priorityItems: priorityItems,
|
2019-08-22 08:05:03 +00:00
|
|
|
moreItems: moreItems
|
2019-07-30 11:17:19 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2019-08-22 08:05:03 +00:00
|
|
|
window.removeEventListener('resize', this.throttledResize);
|
2019-07-30 11:17:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
//console.log("GroupButtonsMenu render");
|
2019-08-22 08:05:03 +00:00
|
|
|
const { selected, moreLabel, closeTitle } = this.props;
|
|
|
|
const { priorityItems, moreItems, visible } = this.state;
|
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
return (
|
2019-08-22 08:05:03 +00:00
|
|
|
<StyledGroupButtonsMenu id="groupMenuOuter" visible={visible} >
|
2019-07-31 11:43:05 +00:00
|
|
|
<GroupMenuWrapper id="groupMenu">
|
2019-08-22 08:05:03 +00:00
|
|
|
{priorityItems.map((item, i) =>
|
|
|
|
<GroupButton
|
|
|
|
key={`navItem-${i}`}
|
2019-07-30 11:17:19 +00:00
|
|
|
label={item.label}
|
|
|
|
isDropdown={item.isDropdown}
|
|
|
|
isSeparator={item.isSeparator}
|
|
|
|
isSelect={item.isSelect}
|
|
|
|
onSelect={item.onSelect}
|
2019-08-22 08:05:03 +00:00
|
|
|
selected={selected}
|
2019-07-30 11:17:19 +00:00
|
|
|
fontWeight={item.fontWeight}
|
2019-08-21 11:44:30 +00:00
|
|
|
disabled={item.disabled}
|
2019-07-31 19:28:55 +00:00
|
|
|
onClick={this.groupButtonClick.bind(this, item)}
|
2019-07-31 11:43:05 +00:00
|
|
|
>
|
2019-07-30 11:17:19 +00:00
|
|
|
{item.children}
|
|
|
|
</GroupButton>
|
|
|
|
)}
|
2019-07-31 11:43:05 +00:00
|
|
|
</GroupMenuWrapper>
|
2019-08-22 08:05:03 +00:00
|
|
|
{moreItems.length > 0 &&
|
|
|
|
<GroupButton
|
|
|
|
id="moreMenu"
|
|
|
|
isDropdown={true}
|
|
|
|
label={moreLabel}
|
|
|
|
>
|
|
|
|
{moreItems.map((item, i) =>
|
2019-07-30 11:17:19 +00:00
|
|
|
<DropDownItem
|
|
|
|
key={`moreNavItem-${i}`}
|
|
|
|
label={item.label}
|
2019-08-21 11:44:30 +00:00
|
|
|
disabled={item.disabled}
|
2019-07-31 19:28:55 +00:00
|
|
|
onClick={this.groupButtonClick.bind(this, item)}
|
2019-07-30 11:17:19 +00:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</GroupButton>
|
2019-07-25 11:00:03 +00:00
|
|
|
}
|
2019-08-22 08:05:03 +00:00
|
|
|
<CloseButton title={closeTitle} onClick={this.closeMenu} />
|
2019-07-30 11:17:19 +00:00
|
|
|
</StyledGroupButtonsMenu>
|
|
|
|
);
|
|
|
|
}
|
2019-06-17 08:58:02 +00:00
|
|
|
}
|
|
|
|
|
2019-07-25 11:00:03 +00:00
|
|
|
GroupButtonsMenu.propTypes = {
|
2019-07-30 11:17:19 +00:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
onClose: PropTypes.func,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
onSelect: PropTypes.func,
|
|
|
|
menuItems: PropTypes.array,
|
|
|
|
checked: PropTypes.bool,
|
|
|
|
selected: PropTypes.string,
|
|
|
|
visible: PropTypes.bool,
|
|
|
|
moreLabel: PropTypes.string,
|
|
|
|
closeTitle: PropTypes.string
|
2019-07-22 07:59:31 +00:00
|
|
|
}
|
|
|
|
|
2019-06-17 08:58:02 +00:00
|
|
|
export default GroupButtonsMenu;
|