jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
129 lines (117 loc) • 4.47 kB
JavaScript
import { createElement, Fragment } from 'react';
import { darken as curriedDarken } from '../../../../../node_modules/polished/dist/polished.es.js';
import styled, { css, createGlobalStyle } from 'styled-components';
import * as reachMenuButtonGlobbalStyle from '../../../../../node_modules/@reach/menu-button/styles.css.js';
import { ArrowDownIcon } from '../../../../icons/ArrowDown.js';
import { MenuButton, Menu, MenuList } from '../../../../../node_modules/@reach/menu-button/es/index.js';
/**
* @file index.tsx
*
* @fileoverview Renders a menu button.
*/
const MenuButtonTriggerStyles = css `
body [data-reach-menu-button] {
position: relative;
font-size: ${props => props.theme.button.fontSize};
text-transform: ${props => props.theme.button.textTransform};
letter-spacing: ${props => props.theme.button.letterSpacing};
padding: ${props => props.theme.button.padding};
border-radius: ${props => props.theme.button.borderRadius};
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: ${props => props.theme.button.color[props.buttonStyle]};
background: ${props => props.theme.button.backgroundColor[props.buttonStyle]};
border-width: ${props => props.theme.button.borderWidth};
border-style: ${props => props.theme.button.borderStyle};
border-color: ${props => props.theme.button.borderColor[props.buttonStyle]};
&:focus,
&:active {
background: ${props => curriedDarken(0.1, props.theme.button.backgroundColor[props.buttonStyle])};
}
svg:last-child:not(:only-child) {
margin-left: 0.5rem;
}
svg:first-child:not(:only-child) {
margin-right: 0.5rem;
}
${props => (props.iconed ? 'padding-right: 2rem' : 'padding: 0')};
}
`;
const menuButtonStyles = css `
body [data-reach-menu-list] {
box-shadow: rgba(0, 0, 0, 0.12) 0px 18px 30px 0px;
background: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: rgb(238, 238, 238);
border-image: initial;
border-radius: 3px;
padding: 8px 0px;
}
body [data-reach-menu-item] {
padding: 0.8rem 1rem;
font-size: 0.9rem;
display: flex;
align-items: center;
&[data-selected] {
background: ${props => props.theme.colors.gray0};
color: ${props => props.theme.font.color};
}
svg:first-child:not(:only-child) {
margin-right: 1rem;
}
svg:last-child:not(:only-child) {
margin-left: 1rem;
}
}
body [data-reach-menu-item] {
padding: 0.8rem 1rem;
font-size: 0.9rem;
display: flex;
align-items: center;
&[data-selected] {
background: ${props => props.theme.colors.gray0};
color: ${props => props.theme.font.color};
}
svg:first-child:not(:only-child) {
margin-right: 1rem;
}
svg:last-child:not(:only-child) {
margin-left: 1rem;
}
}
`;
const GlobalMenuButtonStyle = createGlobalStyle `
${reachMenuButtonGlobbalStyle}
${menuButtonStyles}
`;
const GloabMenuButtonTriggerStyles = createGlobalStyle `
${MenuButtonTriggerStyles}
`;
const StyledMenuButtonEmpty = styled(MenuButton) `
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
`;
/**
* A menu button can be used as a way to combine multiple actions into one single element.
* Useful for user menu and other kind of multi-level actions it is fully accessible and
* makes sure focus is properly handled when using keyboards or other kind of assitive technologies.
*/
const MenuDropdownButton = ({ button, children, styledButton = true, buttonStyle = 'default', iconed = true }) => {
return (createElement(Fragment, null,
createElement(GlobalMenuButtonStyle, { buttonStyle: buttonStyle, iconed: iconed }),
createElement(Menu, null,
styledButton ? (createElement(Fragment, null,
createElement(GloabMenuButtonTriggerStyles, { buttonStyle: buttonStyle, iconed: iconed }),
createElement(MenuButton, null,
createElement("span", null, button),
iconed && createElement(ArrowDownIcon, { title: "Open" })))) : (createElement(StyledMenuButtonEmpty, null, button)),
createElement(MenuList, null, children))));
};
export default MenuDropdownButton;
export { GloabMenuButtonTriggerStyles, GlobalMenuButtonStyle, MenuButtonTriggerStyles, MenuDropdownButton, menuButtonStyles };