Web: Components : GroupButtonsMenu : Fixed render
This commit is contained in:
Ilya Oleshko
parent
97c5c41aef
commit
d5bf9d0d82
@ -1,70 +1,73 @@
|
||||
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';
|
||||
import throttle from 'lodash/throttle';
|
||||
import { isArrayEqual } from '../../utils/array';
|
||||
import { tablet } from '../../utils/device'
|
||||
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";
|
||||
import throttle from "lodash/throttle";
|
||||
import { isArrayEqual } from "../../utils/array";
|
||||
import { tablet } from "../../utils/device";
|
||||
|
||||
const StyledGroupButtonsMenu = styled.div`
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 10px 18px -8px rgba(0, 0, 0, 0.100306);
|
||||
height: 57px;
|
||||
list-style: none;
|
||||
padding: 0 18px 19px 0;
|
||||
width: ${props => props.containerWidth ? props.containerWidth + 'px' : '100%'};;
|
||||
white-space: nowrap;
|
||||
display: ${props => props.visible ? 'block' : 'none'};
|
||||
z-index: 189;
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 10px 18px -8px rgba(0, 0, 0, 0.100306);
|
||||
height: 57px;
|
||||
list-style: none;
|
||||
padding: 0 18px 19px 0;
|
||||
width: ${props =>
|
||||
props.containerWidth ? props.containerWidth + "px" : "100%"};
|
||||
white-space: nowrap;
|
||||
display: ${props => (props.visible ? "block" : "none")};
|
||||
z-index: 189;
|
||||
`;
|
||||
|
||||
const CloseButton = styled.div`
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 8px;
|
||||
|
||||
@media ${tablet} {
|
||||
right: 4px;
|
||||
}
|
||||
@media ${tablet} {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
|
||||
&:before, &:after {
|
||||
background-color: #555F65;
|
||||
}
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
content: ' ';
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
background-color: #D0D5DA;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
background-color: #555f65;
|
||||
}
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
content: " ";
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
background-color: #d0d5da;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const GroupMenuWrapper = styled.div`
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
class GroupButtonsMenu extends React.PureComponent {
|
||||
class GroupButtonsMenu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -72,17 +75,17 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
priorityItems: props.menuItems,
|
||||
moreItems: [],
|
||||
visible: props.visible
|
||||
}
|
||||
};
|
||||
|
||||
this.throttledResize = throttle(this.updateMenu, 300);
|
||||
}
|
||||
|
||||
closeMenu = (e) => {
|
||||
closeMenu = e => {
|
||||
this.setState({ visible: false });
|
||||
this.props.onClose && this.props.onClose(e);
|
||||
};
|
||||
|
||||
groupButtonClick = (e) => {
|
||||
groupButtonClick = e => {
|
||||
const { priorityItems } = this.state;
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const item = priorityItems[index];
|
||||
@ -92,7 +95,7 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
item.onClick && item.onClick(e);
|
||||
};
|
||||
|
||||
groupMoreMenuButtonClick = (e) => {
|
||||
groupMoreMenuButtonClick = e => {
|
||||
const { moreItems } = this.state;
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const item = moreItems[index];
|
||||
@ -110,8 +113,8 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
|
||||
this.widthsArray = groupMenuItemsArray.map(item => item.offsetWidth);
|
||||
|
||||
window.addEventListener('resize', this.throttledResize);
|
||||
window.addEventListener('orientationchange', this.throttledResize);
|
||||
window.addEventListener("resize", this.throttledResize);
|
||||
window.addEventListener("orientationchange", this.throttledResize);
|
||||
|
||||
this.updateMenu();
|
||||
}
|
||||
@ -122,16 +125,19 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
}
|
||||
|
||||
if (!isArrayEqual(this.props.menuItems, prevProps.menuItems)) {
|
||||
this.setState({ priorityItems: this.props.menuItems, });
|
||||
this.setState({ priorityItems: this.props.menuItems });
|
||||
}
|
||||
|
||||
if (this.state.priorityItems.length !== prevState.priorityItems.length || this.state.moreItems.length !== prevState.moreItems.length) {
|
||||
if (
|
||||
this.state.priorityItems.length !== prevState.priorityItems.length ||
|
||||
this.state.moreItems.length !== prevState.moreItems.length
|
||||
) {
|
||||
this.updateMenu();
|
||||
}
|
||||
}
|
||||
|
||||
countMenuItems = (array, outerWidth, moreWidth) => {
|
||||
const itemsArray = array || []
|
||||
const itemsArray = array || [];
|
||||
let total = (moreWidth || 0) + 80;
|
||||
|
||||
for (let i = 0, len = itemsArray.length; i < len; i++) {
|
||||
@ -148,18 +154,25 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
const groupMenuOuterElement = document.getElementById("groupMenuOuter");
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
const groupMenuOuterValues = groupMenuOuterElement
|
||||
&& groupMenuOuterElement.getBoundingClientRect();
|
||||
const moreMenuWidth = moreMenuElement
|
||||
&& moreMenuElement.getBoundingClientRect().width;
|
||||
const groupMenuOuterValues =
|
||||
groupMenuOuterElement && groupMenuOuterElement.getBoundingClientRect();
|
||||
const moreMenuWidth =
|
||||
moreMenuElement && moreMenuElement.getBoundingClientRect().width;
|
||||
const xWidth = groupMenuOuterValues && groupMenuOuterValues.x;
|
||||
const groupMenuOuterWidth = screenWidth - xWidth;
|
||||
|
||||
const visibleItemsCount = this.countMenuItems(this.widthsArray, groupMenuOuterWidth, moreMenuWidth);
|
||||
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) : [];
|
||||
const moreItems =
|
||||
priorityItems.length !== navItemsCopy.length
|
||||
? navItemsCopy.slice(visibleItemsCount, navItemsCopy.length)
|
||||
: [];
|
||||
|
||||
this.setState({
|
||||
priorityItems: priorityItems,
|
||||
@ -169,8 +182,8 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.throttledResize);
|
||||
window.removeEventListener('orientationchange', this.throttledResize);
|
||||
window.removeEventListener("resize", this.throttledResize);
|
||||
window.removeEventListener("orientationchange", this.throttledResize);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -179,9 +192,13 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
const { priorityItems, moreItems, visible, width } = this.state;
|
||||
|
||||
return (
|
||||
<StyledGroupButtonsMenu id="groupMenuOuter" visible={visible} containerWidth={width} >
|
||||
<StyledGroupButtonsMenu
|
||||
id="groupMenuOuter"
|
||||
visible={visible}
|
||||
containerWidth={width}
|
||||
>
|
||||
<GroupMenuWrapper id="groupMenu">
|
||||
{priorityItems.map((item, i) =>
|
||||
{priorityItems.map((item, i) => (
|
||||
<GroupButton
|
||||
key={`navItem-${i}`}
|
||||
label={item.label}
|
||||
@ -194,19 +211,23 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
disabled={item.disabled}
|
||||
onClick={this.groupButtonClick}
|
||||
data-index={i}
|
||||
{...this.props}
|
||||
activated={item.activated}
|
||||
checked={item.checked}
|
||||
className={item.className}
|
||||
dropDownMaxHeight={item.dropDownMaxHeight}
|
||||
hovered={item.hovered}
|
||||
id={item.id}
|
||||
isIndeterminate={item.isIndeterminate}
|
||||
onChange={item.onChange}
|
||||
opened={item.opened}
|
||||
>
|
||||
{item.children}
|
||||
</GroupButton>
|
||||
)}
|
||||
))}
|
||||
</GroupMenuWrapper>
|
||||
{moreItems.length > 0 &&
|
||||
<GroupButton
|
||||
id="moreMenu"
|
||||
isDropdown={true}
|
||||
label={moreLabel}
|
||||
>
|
||||
{moreItems.map((item, i) =>
|
||||
{moreItems.length > 0 && (
|
||||
<GroupButton id="moreMenu" isDropdown={true} label={moreLabel}>
|
||||
{moreItems.map((item, i) => (
|
||||
<DropDownItem
|
||||
key={`moreNavItem-${i}`}
|
||||
label={item.label}
|
||||
@ -214,9 +235,9 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
onClick={this.groupMoreMenuButtonClick}
|
||||
data-index={i}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
</GroupButton>
|
||||
}
|
||||
)}
|
||||
<CloseButton title={closeTitle} onClick={this.closeMenu} />
|
||||
</StyledGroupButtonsMenu>
|
||||
);
|
||||
@ -234,14 +255,14 @@ GroupButtonsMenu.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
moreLabel: PropTypes.string,
|
||||
closeTitle: PropTypes.string
|
||||
}
|
||||
};
|
||||
|
||||
GroupButtonsMenu.defaultProps = {
|
||||
checked: false,
|
||||
selected: 'Select',
|
||||
selected: "Select",
|
||||
visible: true,
|
||||
moreLabel: 'More',
|
||||
closeTitle: 'Close'
|
||||
}
|
||||
moreLabel: "More",
|
||||
closeTitle: "Close"
|
||||
};
|
||||
|
||||
export default GroupButtonsMenu;
|
||||
export default GroupButtonsMenu;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user