2019-06-06 07:12:28 +00:00
|
|
|
import React, { useState, useEffect, useRef } from 'react'
|
|
|
|
import styled, { css } from 'styled-components'
|
|
|
|
import PropTypes from 'prop-types'
|
2019-06-07 13:12:57 +00:00
|
|
|
import { Icons } from '../icons'
|
2019-06-10 12:28:54 +00:00
|
|
|
import DropDown from '../drop-down'
|
2019-06-06 07:12:28 +00:00
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
const textColor = '#333333',
|
|
|
|
disabledTextColor = '#A3A9AE';
|
2019-06-06 07:12:28 +00:00
|
|
|
|
|
|
|
const activatedCss = css`
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const hoveredCss = css`
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledGroupButton = styled.div`
|
|
|
|
position: relative;
|
|
|
|
display: inline-flex;
|
|
|
|
vertical-align: middle;
|
|
|
|
`;
|
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
const StyledDropdownToggle = styled.div`
|
|
|
|
font-family: Open Sans;
|
|
|
|
font-style: normal;
|
|
|
|
font-weight: ${props => props.fontWeight};
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 19px;
|
|
|
|
|
2019-06-06 07:12:28 +00:00
|
|
|
cursor: default;
|
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
color: ${props => (props.disabled ? disabledTextColor : textColor)};
|
2019-06-06 07:12:28 +00:00
|
|
|
|
|
|
|
float: left;
|
2019-06-25 15:01:04 +00:00
|
|
|
height: 19px;
|
|
|
|
margin: 18px 12px 19px 12px;
|
2019-06-06 07:12:28 +00:00
|
|
|
overflow: hidden;
|
2019-06-25 15:01:04 +00:00
|
|
|
padding: 0px;
|
|
|
|
|
2019-06-06 07:12:28 +00:00
|
|
|
text-align: center;
|
|
|
|
text-decoration: none;
|
|
|
|
white-space: nowrap;
|
2019-06-25 15:01:04 +00:00
|
|
|
|
2019-06-06 07:12:28 +00:00
|
|
|
user-select: none;
|
|
|
|
-o-user-select: none;
|
|
|
|
-moz-user-select: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
|
|
|
${props => !props.disabled && (props.activated ? `${activatedCss}` : css`
|
|
|
|
&:active {
|
|
|
|
${activatedCss}
|
|
|
|
}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
${props => !props.disabled && (props.hovered ? `${hoveredCss}` : css`
|
|
|
|
&:hover {
|
|
|
|
${hoveredCss}
|
|
|
|
}`)
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-10 09:40:54 +00:00
|
|
|
const Caret = styled(Icons.ExpanderDownIcon)`
|
2019-06-07 13:12:57 +00:00
|
|
|
width: 10px;
|
2019-06-06 07:12:28 +00:00
|
|
|
margin-left: 4px;
|
2019-06-25 15:01:04 +00:00
|
|
|
`;
|
2019-06-06 07:12:28 +00:00
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
const Separator = styled.div`
|
|
|
|
vertical-align: middle;
|
|
|
|
border: 0.5px solid #ECEEF1;
|
|
|
|
width: 1px;
|
|
|
|
height: 24px;
|
|
|
|
margin-top: 16px;
|
2019-06-06 07:12:28 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const useOuterClickNotifier = (onOuterClick, ref) => {
|
|
|
|
useEffect(() => {
|
|
|
|
const handleClick = (e) => !ref.current.contains(e.target) && onOuterClick(e);
|
|
|
|
|
|
|
|
if (ref.current) {
|
|
|
|
document.addEventListener("click", handleClick);
|
|
|
|
}
|
|
|
|
|
|
|
|
return () => document.removeEventListener("click", handleClick);
|
|
|
|
},
|
|
|
|
[onOuterClick, ref]
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const GroupButton = (props) => {
|
2019-06-25 15:01:04 +00:00
|
|
|
const { label, isDropdown, opened, disabled, action, isSeparator } = props;
|
2019-06-06 07:12:28 +00:00
|
|
|
const [isOpen, toggle] = useState(opened);
|
|
|
|
const ref = useRef(null);
|
|
|
|
|
|
|
|
useOuterClickNotifier((e) => toggle(false), ref);
|
|
|
|
|
2019-06-10 12:28:54 +00:00
|
|
|
const dropMenu = <DropDown isOpen={isOpen} {...props}/>;
|
2019-06-06 07:12:28 +00:00
|
|
|
|
2019-06-25 15:01:04 +00:00
|
|
|
const dropDownButton =
|
2019-06-07 13:12:57 +00:00
|
|
|
<StyledDropdownToggle {...props} onClick={() => { disabled ? false : toggle(!isOpen) }}>
|
2019-06-25 15:01:04 +00:00
|
|
|
{label}
|
|
|
|
<Caret size='small' color={disabled ? disabledTextColor : textColor} />
|
2019-06-06 07:12:28 +00:00
|
|
|
</StyledDropdownToggle>;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledGroupButton ref={ref} {...props}>
|
|
|
|
{isDropdown
|
2019-06-25 15:01:04 +00:00
|
|
|
? {...dropDownButton}
|
|
|
|
: <StyledDropdownToggle {...props} onClick={action}>
|
|
|
|
{label}
|
2019-06-06 07:12:28 +00:00
|
|
|
</StyledDropdownToggle>
|
|
|
|
}
|
2019-06-25 15:01:04 +00:00
|
|
|
{isSeparator && <Separator/>}
|
|
|
|
{isDropdown && {...dropMenu}}
|
2019-06-06 07:12:28 +00:00
|
|
|
</StyledGroupButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
GroupButton.propTypes = {
|
2019-06-25 15:01:04 +00:00
|
|
|
label: PropTypes.string,
|
2019-06-06 07:12:28 +00:00
|
|
|
disabled: PropTypes.bool,
|
|
|
|
activated: PropTypes.bool,
|
|
|
|
opened: PropTypes.bool,
|
|
|
|
hovered: PropTypes.bool,
|
|
|
|
isDropdown: PropTypes.bool,
|
2019-06-25 15:01:04 +00:00
|
|
|
isSeparator: PropTypes.bool,
|
2019-06-10 11:29:51 +00:00
|
|
|
tabIndex: PropTypes.number,
|
2019-06-25 15:01:04 +00:00
|
|
|
action: PropTypes.func,
|
|
|
|
fontWeight: PropTypes.string
|
2019-06-06 07:12:28 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
GroupButton.defaultProps = {
|
2019-06-25 15:01:04 +00:00
|
|
|
label: 'Group button',
|
2019-06-06 07:12:28 +00:00
|
|
|
disabled: false,
|
|
|
|
activated: false,
|
|
|
|
opened: false,
|
|
|
|
hovered: false,
|
|
|
|
isDropdown: false,
|
2019-06-25 15:01:04 +00:00
|
|
|
isSeparator: false,
|
2019-06-10 11:29:51 +00:00
|
|
|
tabIndex: -1,
|
2019-06-25 15:01:04 +00:00
|
|
|
action: (e) => console.log('Button "' + e.target.innerText + '" clicked!'),
|
|
|
|
fontWeight: 600
|
2019-06-06 07:12:28 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default GroupButton
|