emoji-mart-lazyload/src/components/anchors.js

68 lines
1.6 KiB
JavaScript
Raw Normal View History

2016-06-02 15:26:48 +00:00
import React from 'react'
import PropTypes from 'prop-types'
2016-06-02 15:26:48 +00:00
2017-09-29 18:33:08 +00:00
import SVGs from '../svgs'
2016-06-02 15:26:48 +00:00
export default class Anchors extends React.PureComponent {
2016-06-02 15:26:48 +00:00
constructor(props) {
super(props)
2017-09-17 08:54:22 +00:00
const {categories} = props
const defaultCategory = categories.filter(category => category.first)[0]
2016-07-08 17:56:29 +00:00
2016-06-02 15:26:48 +00:00
this.state = {
2016-07-08 17:56:29 +00:00
selected: defaultCategory.name
2016-06-02 15:26:48 +00:00
}
this.handleClick = this.handleClick.bind(this)
}
handleClick (e) {
var index = e.currentTarget.getAttribute('data-index')
var { categories, onAnchorClick } = this.props
onAnchorClick(categories[index], index)
2016-06-02 15:26:48 +00:00
}
render() {
2016-10-27 03:22:59 +00:00
var { categories, onAnchorClick, color, i18n } = this.props,
2016-06-02 15:26:48 +00:00
{ selected } = this.state
2016-07-27 15:35:12 +00:00
return <div className='emoji-mart-anchors'>
2016-06-02 15:26:48 +00:00
{categories.map((category, i) => {
2016-07-21 19:33:18 +00:00
var { name, anchor } = category,
2017-09-29 18:33:08 +00:00
isSelected = name == selected
2016-07-08 17:56:29 +00:00
if (anchor === false) {
2016-07-08 17:56:29 +00:00
return null
}
2016-06-02 15:26:48 +00:00
2016-06-02 18:58:19 +00:00
return (
<span
key={name}
2016-10-27 03:22:59 +00:00
title={i18n.categories[name.toLowerCase()]}
data-index={i}
onClick={this.handleClick}
2016-07-27 15:35:12 +00:00
className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
2016-07-21 19:33:18 +00:00
style={{ color: isSelected ? color : null }}
2016-06-02 18:58:19 +00:00
>
2017-09-29 18:33:08 +00:00
<div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
2016-07-27 15:35:12 +00:00
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
2016-06-02 18:58:19 +00:00
</span>
)
2016-06-02 15:26:48 +00:00
})}
</div>
}
}
Anchors.propTypes = {
categories: PropTypes.array,
onAnchorClick: PropTypes.func,
2016-06-02 15:26:48 +00:00
}
Anchors.defaultProps = {
categories: [],
2016-06-02 18:58:19 +00:00
onAnchorClick: (() => {}),
2016-06-02 15:26:48 +00:00
}