2016-06-09 00:22:06 +00:00
|
|
|
import React from 'react'
|
2017-05-05 01:38:03 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2016-06-09 00:22:06 +00:00
|
|
|
|
2017-09-29 14:46:29 +00:00
|
|
|
export default class Skins extends React.PureComponent {
|
2016-06-09 00:22:06 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
opened: false,
|
|
|
|
}
|
2017-09-29 14:46:29 +00:00
|
|
|
|
|
|
|
this.handleClick = this.handleClick.bind(this)
|
2016-06-09 00:22:06 +00:00
|
|
|
}
|
|
|
|
|
2017-09-29 14:46:29 +00:00
|
|
|
handleClick(e) {
|
2018-03-02 18:33:14 +00:00
|
|
|
var skin = parseInt(e.currentTarget.getAttribute('data-skin'))
|
2016-06-09 00:22:06 +00:00
|
|
|
var { onChange } = this.props
|
|
|
|
|
|
|
|
if (!this.state.opened) {
|
|
|
|
this.setState({ opened: true })
|
|
|
|
} else {
|
|
|
|
this.setState({ opened: false })
|
2017-05-01 10:01:25 +00:00
|
|
|
if (skin != this.props.skin) {
|
|
|
|
onChange(skin)
|
|
|
|
}
|
2016-06-09 00:22:06 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-09-17 08:54:22 +00:00
|
|
|
const { skin } = this.props
|
|
|
|
const { opened } = this.state
|
|
|
|
|
|
|
|
const skinToneNodes = []
|
|
|
|
|
|
|
|
for (let i = 0; i < 6; i++) {
|
|
|
|
const skinTone = i + 1
|
|
|
|
const selected = skinTone == skin
|
|
|
|
|
|
|
|
skinToneNodes.push(
|
|
|
|
<span
|
|
|
|
key={`skin-tone-${skinTone}`}
|
2017-10-07 04:02:02 +00:00
|
|
|
className={`emoji-mart-skin-swatch ${selected
|
|
|
|
? 'emoji-mart-skin-swatch-selected'
|
|
|
|
: ''}`}
|
2017-09-17 08:54:22 +00:00
|
|
|
>
|
|
|
|
<span
|
2017-09-29 14:46:29 +00:00
|
|
|
onClick={this.handleClick}
|
|
|
|
data-skin={skinTone}
|
2017-10-07 04:02:02 +00:00
|
|
|
className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}
|
|
|
|
/>
|
2017-09-17 08:54:22 +00:00
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
2016-06-09 00:22:06 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
className={`emoji-mart-skin-swatches ${opened
|
|
|
|
? 'emoji-mart-skin-swatches-opened'
|
|
|
|
: ''}`}
|
|
|
|
>
|
|
|
|
{skinToneNodes}
|
|
|
|
</div>
|
2016-06-09 00:22:06 +00:00
|
|
|
</div>
|
2017-10-07 04:02:02 +00:00
|
|
|
)
|
2016-06-09 00:22:06 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Skins.propTypes = {
|
2017-05-05 01:38:03 +00:00
|
|
|
onChange: PropTypes.func,
|
|
|
|
skin: PropTypes.number.isRequired,
|
2016-06-09 00:22:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Skins.defaultProps = {
|
2017-10-07 04:02:02 +00:00
|
|
|
onChange: () => {},
|
2016-06-09 00:22:06 +00:00
|
|
|
}
|