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

Make custom emojis work on example page [Ref #87]

release
Etienne Lemay 2017-06-27 17:24:00 -04:00
parent 4d57436bbe
commit f3f60f58b3
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
example/index.js
View File

@ -41,7 +41,7 @@ class Example extends React.Component {
native: true, native: true,
set: 'apple', set: 'apple',
hidden: false, hidden: false,
currentEmoji: 'thumbsup', currentEmoji: { id: '+1' },
autoFocus: false, autoFocus: false,
include: [], include: [],
exclude: [], exclude: [],
@ -182,7 +182,7 @@ class Example extends React.Component {
include={this.state.include} include={this.state.include}
exclude={this.state.exclude} exclude={this.state.exclude}
onClick={(emoji) => { onClick={(emoji) => {
this.setState({ currentEmoji: emoji.id }) this.setState({ currentEmoji: emoji })
console.log(emoji) console.log(emoji)
}} }}
/> />
@ -199,14 +199,14 @@ class Example extends React.Component {
<Operator>import</Operator> &#123;Emoji&#125; <Operator>from</Operator> <String>'emoji-mart'</String> <Operator>import</Operator> &#123;Emoji&#125; <Operator>from</Operator> <String>'emoji-mart'</String>
<br /> <br />
<br /><Operator>&lt;</Operator><Variable>Emoji</Variable> <br /><Operator>&lt;</Operator><Variable>Emoji</Variable>
<br /> emoji<Operator>=</Operator><String>'thumbsup'</String> <br /> emoji<Operator>=</Operator>{this.state.currentEmoji.custom ? (<Variable>{'{…}'}</Variable>) : (<String>'{this.state.currentEmoji.id}'</String>)}
<br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125; <br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125;
<br /><Operator>/&gt;</Operator> <br /><Operator>/&gt;</Operator>
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 60 }}> <span style={{ display: 'inline-block', marginTop: 60 }}>
{Emoji({ {Emoji({
emoji: this.state.currentEmoji, emoji: this.state.currentEmoji.custom ? this.state.currentEmoji : this.state.currentEmoji.id,
size: 64, size: 64,
set: this.state.set, set: this.state.set,
})} })}
@ -222,14 +222,14 @@ class Example extends React.Component {
width: '370px', width: '370px',
}}> }}>
<br /><Operator>&lt;</Operator><Variable>Emoji</Variable> <br /><Operator>&lt;</Operator><Variable>Emoji</Variable>
<br /> emoji<Operator>=</Operator><String>':thumbsup:'</String> <br /> emoji<Operator>=</Operator><String>':{this.state.currentEmoji.id}:'</String>
<br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125; <br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125;
<br /><Operator>/&gt;</Operator> <br /><Operator>/&gt;</Operator>
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 40 }}> <span style={{ display: 'inline-block', marginTop: 40 }}>
{Emoji({ {Emoji({
emoji: `:${this.state.currentEmoji}:`, emoji: `:${this.state.currentEmoji.id}:`,
size: 64, size: 64,
set: this.state.set, set: this.state.set,
})} })}
@ -245,14 +245,14 @@ class Example extends React.Component {
width: '370px', width: '370px',
}}> }}>
<br /><Operator>&lt;</Operator><Variable>Emoji</Variable> <br /><Operator>&lt;</Operator><Variable>Emoji</Variable>
<br /> emoji<Operator>=</Operator><String>':thumbsup::skin-tone-3:'</String> <br /> emoji<Operator>=</Operator><String>':{this.state.currentEmoji.id}::skin-tone-3:'</String>
<br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125; <br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125;
<br /><Operator>/&gt;</Operator> <br /><Operator>/&gt;</Operator>
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 40 }}> <span style={{ display: 'inline-block', marginTop: 40 }}>
{Emoji({ {Emoji({
emoji: `:${this.state.currentEmoji}::skin-tone-3:`, emoji: `:${this.state.currentEmoji.id}::skin-tone-3:`,
size: 64, size: 64,
set: this.state.set, set: this.state.set,
})} })}
@ -268,7 +268,7 @@ class Example extends React.Component {
width: '370px', width: '370px',
}}> }}>
<br /><Operator>&lt;</Operator><Variable>Emoji</Variable> <br /><Operator>&lt;</Operator><Variable>Emoji</Variable>
<br /> emoji<Operator>=</Operator><String>':thumbsup::skin-tone-3:'</String> <br /> emoji<Operator>=</Operator><String>':{this.state.currentEmoji.id}::skin-tone-3:'</String>
<br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125; <br /> size<Operator>=</Operator>&#123;<Variable>{64}</Variable>&#125;
<br /> native<Operator>=</Operator>&#123;<Variable>{'true'}</Variable>&#125; <br /> native<Operator>=</Operator>&#123;<Variable>{'true'}</Variable>&#125;
<br /><Operator>/&gt;</Operator> <br /><Operator>/&gt;</Operator>
@ -276,7 +276,7 @@ class Example extends React.Component {
<span style={{ display: 'inline-block', marginTop: 60 }}> <span style={{ display: 'inline-block', marginTop: 60 }}>
{Emoji({ {Emoji({
emoji: `:${this.state.currentEmoji}::skin-tone-3:`, emoji: `:${this.state.currentEmoji.id}::skin-tone-3:`,
size: 64, size: 64,
native: true, native: true,
})} })}