104 lines
2.4 KiB
JavaScript
104 lines
2.4 KiB
JavaScript
import React from 'react'
|
||
import ReactDOM from 'react-dom'
|
||
|
||
import { Picker, Emoji } from '../dist'
|
||
|
||
const CUSTOM_EMOJIS = [
|
||
{
|
||
name: 'Party Parrot',
|
||
short_names: ['party_parrot'],
|
||
keywords: ['party', 'parrot'],
|
||
imageUrl: './images/parrot.gif',
|
||
},
|
||
{
|
||
name: 'Octocat',
|
||
short_names: ['octocat'],
|
||
keywords: ['github'],
|
||
imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
|
||
},
|
||
{
|
||
name: 'Squirrel',
|
||
short_names: ['shipit', 'squirrel'],
|
||
keywords: ['github'],
|
||
imageUrl: 'https://github.githubassets.com/images/icons/emoji/shipit.png',
|
||
},
|
||
]
|
||
|
||
class Example extends React.Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
native: true,
|
||
set: 'apple',
|
||
theme: 'auto',
|
||
emoji: 'point_up',
|
||
title: 'Pick your emoji…',
|
||
custom: CUSTOM_EMOJIS,
|
||
useButton: false,
|
||
}
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<div>
|
||
<div className="row">
|
||
<h1>Emoji Mart 🏬</h1>
|
||
</div>
|
||
|
||
<div className="row sets">
|
||
Set:
|
||
{['native', 'apple', 'google', 'twitter', 'facebook'].map((set) => {
|
||
var props = {
|
||
disabled: !this.state.native && set == this.state.set,
|
||
}
|
||
|
||
if (set == 'native' && this.state.native) {
|
||
props.disabled = true
|
||
}
|
||
|
||
return (
|
||
<button
|
||
key={set}
|
||
value={set}
|
||
onClick={() => {
|
||
if (set == 'native') {
|
||
this.setState({ native: true })
|
||
} else {
|
||
this.setState({ set: set, native: false })
|
||
}
|
||
}}
|
||
{...props}
|
||
>
|
||
{set}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<div className="row-small sets">
|
||
Theme:
|
||
{['auto', 'light', 'dark'].map((theme) => {
|
||
return (
|
||
<button
|
||
key={theme}
|
||
disabled={theme == this.state.theme}
|
||
onClick={() => {
|
||
this.setState({ theme })
|
||
}}
|
||
>
|
||
{theme}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<div className="row">
|
||
<Picker {...this.state} onSelect={console.log} />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<Example />, document.querySelector('#picker'))
|