2016-06-02 15:26:48 +00:00
|
|
|
import React from 'react'
|
2017-05-05 01:38:03 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2016-06-02 15:26:48 +00:00
|
|
|
import InlineSVG from 'svg-inline-react'
|
|
|
|
|
2016-06-02 17:21:31 +00:00
|
|
|
import * as SVGs from '../svgs'
|
2016-06-02 15:26:48 +00:00
|
|
|
|
|
|
|
export default class Anchors extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
2017-04-07 21:09:30 +00:00
|
|
|
let defaultCategory = null
|
|
|
|
for (let category of props.categories) {
|
|
|
|
if (category.first) {
|
|
|
|
defaultCategory = category
|
|
|
|
break
|
|
|
|
}
|
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
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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,
|
|
|
|
isSelected = name == selected
|
2016-07-08 17:56:29 +00:00
|
|
|
|
2017-04-07 21:09:30 +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()]}
|
2016-06-02 18:58:19 +00:00
|
|
|
onClick={() => onAnchorClick(category, i)}
|
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
|
|
|
>
|
|
|
|
<InlineSVG src={SVGs[name]} />
|
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 = {
|
2017-05-05 01:38:03 +00:00
|
|
|
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
|
|
|
}
|