Etienne Lemay
parent
56be88ed41
commit
772b9ab534
|
|
@ -1,7 +1,6 @@
|
|||
node_modules/
|
||||
dist/
|
||||
dist-es/
|
||||
bundle.js
|
||||
stats.json
|
||||
report.html
|
||||
/src/data/data.js
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ scripts/
|
|||
.*
|
||||
|
||||
src/
|
||||
docs/
|
||||
spec/
|
||||
example/
|
||||
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