From 9648c7d8e20f10b407a8786e77b5e73d07314815 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Wed, 27 Jul 2016 11:35:12 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=AC=20Emoji=20Mart=E2=84=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- css/{emoji-picker.css => emoji-mart.css} | 119 ++++++++++++----------- example/index.html | 4 +- example/index.js | 6 +- package.json | 12 +-- src/components/anchors.js | 6 +- src/components/category.js | 8 +- src/components/emoji.js | 2 +- src/components/picker.js | 12 +-- src/components/preview.js | 26 ++--- src/components/search.js | 2 +- src/components/skins.js | 6 +- src/utils/store.js | 2 +- src/webpack.config.js | 4 +- 14 files changed, 106 insertions(+), 107 deletions(-) rename css/{emoji-picker.css => emoji-mart.css} (55%) diff --git a/README.md b/README.md index e28cd67..2751ade 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -

⛏ EmojiPicker ⛏

+

🏬 Emoji Mart

```jsx -import {Picker} from 'emoji-picker' +import {Picker} from 'emoji-mart' - EmojiPicker - + Emoji Mart | One component to pick them all +
diff --git a/example/index.js b/example/index.js index 2a0010b..b27bb11 100644 --- a/example/index.js +++ b/example/index.js @@ -27,7 +27,7 @@ class Example extends React.Component { render() { return
-

EmojiPicker

+

Emoji Mart

{['Apple', 'Google', 'Twitter', 'EmojiOne'].map((set) => { @@ -57,11 +57,9 @@ class Example extends React.Component { margin: '1em', width: '460px', }}> -import {Picker} from 'emoji-picker' +import {Picker} from 'emoji-mart'

<Picker -
title='EmojiPicker' -
emoji='tophat'
emojiSize={{this.state.emojiSize}}
perLine={{this.state.perLine}} {this.state.perLine < 10 ? ' ' : ' '}
skin={{this.state.skin}} diff --git a/package.json b/package.json index 1555b19..ef98f1a 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "emoji-picker", + "name": "emoji-mart", "version": "0.1.5", "description": "Customizable Slack-like emoji picker for React", - "main": "dist/emoji-picker.js", + "main": "dist/emoji-mart.js", "repository": { "type": "git", - "url": "git@github.com:missive/emoji-picker.git" + "url": "git@github.com:missive/emoji-mart.git" }, "keywords": [ "react", @@ -15,9 +15,9 @@ "author": "Etienne Lemay", "license": "ISC", "bugs": { - "url": "https://github.com/missive/emoji-picker/issues" + "url": "https://github.com/missive/emoji-mart/issues" }, - "homepage": "https://github.com/missive/emoji-picker", + "homepage": "https://github.com/missive/emoji-mart", "dependencies": {}, "peerDependencies": { "react": "^0.14.0 || ^15.0.0-0" @@ -38,7 +38,7 @@ "react-dom": "15.2.0", "rimraf": "2.5.2", "svg-inline-loader": "0.4.1", - "svg-inline-react": "1.0.1", + "svg-inline-react": "1.0.2", "webpack": "1.12.14" }, "scripts": { diff --git a/src/components/anchors.js b/src/components/anchors.js index 5f51203..5febf77 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -21,7 +21,7 @@ export default class Anchors extends React.Component { var { categories, onAnchorClick, color } = this.props, { selected } = this.state - return
+ return
{categories.map((category, i) => { var { name, anchor } = category, isSelected = name == selected @@ -35,11 +35,11 @@ export default class Anchors extends React.Component { key={name} title={name} onClick={() => onAnchorClick(category, i)} - className={`emoji-picker-anchor ${isSelected ? 'emoji-picker-anchor-selected' : ''}`} + className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`} style={{ color: isSelected ? color : null }} > - + ) })} diff --git a/src/components/category.js b/src/components/category.js index f2bca01..4b6e216 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -131,8 +131,8 @@ export default class Category extends React.Component { } } - return
-
+ return
+
{LABELS[name]}
@@ -145,14 +145,14 @@ export default class Category extends React.Component { )} {emojis && !emojis.length && -
+
- + No emoji found
diff --git a/src/components/emoji.js b/src/components/emoji.js index 0d87bc5..3020a64 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -65,7 +65,7 @@ export default class Emoji extends React.Component { onClick={this.handleClick.bind(this)} onMouseEnter={this.handleOver.bind(this)} onMouseLeave={this.handleLeave.bind(this)} - className='emoji-picker-emoji'> + className='emoji-mart-emoji'> -
+ return
+
-
+
-
+
-
+ return
+
-
-
{emoji.name}
-
+
+
{emoji.name}
+
{emojiData.short_names.map((short_name) => - :{short_name}: + :{short_name}: )}
-
+
{listedEmoticons.map((emoticon) => - {emoticon} + {emoticon} )}
} else { - return
-
+ return
+
-
- +
+ {title}
-
+
diff --git a/src/components/search.js b/src/components/search.js index c3f064c..9550daa 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -19,7 +19,7 @@ export default class Search extends React.Component { type='text' onChange={this.handleChange.bind(this)} placeholder='Search' - className='emoji-picker-search' + className='emoji-mart-search' /> } } diff --git a/src/components/skins.js b/src/components/skins.js index d20df9d..6604e23 100644 --- a/src/components/skins.js +++ b/src/components/skins.js @@ -25,15 +25,15 @@ export default class Skins extends React.Component { { opened } = this.state return
-
+
{Array(6).fill().map((_, i) => { var skinTone = i + 1, selected = skinTone == skin - return + return this.handleClick(skinTone)} - className={`emoji-picker-skin emoji-picker-skin-tone-${skinTone}`}> + className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}> })} diff --git a/src/utils/store.js b/src/utils/store.js index ac37611..75ccb51 100644 --- a/src/utils/store.js +++ b/src/utils/store.js @@ -1,4 +1,4 @@ -const NAMESPACE = 'emoji-picker' +const NAMESPACE = 'emoji-mart' function update(state) { for (let key in state) { diff --git a/src/webpack.config.js b/src/webpack.config.js index c54a73c..a253dfc 100644 --- a/src/webpack.config.js +++ b/src/webpack.config.js @@ -4,8 +4,8 @@ module.exports = { entry: path.resolve('src/index.js'), output: { path: path.resolve('dist'), - filename: 'emoji-picker.js', - library: 'EmojiPicker', + filename: 'emoji-mart.js', + library: 'EmojiMart', libraryTarget: 'umd', },