mirrors
/
emoji-mart-lazyload
mirror of https://github.com/mashirozx/emoji-mart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🏬 Emoji Mart™

exclude-unsupported-native-emojis
Etienne Lemay 2016-07-27 11:35:12 -04:00
parent 760d140410
commit 9648c7d8e2
14 changed files with 106 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1,7 +1,7 @@
<h1 align="center">⛏ EmojiPicker ⛏</h1>
<h1 align="center">🏬 Emoji Mart</h1>
```jsx
import {Picker} from 'emoji-picker'
import {Picker} from 'emoji-mart'
<Picker
emojiSize={24}

119
css/emoji-picker.css → css/emoji-mart.css
View File

@ -1,9 +1,9 @@
.emoji-picker,
.emoji-picker * {
.emoji-mart,
.emoji-mart * {
box-sizing: border-box;
}
.emoji-picker {
.emoji-mart {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
font-size: 16px;
display: inline-block;
@ -13,27 +13,27 @@
background: #fff;
}
.emoji-picker .emoji-picker-emoji {
.emoji-mart .emoji-mart-emoji {
padding: 6px;
}
.emoji-picker-bar:first-child {
.emoji-mart-bar:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.emoji-picker-bar:last-child {
.emoji-mart-bar:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.emoji-picker-anchors {
.emoji-mart-anchors {
display: flex;
justify-content: space-between;
padding: 0 6px;
color: #858585;
}
.emoji-picker-anchor {
.emoji-mart-anchor {
position: relative;
flex: 1;
text-align: center;
@ -41,33 +41,33 @@
overflow: hidden;
transition: color .1s ease-out;
}
.emoji-picker-anchor:hover,
.emoji-picker-anchor-selected {
.emoji-mart-anchor:hover,
.emoji-mart-anchor-selected {
color: #464646;
}
.emoji-picker-anchor-selected .emoji-picker-anchor-bar {
.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
bottom: 0;
}
.emoji-picker-anchor-bar {
.emoji-mart-anchor-bar {
position: absolute;
bottom: -3px; left: 0;
width: 100%; height: 3px;
background-color: #464646;
}
.emoji-picker-anchors i {
.emoji-mart-anchors i {
display: inline-block;
width: 100%;
max-width: 22px;
}
.emoji-picker-anchors svg {
.emoji-mart-anchors svg {
fill: currentColor;
}
.emoji-picker-scroll {
.emoji-mart-scroll {
overflow: scroll;
height: 270px;
padding: 0 6px 6px 6px;
@ -75,7 +75,7 @@
border-width: 1px 0;
}
.emoji-picker-search {
.emoji-mart-search {
font-size: 16px;
display: block;
width: 100%;
@ -86,12 +86,12 @@
outline: 0;
}
.emoji-picker-category .emoji-picker-emoji span {
.emoji-mart-category .emoji-mart-emoji span {
z-index: 1;
position: relative;
}
.emoji-picker-category .emoji-picker-emoji:hover:before {
.emoji-mart-category .emoji-mart-emoji:hover:before {
z-index: 0;
content: "";
position: absolute;
@ -101,14 +101,14 @@
border-radius: 100%;
}
.emoji-picker-category-label {
.emoji-mart-category-label {
z-index: 2;
position: relative;
position: -webkit-sticky;
top: 0;
}
.emoji-picker-category-label span {
.emoji-mart-category-label span {
display: block;
width: 100%;
font-weight: 500;
@ -117,84 +117,85 @@
background-color: rgba(255, 255, 255, .95);
}
.emoji-picker-emoji {
.emoji-mart-emoji {
position: relative;
display: inline-block;
font-size: 0;
}
.emoji-picker-no-results {
.emoji-mart-no-results {
font-size: 14px;
text-align: center;
padding-top: 70px;
color: #858585;
}
.emoji-picker-no-results span {
.emoji-mart-no-results span {
display: inline-block;
vertical-align: middle;
}
.emoji-picker-preview {
.emoji-mart-preview {
position: relative;
height: 70px;
}
.emoji-picker-preview-emoji,
.emoji-picker-preview-data,
.emoji-picker-preview-skins {
.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.emoji-picker-preview-emoji {
.emoji-mart-preview-emoji {
left: 12px;
}
.emoji-picker-preview-data {
.emoji-mart-preview-data {
left: 68px; right: 12px;
word-break: break-word;
}
.emoji-picker-preview-skins {
.emoji-mart-preview-skins {
right: 30px;
text-align: right;
}
.emoji-picker-preview-name {
.emoji-mart-preview-name {
font-size: 14px;
}
.emoji-picker-preview-shortname {
.emoji-mart-preview-shortname {
font-size: 12px;
color: #888;
}
.emoji-picker-preview-shortname + .emoji-picker-preview-shortname,
.emoji-picker-preview-shortname + .emoji-picker-preview-emoticon,
.emoji-picker-preview-emoticon + .emoji-picker-preview-emoticon {
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
margin-left: .5em;
}
.emoji-picker-preview-emoticon {
.emoji-mart-preview-emoticon {
font-size: 11px;
color: #bbb;
}
.emoji-picker-title span {
.emoji-mart-title span {
display: inline-block;
vertical-align: middle;
}
.emoji-picker-title .emoji-picker-emoji {
.emoji-mart-title .emoji-mart-emoji {
padding: 0;
}
.emoji-picker-title-label {
.emoji-mart-title-label {
color: #999A9C;
font-size: 26px;
font-weight: 500;
font-weight: 300;
}
.emoji-picker-skin-swatches {
.emoji-mart-skin-swatches {
font-size: 0;
padding: 2px 0;
border: 1px solid #d9d9d9;
@ -202,16 +203,16 @@
background-color: #fff;
}
.emoji-picker-skin-swatches-opened .emoji-picker-skin-swatch {
.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch {
width: 16px;
padding: 0 2px;
}
.emoji-picker-skin-swatches-opened .emoji-picker-skin-swatch-selected:after {
.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
opacity: .75;
}
.emoji-picker-skin-swatch {
.emoji-mart-skin-swatch {
display: inline-block;
width: 0;
vertical-align: middle;
@ -220,19 +221,19 @@
transition-timing-function: ease-out;
}
.emoji-picker-skin-swatch:nth-child(1) { transition-delay: 0 }
.emoji-picker-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-picker-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-picker-skin-swatch:nth-child(4) { transition-delay: .09s }
.emoji-picker-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-picker-skin-swatch:nth-child(6) { transition-delay: .15s }
.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0 }
.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 }
.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
.emoji-picker-skin-swatch-selected {
.emoji-mart-skin-swatch-selected {
position: relative;
width: 16px;
padding: 0 2px;
}
.emoji-picker-skin-swatch-selected:after {
.emoji-mart-skin-swatch-selected:after {
content: "";
position: absolute;
top: 50%; left: 50%;
@ -245,16 +246,16 @@
transition: opacity .2s ease-out;
}
.emoji-picker-skin {
.emoji-mart-skin {
display: inline-block;
width: 100%; padding-top: 100%;
max-width: 12px;
border-radius: 100%;
}
.emoji-picker-skin-tone-1 { background-color: #ffc93a }
.emoji-picker-skin-tone-2 { background-color: #fadcbc }
.emoji-picker-skin-tone-3 { background-color: #e0bb95 }
.emoji-picker-skin-tone-4 { background-color: #bf8f68 }
.emoji-picker-skin-tone-5 { background-color: #9b643d }
.emoji-picker-skin-tone-6 { background-color: #594539 }
.emoji-mart-skin-tone-1 { background-color: #ffc93a }
.emoji-mart-skin-tone-2 { background-color: #fadcbc }
.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
.emoji-mart-skin-tone-5 { background-color: #9b643d }
.emoji-mart-skin-tone-6 { background-color: #594539 }

4
example/index.html
View File

@ -1,8 +1,8 @@
<html>
<head>
<meta charset="utf-8">
<title>EmojiPicker</title>
<link rel="stylesheet" href="../css/emoji-picker.css">
<title>Emoji Mart | One component to pick them all</title>
<link rel="stylesheet" href="../css/emoji-mart.css">
</head>
<body>
<div></div>

6
example/index.js
View File

@ -27,7 +27,7 @@ class Example extends React.Component {
render() {
return <div>
<h1>EmojiPicker</h1>
<h1>Emoji Mart</h1>
<div>
{['Apple', 'Google', 'Twitter', 'EmojiOne'].map((set) => {
@ -57,11 +57,9 @@ class Example extends React.Component {
margin: '1em',
width: '460px',
}}>
<Operator>import</Operator> &#123;Picker&#125; <Operator>from</Operator> <String>'emoji-picker'</String>
<Operator>import</Operator> &#123;Picker&#125; <Operator>from</Operator> <String>'emoji-mart'</String>
<br />
<br /><Operator>&lt;</Operator><Variable>Picker</Variable>
<br /> title<Operator>=</Operator><String>'EmojiPicker'</String>
<br /> emoji<Operator>=</Operator><String>'tophat'</String>
<br /> emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
<br /> perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {this.state.perLine < 10 ? ' ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='7' max='16' value={this.state.perLine} />
<br /> skin<Operator>=</Operator>&#123;<Variable>{this.state.skin}</Variable>&#125; <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />

12
package.json
View File

@ -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": {

6
src/components/anchors.js
View File

@ -21,7 +21,7 @@ export default class Anchors extends React.Component {
var { categories, onAnchorClick, color } = this.props,
{ selected } = this.state
return <div className='emoji-picker-anchors'>
return <div className='emoji-mart-anchors'>
{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 }}
>
<InlineSVG src={SVGs[name]} />
<span className='emoji-picker-anchor-bar' style={{ backgroundColor: color }}></span>
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
</span>
)
})}

8
src/components/category.js
View File

@ -131,8 +131,8 @@ export default class Category extends React.Component {
}
}
return <div ref='container' className='emoji-picker-category' style={containerStyles}>
<div style={labelStyles} data-name={name} className='emoji-picker-category-label'>
return <div ref='container' className='emoji-mart-category' style={containerStyles}>
<div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
<span style={labelSpanStyles} ref='label'>{LABELS[name]}</span>
</div>
@ -145,14 +145,14 @@ export default class Category extends React.Component {
)}
{emojis && !emojis.length &&
<div className='emoji-picker-no-results'>
<div className='emoji-mart-no-results'>
<Emoji
{...emojiProps}
size={22}
emoji='sleuth_or_spy'
/>
<span className='emoji-picker-no-results-label'>
<span className='emoji-mart-no-results-label'>
No emoji found
</span>
</div>

2
src/components/emoji.js
View File

@ -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'>
<span style={{
width: size,
height: size,

12
src/components/picker.js
View File

@ -220,8 +220,8 @@ export default class Picker extends React.Component {
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2
return <div style={{...style, width: width}} className='emoji-picker'>
<div className='emoji-picker-bar'>
return <div style={{...style, width: width}} className='emoji-mart'>
<div className='emoji-mart-bar'>
<Anchors
ref='anchors'
color={color}
@ -230,7 +230,7 @@ export default class Picker extends React.Component {
/>
</div>
<div ref="scroll" className='emoji-picker-scroll' onScroll={this.handleScroll.bind(this)}>
<div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
<Search
ref='search'
onSearch={this.handleSearch.bind(this)}
@ -256,7 +256,7 @@ export default class Picker extends React.Component {
})}
</div>
<div className='emoji-picker-bar'>
<div className='emoji-mart-bar'>
<Preview
ref='preview'
title={title}
@ -294,7 +294,7 @@ Picker.defaultProps = {
perLine: 9,
style: {},
skin: 1,
title: 'EmojiPicker',
emoji: 'tophat',
title: 'Emoji Mart™',
emoji: 'department_store',
color: '#ae65c5',
}

26
src/components/preview.js
View File

@ -26,8 +26,8 @@ export default class Preview extends React.Component {
}
}
return <div className='emoji-picker-preview'>
<div className='emoji-picker-preview-emoji'>
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
<Emoji
key={emoji.id}
emoji={emoji}
@ -35,36 +35,36 @@ export default class Preview extends React.Component {
/>
</div>
<div className='emoji-picker-preview-data'>
<div className='emoji-picker-preview-name'>{emoji.name}</div>
<div className='emoji-picker-preview-shortnames'>
<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-picker-preview-shortname'>:{short_name}:</span>
<span key={short_name} className='emoji-mart-preview-shortname'>:{short_name}:</span>
)}
</div>
<div className='emoji-picker-preview-emoticons'>
<div className='emoji-mart-preview-emoticons'>
{listedEmoticons.map((emoticon) =>
<span key={emoticon} className='emoji-picker-preview-emoticon'>{emoticon}</span>
<span key={emoticon} className='emoji-mart-preview-emoticon'>{emoticon}</span>
)}
</div>
</div>
</div>
} else {
return <div className='emoji-picker-preview'>
<div className='emoji-picker-preview-emoji'>
return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'>
<Emoji
emoji={idleEmoji}
{...emojiProps}
/>
</div>
<div className='emoji-picker-preview-data'>
<span className='emoji-picker-title-label'>
<div className='emoji-mart-preview-data'>
<span className='emoji-mart-title-label'>
{title}
</span>
</div>
<div className='emoji-picker-preview-skins'>
<div className='emoji-mart-preview-skins'>
<Skins
{...skinsProps}
/>

2
src/components/search.js
View File

@ -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'
/>
}
}

6
src/components/skins.js
View File

@ -25,15 +25,15 @@ export default class Skins extends React.Component {
{ opened } = this.state
return <div>
<div className={`emoji-picker-skin-swatches ${opened ? 'emoji-picker-skin-swatches-opened' : ''}`}>
<div className={`emoji-mart-skin-swatches ${opened ? 'emoji-mart-skin-swatches-opened' : ''}`}>
{Array(6).fill().map((_, i) => {
var skinTone = i + 1,
selected = skinTone == skin
return <span key={`skin-tone-${skinTone}`} className={`emoji-picker-skin-swatch ${selected ? 'emoji-picker-skin-swatch-selected' : ''}`}>
return <span key={`skin-tone-${skinTone}`} className={`emoji-mart-skin-swatch ${selected ? 'emoji-mart-skin-swatch-selected' : ''}`}>
<span
onClick={() => this.handleClick(skinTone)}
className={`emoji-picker-skin emoji-picker-skin-tone-${skinTone}`}>
className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}>
</span>
</span>
})}

2
src/utils/store.js
View File

@ -1,4 +1,4 @@
const NAMESPACE = 'emoji-picker'
const NAMESPACE = 'emoji-mart'
function update(state) {
for (let key in state) {

4
src/webpack.config.js
View File

@ -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',
},