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

fix: use span for non-clickable emojis
release
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
className="emoji-mart-no-results"
>
<button
<span
aria-label="🕵️, sleuth_or_spy"
className="emoji-mart-emoji emoji-mart-emoji-native"
onClick={[Function]}
@ -25,7 +25,7 @@ exports[`Renders <NotFound> component 1`] = `
>
🕵️
</span>
</button>
</span>
<div
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) {
style = _convertStyleToCSS(style)
return `<button style='${style}' aria-label='${label}' ${
return `<${Tag.name} style='${style}' aria-label='${label}' ${
title ? `title='${title}'` : ''
} class='${className}'>${children || ''}</button>`
} class='${className}'>${children || ''}</${Tag.name}>`
} else {
return (
<button
<Tag.name
onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
aria-label={label}
title={title}
className={className}
{...Tag.props}
>
<span style={style}>{children}</span>
</button>
</Tag.name>
)
}
}

View File

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