157 lines
3.8 KiB
JavaScript
157 lines
3.8 KiB
JavaScript
import Radium from 'radium'
|
|
import PropTypes from 'prop-types'
|
|
import React, { Component } from 'react'
|
|
import { Box, Icon } from '.'
|
|
import { sizeInfo, colorInfo, fontInfo } from './style'
|
|
import downArrowImage from './images/down-arrow.svg'
|
|
import upArrowImage from './images/up-arrow.svg'
|
|
import autobind from 'autobind-decorator'
|
|
|
|
@Radium
|
|
export class DropdownList extends Component {
|
|
static propTypes = {
|
|
data: PropTypes.array,
|
|
render: PropTypes.func.isRequired,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
open: false,
|
|
}
|
|
}
|
|
|
|
@autobind
|
|
handleClick(e) {
|
|
this.setState({ open: !this.state.open })
|
|
}
|
|
|
|
render() {
|
|
const { data, render } = this.props
|
|
const { open } = this.state
|
|
const dropDownIconSize = 20
|
|
const dropdownIconMargin = 8
|
|
const dropdownBackground = 'white'
|
|
const selectedItem = data ? data[0] : <span />
|
|
const border = { width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }
|
|
|
|
let dropdown = null
|
|
|
|
if (open) {
|
|
dropdown = (
|
|
<Box
|
|
borderLeft={border}
|
|
borderRight={border}
|
|
borderBottom={border}
|
|
radius={{ bottomLeft: sizeInfo.formBoxRadius, bottomRight: sizeInfo.formBoxRadius }}
|
|
background={dropdownBackground}
|
|
style={{
|
|
height: 200,
|
|
zIndex: 100,
|
|
position: 'absolute',
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Box
|
|
borderTop={border}
|
|
borderLeft={border}
|
|
borderRight={border}
|
|
borderBottom={open ? { width: sizeInfo.listBorderWidth, color: 'transparent' } : { width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
|
|
radius={open ? { topLeft: sizeInfo.formBoxRadius, topRight: sizeInfo.formBoxRadius } : sizeInfo.formBoxRadius}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: fontInfo.size.large,
|
|
fontFamily: fontInfo.family,
|
|
}}>
|
|
<div style={{ flexGrow: 1 }}>
|
|
{render(selectedItem)}
|
|
</div>
|
|
<div>
|
|
<img src={open ? upArrowImage : downArrowImage}
|
|
style={{
|
|
verticalAlign: 'middle',
|
|
width: dropDownIconSize,
|
|
height: dropDownIconSize,
|
|
margin: dropdownIconMargin,
|
|
}}
|
|
onClick={this.handleClick} />
|
|
</div>
|
|
</Box>
|
|
{dropdown}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
DropdownList.Item = Radium(class ListItem extends Component {
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
active: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
render() {
|
|
const { children, active, onClick } = this.props
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
background: active ? colorInfo.listBackgroundActive : 'transparent',
|
|
':hover': {
|
|
background: colorInfo.listBackgroundHover
|
|
},
|
|
}} onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
|
|
DropdownList.Icon = Radium(class ListIcon extends Component {
|
|
static propTypes = {
|
|
name: PropTypes.string,
|
|
size: PropTypes.number,
|
|
}
|
|
|
|
render() {
|
|
const { size, name } = this.props
|
|
let source = Icon.svgs[name] || Icon.svgs['placeholder']
|
|
|
|
return (
|
|
<img src={source} style={{
|
|
verticalAlign: 'middle',
|
|
width: size,
|
|
height: size,
|
|
margin: sizeInfo.listIconMargin,
|
|
}} />
|
|
)
|
|
}
|
|
})
|
|
|
|
DropdownList.Text = Radium(class ListText extends Component {
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
}
|
|
|
|
render() {
|
|
const { children } = this.props
|
|
|
|
return (
|
|
<span style={{
|
|
color: fontInfo.color.normal,
|
|
align: 'left',
|
|
textAlign: 'left',
|
|
cursor: 'default',
|
|
paddingLeft: 8,
|
|
}}>{children}</span>
|
|
)
|
|
}
|
|
})
|