Tom Kirkpatrick
6 years ago
6 changed files with 359 additions and 1 deletions
@ -0,0 +1,181 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { Box, Flex } from 'rebass' |
|||
import styled, { withTheme } from 'styled-components' |
|||
import FaAngleDown from 'react-icons/lib/fa/angle-down' |
|||
import FaAngleUp from 'react-icons/lib/fa/angle-up' |
|||
import Check from 'components/Icon/Check' |
|||
import Text from 'components/UI/Text' |
|||
|
|||
/** |
|||
* Container |
|||
*/ |
|||
const DropdownContainer = styled(Flex)({}) |
|||
DropdownContainer.defaultProps = { |
|||
flexDirection: 'column', |
|||
flexWrap: 'none', |
|||
display: 'relative' |
|||
} |
|||
|
|||
/** |
|||
* Button |
|||
*/ |
|||
const DropdownButton = styled(Box)({ |
|||
appearance: 'none', |
|||
display: 'inline-block', |
|||
textAlign: 'center', |
|||
lineHeight: 'inherit', |
|||
textDecoration: 'none', |
|||
border: 'none', |
|||
outline: 'none', |
|||
background: 'transparent', |
|||
color: 'inherit', |
|||
cursor: 'pointer' |
|||
}) |
|||
DropdownButton.defaultProps = { |
|||
as: 'button', |
|||
m: 0, |
|||
px: 0, |
|||
py: 2, |
|||
textAlign: 'left' |
|||
} |
|||
|
|||
/** |
|||
* Menu |
|||
*/ |
|||
const MenuContainer = styled(Box)({ |
|||
display: 'relative' |
|||
}) |
|||
|
|||
const Menu = styled(Box)({ |
|||
cursor: 'pointer', |
|||
display: 'inline-block', |
|||
position: 'absolute', |
|||
'z-index': '999', |
|||
'min-width': '70px', |
|||
'list-style-type': 'none', |
|||
'border-radius': '3px', |
|||
'box-shadow': '0 3px 4px 0 rgba(30, 30, 30, 0.5)' |
|||
}) |
|||
Menu.defaultProps = { |
|||
as: 'ul', |
|||
m: 0, |
|||
p: 0, |
|||
bg: 'lightestBackground' |
|||
} |
|||
|
|||
/** |
|||
* MenuItem |
|||
*/ |
|||
const MenuItem = styled(Box)` |
|||
cursor: pointer; |
|||
&:hover { |
|||
background-color: ${props => props.theme.colors.darkestBackground}; |
|||
} |
|||
` |
|||
MenuItem.defaultProps = { |
|||
as: 'li', |
|||
px: 2, |
|||
py: 2 |
|||
} |
|||
|
|||
/** |
|||
* @render react |
|||
* @name Dropdown |
|||
* @example |
|||
* <Dropdown items={[ |
|||
* {name: 'Item 1', key: 'key1'}, |
|||
* {name: 'Item 2', key: 'key2'} |
|||
* ]} activeKey="key1" /> |
|||
*/ |
|||
class Dropdown extends React.Component { |
|||
state = { |
|||
isOpen: false |
|||
} |
|||
onChange = this.onChange.bind(this) |
|||
toggleMenu = this.toggleMenu.bind(this) |
|||
setWrapperRef = this.setWrapperRef.bind(this) |
|||
handleClickOutside = this.handleClickOutside.bind(this) |
|||
|
|||
static propTypes = { |
|||
activeKey: PropTypes.string.isRequired, |
|||
items: PropTypes.arrayOf( |
|||
PropTypes.shape({ |
|||
key: PropTypes.string.isRequired, |
|||
name: PropTypes.string.isRequired |
|||
}) |
|||
).isRequired, |
|||
onChange: PropTypes.func |
|||
} |
|||
|
|||
componentDidMount() { |
|||
document.addEventListener('mousedown', this.handleClickOutside) |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
document.removeEventListener('mousedown', this.handleClickOutside) |
|||
} |
|||
|
|||
onChange(key) { |
|||
const { onChange, activeKey } = this.props |
|||
if (key !== activeKey) { |
|||
if (onChange) { |
|||
onChange(key) |
|||
} |
|||
} |
|||
this.setState({ isOpen: false }) |
|||
} |
|||
|
|||
setWrapperRef(node) { |
|||
this.wrapperRef = node |
|||
} |
|||
|
|||
handleClickOutside(event) { |
|||
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) { |
|||
this.setState({ isOpen: false }) |
|||
} |
|||
} |
|||
|
|||
toggleMenu() { |
|||
const { isOpen } = this.state |
|||
this.setState({ isOpen: !isOpen }) |
|||
} |
|||
|
|||
render() { |
|||
const { isOpen } = this.state |
|||
const { activeKey, items, theme, ...rest } = this.props |
|||
const selectedItem = items.find(c => c.key === activeKey) |
|||
return ( |
|||
<DropdownContainer ref={this.setWrapperRef} {...rest}> |
|||
<DropdownButton type="button" onClick={this.toggleMenu}> |
|||
<Text textAlign="left"> |
|||
{selectedItem ? selectedItem.name : activeKey}{' '} |
|||
{isOpen ? <FaAngleUp /> : <FaAngleDown />} |
|||
</Text> |
|||
</DropdownButton> |
|||
{isOpen && ( |
|||
<MenuContainer> |
|||
<Menu> |
|||
{items.map(item => { |
|||
return ( |
|||
<MenuItem key={item.key} onClick={() => this.onChange(item.key)}> |
|||
<Flex alignItems="center"> |
|||
<Text width="18px"> |
|||
{activeKey === item.key && ( |
|||
<Check height="0.95em" color={theme.colors.superGreen} /> |
|||
)} |
|||
</Text> |
|||
<Text>{item.name}</Text> |
|||
</Flex> |
|||
</MenuItem> |
|||
) |
|||
})} |
|||
</Menu> |
|||
</MenuContainer> |
|||
)} |
|||
</DropdownContainer> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default withTheme(Dropdown) |
|||
@ -0,0 +1,58 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { StateDecorator, Store } from '@sambego/storybook-state' |
|||
import Dropdown from 'components/UI/Dropdown' |
|||
|
|||
const store = new Store({ |
|||
crypto: 'btc', |
|||
fiat: 'usd', |
|||
cryptoCurrencies: [ |
|||
{ |
|||
key: 'btc', |
|||
name: 'BTC' |
|||
}, |
|||
{ |
|||
key: 'bits', |
|||
name: 'bits' |
|||
}, |
|||
{ |
|||
key: 'sats', |
|||
name: 'satoshis' |
|||
} |
|||
], |
|||
fiatCurrencies: [ |
|||
{ |
|||
key: 'usd', |
|||
name: 'USD' |
|||
}, |
|||
{ |
|||
key: 'eur', |
|||
name: 'EUR' |
|||
}, |
|||
{ |
|||
key: 'gbp', |
|||
name: 'GBP' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
storiesOf('Components.Dropdown', module) |
|||
.addDecorator(StateDecorator(store)) |
|||
.add('Crypto', () => { |
|||
return ( |
|||
<Dropdown |
|||
activeKey={store.get('crypto')} |
|||
items={store.get('cryptoCurrencies')} |
|||
onChange={crypto => store.set({ crypto })} |
|||
/> |
|||
) |
|||
}) |
|||
.add('Fiat', () => { |
|||
return ( |
|||
<Dropdown |
|||
activeKey={store.get('fiat')} |
|||
items={store.get('fiatCurrencies')} |
|||
onChange={fiat => store.set({ fiat })} |
|||
/> |
|||
) |
|||
}) |
|||
@ -0,0 +1,30 @@ |
|||
import React from 'react' |
|||
import Dropdown from 'components/UI/Dropdown' |
|||
import renderer from 'react-test-renderer' |
|||
import { dark } from 'themes' |
|||
|
|||
const currencies = [ |
|||
{ |
|||
key: 'btc', |
|||
name: 'BTC' |
|||
}, |
|||
{ |
|||
key: 'bits', |
|||
name: 'bits' |
|||
}, |
|||
{ |
|||
key: 'sats', |
|||
name: 'satoshis' |
|||
} |
|||
] |
|||
|
|||
const setCurrency = jest.fn() |
|||
|
|||
describe('component.Dropdown', () => { |
|||
it('should render correctly', () => { |
|||
const tree = renderer |
|||
.create(<Dropdown theme={dark} activeKey="btc" items={currencies} onClick={setCurrency} />) |
|||
.toJSON() |
|||
expect(tree).toMatchSnapshot() |
|||
}) |
|||
}) |
|||
@ -0,0 +1,81 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`component.Dropdown should render correctly 1`] = ` |
|||
.c2 { |
|||
font-size: m; |
|||
text-align: left; |
|||
} |
|||
|
|||
.c0 { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-flex-wrap: none; |
|||
-ms-flex-wrap: none; |
|||
flex-wrap: none; |
|||
-webkit-flex-direction: column; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.c1 { |
|||
margin: 0px; |
|||
padding-left: 0px; |
|||
padding-right: 0px; |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
display: inline-block; |
|||
text-align: center; |
|||
line-height: inherit; |
|||
-webkit-text-decoration: none; |
|||
text-decoration: none; |
|||
border: none; |
|||
outline: none; |
|||
background: transparent; |
|||
color: inherit; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
<div |
|||
className="c0" |
|||
display="relative" |
|||
onClick={[MockFunction]} |
|||
> |
|||
<button |
|||
className="c1" |
|||
onClick={[Function]} |
|||
type="button" |
|||
> |
|||
<div |
|||
className="c2" |
|||
fontSize="m" |
|||
> |
|||
BTC |
|||
|
|||
<svg |
|||
fill="currentColor" |
|||
height="1em" |
|||
preserveAspectRatio="xMidYMid meet" |
|||
style={ |
|||
Object { |
|||
"color": undefined, |
|||
"verticalAlign": "middle", |
|||
} |
|||
} |
|||
viewBox="0 0 40 40" |
|||
width="1em" |
|||
> |
|||
<g> |
|||
<path |
|||
d="m31 16.4q0 0.3-0.2 0.5l-10.4 10.4q-0.3 0.3-0.5 0.3t-0.6-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l1.2-1.1q0.2-0.2 0.5-0.2t0.5 0.2l8.8 8.8 8.7-8.8q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.2 0.2 0.5z" |
|||
/> |
|||
</g> |
|||
</svg> |
|||
</div> |
|||
</button> |
|||
</div> |
|||
`; |
|||
Loading…
Reference in new issue