Merge branch 'master' into emoji4

README.md

@@ -6,6 +6,10 @@
   <br>Brought to you by the <a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com">Missive</a> team
 </div>
 
+## Installation
+
+`npm install --save emoji-mart`
+
 ## Components
 ### Picker
 ```jsx

css/emoji-mart.css

@@ -67,6 +67,7 @@
 
 .emoji-mart-anchors svg {
   fill: currentColor;
+  max-height: 18px;
 }
 
 .emoji-mart-scroll {
@@ -163,7 +164,7 @@
 
 .emoji-mart-preview-data {
   left: 68px; right: 12px;
-  word-break: break-word;
+  word-break: break-all;
 }
 
 .emoji-mart-preview-skins {
@@ -231,7 +232,7 @@
   transition-timing-function: ease-out;
 }
 
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0 }
+.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
 .emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
 .emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
 .emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }

package.json

@@ -39,6 +39,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-webpack": "^2.0.2",
     "mkdirp": "0.5.1",
+    "prop-types": "^15.5.8",
     "react": "15.2.0",
     "react-addons-test-utils": "15.2.0",
     "react-dom": "15.2.0",

src/components/anchors.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InlineSVG from 'svg-inline-react'
 
 import * as SVGs from '../svgs'
@@ -51,8 +52,8 @@ export default class Anchors extends React.Component {
 }
 
 Anchors.propTypes = {
-  categories: React.PropTypes.array,
-  onAnchorClick: React.PropTypes.func,
+  categories: PropTypes.array,
+  onAnchorClick: PropTypes.func,
 }
 
 Anchors.defaultProps = {

src/components/category.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import frequently from '../utils/frequently'
 import { Emoji } from '.'
@@ -154,12 +155,12 @@ export default class Category extends React.Component {
 }
 
 Category.propTypes = {
-  emojis: React.PropTypes.array,
-  hasStickyPosition: React.PropTypes.bool,
-  name: React.PropTypes.string.isRequired,
-  native: React.PropTypes.bool.isRequired,
-  perLine: React.PropTypes.number.isRequired,
-  emojiProps: React.PropTypes.object.isRequired,
+  emojis: PropTypes.array,
+  hasStickyPosition: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  native: PropTypes.bool.isRequired,
+  perLine: PropTypes.number.isRequired,
+  emojiProps: PropTypes.object.isRequired,
 }
 
 Category.defaultProps = {

src/components/emoji.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import data from '../../data'
 
 import { getData, getSanitizedData, unifiedToNative } from '../utils'
@@ -104,19 +105,19 @@ export default class Emoji extends React.Component {
 }
 
 Emoji.propTypes = {
-  onOver: React.PropTypes.func,
-  onLeave: React.PropTypes.func,
-  onClick: React.PropTypes.func,
-  backgroundImageFn: React.PropTypes.func,
-  native: React.PropTypes.bool,
-  forceSize: React.PropTypes.bool,
-  skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
-  sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]),
-  set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
-  size: React.PropTypes.number.isRequired,
-  emoji: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.object,
+  onOver: PropTypes.func,
+  onLeave: PropTypes.func,
+  onClick: PropTypes.func,
+  backgroundImageFn: PropTypes.func,
+  native: PropTypes.bool,
+  forceSize: PropTypes.bool,
+  skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+  set: PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
+  size: PropTypes.number.isRequired,
+  emoji: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
   ]).isRequired,
 }
 

src/components/picker.js

@@ -1,6 +1,7 @@
 import '../vendor/raf-polyfill'
 
 import React from 'react'
+import PropTypes from 'prop-types'
 import data from '../../data'
 
 import store from '../utils/store'
@@ -368,23 +369,23 @@ export default class Picker extends React.Component {
 }
 
 Picker.propTypes = {
-  onClick: React.PropTypes.func,
-  perLine: React.PropTypes.number,
-  emojiSize: React.PropTypes.number,
-  i18n: React.PropTypes.object,
-  style: React.PropTypes.object,
-  title: React.PropTypes.string,
-  emoji: React.PropTypes.string,
-  color: React.PropTypes.string,
+  onClick: PropTypes.func,
+  perLine: PropTypes.number,
+  emojiSize: PropTypes.number,
+  i18n: PropTypes.object,
+  style: PropTypes.object,
+  title: PropTypes.string,
+  emoji: PropTypes.string,
+  color: PropTypes.string,
   set: Emoji.propTypes.set,
   skin: Emoji.propTypes.skin,
-  native: React.PropTypes.bool,
+  native: PropTypes.bool,
   backgroundImageFn: Emoji.propTypes.backgroundImageFn,
   sheetSize: Emoji.propTypes.sheetSize,
-  emojisToShowFilter: React.PropTypes.func,
-  include: React.PropTypes.arrayOf(React.PropTypes.string),
-  exclude: React.PropTypes.arrayOf(React.PropTypes.string),
-  autoFocus: React.PropTypes.bool,
+  emojisToShowFilter: PropTypes.func,
+  include: PropTypes.arrayOf(PropTypes.string),
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  autoFocus: PropTypes.bool,
 }
 
 Picker.defaultProps = {

src/components/preview.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { Emoji, Skins } from '.'
 import { getData } from '../utils'
@@ -75,8 +76,8 @@ export default class Preview extends React.Component {
 }
 
 Preview.propTypes = {
-  title: React.PropTypes.string.isRequired,
-  emoji: React.PropTypes.string.isRequired,
-  emojiProps: React.PropTypes.object.isRequired,
-  skinsProps: React.PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  emoji: PropTypes.string.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  skinsProps: PropTypes.object.isRequired,
 }

src/components/search.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import emojiIndex from '../utils/emoji-index'
 
 export default class Search extends React.Component {
@@ -33,10 +34,10 @@ export default class Search extends React.Component {
 }
 
 Search.propTypes = {
-  onSearch: React.PropTypes.func,
-  maxResults: React.PropTypes.number,
-  emojisToShowFilter: React.PropTypes.func,
-  autoFocus: React.PropTypes.bool,
+  onSearch: PropTypes.func,
+  maxResults: PropTypes.number,
+  emojisToShowFilter: PropTypes.func,
+  autoFocus: PropTypes.bool,
 }
 
 Search.defaultProps = {

src/components/skins.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export default class Skins extends React.Component {
   constructor(props) {
@@ -43,8 +44,8 @@ export default class Skins extends React.Component {
 }
 
 Skins.propTypes = {
-  onChange: React.PropTypes.func,
-  skin: React.PropTypes.number.isRequired,
+  onChange: PropTypes.func,
+  skin: PropTypes.number.isRequired,
 }
 
 Skins.defaultProps = {