treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update demo page

release
Etienne Lemay 2016-07-29 12:08:30 -04:00
parent ecf3784d32
commit df0c920f66
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
example/index.html
View File

@ -3,6 +3,36 @@
<meta charset="utf-8">
<title>Emoji Mart | One component to pick them all</title>
<link rel="stylesheet" href="../css/emoji-mart.css">
<style>
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 1em;
}
button + button { margin-left: .5em }
button {
padding: .4em .6em;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, .1);
background: #fff;
outline: 0;
cursor: pointer;
}
button[disabled] {
border-color: #ae65c5;
}
.row {
margin-top: 1em;
}
</style>
</head>
<body>
<div></div>

25
example/index.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom'
import {Picker} from '../src'
import {Picker, Emoji} from '../src'
class Example extends React.Component {
constructor(props) {
@ -29,22 +29,25 @@ class Example extends React.Component {
return <div>
<h1>Emoji Mart</h1>
<div>
{['Apple', 'Google', 'Twitter', 'EmojiOne'].map((set) => {
var value = set.toLowerCase(),
props = { disabled: value == this.state.set }
<div className="row">
{['apple', 'google', 'twitter', 'emojione'].map((set) => {
var props = { disabled: set == this.state.set }
return <button
key={value}
value={value}
onClick={() => this.setState({ set: value })}
key={set}
value={set}
onClick={() => this.setState({ set: set })}
{...props}>
{set}
<Emoji
sheetURL={`https://npmcdn.com/emoji-mart@0.2.1/sheets/sheet_${set}_32.png`}
size={24}
emoji='grinning'
/>
</button>
})}
</div>
<div>
<div className="row">
<button
onClick={() => this.setState({ hidden: !this.state.hidden })}
>{this.state.hidden ? 'Mount' : 'Unmount'}</button>
@ -73,7 +76,7 @@ class Example extends React.Component {
emojiSize={this.state.emojiSize}
perLine={this.state.perLine}
skin={this.state.skin}
sheetURL={`../sheets/sheet_${this.state.set}_64.png`}
sheetURL={`https://npmcdn.com/emoji-mart@0.2.1/sheets/sheet_${this.state.set}_64.png`}
onClick={(emoji) => console.log(emoji)}
/>
}