|
1 | 1 | import PropTypes from 'prop-types'; |
2 | 2 | import React, { forwardRef, useCallback, useRef, useState } from 'react'; |
| 3 | +import styled from 'styled-components'; |
| 4 | +import { remSize, prop } from '../../theme'; |
3 | 5 | import { useModalClose } from '../../common/useModalClose'; |
4 | 6 | import DownArrowIcon from '../../images/down-filled-triangle.svg'; |
5 | | -import { DropdownWrapper } from '../Dropdown'; |
6 | 7 |
|
7 | 8 | // TODO: enable arrow keys to navigate options from list |
| 9 | +const DropdownWrapper = styled.ul` |
| 10 | + background-color: ${prop('Modal.background')}; |
| 11 | + border: 1px solid ${prop('Modal.border')}; |
| 12 | + box-shadow: 0 0 18px 0 ${prop('shadowColor')}; |
| 13 | + color: ${prop('primaryTextColor')}; |
| 14 | + |
| 15 | + position: absolute; |
| 16 | + right: ${(props) => (props.right ? 0 : 'initial')}; |
| 17 | + left: ${(props) => (props.left ? 0 : 'initial')}; |
| 18 | + |
| 19 | + ${(props) => props.align === 'right' && 'right: 0;'} |
| 20 | + ${(props) => props.align === 'left' && 'left: 0;'} |
| 21 | + |
| 22 | + |
| 23 | + text-align: left; |
| 24 | + width: ${remSize(180)}; |
| 25 | + display: flex; |
| 26 | + flex-direction: column; |
| 27 | + height: auto; |
| 28 | + z-index: 2; |
| 29 | + border-radius: ${remSize(6)}; |
| 30 | + |
| 31 | + & li:first-child { |
| 32 | + border-radius: ${remSize(5)} ${remSize(5)} 0 0; |
| 33 | + } |
| 34 | + & li:last-child { |
| 35 | + border-radius: 0 0 ${remSize(5)} ${remSize(5)}; |
| 36 | + } |
| 37 | + |
| 38 | + & li:hover { |
| 39 | + background-color: ${prop('Button.primary.hover.background')}; |
| 40 | + color: ${prop('Button.primary.hover.foreground')}; |
| 41 | + |
| 42 | + * { |
| 43 | + color: ${prop('Button.primary.hover.foreground')}; |
| 44 | + } |
| 45 | + } |
| 46 | + |
| 47 | + li { |
| 48 | + height: ${remSize(36)}; |
| 49 | + cursor: pointer; |
| 50 | + display: flex; |
| 51 | + align-items: center; |
| 52 | + |
| 53 | + & button, |
| 54 | + & button span, |
| 55 | + & a { |
| 56 | + padding: ${remSize(8)} ${remSize(16)}; |
| 57 | + font-size: ${remSize(12)}; |
| 58 | + } |
| 59 | + |
| 60 | + * { |
| 61 | + text-align: left; |
| 62 | + justify-content: left; |
| 63 | + |
| 64 | + color: ${prop('primaryTextColor')}; |
| 65 | + width: 100%; |
| 66 | + justify-content: flex-start; |
| 67 | + } |
| 68 | + |
| 69 | + & button span { |
| 70 | + padding: 0px; |
| 71 | + } |
| 72 | + } |
| 73 | +`; |
8 | 74 |
|
9 | 75 | const DropdownMenu = forwardRef( |
10 | 76 | ( |
|
0 commit comments