/
index.js
121 lines (106 loc) · 3.62 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import ReactDOM from 'react-dom'
import {Picker, Emoji} from '../src'
class Example extends React.Component {
constructor(props) {
super(props)
this.state = {
emojiSize: 24,
perLine: 9,
skin: 1,
set: 'apple',
hidden: false,
}
}
handleInput(e) {
var { currentTarget } = e,
{ value } = currentTarget,
key = currentTarget.getAttribute('data-key'),
state = {}
state[key] = parseInt(value)
this.setState(state)
}
render() {
return <div>
<div>
<h1 className='demo-title'>Emoji Mart</h1>
<iframe
src='https://ghbtns.com/github-btn.html?user=missive&repo=emoji-mart&type=star&count=true'
frameBorder='0'
scrolling='0'
width='170px'
height='20px'
></iframe>
</div>
<div className="row">
{['apple', 'google', 'twitter', 'emojione'].map((set) => {
var props = { disabled: set == this.state.set }
return <button
key={set}
value={set}
onClick={() => this.setState({ set: set })}
{...props}>
<Emoji
sheetURL={`https://unpkg.com/emoji-mart@0.2.7/sheets/sheet_${set}_32.png`}
size={24}
emoji='grinning'
/>
</button>
})}
</div>
<div className="row">
<button
onClick={() => this.setState({ hidden: !this.state.hidden })}
>{this.state.hidden ? 'Mount' : 'Unmount'}</button>
</div>
<pre style={{
fontSize: 18,
display: 'inline-block',
verticalAlign: 'top',
margin: '1em',
width: '460px',
}}>
<Operator>import</Operator> {Picker} <Operator>from</Operator> <String>'emoji-mart'</String>
<br />
<br /><Operator><</Operator><Variable>Picker</Variable>
<br /> emojiSize<Operator>=</Operator>{<Variable>{this.state.emojiSize}</Variable>} <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
<br /> perLine<Operator>=</Operator>{<Variable>{this.state.perLine}</Variable>} {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>{<Variable>{this.state.skin}</Variable>} <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />
<br /> sheetURL<Operator>=</Operator><String>'sheets/sheet_{this.state.set}_64.png'</String>
<br /> onClick<Operator>=</Operator>{(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)}
<br /><Operator>/></Operator>
</pre>
{!this.state.hidden &&
<Picker
emojiSize={this.state.emojiSize}
perLine={this.state.perLine}
skin={this.state.skin}
sheetURL={`https://unpkg.com/emoji-mart@0.2.7/sheets/sheet_${this.state.set}_64.png`}
onClick={(emoji) => console.log(emoji)}
/>
}
</div>
}
}
class Operator extends React.Component {
render() {
return <span style={{color: '#a71d5d'}}>
{this.props.children}
</span>
}
}
class Variable extends React.Component {
render() {
return <span style={{color: '#0086b3'}}>
{this.props.children}
</span>
}
}
class String extends React.Component {
render() {
return <span style={{color: '#183691'}}>
{this.props.children}
</span>
}
}
ReactDOM.render(<Example />, document.querySelector('div'))