Merge pull request #329 from missive/fix-emoji-button

fix: use span for non-clickable emojis
nolan/issue-325
Etienne Lemay 2019-03-28 09:27:43 -04:00 committed by GitHub
commit 9b3a4487a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 9 deletions

View File

@ -4,7 +4,7 @@ exports[`Renders <NotFound> component 1`] = `
<div <div
className="emoji-mart-no-results" className="emoji-mart-no-results"
> >
<button <span
aria-label="🕵️, sleuth_or_spy" aria-label="🕵️, sleuth_or_spy"
className="emoji-mart-emoji emoji-mart-emoji-native" className="emoji-mart-emoji emoji-mart-emoji-native"
onClick={[Function]} onClick={[Function]}
@ -25,7 +25,7 @@ exports[`Renders <NotFound> component 1`] = `
> >
🕵️ 🕵️
</span> </span>
</button> </span>
<div <div
className="emoji-mart-no-results-label" className="emoji-mart-no-results-label"
> >

View File

@ -177,23 +177,36 @@ const NimbleEmoji = (props) => {
} }
} }
var Tag = {
name: 'span',
props: {},
}
if (props.onClick) {
Tag.name = 'button'
Tag.props = {
type: 'button',
}
}
if (props.html) { if (props.html) {
style = _convertStyleToCSS(style) style = _convertStyleToCSS(style)
return `<button style='${style}' aria-label='${label}' ${ return `<${Tag.name} style='${style}' aria-label='${label}' ${
title ? `title='${title}'` : '' title ? `title='${title}'` : ''
} class='${className}'>${children || ''}</button>` } class='${className}'>${children || ''}</${Tag.name}>`
} else { } else {
return ( return (
<button <Tag.name
onClick={(e) => _handleClick(e, props)} onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)} onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)} onMouseLeave={(e) => _handleLeave(e, props)}
aria-label={label} aria-label={label}
title={title} title={title}
className={className} className={className}
{...Tag.props}
> >
<span style={style}>{children}</span> <span style={style}>{children}</span>
</button> </Tag.name>
) )
} }
} }

View File

@ -9,9 +9,6 @@ const EmojiDefaultProps = {
tooltip: false, tooltip: false,
backgroundImageFn: (set, sheetSize) => backgroundImageFn: (set, sheetSize) =>
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`, `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
onOver: () => {},
onLeave: () => {},
onClick: () => {},
} }
const PickerDefaultProps = { const PickerDefaultProps = {