From 20292a5fd492b68fc85fc9a17b8a6871fab8f42b Mon Sep 17 00:00:00 2001 From: nsarafa Date: Thu, 4 May 2017 21:18:48 -0400 Subject: [PATCH 1/4] installation instructions init --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c574253..64c6ed5 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,10 @@
Brought to you by the Missive team +## Installation + +`npm install --save emoji-mart` + ## Components ### Picker ```jsx From 661e94819373c92ff3d7a3e1242b2593db4a203d Mon Sep 17 00:00:00 2001 From: nsarafa Date: Thu, 4 May 2017 21:21:01 -0400 Subject: [PATCH 2/4] set word-break to appropriate value --- css/emoji-mart.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index dd4960d..121fb28 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -163,7 +163,7 @@ .emoji-mart-preview-data { left: 68px; right: 12px; - word-break: break-word; + word-break: break-all; } .emoji-mart-preview-skins { @@ -231,7 +231,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 } From ed5a6f1777d3dc80f6dda5251652f674d1aadb24 Mon Sep 17 00:00:00 2001 From: nsarafa Date: Thu, 4 May 2017 21:38:03 -0400 Subject: [PATCH 3/4] update components from React.PropTypes to PropTypes package to avoid warning message --- package.json | 1 + src/components/anchors.js | 5 +++-- src/components/category.js | 13 +++++++------ src/components/emoji.js | 27 ++++++++++++++------------- src/components/picker.js | 27 ++++++++++++++------------- src/components/preview.js | 9 +++++---- src/components/search.js | 9 +++++---- src/components/skins.js | 5 +++-- 8 files changed, 52 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 8079b07..24747b5 100644 --- a/package.json +++ b/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", diff --git a/src/components/anchors.js b/src/components/anchors.js index 704f1cc..c8708ae 100644 --- a/src/components/anchors.js +++ b/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 = { diff --git a/src/components/category.js b/src/components/category.js index bed2259..8def645 100644 --- a/src/components/category.js +++ b/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 = { diff --git a/src/components/emoji.js b/src/components/emoji.js index 4b443b3..432ea8b 100644 --- a/src/components/emoji.js +++ b/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, } diff --git a/src/components/picker.js b/src/components/picker.js index f6f03a3..df50e89 100644 --- a/src/components/picker.js +++ b/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 = { diff --git a/src/components/preview.js b/src/components/preview.js index 676b371..a5a4e08 100644 --- a/src/components/preview.js +++ b/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, } diff --git a/src/components/search.js b/src/components/search.js index c625442..b2100bc 100644 --- a/src/components/search.js +++ b/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 = { diff --git a/src/components/skins.js b/src/components/skins.js index 6604e23..d1261f3 100644 --- a/src/components/skins.js +++ b/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 = { From c90d5c6ebd44aeee8cacaee28da1214f8c868c5a Mon Sep 17 00:00:00 2001 From: iamsaksham Date: Mon, 8 May 2017 13:53:44 +0530 Subject: [PATCH 4/4] give max height to svg for IE support --- css/emoji-mart.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index dd4960d..f41351f 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -67,6 +67,7 @@ .emoji-mart-anchors svg { fill: currentColor; + max-height: 18px; } .emoji-mart-scroll {