-
Notifications
You must be signed in to change notification settings - Fork 797
/
anchors.js
57 lines (46 loc) 路 1.4 KB
/
anchors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react'
import PropTypes from 'prop-types'
import SVGs from '../svgs'
export default class Anchors extends React.Component {
constructor(props) {
super(props)
const {categories} = props
const defaultCategory = categories.filter(category => category.first)[0]
this.state = {
selected: defaultCategory.name
}
}
render() {
var { categories, onAnchorClick, color, i18n } = this.props,
{ selected } = this.state
return <div className='emoji-mart-anchors'>
{categories.map((category, i) => {
var { name, anchor } = category,
isSelected = name == selected
if (anchor === false) {
return null
}
return (
<span
key={name}
title={i18n.categories[name.toLowerCase()]}
onClick={() => onAnchorClick(category, i)}
className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
style={{ color: isSelected ? color : null }}
>
<div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
</span>
)
})}
</div>
}
}
Anchors.propTypes = {
categories: PropTypes.array,
onAnchorClick: PropTypes.func,
}
Anchors.defaultProps = {
categories: [],
onAnchorClick: (() => {}),
}