emoji-mart-lazyload/docs/index.js

134 lines
3.0 KiB
JavaScript
Raw Normal View History

2017-11-09 07:58:41 +00:00
import React from 'react'
import ReactDOM from 'react-dom'
import { Picker, Emoji } from '../src'
const CUSTOM_EMOJIS = [
2017-11-09 08:59:42 +00:00
{
name: 'Party Parrot',
short_names: ['parrot'],
keywords: ['party'],
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
},
2018-11-30 14:17:45 +00:00
{
name: 'Test Flag',
short_names: ['test'],
keywords: ['test', 'flag'],
2019-12-23 13:06:53 +00:00
spriteUrl:
'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
2018-11-30 14:17:45 +00:00
sheet_x: 1,
sheet_y: 1,
size: 64,
sheetColumns: 52,
sheetRows: 52,
},
2017-11-09 07:58:41 +00:00
]
class Example extends React.Component {
constructor(props) {
super(props)
this.state = {
native: true,
set: 'apple',
emoji: 'point_up',
title: 'Pick your emoji…',
2017-11-09 08:28:09 +00:00
custom: CUSTOM_EMOJIS,
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: 
2019-12-23 13:06:53 +00:00
{[
'native',
'apple',
'google',
'twitter',
'facebook',
].map((set) => {
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: 
<button
disabled={this.state.darkMode == undefined}
onClick={() => {
this.setState({ darkMode: undefined })
}}
>
auto
</button>
<button
disabled={this.state.darkMode == false}
onClick={() => {
this.setState({ darkMode: false })
}}
>
light
</button>
<button
disabled={this.state.darkMode}
onClick={() => {
this.setState({ darkMode: true })
}}
>
dark
</button>
</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'))