mirrors
/
emoji-mart-lazyload
mirror of https://github.com/mashirozx/emoji-mart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix native emojis size

nolan/hinaloe-test
Etienne Lemay 2017-02-17 10:36:50 -05:00
parent c78ece2bc3
commit fc14f939c1
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/emoji-mart.css
View File

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

10
src/components/emoji.js
View File

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

12
src/components/picker.js
View File

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