95 lines
2.1 KiB
JavaScript
95 lines
2.1 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'
|
|
|
|
@Radium
|
|
export class List extends Component {
|
|
static propTypes = {
|
|
data: PropTypes.array,
|
|
render: PropTypes.func.isRequired,
|
|
}
|
|
|
|
render() {
|
|
const { data, render } = this.props
|
|
|
|
return (
|
|
<Box
|
|
border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
|
|
radius={sizeInfo.formBoxRadius} style={{
|
|
position: 'absolute',
|
|
overflowY: 'hidden',
|
|
fontSize: fontInfo.size.large,
|
|
fontFamily: fontInfo.family,
|
|
overflow: 'scroll',
|
|
}}>
|
|
{data ? data.map(render) : null}
|
|
</Box>
|
|
)
|
|
}
|
|
}
|
|
|
|
List.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%',
|
|
background: active ? colorInfo.listBackgroundActive : 'transparent',
|
|
':hover': {
|
|
background: colorInfo.listBackgroundHover
|
|
},
|
|
}} onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
|
|
List.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,
|
|
}} />
|
|
)
|
|
}
|
|
})
|
|
List.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',
|
|
}}>{children}</span>
|
|
)
|
|
}
|
|
})
|