Etienne Lemay
parent
56be88ed41
commit
772b9ab534
|
|
@ -1,7 +1,6 @@
|
||||||
node_modules/
|
node_modules/
|
||||||
dist/
|
dist/
|
||||||
dist-es/
|
dist-es/
|
||||||
bundle.js
|
|
||||||
stats.json
|
stats.json
|
||||||
report.html
|
report.html
|
||||||
/src/data/data.js
|
/src/data/data.js
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ scripts/
|
||||||
.*
|
.*
|
||||||
|
|
||||||
src/
|
src/
|
||||||
|
docs/
|
||||||
spec/
|
spec/
|
||||||
example/
|
example/
|
||||||
karma.conf.js
|
karma.conf.js
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,59 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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: 5%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: Courier;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row + .row {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-small {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-title-label {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div></div>
|
||||||
|
<script src="./bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
|
import { Picker, Emoji } from '../src'
|
||||||
|
|
||||||
|
const CUSTOM_EMOJIS = [
|
||||||
|
{
|
||||||
|
name: 'Octocat',
|
||||||
|
short_names: ['octocat'],
|
||||||
|
keywords: ['github'],
|
||||||
|
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Squirrel',
|
||||||
|
short_names: ['shipit', 'squirrel'],
|
||||||
|
keywords: ['github'],
|
||||||
|
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
class Example extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
native: true,
|
||||||
|
set: 'apple',
|
||||||
|
emoji: 'point_up',
|
||||||
|
title: 'Pick your emoji…',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return <div>
|
||||||
|
<div className="row">
|
||||||
|
<h1>Emoji Mart 🏬</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
{['native', 'apple', 'google', 'twitter', 'emojione', 'messenger', '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">
|
||||||
|
<Picker
|
||||||
|
{...this.state}
|
||||||
|
onClick={console.log}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row-small">
|
||||||
|
<iframe
|
||||||
|
src='https://ghbtns.com/github-btn.html?user=missive&repo=emoji-mart&type=star&count=true'
|
||||||
|
frameBorder='0'
|
||||||
|
scrolling='0'
|
||||||
|
width='90px'
|
||||||
|
height='20px'
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<Example />, document.querySelector('div'))
|
||||||
|
|
||||||
|
// <Picker
|
||||||
|
// emojiSize={this.state.emojiSize}
|
||||||
|
// perLine={this.state.perLine}
|
||||||
|
// skin={this.state.skin}
|
||||||
|
// native={this.state.native}
|
||||||
|
// set={this.state.set}
|
||||||
|
// custom={CUSTOM_EMOJIS}
|
||||||
|
// autoFocus={this.state.autoFocus}
|
||||||
|
// include={this.state.include}
|
||||||
|
// exclude={this.state.exclude}
|
||||||
|
// onClick={console.log}
|
||||||
|
// />
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
var path = require('path')
|
||||||
|
var pack = require('../package.json')
|
||||||
|
var webpack = require('webpack')
|
||||||
|
|
||||||
|
var PROD = process.env.NODE_ENV === 'production'
|
||||||
|
var TEST = process.env.NODE_ENV === 'test'
|
||||||
|
|
||||||
|
var config = {
|
||||||
|
entry: path.resolve('docs/index.js'),
|
||||||
|
output: {
|
||||||
|
path: path.resolve('docs'),
|
||||||
|
filename: 'bundle.js',
|
||||||
|
library: 'EmojiMart',
|
||||||
|
libraryTarget: 'umd',
|
||||||
|
},
|
||||||
|
|
||||||
|
externals: [],
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
use: 'babel-loader',
|
||||||
|
include: [
|
||||||
|
path.resolve('src'),
|
||||||
|
path.resolve('docs'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js'],
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
EMOJI_DATASOURCE_VERSION: `'${pack.devDependencies['emoji-datasource']}'`,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
bail: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = config
|
||||||
Loading…
Reference in New Issue