Add `native` prop to Emoji
parent
f3c1e94213
commit
dad72bc0fb
|
@ -108,6 +108,7 @@ import { Emoji } from 'emoji-mart'
|
||||||
| ---- | :------: | ------- | ----------- |
|
| ---- | :------: | ------- | ----------- |
|
||||||
| **emoji** | ✓ | | Either a string or an `emoji` object |
|
| **emoji** | ✓ | | Either a string or an `emoji` object |
|
||||||
| **size** | ✓ | | The emoji width and height. |
|
| **size** | ✓ | | The emoji width and height. |
|
||||||
|
| **native** | | `false` | Renders the native unicode emoji |
|
||||||
| **onClick** | | | Params: `(emoji, event) => {}` |
|
| **onClick** | | | Params: `(emoji, event) => {}` |
|
||||||
| **onLeave** | | | Params: `(emoji, event) => {}` |
|
| **onLeave** | | | Params: `(emoji, event) => {}` |
|
||||||
| **onOver** | | | Params: `(emoji, event) => {}` |
|
| **onOver** | | | Params: `(emoji, event) => {}` |
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import data from '../../data'
|
import data from '../../data'
|
||||||
|
|
||||||
import { getData, getSanitizedData } from '../utils'
|
import { getData, getSanitizedData, unifiedToNative } from '../utils'
|
||||||
|
|
||||||
const SHEET_COLUMNS = 41
|
const SHEET_COLUMNS = 41
|
||||||
|
|
||||||
|
@ -59,27 +59,35 @@ export default class Emoji extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var { set, size, sheetSize, onOver, onLeave } = this.props,
|
var { set, size, sheetSize, native, onOver, onLeave } = this.props,
|
||||||
{ unified } = this.getData()
|
{ unified } = this.getData(),
|
||||||
|
style = {},
|
||||||
|
children = null
|
||||||
|
|
||||||
if (!unified) {
|
if (!unified) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (native && unified) {
|
||||||
|
style = { fontSize: size }
|
||||||
|
children = unifiedToNative(unified)
|
||||||
|
} else {
|
||||||
|
style = {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
display: 'inline-block',
|
||||||
|
backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png)`,
|
||||||
|
backgroundSize: `${100 * SHEET_COLUMNS}%`,
|
||||||
|
backgroundPosition: this.getPosition(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return <span
|
return <span
|
||||||
onClick={this.handleClick.bind(this)}
|
onClick={this.handleClick.bind(this)}
|
||||||
onMouseEnter={this.handleOver.bind(this)}
|
onMouseEnter={this.handleOver.bind(this)}
|
||||||
onMouseLeave={this.handleLeave.bind(this)}
|
onMouseLeave={this.handleLeave.bind(this)}
|
||||||
className='emoji-mart-emoji'>
|
className='emoji-mart-emoji'>
|
||||||
<span style={{
|
<span style={style}>{children}</span>
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
display: 'inline-block',
|
|
||||||
backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png)`,
|
|
||||||
backgroundSize: `${100 * SHEET_COLUMNS}%`,
|
|
||||||
backgroundPosition: this.getPosition(),
|
|
||||||
}}>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -88,6 +96,7 @@ Emoji.propTypes = {
|
||||||
onOver: React.PropTypes.func,
|
onOver: React.PropTypes.func,
|
||||||
onLeave: React.PropTypes.func,
|
onLeave: React.PropTypes.func,
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
|
native: 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']),
|
||||||
|
@ -102,6 +111,7 @@ Emoji.defaultProps = {
|
||||||
skin: 1,
|
skin: 1,
|
||||||
set: 'apple',
|
set: 'apple',
|
||||||
sheetSize: 64,
|
sheetSize: 64,
|
||||||
|
native: false,
|
||||||
onOver: (() => {}),
|
onOver: (() => {}),
|
||||||
onLeave: (() => {}),
|
onLeave: (() => {}),
|
||||||
onClick: (() => {}),
|
onClick: (() => {}),
|
||||||
|
|
Loading…
Reference in New Issue