SHARE
TWEET

Untitled

a guest Mar 20th, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // @flow
  2. import React, { memo } from "react";
  3. import Downshift from "downshift";
  4. import styled from "@emotion/styled";
  5. import { css } from "@emotion/core";
  6. import theme from "../../../theme";
  7.  
  8. type ListItemsprops = {
  9.   label: string,
  10.   value: any,
  11.   props: any
  12. }
  13. type Props = {
  14.   bg: string,
  15.   listItems: Array<ListItemsprops>,
  16.   icon?: Node,
  17.   clsNameButton: string,
  18.   clsNameMenu: string,
  19.   clsNameMenuItem: string,
  20.   onChange: function
  21. };
  22.  
  23. export const DropdownMenu = ({
  24.   icon,
  25.   listItems = [],
  26.   bg = "rgba(255,255,255,0)",
  27.   clsNameButton = "",
  28.   clsNameMenu = "",
  29.   clsNameMenuItem = "",
  30.   onChange = fn => fn
  31. }: Props) => {
  32.   return (
  33.     <Downshift onChange={onChange}>
  34.       {({
  35.         getItemProps,
  36.         getMenuProps,
  37.         isOpen,
  38.         highlightedIndex,
  39.         selectedItem,
  40.         getToggleButtonProps,
  41.         getRootProps
  42.       }) => {
  43.         return (
  44.           <Box {...getRootProps()}>
  45.             <MenuToggle bg={bg} {...getToggleButtonProps()} className={clsNameButton}>
  46.               {icon ? icon : (<><i /><i /><i /></>)}
  47.             </MenuToggle>
  48.             {isOpen
  49.               ? (
  50.                 <Menu {...getMenuProps()} className={clsNameMenu}>
  51.                   {
  52.                     listItems
  53.                       .map((item, index) => (
  54.                         <MenuItem
  55.                           {...getItemProps({
  56.                             key: item.label,
  57.                             index,
  58.                             item,
  59.                             style: {
  60.                               color: highlightedIndex === index ? theme.colors.links : 'inherit',
  61.                               fontWeight: selectedItem === item ? '500' : '400',
  62.                             },
  63.                           })}
  64.                           {...item.props}
  65.                         >
  66.                           {item.value}
  67.                         </MenuItem>
  68.                       ))
  69.                   }
  70.                 </Menu>
  71.               ) : null}
  72.           </Box>
  73.         )
  74.       }}
  75.     </Downshift>
  76.   );
  77. };
  78.  
  79. const Box = styled.div`
  80.   position: relative;
  81.   width: 1em;
  82.   height: 1em;
  83.   z-index: 2;
  84. `;
  85. const MenuToggle = styled.div`
  86.   width: 3rem;
  87.   height: 3rem;
  88.   border-radius: 3rem;
  89.   cursor: pointer;
  90.   position: absolute;
  91.   left: 50%;
  92.   top: 50%;
  93.   transform: translate(-50%, -50%);
  94.   display: flex;
  95.   flex-direction: column;
  96.   align-items: center;
  97.   justify-content: center;
  98.   background: ${({ bg }) => bg};
  99.  
  100.   i {
  101.     display: block;
  102.     width: .4rem;
  103.     height: .4rem;
  104.     border-radius: .3rem;
  105.     margin: 0.2rem auto;
  106.     background: ${theme.colors.primary};
  107.     opacity: 0.5;
  108.   }
  109.  
  110.   &:hover i {
  111.     opacity: 0.75;
  112.   }
  113. `;
  114. const Menu = styled.ul`
  115.   position: absolute;
  116.   top: 100%;
  117.   right: 0;
  118.   background: #fff;
  119.   border-radius: 0.5rem;
  120.   box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  121.   padding: 1.2rem 0;
  122.   margin: 1rem 0 0;
  123.   min-width: 20rem;
  124.   list-style: none;
  125. `;
  126. const MenuItem = styled.li`
  127.   padding: .6rem 2.4rem;
  128.   color: inherit;
  129.  
  130.   &:hover {
  131.     color: ${theme.colors.links}
  132.   }
  133. `;
  134.  
  135. export default memo(DropdownMenu);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top