Fix native emojis size

release
Etienne Lemay 2017-02-17 10:36:50 -05:00
parent c78ece2bc3
commit fc14f939c1
3 changed files with 14 additions and 10 deletions

View File

@ -91,6 +91,8 @@
.emoji-mart-category .emoji-mart-emoji span {
z-index: 1;
position: relative;
text-align: center;
cursor: default;
}
.emoji-mart-category .emoji-mart-emoji:hover:before {

View File

@ -60,7 +60,7 @@ export default class Emoji extends React.Component {
}
render() {
var { set, size, sheetSize, native, onOver, onLeave, backgroundImageFn } = this.props,
var { set, size, sheetSize, native, forceSize, onOver, onLeave, backgroundImageFn } = this.props,
{ unified } = this.getData(),
style = {},
children = this.props.children
@ -72,6 +72,12 @@ export default class Emoji extends React.Component {
if (native && unified) {
style = { fontSize: size }
children = unifiedToNative(unified)
if (forceSize) {
style.display = 'inline-block'
style.width = size
style.height = size
}
} else {
style = {
width: size,
@ -99,6 +105,7 @@ Emoji.propTypes = {
onClick: React.PropTypes.func,
backgroundImageFn: React.PropTypes.func,
native: React.PropTypes.bool,
forceSize: React.PropTypes.bool,
skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]),
set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
@ -114,6 +121,7 @@ Emoji.defaultProps = {
set: 'apple',
sheetSize: 64,
native: false,
forceSize: false,
backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource@${EMOJI_DATASOURCE_VERSION}/sheet_${set}_${sheetSize}.png`),
onOver: (() => {}),
onLeave: (() => {}),

View File

@ -262,15 +262,8 @@ export default class Picker extends React.Component {
render() {
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props,
{ skin } = this.state
let width;
if (native) {
width = (perLine * (emojiSize + 15)) + 17;
} else {
width = (perLine * (emojiSize + 12)) + 12 + 2;
}
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2
return <div style={{width: width, ...style}} className='emoji-mart'>
<div className='emoji-mart-bar'>
@ -306,6 +299,7 @@ export default class Picker extends React.Component {
size: emojiSize,
set: set,
sheetSize: sheetSize,
forceSize: native,
backgroundImageFn: backgroundImageFn,
onOver: this.handleEmojiOver.bind(this),
onLeave: this.handleEmojiLeave.bind(this),