Revert Emoji back to a functional component

nolan/hinaloe-test
Etienne Lemay 2017-09-30 11:37:02 -04:00
parent fdb88daa31
commit 22d1a0375d
3 changed files with 79 additions and 88 deletions

View File

@ -146,20 +146,20 @@ export default class Category extends React.Component {
</div>
{emojis && emojis.map((emoji) =>
<Emoji emoji={emoji} {...emojiProps} />
Emoji({ emoji: emoji, ...emojiProps })
)}
{emojis && !emojis.length &&
<div>
<div>
<Emoji
{...emojiProps}
size={38}
emoji='sleuth_or_spy'
onOver={null}
onLeave={null}
onClick={null}
/>
{Emoji({
...emojiProps,
size: 38,
emoji: 'sleuth_or_spy',
onOver: null,
onLeave: null,
onClick: null,
})}
</div>
<div className='emoji-mart-no-results-label'>

View File

@ -23,45 +23,36 @@ const _getSanitizedData = (props) => {
return getSanitizedData(emoji, skin, set)
}
export default class Emoji extends React.PureComponent {
constructor (props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.handleEnter = this.handleEnter.bind(this)
this.handleLeave = this.handleLeave.bind(this)
}
handleClick (e) {
if (!this.props.onClick) { return }
const { onClick } = this.props,
emoji = _getSanitizedData(this.props)
const _handleClick = (e, props) => {
if (!props.onClick) { return }
var { onClick } = props,
emoji = _getSanitizedData(props)
onClick(emoji, e)
}
}
handleEnter (e) {
if (!this.props.onOver) { return }
const { onOver } = this.props,
emoji = _getSanitizedData(this.props)
const _handleOver = (e, props) => {
if (!props.onOver) { return }
var { onOver } = props,
emoji = _getSanitizedData(props)
onOver(emoji, e)
}
}
handleLeave (e) {
if (!this.props.onLeave) { return }
const { onLeave } = this.props,
emoji = _getSanitizedData(this.props)
const _handleLeave = (e, props) => {
if (!props.onLeave) { return }
var { onLeave } = props,
emoji = _getSanitizedData(props)
onLeave(emoji, e)
}
}
render () {
var props = this.props;
const Emoji = (props) => {
for (let k in Emoji.defaultProps) {
if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
props[k] = Emoji.defaultProps[k]
}
}
var { unified, custom, imageUrl } = _getData(props),
style = {},
@ -107,14 +98,12 @@ export default class Emoji extends React.PureComponent {
return <span
key={props.emoji.id || props.emoji}
onClick={this.handleClick}
onMouseEnter={this.handleEnter}
onMouseLeave={this.handleLeave}
onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
className='emoji-mart-emoji'>
<span style={style}>{children}</span>
</span>
}
}
Emoji.propTypes = {
@ -145,3 +134,5 @@ Emoji.defaultProps = {
onLeave: (() => {}),
onClick: (() => {}),
}
export default Emoji

View File

@ -31,7 +31,7 @@ export default class Preview extends React.PureComponent {
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
<Emoji key={emoji.id} emoji={emoji} {...emojiProps} />
{Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
</div>
<div className='emoji-mart-preview-data'>
@ -51,7 +51,7 @@ export default class Preview extends React.PureComponent {
} else {
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
{idleEmoji && idleEmoji.length && <Emoji emoji={idleEmoji} {...emojiProps} />}
{idleEmoji && idleEmoji.length && Emoji({ emoji: idleEmoji, ...emojiProps })}
</div>
<div className='emoji-mart-preview-data'>