treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make picker’s title and emoji customizable

release
Etienne Lemay 2016-07-15 12:50:06 -04:00
parent 2feae02477
commit b0893c39be
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/index.html
View File

@ -1,5 +1,6 @@
<html>
<head>
<meta charset="utf-8">
<title>EmojiPicker</title>
<link rel="stylesheet" href="../css/emoji-picker.css">
</head>

2
example/index.js
View File

@ -60,6 +60,8 @@ class Example extends React.Component {
<Operator>import</Operator> &#123;Picker&#125; <Operator>from</Operator> <String>'emoji-picker'</String>
<br />
<br /><Operator>&lt;</Operator><Variable>Picker</Variable>
<br /> title<Operator>=</Operator><String>'EmojiPicker'</String>
<br /> emoji<Operator>=</Operator><String>'tophat'</String>
<br /> emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
<br /> perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {this.state.perLine < 10 ? ' ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='7' max='16' value={this.state.perLine} />
<br /> skin<Operator>=</Operator>&#123;<Variable>{this.state.skin}</Variable>&#125; <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />

8
src/components/picker.js
View File

@ -212,7 +212,7 @@ export default class Picker extends React.Component {
}
render() {
var { perLine, emojiSize, sheetURL, style } = this.props,
var { perLine, emojiSize, sheetURL, style, title, emoji } = this.props,
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2
@ -254,6 +254,8 @@ export default class Picker extends React.Component {
<div className='emoji-picker-bar'>
<Preview
ref='preview'
title={title}
emoji={emoji}
emojiProps={{
size: 38,
sheetURL: sheetURL,
@ -274,6 +276,8 @@ Picker.propTypes = {
perLine: React.PropTypes.number,
emojiSize: React.PropTypes.number,
style: React.PropTypes.object,
title: React.PropTypes.string,
emoji: React.PropTypes.string,
sheetURL: React.PropTypes.string.isRequired,
}
@ -283,4 +287,6 @@ Picker.defaultProps = {
perLine: 9,
style: {},
skin: 1,
title: 'EmojiPicker',
emoji: 'tophat',
}

8
src/components/preview.js
View File

@ -9,7 +9,7 @@ export default class Preview extends React.Component {
render() {
var { emoji } = this.state,
{ emojiProps, skinsProps } = this.props
{ emojiProps, skinsProps, title, emoji: idleEmoji } = this.props
if (emoji) {
var { emoticons } = emoji,
@ -50,14 +50,14 @@ export default class Preview extends React.Component {
return <div className='emoji-picker-preview'>
<div className='emoji-picker-preview-emoji'>
<Emoji
emoji='tophat'
emoji={idleEmoji}
{...emojiProps}
/>
</div>
<div className='emoji-picker-preview-data'>
<span className='emoji-picker-title-label'>
EmojiPicker
{title}
</span>
</div>
@ -72,6 +72,8 @@ export default class Preview extends React.Component {
}
Preview.propTypes = {
title: React.PropTypes.string.isRequired,
emoji: React.PropTypes.string.isRequired,
emojiProps: React.PropTypes.object.isRequired,
skinsProps: React.PropTypes.object.isRequired,
}