mirrors
/
emoji-mart-lazyload
mirror of https://github.com/mashirozx/emoji-mart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update demo page

exclude-unsupported-native-emojis
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"> <meta charset="utf-8">
<title>Emoji Mart | One component to pick them all</title> <title>Emoji Mart | One component to pick them all</title>
<link rel="stylesheet" href="../css/emoji-mart.css"> <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> </head>
<body> <body>
<div></div> <div></div>

25
example/index.js
View File

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