treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prettier 💄

release
Etienne Lemay 2017-10-07 00:02:02 -04:00
parent 9ff4c8855c
commit 3021758115
25 changed files with 660 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -51,6 +51,7 @@
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.4",
"mkdirp": "0.5.1",
"prettier": "1.7.4",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
@ -75,7 +76,8 @@
"test": "NODE_ENV=test karma start && size-limit",
"prepublish": "npm run build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"build-storybook": "build-storybook",
"prettier": "prettier --no-semi --single-quote --trailing-comma es5 --write \"src/**/*.js\""
},
"size-limit": [
{

19
src/components/anchors.js
View File

@ -12,7 +12,7 @@ export default class Anchors extends React.PureComponent {
const defaultCategory = categories.filter(category => category.first)[0]
this.state = {
selected: defaultCategory.name
selected: defaultCategory.name,
}
this.handleClick = this.handleClick.bind(this)
@ -29,7 +29,8 @@ export default class Anchors extends React.PureComponent {
var { categories, onAnchorClick, color, i18n } = this.props,
{ selected } = this.state
return <div className='emoji-mart-anchors'>
return (
<div className="emoji-mart-anchors">
{categories.map((category, i) => {
var { name, anchor } = category,
isSelected = name == selected
@ -44,15 +45,21 @@ export default class Anchors extends React.PureComponent {
title={i18n.categories[name.toLowerCase()]}
data-index={i}
onClick={this.handleClick}
className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
className={`emoji-mart-anchor ${isSelected
? 'emoji-mart-anchor-selected'
: ''}`}
style={{ color: isSelected ? color : null }}
>
<div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
<div dangerouslySetInnerHTML={{ __html: SVGs[name] }} />
<span
className="emoji-mart-anchor-bar"
style={{ backgroundColor: color }}
/>
</span>
)
})}
</div>
)
}
}
@ -63,5 +70,5 @@ Anchors.propTypes = {
Anchors.defaultProps = {
categories: [],
onAnchorClick: (() => {}),
onAnchorClick: () => {},
}

60
src/components/category.js
View File

@ -22,9 +22,22 @@ export default class Category extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
var { name, perLine, native, hasStickyPosition, emojis, emojiProps } = this.props,
var {
name,
perLine,
native,
hasStickyPosition,
emojis,
emojiProps,
} = this.props,
{ skin, size, set } = emojiProps,
{ perLine: nextPerLine, native: nextNative, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
{
perLine: nextPerLine,
native: nextNative,
hasStickyPosition: nextHasStickyPosition,
emojis: nextEmojis,
emojiProps: nextEmojiProps,
} = nextProps,
{ skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps,
shouldUpdate = false
@ -36,7 +49,13 @@ export default class Category extends React.Component {
shouldUpdate = !(emojis == nextEmojis)
}
if (skin != nextSkin || size != nextSize || native != nextNative || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
if (
skin != nextSkin ||
size != nextSize ||
native != nextNative ||
set != nextSet ||
hasStickyPosition != nextHasStickyPosition
) {
shouldUpdate = true
}
@ -81,7 +100,7 @@ export default class Category extends React.Component {
let frequentlyUsed = frequently.get(perLine)
if (frequentlyUsed.length) {
emojis = frequentlyUsed.map((id) => {
emojis = frequentlyUsed.map(id => {
const emoji = custom.filter(e => e.id === id)[0]
if (emoji) {
return emoji
@ -140,16 +159,28 @@ export default class Category extends React.Component {
}
}
return <div ref={this.setContainerRef} className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
<div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
<span style={labelSpanStyles} ref={this.setLabelRef}>{i18n.categories[name.toLowerCase()]}</span>
return (
<div
ref={this.setContainerRef}
className={`emoji-mart-category ${emojis && !emojis.length
? 'emoji-mart-no-results'
: ''}`}
style={containerStyles}
>
<div
style={labelStyles}
data-name={name}
className="emoji-mart-category-label"
>
<span style={labelSpanStyles} ref={this.setLabelRef}>
{i18n.categories[name.toLowerCase()]}
</span>
</div>
{emojis && emojis.map((emoji) =>
Emoji({ emoji: emoji, ...emojiProps })
)}
{emojis && emojis.map(emoji => Emoji({ emoji: emoji, ...emojiProps }))}
{emojis && !emojis.length &&
{emojis &&
!emojis.length && (
<div>
<div>
{Emoji({
@ -162,12 +193,11 @@ export default class Category extends React.Component {
})}
</div>
<div className='emoji-mart-no-results-label'>
{i18n.notfound}
<div className="emoji-mart-no-results-label">{i18n.notfound}</div>
</div>
)}
</div>
}
</div>
)
}
}

61
src/components/emoji.js
View File

@ -6,25 +6,27 @@ import { getData, getSanitizedData, unifiedToNative } from '../utils'
const SHEET_COLUMNS = 49
const _getPosition = (props) => {
const _getPosition = props => {
var { sheet_x, sheet_y } = _getData(props),
multiply = 100 / (SHEET_COLUMNS - 1)
return `${multiply * sheet_x}% ${multiply * sheet_y}%`
}
const _getData = (props) => {
const _getData = props => {
var { emoji, skin, set } = props
return getData(emoji, skin, set)
}
const _getSanitizedData = (props) => {
const _getSanitizedData = props => {
var { emoji, skin, set } = props
return getSanitizedData(emoji, skin, set)
}
const _handleClick = (e, props) => {
if (!props.onClick) { return }
if (!props.onClick) {
return
}
var { onClick } = props,
emoji = _getSanitizedData(props)
@ -32,7 +34,9 @@ const _handleClick = (e, props) => {
}
const _handleOver = (e, props) => {
if (!props.onOver) { return }
if (!props.onOver) {
return
}
var { onOver } = props,
emoji = _getSanitizedData(props)
@ -40,14 +44,16 @@ const _handleOver = (e, props) => {
}
const _handleLeave = (e, props) => {
if (!props.onLeave) { return }
if (!props.onLeave) {
return
}
var { onLeave } = props,
emoji = _getSanitizedData(props)
onLeave(emoji, e)
}
const Emoji = (props) => {
const Emoji = props => {
for (let k in Emoji.defaultProps) {
if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
props[k] = Emoji.defaultProps[k]
@ -98,21 +104,27 @@ const Emoji = (props) => {
width: props.size,
height: props.size,
display: 'inline-block',
backgroundImage: `url(${props.backgroundImageFn(props.set, props.sheetSize)})`,
backgroundImage: `url(${props.backgroundImageFn(
props.set,
props.sheetSize
)})`,
backgroundSize: `${100 * SHEET_COLUMNS}%`,
backgroundPosition: _getPosition(props),
}
}
return <span
return (
<span
key={props.emoji.id || props.emoji}
onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
onClick={e => _handleClick(e, props)}
onMouseEnter={e => _handleOver(e, props)}
onMouseLeave={e => _handleLeave(e, props)}
title={title}
className={className}>
className={className}
>
<span style={style}>{children}</span>
</span>
)
}
Emoji.propTypes = {
@ -125,12 +137,16 @@ Emoji.propTypes = {
tooltip: 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', 'messenger', 'facebook']),
set: PropTypes.oneOf([
'apple',
'google',
'twitter',
'emojione',
'messenger',
'facebook',
]),
size: PropTypes.number.isRequired,
emoji: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]).isRequired,
emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
}
Emoji.defaultProps = {
@ -140,10 +156,11 @@ Emoji.defaultProps = {
native: false,
forceSize: false,
tooltip: false,
backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets/${sheetSize}.png`),
onOver: (() => {}),
onLeave: (() => {}),
onClick: (() => {}),
backgroundImageFn: (set, sheetSize) =>
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets/${sheetSize}.png`,
onOver: () => {},
onLeave: () => {},
onClick: () => {},
}
export default Emoji

113
src/components/picker.js
View File

@ -73,11 +73,23 @@ export default class Picker extends React.PureComponent {
})
}
for (let categoryIndex = 0; categoryIndex < allCategories.length; categoryIndex++) {
for (
let categoryIndex = 0;
categoryIndex < allCategories.length;
categoryIndex++
) {
const category = allCategories[categoryIndex]
let isIncluded = props.include && props.include.length ? props.include.indexOf(category.name.toLowerCase()) > -1 : true
let isExcluded = props.exclude && props.exclude.length ? props.exclude.indexOf(category.name.toLowerCase()) > -1 : false
if (!isIncluded || isExcluded) { continue }
let isIncluded =
props.include && props.include.length
? props.include.indexOf(category.name.toLowerCase()) > -1
: true
let isExcluded =
props.exclude && props.exclude.length
? props.exclude.indexOf(category.name.toLowerCase()) > -1
: false
if (!isIncluded || isExcluded) {
continue
}
if (props.emojisToShowFilter) {
let newEmojis = []
@ -103,8 +115,14 @@ export default class Picker extends React.PureComponent {
}
}
let includeRecent = props.include && props.include.length ? props.include.indexOf('recent') > -1 : true
let excludeRecent = props.exclude && props.exclude.length ? props.exclude.indexOf('recent') > -1 : false
let includeRecent =
props.include && props.include.length
? props.include.indexOf('recent') > -1
: true
let excludeRecent =
props.exclude && props.exclude.length
? props.exclude.indexOf('recent') > -1
: false
if (includeRecent && !excludeRecent) {
this.hideRecent = false
this.categories.unshift(RECENT_CATEGORY)
@ -162,17 +180,23 @@ export default class Picker extends React.PureComponent {
const prefixes = ['', '-webkit-', '-ms-', '-moz-', '-o-']
prefixes.forEach(prefix => stickyTestElement.style.position = `${prefix}sticky`)
prefixes.forEach(
prefix => (stickyTestElement.style.position = `${prefix}sticky`)
)
this.hasStickyPosition = !!stickyTestElement.style.position.length
}
handleEmojiOver(emoji) {
var { preview } = this
if (!preview) { return }
if (!preview) {
return
}
// Use Array.prototype.find() when it is more widely supported.
const emojiData = CUSTOM_CATEGORY.emojis.filter(customEmoji => customEmoji.id === emoji.id)[0]
const emojiData = CUSTOM_CATEGORY.emojis.filter(
customEmoji => customEmoji.id === emoji.id
)[0]
for (let key in emojiData) {
if (emojiData.hasOwnProperty(key)) {
emoji[key] = emojiData[key]
@ -185,7 +209,9 @@ export default class Picker extends React.PureComponent {
handleEmojiLeave(emoji) {
var { preview } = this
if (!preview) { return }
if (!preview) {
return
}
this.leaveTimeout = setTimeout(() => {
preview.setState({ emoji: null })
@ -241,7 +267,7 @@ export default class Picker extends React.PureComponent {
minTop = 0
for (let i = 0, l = this.categories.length; i < l; i++) {
let ii = scrollingDown ? (this.categories.length - 1 - i) : i,
let ii = scrollingDown ? this.categories.length - 1 - i : i,
category = this.categories[ii],
component = this.categoryRefs[`category-${ii}`]
@ -261,7 +287,9 @@ export default class Picker extends React.PureComponent {
}
if (scrollTop < minTop) {
activeCategory = this.categories.filter(category => !(category.anchor === false))[0]
activeCategory = this.categories.filter(
category => !(category.anchor === false)
)[0]
} else if (scrollTop + this.clientHeight >= this.scrollHeight) {
activeCategory = this.categories[this.categories.length - 1]
}
@ -346,7 +374,9 @@ export default class Picker extends React.PureComponent {
}
getCategories() {
return this.state.firstRender ? this.categories.slice(0, 3) : this.categories
return this.state.firstRender
? this.categories.slice(0, 3)
: this.categories
}
setAnchorsRef(c) {
@ -374,12 +404,30 @@ export default class Picker extends React.PureComponent {
}
render() {
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, emojiTooltip, include, exclude, autoFocus } = this.props,
var {
perLine,
emojiSize,
set,
sheetSize,
style,
title,
emoji,
color,
native,
backgroundImageFn,
emojisToShowFilter,
showPreview,
emojiTooltip,
include,
exclude,
autoFocus,
} = this.props,
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2 + measureScrollbar()
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
return <div style={{width: width, ...style}} className='emoji-mart'>
<div className='emoji-mart-bar'>
return (
<div style={{ width: width, ...style }} className="emoji-mart">
<div className="emoji-mart-bar">
<Anchors
ref={this.setAnchorsRef}
i18n={this.i18n}
@ -400,9 +448,14 @@ export default class Picker extends React.PureComponent {
autoFocus={autoFocus}
/>
<div ref={this.setScrollRef} className='emoji-mart-scroll' onScroll={this.handleScroll}>
<div
ref={this.setScrollRef}
className="emoji-mart-scroll"
onScroll={this.handleScroll}
>
{this.getCategories().map((category, i) => {
return <Category
return (
<Category
ref={this.setCategoryRef.bind(this, `category-${i}`)}
key={category.name}
name={category.name}
@ -411,7 +464,9 @@ export default class Picker extends React.PureComponent {
native={native}
hasStickyPosition={this.hasStickyPosition}
i18n={this.i18n}
custom={category.name == 'Recent' ? CUSTOM_CATEGORY.emojis : undefined}
custom={
category.name == 'Recent' ? CUSTOM_CATEGORY.emojis : undefined
}
emojiProps={{
native: native,
skin: skin,
@ -426,10 +481,12 @@ export default class Picker extends React.PureComponent {
onClick: this.handleEmojiClick,
}}
/>
)
})}
</div>
{showPreview && <div className='emoji-mart-bar'>
{showPreview && (
<div className="emoji-mart-bar">
<Preview
ref={this.setPreviewRef}
title={title}
@ -444,11 +501,13 @@ export default class Picker extends React.PureComponent {
}}
skinsProps={{
skin: skin,
onChange: this.handleSkinChange
onChange: this.handleSkinChange,
}}
/>
</div>}
</div>
)}
</div>
)
}
}
@ -472,17 +531,19 @@ Picker.propTypes = {
include: PropTypes.arrayOf(PropTypes.string),
exclude: PropTypes.arrayOf(PropTypes.string),
autoFocus: PropTypes.bool,
custom: PropTypes.arrayOf(PropTypes.shape({
custom: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
short_names: PropTypes.arrayOf(PropTypes.string).isRequired,
emoticons: PropTypes.arrayOf(PropTypes.string),
keywords: PropTypes.arrayOf(PropTypes.string),
imageUrl: PropTypes.string.isRequired,
})),
})
),
}
Picker.defaultProps = {
onClick: (() => {}),
onClick: () => {},
emojiSize: 24,
perLine: 9,
i18n: {},

43
src/components/pickerSpec.js
View File

@ -1,42 +1,37 @@
import React from 'react';
import TestUtils from 'react-dom/test-utils';
import Picker from './picker';
import React from 'react'
import TestUtils from 'react-dom/test-utils'
import Picker from './picker'
const {
click
} = TestUtils.Simulate;
const { click } = TestUtils.Simulate
const {
renderIntoDocument,
scryRenderedComponentsWithType,
findRenderedComponentWithType,
} = TestUtils;
} = TestUtils
describe('Picker', () => {
let subject;
let subject
it('works', () => {
subject = render();
expect(subject).toBeDefined();
});
subject = render()
expect(subject).toBeDefined()
})
describe('categories', () => {
it('shows 10 by default', () => {
subject = render();
expect(subject.categories.length).toEqual(10);
});
subject = render()
expect(subject.categories.length).toEqual(10)
})
it('will not show some based upon our filter', () => {
subject = render({emojisToShowFilter: (unified) => false});
expect(subject.categories.length).toEqual(2);
});
});
subject = render({ emojisToShowFilter: unified => false })
expect(subject.categories.length).toEqual(2)
})
})
function render(props = {}) {
const defaultProps = {
};
return renderIntoDocument(
<Picker {...defaultProps} {...props} />
);
const defaultProps = {}
return renderIntoDocument(<Picker {...defaultProps} {...props} />)
}
});
})

64
src/components/preview.js
View File

@ -29,43 +29,49 @@ export default class Preview extends React.PureComponent {
listedEmoticons.push(emoticon)
})
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
return (
<div className="emoji-mart-preview">
<div className="emoji-mart-preview-emoji">
{Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
</div>
<div className='emoji-mart-preview-data'>
<div className='emoji-mart-preview-name'>{emoji.name}</div>
<div className='emoji-mart-preview-shortnames'>
{emojiData.short_names.map((short_name) =>
<span key={short_name} className='emoji-mart-preview-shortname'>:{short_name}:</span>
)}
</div>
<div className='emoji-mart-preview-emoticons'>
{listedEmoticons.map((emoticon) =>
<span key={emoticon} className='emoji-mart-preview-emoticon'>{emoticon}</span>
)}
</div>
</div>
</div>
} else {
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
{idleEmoji && idleEmoji.length && Emoji({ emoji: idleEmoji, ...emojiProps })}
</div>
<div className='emoji-mart-preview-data'>
<span className='emoji-mart-title-label'>
{title}
<div className="emoji-mart-preview-data">
<div className="emoji-mart-preview-name">{emoji.name}</div>
<div className="emoji-mart-preview-shortnames">
{emojiData.short_names.map(short_name => (
<span key={short_name} className="emoji-mart-preview-shortname">
:{short_name}:
</span>
))}
</div>
<div className="emoji-mart-preview-emoticons">
{listedEmoticons.map(emoticon => (
<span key={emoticon} className="emoji-mart-preview-emoticon">
{emoticon}
</span>
))}
</div>
</div>
</div>
)
} else {
return (
<div className="emoji-mart-preview">
<div className="emoji-mart-preview-emoji">
{idleEmoji &&
idleEmoji.length &&
Emoji({ emoji: idleEmoji, ...emojiProps })}
</div>
<div className='emoji-mart-preview-skins'>
<Skins
{...skinsProps}
/>
<div className="emoji-mart-preview-data">
<span className="emoji-mart-title-label">{title}</span>
</div>
<div className="emoji-mart-preview-skins">
<Skins {...skinsProps} />
</div>
</div>
)
}
}
}

14
src/components/search.js
View File

@ -13,13 +13,15 @@ export default class Search extends React.PureComponent {
handleChange() {
var value = this.input.value
this.props.onSearch(emojiIndex.search(value, {
this.props.onSearch(
emojiIndex.search(value, {
emojisToShowFilter: this.props.emojisToShowFilter,
maxResults: this.props.maxResults,
include: this.props.include,
exclude: this.props.exclude,
custom: this.props.custom,
}))
})
)
}
setRef(c) {
@ -33,15 +35,17 @@ export default class Search extends React.PureComponent {
render() {
var { i18n, autoFocus } = this.props
return <div className='emoji-mart-search'>
return (
<div className="emoji-mart-search">
<input
ref={this.setRef}
type='text'
type="text"
onChange={this.handleChange}
placeholder={i18n.search}
autoFocus={autoFocus}
/>
</div>
)
}
}
@ -53,7 +57,7 @@ Search.propTypes = {
}
Search.defaultProps = {
onSearch: (() => {}),
onSearch: () => {},
maxResults: 75,
emojisToShowFilter: null,
autoFocus: false,

19
src/components/skins.js
View File

@ -39,21 +39,30 @@ export default class Skins extends React.PureComponent {
skinToneNodes.push(
<span
key={`skin-tone-${skinTone}`}
className={`emoji-mart-skin-swatch ${selected ? 'emoji-mart-skin-swatch-selected' : ''}`}
className={`emoji-mart-skin-swatch ${selected
? 'emoji-mart-skin-swatch-selected'
: ''}`}
>
<span
onClick={this.handleClick}
data-skin={skinTone}
className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`} />
className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}
/>
</span>
)
}
return <div>
<div className={`emoji-mart-skin-swatches ${opened ? 'emoji-mart-skin-swatches-opened' : ''}`}>
return (
<div>
<div
className={`emoji-mart-skin-swatches ${opened
? 'emoji-mart-skin-swatches-opened'
: ''}`}
>
{skinToneNodes}
</div>
</div>
)
}
}
@ -63,5 +72,5 @@ Skins.propTypes = {
}
Skins.defaultProps = {
onChange: (() => {}),
onChange: () => {},
}

2
src/data/index.js
View File

@ -19,7 +19,7 @@ function uncompress (list) {
short_names: datum.short_names,
name: datum.name,
keywords: datum.keywords,
emoticons: datum.emoticons
emoticons: datum.emoticons,
})
}
}

20
src/polyfills/createClass.js
View File

@ -3,17 +3,17 @@ const _Object = Object
export default (function createClass() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
_Object.defineProperty(target, descriptor.key, descriptor);
var descriptor = props[i]
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) descriptor.writable = true
_Object.defineProperty(target, descriptor.key, descriptor)
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}());
if (protoProps) defineProperties(Constructor.prototype, protoProps)
if (staticProps) defineProperties(Constructor, staticProps)
return Constructor
}
})()

11
src/polyfills/extends.js
View File

@ -1,15 +1,16 @@
const _Object = Object
export default _Object.assign || function (target) {
export default _Object.assign ||
function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var source = arguments[i]
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
target[key] = source[key]
}
}
}
return target;
};
return target
}

19
src/polyfills/inherits.js
View File

@ -1,8 +1,11 @@
const _Object = Object
export default function inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError(
'Super expression must either be null or a function, not ' +
typeof superClass
)
}
subClass.prototype = _Object.create(superClass && superClass.prototype, {
@ -10,10 +13,12 @@ export default function inherits(subClass, superClass) {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
configurable: true,
},
})
if (superClass) {
_Object.setPrototypeOf ? _Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
_Object.setPrototypeOf
? _Object.setPrototypeOf(subClass, superClass)
: (subClass.__proto__ = superClass)
}
}
};

5
src/polyfills/objectGetPrototypeOf.js
View File

@ -1,6 +1,7 @@
const _Object = Object
export default _Object.getPrototypeOf || function (O) {
export default _Object.getPrototypeOf ||
function(O) {
O = Object(O)
if (typeof O.constructor === 'function' && O instanceof O.constructor) {
@ -8,4 +9,4 @@ export default _Object.getPrototypeOf || function (O) {
}
return O instanceof Object ? Object.prototype : null
};
}

10
src/polyfills/possibleConstructorReturn.js
View File

@ -1,7 +1,11 @@
export default function possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
)
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
return call && (typeof call === 'object' || typeof call === 'function')
? call
: self
}

49
src/polyfills/stringFromCodePoint.js
View File

@ -1,39 +1,42 @@
const _String = String
export default _String.fromCodePoint || function stringFromCodePoint() {
var MAX_SIZE = 0x4000;
var codeUnits = [];
var highSurrogate;
var lowSurrogate;
var index = -1;
var length = arguments.length;
export default _String.fromCodePoint ||
function stringFromCodePoint() {
var MAX_SIZE = 0x4000
var codeUnits = []
var highSurrogate
var lowSurrogate
var index = -1
var length = arguments.length
if (!length) {
return '';
return ''
}
var result = '';
var result = ''
while (++index < length) {
var codePoint = Number(arguments[index]);
var codePoint = Number(arguments[index])
if (
!isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity`
codePoint < 0 || // not a valid Unicode code point
codePoint > 0x10FFFF || // not a valid Unicode code point
codePoint > 0x10ffff || // not a valid Unicode code point
Math.floor(codePoint) != codePoint // not an integer
) {
throw RangeError('Invalid code point: ' + codePoint);
throw RangeError('Invalid code point: ' + codePoint)
}
if (codePoint <= 0xFFFF) { // BMP code point
codeUnits.push(codePoint);
} else { // Astral code point; split in surrogate halves
if (codePoint <= 0xffff) {
// BMP code point
codeUnits.push(codePoint)
} else {
// Astral code point; split in surrogate halves
// http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
codePoint -= 0x10000;
highSurrogate = (codePoint >> 10) + 0xD800;
lowSurrogate = (codePoint % 0x400) + 0xDC00;
codeUnits.push(highSurrogate, lowSurrogate);
codePoint -= 0x10000
highSurrogate = (codePoint >> 10) + 0xd800
lowSurrogate = codePoint % 0x400 + 0xdc00
codeUnits.push(highSurrogate, lowSurrogate)
}
if (index + 1 === length || codeUnits.length > MAX_SIZE) {
result += String.fromCharCode.apply(null, codeUnits);
codeUnits.length = 0;
result += String.fromCharCode.apply(null, codeUnits)
codeUnits.length = 0
}
}
return result;
};
return result
}

4
src/utils/build-search.js
View File

@ -6,8 +6,8 @@ export default data => {
return
}
(Array.isArray(strings) ? strings : [strings]).forEach((string) => {
(split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => {
;(Array.isArray(strings) ? strings : [strings]).forEach(string => {
;(split ? string.split(/[-|_|\s]+/) : [string]).forEach(s => {
s = s.toLowerCase()
if (search.indexOf(s) == -1) {

37
src/utils/emoji-index.js
View File

@ -26,7 +26,7 @@ for (let emoji in data.emojis) {
}
function addCustomToPool(custom, pool) {
custom.forEach((emoji) => {
custom.forEach(emoji => {
let emojiId = emoji.id || emoji.short_names[0]
if (emojiId && !pool[emojiId]) {
@ -36,7 +36,10 @@ function addCustomToPool(custom, pool) {
})
}
function search(value, { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}) {
function search(
value,
{ emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}
) {
addCustomToPool(custom, originalPool)
maxResults || (maxResults = 75)
@ -62,25 +65,36 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
pool = {}
data.categories.forEach(category => {
let isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true
let isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false
let isIncluded =
include && include.length
? include.indexOf(category.name.toLowerCase()) > -1
: true
let isExcluded =
exclude && exclude.length
? exclude.indexOf(category.name.toLowerCase()) > -1
: false
if (!isIncluded || isExcluded) {
return
}
category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId])
category.emojis.forEach(
emojiId => (pool[emojiId] = data.emojis[emojiId])
)
})
if (custom.length) {
let customIsIncluded = include && include.length ? include.indexOf('custom') > -1 : true
let customIsExcluded = exclude && exclude.length ? exclude.indexOf('custom') > -1 : false
let customIsIncluded =
include && include.length ? include.indexOf('custom') > -1 : true
let customIsExcluded =
exclude && exclude.length ? exclude.indexOf('custom') > -1 : false
if (customIsIncluded && !customIsExcluded) {
addCustomToPool(custom, pool)
}
}
}
allResults = values.map((value) => {
allResults = values
.map(value => {
var aPool = pool,
aIndex = index,
length = 0
@ -127,7 +141,8 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
}
return aIndex.results
}).filter(a => a)
})
.filter(a => a)
if (allResults.length > 1) {
results = intersect.apply(null, allResults)
@ -140,7 +155,9 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
if (results) {
if (emojisToShowFilter) {
results = results.filter((result) => emojisToShowFilter(data.emojis[result.id].unified))
results = results.filter(result =>
emojisToShowFilter(data.emojis[result.id].unified)
)
}
if (results && results.length > maxResults) {

36
src/utils/emoji-indexSpec.js
View File

@ -1,36 +1,42 @@
import emojiIndex from './emoji-index';
import emojiIndex from './emoji-index'
describe('#emojiIndex', () => {
describe('search', function() {
it('should work', () => {
expect(emojiIndex.search('pineapple')).toEqual([{
expect(emojiIndex.search('pineapple')).toEqual([
{
id: 'pineapple',
name: 'Pineapple',
colons: ':pineapple:',
emoticons: [],
unified: '1f34d',
skin: null,
native: '🍍'
}]);
});
native: '🍍',
},
])
})
it('should filter only emojis we care about, exclude pineapple', () => {
let emojisToShowFilter = (unified) => unified !== '1F34D';
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
.not.toContain('pineapple');
});
let emojisToShowFilter = unified => unified !== '1F34D'
expect(
emojiIndex.search('apple', { emojisToShowFilter }).map(obj => obj.id)
).not.toContain('pineapple')
})
it('can include/exclude categories', () => {
expect(emojiIndex.search('flag', { include: ['people'] }))
.toEqual([])
expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([])
})
it('can search for thinking_face', () => {
expect(emojiIndex.search('thinking_fac').map(x => x.id)).toEqual(['thinking_face'])
expect(emojiIndex.search('thinking_fac').map(x => x.id)).toEqual([
'thinking_face',
])
})
it('can search for woman-facepalming', () => {
expect(emojiIndex.search('woman-facep').map(x => x.id)).toEqual(['woman-facepalming']);
expect(emojiIndex.search('woman-facep').map(x => x.id)).toEqual([
'woman-facepalming',
])
})
})
})
});
});

6
src/utils/frequently.js
View File

@ -52,11 +52,13 @@ function get(perLine) {
for (let key in frequently) {
if (frequently.hasOwnProperty(key)) {
frequentlyKeys.push(key);
frequentlyKeys.push(key)
}
}
const sorted = frequentlyKeys.sort((a, b) => frequently[a] - frequently[b]).reverse()
const sorted = frequentlyKeys
.sort((a, b) => frequently[a] - frequently[b])
.reverse()
const sliced = sorted.slice(0, quantity)
const last = store.get('last')

22
src/utils/index.js
View File

@ -5,20 +5,26 @@ import stringFromCodePoint from '../polyfills/stringFromCodePoint'
const _JSON = JSON
const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/
const SKINS = [
'1F3FA', '1F3FB', '1F3FC',
'1F3FD', '1F3FE', '1F3FF',
]
const SKINS = ['1F3FA', '1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF']
function unifiedToNative(unified) {
var unicodes = unified.split('-'),
codePoints = unicodes.map((u) => `0x${u}`)
codePoints = unicodes.map(u => `0x${u}`)
return stringFromCodePoint.apply(null, codePoints)
}
function sanitize(emoji) {
var { name, short_names, skin_tone, skin_variations, emoticons, unified, custom, imageUrl } = emoji,
var {
name,
short_names,
skin_tone,
skin_variations,
emoticons,
unified,
custom,
imageUrl,
} = emoji,
id = emoji.id || short_names[0],
colons = `:${id}:`
@ -29,7 +35,7 @@ function sanitize(emoji) {
colons,
emoticons,
custom,
imageUrl
imageUrl,
}
}
@ -185,5 +191,5 @@ export {
intersect,
deepMerge,
unifiedToNative,
measureScrollbar
measureScrollbar,
}

7
src/utils/store.js
View File

@ -2,8 +2,8 @@ var NAMESPACE = 'emoji-mart'
const _JSON = JSON
var isLocalStorageSupported = typeof window !== 'undefined' &&
'localStorage' in window
var isLocalStorageSupported =
typeof window !== 'undefined' && 'localStorage' in window
function update(state) {
for (let key in state) {
@ -16,8 +16,7 @@ function set(key, value) {
if (!isLocalStorageSupported) return
try {
window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)
} catch (e) {
}
} catch (e) {}
}
function get(key) {

35
src/vendor/raf-polyfill.js vendored
View File

@ -7,28 +7,33 @@
var isWindowAvailable = typeof window !== 'undefined'
isWindowAvailable && (function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
isWindowAvailable &&
(function() {
var lastTime = 0
var vendors = ['ms', 'moz', 'webkit', 'o']
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
window.requestAnimationFrame =
window[vendors[x] + 'RequestAnimationFrame']
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame']
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
var currTime = new Date().getTime()
var timeToCall = Math.max(0, 16 - (currTime - lastTime))
var id = window.setTimeout(function() {
callback(currTime + timeToCall)
}, timeToCall)
lastTime = currTime + timeToCall;
return id;
};
lastTime = currTime + timeToCall
return id
}
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
clearTimeout(id)
}
})()

25
src/webpack.config.js
View File

@ -1,10 +1,11 @@
var path = require('path')
var pack = require('../package.json')
var webpack = require('webpack')
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin
var PROD = process.env.NODE_ENV === 'production';
var TEST = process.env.NODE_ENV === 'test';
var PROD = process.env.NODE_ENV === 'production'
var TEST = process.env.NODE_ENV === 'test'
var config = {
entry: path.resolve('src/index.js'),
@ -22,28 +23,22 @@ var config = {
{
test: /\.js$/,
use: 'babel-loader',
include: [
path.resolve('src'),
path.resolve('node_modules/measure-scrollbar'),
path.resolve('data'),
],
include: [path.resolve('src'), path.resolve('data')],
},
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader'
loader: 'babel-loader',
},
{
loader: 'svg-jsx-loader',
options: {
es6: true
}
es6: true,
},
},
],
include: [
path.resolve('src/svgs'),
],
include: [path.resolve('src/svgs')],
},
],
},
@ -64,7 +59,7 @@ var config = {
if (!TEST) {
config.externals = config.externals.concat([
{
'react': {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',

4
yarn.lock
View File

@ -4751,6 +4751,10 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
prettier@1.7.4:
version "1.7.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
private@^0.1.6, private@^0.1.7, private@~0.1.5:
version "0.1.7"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"