emoji-mart-lazyload/docs/index.js

104 lines
2.4 KiB
JavaScript
Raw Normal View History

2017-11-09 07:58:41 +00:00
import React from 'react'
import ReactDOM from 'react-dom'
2020-03-16 14:32:38 +00:00
import { Picker, Emoji } from '../dist'
2017-11-09 07:58:41 +00:00
const CUSTOM_EMOJIS = [
2017-11-09 08:59:42 +00:00
{
name: 'Party Parrot',
2020-03-16 18:41:47 +00:00
short_names: ['party_parrot'],
keywords: ['party', 'parrot'],
2019-12-23 13:06:53 +00:00
imageUrl: './images/parrot.gif',
2017-11-09 08:59:42 +00:00
},
2017-11-09 07:58:41 +00:00
{
name: 'Octocat',
short_names: ['octocat'],
keywords: ['github'],
2019-12-23 13:06:53 +00:00
imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
2017-11-09 07:58:41 +00:00
},
{
name: 'Squirrel',
short_names: ['shipit', 'squirrel'],
keywords: ['github'],
2019-12-23 13:06:53 +00:00
imageUrl: 'https://github.githubassets.com/images/icons/emoji/shipit.png',
2017-11-09 08:59:42 +00:00
},
2017-11-09 07:58:41 +00:00
]
class Example extends React.Component {
constructor(props) {
super(props)
this.state = {
native: true,
set: 'apple',
theme: 'auto',
2017-11-09 07:58:41 +00:00
emoji: 'point_up',
title: 'Pick your emoji…',
2017-11-09 08:28:09 +00:00
custom: CUSTOM_EMOJIS,
useButton: false,
2017-11-09 07:58:41 +00:00
}
}
render() {
2019-12-23 13:06:53 +00:00
return (
<div>
<div className="row">
<h1>Emoji Mart 🏬</h1>
</div>
2017-11-09 07:58:41 +00:00
2019-12-23 13:06:53 +00:00
<div className="row sets">
2019-12-23 13:51:53 +00:00
Set: 
2020-03-16 14:32:38 +00:00
{['native', 'apple', 'google', 'twitter', 'facebook'].map((set) => {
2019-12-23 13:06:53 +00:00
var props = {
disabled: !this.state.native && set == this.state.set,
}
2017-11-09 07:58:41 +00:00
2019-12-23 13:06:53 +00:00
if (set == 'native' && this.state.native) {
props.disabled = true
}
2017-11-09 07:58:41 +00:00
2019-12-23 13:06:53 +00:00
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>
2017-11-09 07:58:41 +00:00
2019-12-23 13:51:53 +00:00
<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>
)
})}
2019-12-23 13:51:53 +00:00
</div>
2019-12-23 13:06:53 +00:00
<div className="row">
<Picker {...this.state} onSelect={console.log} />
</div>
2017-11-09 07:58:41 +00:00
</div>
2019-12-23 13:06:53 +00:00
)
2017-11-09 07:58:41 +00:00
}
}
2018-11-13 15:07:26 +00:00
ReactDOM.render(<Example />, document.querySelector('#picker'))