Merge branch 'master' into rena/customskin
Etienne Lemay
commit
757f1b023c
|
|
@ -1,3 +1,4 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
dist-es/
|
||||
|
|
|
|||
41
README.md
41
README.md
|
|
@ -1,7 +1,7 @@
|
|||
<div align="center">
|
||||
<br><b>Emoji Mart</b> is a Slack-like customizable<br>emoji picker component for React
|
||||
<br><a href="https://missive.github.io/emoji-mart">Demo</a> • <a href="https://github.com/missive/emoji-mart/releases">Changelog</a>
|
||||
<br><br><img width="338" alt="picker" src="https://user-images.githubusercontent.com/436043/32532554-08be471c-c400-11e7-906a-c745dc3ec630.png">
|
||||
<br><br><img width="338" alt="picker" src="https://user-images.githubusercontent.com/436043/43481399-d9b60acc-94d3-11e8-9b3b-e5f2db8f0bd1.png">
|
||||
<br><br><a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com"><img width="30" alt="Missive | Team email, team chat, team tasks, one app" src="https://user-images.githubusercontent.com/436043/32532559-0d15ddfc-c400-11e7-8a24-64d0157d0cb0.png"></a>
|
||||
<br>Brought to you by the <a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com">Missive</a> team
|
||||
</div>
|
||||
|
|
@ -50,6 +50,9 @@ import { Picker } from 'emoji-mart'
|
|||
| **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
|
||||
| **style** | | | Inline styles applied to the root element. Useful for positioning |
|
||||
| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
|
||||
| **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results |
|
||||
| **notFound** | | | [Not Found](#not-found) |
|
||||
| **icons** | | `{}` | [Custom icons](#custom-icons) |
|
||||
|
||||
#### I18n
|
||||
```js
|
||||
|
|
@ -79,7 +82,7 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
|
|||
| emojione | 315 KB | 435 KB | 1020 KB | 2.33 MB |
|
||||
| facebook | 322 KB | 439 KB | 1020 KB | 2.50 MB |
|
||||
| google | 301 KB | 409 KB | 907 KB | 2.17 MB |
|
||||
| messenger | 325 KB | 449 MB | 1.05 MB | 2.69 MB |
|
||||
| messenger | 325 KB | 449 KB | 1.05 MB | 2.69 MB |
|
||||
| twitter | 288 KB | 389 KB | 839 KB | 1.82 MB |
|
||||
|
||||
#### Datasets
|
||||
|
|
@ -158,7 +161,7 @@ import { Emoji } from 'emoji-mart'
|
|||
| **onClick** | | | Params: `(emoji, event) => {}` |
|
||||
| **onLeave** | | | Params: `(emoji, event) => {}` |
|
||||
| **onOver** | | | Params: `(emoji, event) => {}` |
|
||||
| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` |
|
||||
| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
|
||||
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
|
||||
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
|
||||
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
|
||||
|
|
@ -176,8 +179,8 @@ To have the component render `:shrug:` you would need to:
|
|||
set={'messenger'}
|
||||
emoji={'shrug'}
|
||||
size={24}
|
||||
fallback={(emoji) => {
|
||||
return `:${emoji.short_names[0]}:`
|
||||
fallback={(emoji, props) => {
|
||||
return emoji ? `:${emoji.short_names[0]}:` : props.emoji
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
|
@ -234,6 +237,34 @@ const customEmojis = [
|
|||
<Picker custom={customEmojis} />
|
||||
```
|
||||
|
||||
## Not Found
|
||||
You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results.
|
||||
|
||||
```js
|
||||
import { Picker } from 'emoji-mart'
|
||||
|
||||
const notFound = () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />
|
||||
|
||||
<Picker notFound={notFound} />
|
||||
```
|
||||
|
||||
## Custom icons
|
||||
You can provide custom icons which will override the default icons.
|
||||
|
||||
```js
|
||||
import { Picker } from 'emoji-mart'
|
||||
|
||||
const customIcons = {
|
||||
categories: {
|
||||
recent: () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />,
|
||||
foods: () => <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/></svg>,
|
||||
people: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 2l10 6-10 6z"></path></svg>
|
||||
}
|
||||
}
|
||||
|
||||
<Picker icons={customIcons} />
|
||||
```
|
||||
|
||||
## Headless search
|
||||
The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.
|
||||
|
||||
|
|
|
|||
|
|
@ -72,9 +72,11 @@
|
|||
max-width: 22px;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors svg {
|
||||
.emoji-mart-anchors svg,
|
||||
.emoji-mart-anchors img {
|
||||
fill: currentColor;
|
||||
max-height: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
|
|
@ -87,17 +89,29 @@
|
|||
.emoji-mart-search {
|
||||
margin-top: 6px;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emoji-mart-search input {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .2em .6em;
|
||||
border-radius: 25px;
|
||||
padding: 5px 25px 6px 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #d9d9d9;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
|
@ -138,12 +152,22 @@
|
|||
font-size: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji-native {
|
||||
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
|
||||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
color: #858585;
|
||||
}
|
||||
.emoji-mart-no-results-img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
.emoji-mart-no-results .emoji-mart-category-label {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
905
docs/bundle.js
905
docs/bundle.js
File diff suppressed because it is too large
Load Diff
|
|
@ -72,9 +72,11 @@
|
|||
max-width: 22px;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors svg {
|
||||
.emoji-mart-anchors svg,
|
||||
.emoji-mart-anchors img {
|
||||
fill: currentColor;
|
||||
max-height: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
|
|
@ -87,17 +89,29 @@
|
|||
.emoji-mart-search {
|
||||
margin-top: 6px;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emoji-mart-search input {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .2em .6em;
|
||||
border-radius: 25px;
|
||||
padding: 5px 25px 6px 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #d9d9d9;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
|
@ -138,12 +152,22 @@
|
|||
font-size: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji-native {
|
||||
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
|
||||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
color: #858585;
|
||||
}
|
||||
.emoji-mart-no-results-img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
.emoji-mart-no-results .emoji-mart-category-label {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "emoji-mart",
|
||||
"version": "2.6.1",
|
||||
"version": "2.7.0",
|
||||
"description": "Customizable Slack-like emoji picker for React",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist-es/index.js",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ var fs = require('fs'),
|
|||
inflection = require('inflection'),
|
||||
mkdirp = require('mkdirp')
|
||||
|
||||
var { compress } = require('../src/utils/data')
|
||||
var { compress } = require('../dist/utils/data')
|
||||
|
||||
var categories = [
|
||||
['Smileys & People', 'people'],
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import SVGs from '../svgs'
|
||||
|
||||
export default class Anchors extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -18,21 +16,6 @@ export default class Anchors extends React.PureComponent {
|
|||
this.handleClick = this.handleClick.bind(this)
|
||||
}
|
||||
|
||||
getSVG(id) {
|
||||
this.SVGs || (this.SVGs = {})
|
||||
|
||||
if (this.SVGs[id]) {
|
||||
return this.SVGs[id]
|
||||
} else {
|
||||
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
${SVGs[id]}
|
||||
</svg>`
|
||||
|
||||
this.SVGs[id] = svg
|
||||
return svg
|
||||
}
|
||||
}
|
||||
|
||||
handleClick(e) {
|
||||
var index = e.currentTarget.getAttribute('data-index')
|
||||
var { categories, onAnchorClick } = this.props
|
||||
|
|
@ -41,7 +24,7 @@ export default class Anchors extends React.PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
var { categories, onAnchorClick, color, i18n } = this.props,
|
||||
var { categories, color, i18n, icons } = this.props,
|
||||
{ selected } = this.state
|
||||
|
||||
return (
|
||||
|
|
@ -65,7 +48,9 @@ export default class Anchors extends React.PureComponent {
|
|||
}`}
|
||||
style={{ color: isSelected ? color : null }}
|
||||
>
|
||||
<div dangerouslySetInnerHTML={{ __html: this.getSVG(id) }} />
|
||||
<div className="emoji-mart-anchor-icon">
|
||||
{icons.categories[id]()}
|
||||
</div>
|
||||
<span
|
||||
className="emoji-mart-anchor-bar"
|
||||
style={{ backgroundColor: color }}
|
||||
|
|
@ -81,9 +66,11 @@ export default class Anchors extends React.PureComponent {
|
|||
Anchors.propTypes = {
|
||||
categories: PropTypes.array,
|
||||
onAnchorClick: PropTypes.func,
|
||||
icons: PropTypes.object,
|
||||
}
|
||||
|
||||
Anchors.defaultProps = {
|
||||
categories: [],
|
||||
onAnchorClick: () => {},
|
||||
icons: {},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
|
|||
|
||||
import frequently from '../utils/frequently'
|
||||
import { getData } from '../utils'
|
||||
import { NimbleEmoji } from '.'
|
||||
import { NimbleEmoji, NotFound } from '.'
|
||||
|
||||
export default class Category extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -144,7 +144,15 @@ export default class Category extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
var { id, name, hasStickyPosition, emojiProps, i18n } = this.props,
|
||||
var {
|
||||
id,
|
||||
name,
|
||||
hasStickyPosition,
|
||||
emojiProps,
|
||||
i18n,
|
||||
notFound,
|
||||
notFoundEmoji,
|
||||
} = this.props,
|
||||
emojis = this.getEmojis(),
|
||||
labelStyles = {},
|
||||
labelSpanStyles = {},
|
||||
|
|
@ -169,9 +177,7 @@ export default class Category extends React.Component {
|
|||
return (
|
||||
<div
|
||||
ref={this.setContainerRef}
|
||||
className={`emoji-mart-category ${
|
||||
emojis && !emojis.length ? 'emoji-mart-no-results' : ''
|
||||
}`}
|
||||
className="emoji-mart-category"
|
||||
style={containerStyles}
|
||||
>
|
||||
<div
|
||||
|
|
@ -191,21 +197,13 @@ export default class Category extends React.Component {
|
|||
|
||||
{emojis &&
|
||||
!emojis.length && (
|
||||
<div>
|
||||
<div>
|
||||
{NimbleEmoji({
|
||||
data: this.data,
|
||||
...emojiProps,
|
||||
size: 38,
|
||||
emoji: 'sleuth_or_spy',
|
||||
onOver: null,
|
||||
onLeave: null,
|
||||
onClick: null,
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="emoji-mart-no-results-label">{i18n.notfound}</div>
|
||||
</div>
|
||||
<NotFound
|
||||
i18n={i18n}
|
||||
notFound={notFound}
|
||||
notFoundEmoji={notFoundEmoji}
|
||||
data={this.data}
|
||||
emojiProps={emojiProps}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -220,6 +218,8 @@ Category.propTypes = {
|
|||
perLine: PropTypes.number.isRequired,
|
||||
emojiProps: PropTypes.object.isRequired,
|
||||
recent: PropTypes.arrayOf(PropTypes.string),
|
||||
notFound: PropTypes.func,
|
||||
notFoundEmoji: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
Category.defaultProps = {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import { getData, getSanitizedData, unifiedToNative } from '../../utils'
|
|||
import { uncompress } from '../../utils/data'
|
||||
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props'
|
||||
|
||||
const SHEET_COLUMNS = 52
|
||||
|
||||
const _getData = (props) => {
|
||||
var { emoji, skin, set, data } = props
|
||||
return getData(emoji, skin, set, data)
|
||||
|
|
@ -14,9 +12,10 @@ const _getData = (props) => {
|
|||
|
||||
const _getPosition = (props) => {
|
||||
var { sheet_x, sheet_y } = _getData(props),
|
||||
multiply = 100 / (SHEET_COLUMNS - 1)
|
||||
multiplyX = 100 / (props.sheetColumns - 1),
|
||||
multiplyY = 100 / (props.sheetRows - 1)
|
||||
|
||||
return `${multiply * sheet_x}% ${multiply * sheet_y}%`
|
||||
return `${multiplyX * sheet_x}% ${multiplyY * sheet_y}%`
|
||||
}
|
||||
|
||||
const _getSanitizedData = (props) => {
|
||||
|
|
@ -87,7 +86,11 @@ const NimbleEmoji = (props) => {
|
|||
|
||||
let data = _getData(props)
|
||||
if (!data) {
|
||||
return null
|
||||
if (props.fallback) {
|
||||
return props.fallback(null, props)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
let { unified, custom, short_names, imageUrl } = data,
|
||||
|
|
@ -97,7 +100,11 @@ const NimbleEmoji = (props) => {
|
|||
title = null
|
||||
|
||||
if (!unified && !custom) {
|
||||
return null
|
||||
if (props.fallback) {
|
||||
return props.fallback(data, props)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
if (props.tooltip) {
|
||||
|
|
@ -129,7 +136,7 @@ const NimbleEmoji = (props) => {
|
|||
|
||||
if (!setHasEmoji) {
|
||||
if (props.fallback) {
|
||||
return props.fallback(data)
|
||||
return props.fallback(data, props)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
|
@ -142,7 +149,7 @@ const NimbleEmoji = (props) => {
|
|||
props.set,
|
||||
props.sheetSize,
|
||||
)})`,
|
||||
backgroundSize: `${100 * SHEET_COLUMNS}%`,
|
||||
backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
|
||||
backgroundPosition: _getPosition(props),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export { default as Anchors } from './anchors'
|
||||
export { default as Category } from './category'
|
||||
export { default as Preview } from './preview'
|
||||
export { default as NotFound } from './not-found'
|
||||
export { default as Search } from './search'
|
||||
export { default as Skins } from './skins'
|
||||
export { default as SkinsEmoji } from './skins-emoji'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { NimbleEmoji } from '.'
|
||||
|
||||
export default class NotFound extends React.PureComponent {
|
||||
render() {
|
||||
const { data, emojiProps, i18n, notFound, notFoundEmoji } = this.props
|
||||
|
||||
const component = (notFound && notFound()) || (
|
||||
<div className="emoji-mart-no-results">
|
||||
{NimbleEmoji({
|
||||
data: data,
|
||||
...emojiProps,
|
||||
size: 38,
|
||||
emoji: notFoundEmoji,
|
||||
onOver: null,
|
||||
onLeave: null,
|
||||
onClick: null,
|
||||
})}
|
||||
<div className="emoji-mart-no-results-label">{i18n.notfound}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return component
|
||||
}
|
||||
}
|
||||
|
||||
NotFound.propTypes = {
|
||||
notFound: PropTypes.func.isRequired,
|
||||
notFoundString: PropTypes.string.isRequired,
|
||||
emojiProps: PropTypes.object.isRequired,
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import '../../vendor/raf-polyfill'
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import * as icons from '../../svgs'
|
||||
import store from '../../utils/store'
|
||||
import frequently from '../../utils/frequently'
|
||||
import { deepMerge, measureScrollbar } from '../../utils'
|
||||
|
|
@ -49,6 +50,7 @@ export default class NimblePicker extends React.PureComponent {
|
|||
|
||||
this.data = props.data
|
||||
this.i18n = deepMerge(I18N, props.i18n)
|
||||
this.icons = deepMerge(icons, props.icons)
|
||||
this.state = {
|
||||
skin: props.skin || store.get('skin') || props.defaultSkin,
|
||||
firstRender: true,
|
||||
|
|
@ -454,6 +456,8 @@ export default class NimblePicker extends React.PureComponent {
|
|||
emojiSize,
|
||||
set,
|
||||
sheetSize,
|
||||
sheetColumns,
|
||||
sheetRows,
|
||||
style,
|
||||
title,
|
||||
emoji,
|
||||
|
|
@ -469,6 +473,8 @@ export default class NimblePicker extends React.PureComponent {
|
|||
recent,
|
||||
autoFocus,
|
||||
skinIcon,
|
||||
notFound,
|
||||
notFoundEmoji,
|
||||
} = this.props,
|
||||
{ skin } = this.state,
|
||||
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
|
||||
|
|
@ -487,6 +493,7 @@ export default class NimblePicker extends React.PureComponent {
|
|||
color={color}
|
||||
categories={this.categories}
|
||||
onAnchorClick={this.handleAnchorClick}
|
||||
icons={this.icons}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -534,6 +541,8 @@ export default class NimblePicker extends React.PureComponent {
|
|||
size: emojiSize,
|
||||
set: set,
|
||||
sheetSize: sheetSize,
|
||||
sheetColumns: sheetColumns,
|
||||
sheetRows: sheetRows,
|
||||
forceSize: native,
|
||||
tooltip: emojiTooltip,
|
||||
backgroundImageFn: backgroundImageFn,
|
||||
|
|
@ -541,6 +550,8 @@ export default class NimblePicker extends React.PureComponent {
|
|||
onLeave: this.handleEmojiLeave,
|
||||
onClick: this.handleEmojiClick,
|
||||
}}
|
||||
notFound={notFound}
|
||||
notFoundEmoji={notFoundEmoji}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,36 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { search as icons } from '../svgs'
|
||||
import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index'
|
||||
|
||||
export default class Search extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
icon: icons.search,
|
||||
isSearching: false,
|
||||
}
|
||||
|
||||
this.data = props.data
|
||||
this.emojiIndex = new NimbleEmojiIndex(this.data)
|
||||
this.setRef = this.setRef.bind(this)
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.clear = this.clear.bind(this)
|
||||
this.handleKeyUp = this.handleKeyUp.bind(this)
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
var value = this.input.value
|
||||
search(value) {
|
||||
if (value == '')
|
||||
this.setState({
|
||||
icon: icons.search,
|
||||
isSearching: false,
|
||||
})
|
||||
else
|
||||
this.setState({
|
||||
icon: icons.delete,
|
||||
isSearching: true,
|
||||
})
|
||||
|
||||
this.props.onSearch(
|
||||
this.emojiIndex.search(value, {
|
||||
|
|
@ -27,16 +43,29 @@ export default class Search extends React.PureComponent {
|
|||
)
|
||||
}
|
||||
|
||||
clear() {
|
||||
if (this.input.value == '') return
|
||||
this.input.value = ''
|
||||
this.search('')
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
this.search(this.input.value)
|
||||
}
|
||||
|
||||
handleKeyUp(e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.clear()
|
||||
}
|
||||
}
|
||||
|
||||
setRef(c) {
|
||||
this.input = c
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.input.value = ''
|
||||
}
|
||||
|
||||
render() {
|
||||
var { i18n, autoFocus } = this.props
|
||||
var { icon, isSearching } = this.state
|
||||
|
||||
return (
|
||||
<div className="emoji-mart-search">
|
||||
|
|
@ -47,6 +76,14 @@ export default class Search extends React.PureComponent {
|
|||
placeholder={i18n.search}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
<button
|
||||
className="emoji-mart-search-icon"
|
||||
onClick={this.clear}
|
||||
onKeyUp={this.handleKeyUp}
|
||||
disabled={!isSearching}
|
||||
>
|
||||
{icon()}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,166 @@
|
|||
const SVGs = {
|
||||
activity: `<path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"/>`,
|
||||
import React from 'react'
|
||||
|
||||
custom: `<g transform="translate(2.000000, 1.000000)"><rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect></g>`,
|
||||
const categories = {
|
||||
activity: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
flags: `<path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/>`,
|
||||
custom: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<g transform="translate(2.000000, 1.000000)">
|
||||
<rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5" />
|
||||
<rect
|
||||
id="Rectangle"
|
||||
transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) "
|
||||
x="8.343"
|
||||
y="0.049"
|
||||
width="3"
|
||||
height="21"
|
||||
rx="1.5"
|
||||
/>
|
||||
<rect
|
||||
id="Rectangle"
|
||||
transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) "
|
||||
x="8.343"
|
||||
y="0.049"
|
||||
width="3"
|
||||
height="21"
|
||||
rx="1.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
),
|
||||
|
||||
foods: `<path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"/>`,
|
||||
flags: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
nature: `<path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"/><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"/>`,
|
||||
foods: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
objects: `<path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"/><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"/>`,
|
||||
nature: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8" />
|
||||
<path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
people: `<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/>`,
|
||||
objects: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z" />
|
||||
<path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
places: `<path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"/><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"/>`,
|
||||
people: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" />
|
||||
<path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
recent: `<path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"/><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/>`,
|
||||
places: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5" />
|
||||
<path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
symbols: `<path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"/>`,
|
||||
recent: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z" />
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
symbols: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76" />
|
||||
</svg>
|
||||
),
|
||||
}
|
||||
|
||||
export default SVGs
|
||||
const search = {
|
||||
search: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 20 20"
|
||||
opacity="0.5"
|
||||
>
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
|
||||
</svg>
|
||||
),
|
||||
|
||||
delete: () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 20 20"
|
||||
opacity="0.5"
|
||||
>
|
||||
<path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
|
||||
</svg>
|
||||
),
|
||||
}
|
||||
|
||||
export { categories, search }
|
||||
|
|
|
|||
|
|
@ -103,4 +103,4 @@ const uncompress = (data) => {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = { buildSearch, compress, uncompress }
|
||||
export { buildSearch, compress, uncompress }
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ const EmojiPropTypes = {
|
|||
tooltip: PropTypes.bool,
|
||||
skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
||||
sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
|
||||
sheetColumns: PropTypes.number,
|
||||
sheetRows: PropTypes.number,
|
||||
set: PropTypes.oneOf([
|
||||
'apple',
|
||||
'google',
|
||||
|
|
@ -28,6 +30,8 @@ const EmojiDefaultProps = {
|
|||
skin: 1,
|
||||
set: 'apple',
|
||||
sheetSize: 64,
|
||||
sheetColumns: 52,
|
||||
sheetRows: 52,
|
||||
native: false,
|
||||
forceSize: false,
|
||||
tooltip: false,
|
||||
|
|
@ -72,6 +76,9 @@ const PickerPropTypes = {
|
|||
}),
|
||||
),
|
||||
skinIcon: PropTypes.string,
|
||||
notFound: PropTypes.func,
|
||||
notFoundEmoji: PropTypes.string,
|
||||
icons: PropTypes.object,
|
||||
}
|
||||
|
||||
const PickerDefaultProps = {
|
||||
|
|
@ -98,6 +105,9 @@ const PickerDefaultProps = {
|
|||
autoFocus: false,
|
||||
custom: [],
|
||||
skinIcon: '',
|
||||
notFound: () => {},
|
||||
notFoundEmoji: 'sleuth_or_spy',
|
||||
icons: {},
|
||||
}
|
||||
|
||||
export {
|
||||
|
|
|
|||
206
stories/index.js
206
stories/index.js
|
|
@ -1,11 +1,18 @@
|
|||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, text, boolean, number, select, color } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { action } from '@storybook/addon-actions'
|
||||
import {
|
||||
withKnobs,
|
||||
text,
|
||||
boolean,
|
||||
number,
|
||||
select,
|
||||
color,
|
||||
} from '@storybook/addon-knobs'
|
||||
|
||||
import { Picker, Emoji, emojiIndex } from '../dist';
|
||||
import '../css/emoji-mart.css';
|
||||
import { Picker, Emoji, emojiIndex } from '../dist'
|
||||
import '../css/emoji-mart.css'
|
||||
|
||||
const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
|
||||
const CUSTOM_EMOJIS = [
|
||||
|
|
@ -13,14 +20,14 @@ const CUSTOM_EMOJIS = [
|
|||
name: 'Octocat',
|
||||
short_names: ['octocat'],
|
||||
keywords: ['github'],
|
||||
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
|
||||
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7',
|
||||
},
|
||||
{
|
||||
name: 'Squirrel',
|
||||
short_names: ['shipit', 'squirrel'],
|
||||
keywords: ['github'],
|
||||
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
|
||||
}
|
||||
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7',
|
||||
},
|
||||
]
|
||||
|
||||
storiesOf('Picker', module)
|
||||
|
|
@ -36,19 +43,150 @@ storiesOf('Picker', module)
|
|||
perLine={number('Per line', 9)}
|
||||
title={text('Idle text', 'Your Title Here')}
|
||||
emoji={text('Idle emoji', 'department_store')}
|
||||
notFoundEmoji={text('Not found emoji', 'sleuth_or_spy')}
|
||||
defaultSkin={number('Default skin tone', 1)}
|
||||
color={color('Highlight color', '#ae65c5')}
|
||||
showPreview={boolean('Show preview', true)}
|
||||
showSkinTones={boolean('Show skin tones', true)}
|
||||
custom={CUSTOM_EMOJIS}
|
||||
/>))
|
||||
.add('custom-skin-icon', () => (
|
||||
<Picker
|
||||
native={boolean('Unicode', true)}
|
||||
emojiSize={24}
|
||||
skinIcon={text('Skin Preview Icon', 'v')}
|
||||
/>
|
||||
));
|
||||
/>
|
||||
))
|
||||
.add('with a custom not found image', () => (
|
||||
<Picker
|
||||
notFound={() => (
|
||||
<img src="https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7" />
|
||||
)}
|
||||
/>
|
||||
))
|
||||
.add('with a custom not found SVG', () => (
|
||||
<Picker
|
||||
notFound={() => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-jira-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-jira-icon">Jira icon</title>
|
||||
<path d="M23.323 11.33L13.001 1 12 0 4.225 7.775.67 11.33a.96.96 0 0 0 0 1.347l7.103 7.103L12 24l7.771-7.771.121-.121 3.431-3.431a.945.945 0 0 0 0-1.347zM12 15.551L8.449 12 12 8.453 15.548 12 12 15.551z" />
|
||||
</svg>
|
||||
)}
|
||||
/>
|
||||
))
|
||||
.add('with-custom-icons', () => (
|
||||
<Picker
|
||||
custom={CUSTOM_EMOJIS}
|
||||
icons={{
|
||||
categories: {
|
||||
recent: () => (
|
||||
<img src="https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7" />
|
||||
),
|
||||
people: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-reddit-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-reddit-icon">Reddit icon</title>
|
||||
<path d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z" />
|
||||
</svg>
|
||||
),
|
||||
nature: () => (
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5zM4 5c0-0.552 0.448-1 1-1s1 0.448 1 1-0.448 1-1 1-1-0.448-1-1zM10 5c0-0.552 0.448-1 1-1s1 0.448 1 1-0.448 1-1 1-1-0.448-1-1z" />
|
||||
<path d="M10.561 8.439c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121c0.019 0.019 0.038 0.037 0.058 0.055 1.352 1.227 4.503-0.029 4.503-1.615-0.969 0.625-1.726 0.153-2.439-0.561z" />
|
||||
<path d="M5.439 8.439c0.586-0.586 1.536-0.586 2.121 0s0.586 1.536 0 2.121c-0.019 0.019-0.038 0.037-0.058 0.055-1.352 1.227-4.503-0.029-4.503-1.615 0.969 0.625 1.726 0.153 2.439-0.561z" />
|
||||
</svg>
|
||||
),
|
||||
foods: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-jira-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-jira-icon">Jira icon</title>
|
||||
<path d="M23.323 11.33L13.001 1 12 0 4.225 7.775.67 11.33a.96.96 0 0 0 0 1.347l7.103 7.103L12 24l7.771-7.771.121-.121 3.431-3.431a.945.945 0 0 0 0-1.347zM12 15.551L8.449 12 12 8.453 15.548 12 12 15.551z" />
|
||||
</svg>
|
||||
),
|
||||
activity: () => (
|
||||
<img src="https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7" />
|
||||
),
|
||||
places: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-stackoverflow-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-stackoverflow-icon">
|
||||
Stack Overflow icon
|
||||
</title>
|
||||
<path d="M18.986 21.865v-6.404h2.134V24H1.844v-8.539h2.13v6.404h15.012zM6.111 19.731H16.85v-2.137H6.111v2.137zm.259-4.852l10.48 2.189.451-2.07-10.478-2.187-.453 2.068zm1.359-5.056l9.705 4.53.903-1.95-9.706-4.53-.902 1.936v.014zm2.715-4.785l8.217 6.855 1.359-1.62-8.216-6.853-1.35 1.617-.01.001zM15.751 0l-1.746 1.294 6.405 8.604 1.746-1.294L15.749 0h.002z" />
|
||||
</svg>
|
||||
),
|
||||
objects: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-500px-icon"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title id="simpleicons-500px-icon">Atlassian icon</title>
|
||||
<path d="M19.31 23.957H15.71a1.26 1.26 0 0 1-1.312-.792c-1.332-2.665-2.78-5.288-3.987-8.046a15.25 15.25 0 0 1 .885-14.47c.166-.281.52-.625.791-.625s.593.375.74.666q5.444 10.89 10.898 21.788c.542 1.041.292 1.468-.905 1.479zm-14.573 0H1.04c-1.041 0-1.27-.417-.812-1.333q2.8-5.538 5.549-11.055c.5-1.041.895-1.041 1.592-.177a12.221 12.221 0 0 1 2.51 11.17c-.344 1.322-.532 1.405-1.864 1.405z" />
|
||||
</svg>
|
||||
),
|
||||
symbols: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-hipchat-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-hipchat-icon">HipChat icon</title>
|
||||
<path d="M19.736 19.056s.103-.073.267-.198C22.46 16.958 24 14.203 24 11.139 24 5.424 18.627.787 12.003.787 5.377.787 0 5.424 0 11.139c0 5.717 5.371 10.356 11.998 10.356.847 0 1.694-.073 2.524-.228l.262-.045c1.683 1.092 4.139 1.99 6.288 1.99.665 0 .978-.546.552-1.104-.648-.795-1.541-2.068-1.888-3.052zm-1.462-4.526c-.716 1.069-2.934 2.889-6.254 2.889h-.046c-3.328 0-5.543-1.831-6.254-2.889a1.137 1.137 0 0 1-.273-.574.49.49 0 0 1 .447-.526c.008-.003.014-.003.021-.003.117.006.23.043.328.111a9.137 9.137 0 0 0 5.754 2.056 8.805 8.805 0 0 0 5.76-2.059.461.461 0 0 1 .313-.122c.267 0 .478.213.483.475a1.321 1.321 0 0 1-.268.643h-.011z" />
|
||||
</svg>
|
||||
),
|
||||
flags: () => (
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M4.75 9.5c0 1.795 1.455 3.25 3.25 3.25s3.25-1.455 3.25-3.25-1.455-3.25-3.25-3.25-3.25 1.455-3.25 3.25zM15 4h-3.5c-0.25-1-0.5-2-1.5-2h-4c-1 0-1.25 1-1.5 2h-3.5c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-9c0-0.55-0.45-1-1-1zM8 13.938c-2.451 0-4.438-1.987-4.438-4.438s1.987-4.438 4.438-4.438c2.451 0 4.438 1.987 4.438 4.438s-1.987 4.438-4.438 4.438zM15 7h-2v-1h2v1z" />
|
||||
</svg>
|
||||
),
|
||||
custom: () => (
|
||||
<svg
|
||||
aria-labelledby="simpleicons-trello-icon"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title id="simpleicons-trello-icon">Trello icon</title>
|
||||
<path d="M21 0H3C1.343 0 0 1.343 0 3v18c0 1.656 1.343 3 3 3h18c1.656 0 3-1.344 3-3V3c0-1.657-1.344-3-3-3zM10.44 18.18c0 .795-.645 1.44-1.44 1.44H4.56c-.795 0-1.44-.646-1.44-1.44V4.56c0-.795.645-1.44 1.44-1.44H9c.795 0 1.44.645 1.44 1.44v13.62zm10.44-6c0 .794-.645 1.44-1.44 1.44H15c-.795 0-1.44-.646-1.44-1.44V4.56c0-.795.646-1.44 1.44-1.44h4.44c.795 0 1.44.645 1.44 1.44v7.62z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))
|
||||
.add('custom-skin-icon', () => (
|
||||
<Picker
|
||||
native={boolean('Unicode', true)}
|
||||
emojiSize={24}
|
||||
skinIcon={text('Skin Preview Icon', 'v')}
|
||||
/>
|
||||
))
|
||||
|
||||
storiesOf('Emoji', module)
|
||||
.addDecorator(withKnobs)
|
||||
|
|
@ -60,23 +198,31 @@ storiesOf('Emoji', module)
|
|||
size={number('Emoji size', 64)}
|
||||
skin={number('Skin tone', 1)}
|
||||
html={boolean('HTML', false)}
|
||||
fallback={(emoji) => {
|
||||
return `:${emoji.short_names[0]}:`
|
||||
fallback={(emoji, props) => {
|
||||
return emoji ? `:${emoji.short_names[0]}:` : props.emoji
|
||||
}}
|
||||
/>
|
||||
));
|
||||
))
|
||||
|
||||
storiesOf('Headless Search', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => {
|
||||
let results = emojiIndex.search(text('Search', 'christmas'), { custom: CUSTOM_EMOJIS })
|
||||
if (!results) { return null }
|
||||
let results = emojiIndex.search(text('Search', 'christmas'), {
|
||||
custom: CUSTOM_EMOJIS,
|
||||
})
|
||||
if (!results) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div>
|
||||
{results.map((emoji) => {
|
||||
return <span key={emoji.id} style={{ marginLeft: '1.4em' }}>
|
||||
<Emoji native={true} emoji={emoji} size={48} />
|
||||
</span>
|
||||
})}
|
||||
</div>
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
{results.map((emoji) => {
|
||||
return (
|
||||
<span key={emoji.id} style={{ marginLeft: '1.4em' }}>
|
||||
<Emoji native={true} emoji={emoji} size={48} />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue