Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 12x 12x 12x 12x 12x 12x 12x 1x 12x 108x 1x 1x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import ImageMap from '../../Atoms/Images/ImageMap' const Wrapper = styled.select` margin-bottom: 0; min-width: 100px; box-sizing: border-box; color: ${(props) => props.theme['dropdownColor']}; background-color: ${(props) => props.theme['dropdownBackgroundColor']}; background-size: 15px; background-repeat: no-repeat; background-position: 95% 0%; background-image: url(${ImageMap.arrowDownSolid}); appearance: none; border: none; font-family: ${(props) => props.theme['fontPrimary']}; font-size: ${(props) => props.size}; font-weight: ${(props) => props.weight}; text-transform: ${(props) => props.uppercase ? 'uppercase' : props.capitalize ? 'capitalize' : 'none'}; font-style: ${(props) => (props.italic ? 'italic' : 'normal')}; border-radius: 5px; height: 2.5rem; line-height: 2.5rem; cursor: pointer; outline: none; text-align: left; ` const SingleDropdown = ({ items, ...rest }) => ( <Wrapper {...rest}> {items.map((item) => ( <option key={item.value} value={item.value}> {item.text} </option> ))} </Wrapper> ) SingleDropdown.propTypes = { capitalize: PropTypes.bool, italic: PropTypes.bool, items: PropTypes.arrayOf( PropTypes.shape({ text: PropTypes.string, value: PropTypes.any, }), ).isRequired, onChange: PropTypes.func.isRequired, size: PropTypes.string, uppercase: PropTypes.bool, value: PropTypes.any, weight: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900]), } SingleDropdown.defaultProps = { capitalize: false, italic: false, size: '16px', uppercase: false, weight: 300, } export default SingleDropdown |