emoji-mart-lazyload/docs/index.js

104 lines
2.4 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

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'))