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
|
|
|
|
2017-09-29 14:46:29 +00:00
|
|
|
export default class Anchors extends React.PureComponent {
|
2016-06-02 15:26:48 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
2018-03-27 18:51:26 +00:00
|
|
|
let defaultCategory = props.categories.filter(
|
|
|
|
(category) => category.first,
|
|
|
|
)[0]
|
2016-07-08 17:56:29 +00:00
|
|
|
|
2016-06-02 15:26:48 +00:00
|
|
|
this.state = {
|
2017-10-07 04:02:02 +00:00
|
|
|
selected: defaultCategory.name,
|
2016-06-02 15:26:48 +00:00
|
|
|
}
|
2017-09-29 14:46:29 +00:00
|
|
|
|
|
|
|
this.handleClick = this.handleClick.bind(this)
|
|
|
|
}
|
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
handleClick(e) {
|
2017-09-29 14:46:29 +00:00
|
|
|
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() {
|
2018-06-22 21:23:42 +00:00
|
|
|
var { categories, color, i18n, icons } = this.props,
|
2017-10-07 04:02:02 +00:00
|
|
|
{ selected } = this.state
|
2016-06-02 15:26:48 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
return (
|
2019-03-09 21:43:42 +00:00
|
|
|
<nav className="emoji-mart-anchors" aria-label={i18n.categorieslabel}>
|
2017-10-07 04:02:02 +00:00
|
|
|
{categories.map((category, i) => {
|
2017-12-15 20:30:58 +00:00
|
|
|
var { id, name, anchor } = category,
|
2017-09-29 18:33:08 +00:00
|
|
|
isSelected = name == selected
|
2016-07-08 17:56:29 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
if (anchor === false) {
|
|
|
|
return null
|
|
|
|
}
|
2016-06-02 15:26:48 +00:00
|
|
|
|
2019-06-27 20:18:16 +00:00
|
|
|
const iconId = id.startsWith('custom-') ? 'custom' : id
|
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
return (
|
2019-03-09 21:43:42 +00:00
|
|
|
<button
|
2017-12-15 20:30:58 +00:00
|
|
|
key={id}
|
2019-03-09 21:43:42 +00:00
|
|
|
aria-label={i18n.categories[id]}
|
2017-12-15 20:30:58 +00:00
|
|
|
title={i18n.categories[id]}
|
2017-10-07 04:02:02 +00:00
|
|
|
data-index={i}
|
2019-05-01 14:41:07 +00:00
|
|
|
type={'button'}
|
2017-10-07 04:02:02 +00:00
|
|
|
onClick={this.handleClick}
|
2018-03-27 18:51:26 +00:00
|
|
|
className={`emoji-mart-anchor ${
|
|
|
|
isSelected ? 'emoji-mart-anchor-selected' : ''
|
|
|
|
}`}
|
2017-10-07 04:02:02 +00:00
|
|
|
style={{ color: isSelected ? color : null }}
|
|
|
|
>
|
2018-06-22 21:23:42 +00:00
|
|
|
<div className="emoji-mart-anchor-icon">
|
2019-06-27 20:18:16 +00:00
|
|
|
{icons.categories[iconId]()}
|
2018-06-22 21:23:42 +00:00
|
|
|
</div>
|
2017-10-07 04:02:02 +00:00
|
|
|
<span
|
|
|
|
className="emoji-mart-anchor-bar"
|
|
|
|
style={{ backgroundColor: color }}
|
|
|
|
/>
|
2019-03-09 21:43:42 +00:00
|
|
|
</button>
|
2017-10-07 04:02:02 +00:00
|
|
|
)
|
|
|
|
})}
|
2019-03-09 21:43:42 +00:00
|
|
|
</nav>
|
2017-10-07 04:02:02 +00:00
|
|
|
)
|
2016-06-02 15:26:48 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-18 19:24:52 +00:00
|
|
|
Anchors.propTypes /* remove-proptypes */ = {
|
2017-05-05 01:38:03 +00:00
|
|
|
categories: PropTypes.array,
|
|
|
|
onAnchorClick: PropTypes.func,
|
2018-06-22 21:23:42 +00:00
|
|
|
icons: PropTypes.object,
|
2016-06-02 15:26:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Anchors.defaultProps = {
|
|
|
|
categories: [],
|
2017-10-07 04:02:02 +00:00
|
|
|
onAnchorClick: () => {},
|
2018-06-22 21:23:42 +00:00
|
|
|
icons: {},
|
2016-06-02 15:26:48 +00:00
|
|
|
}
|