Merge branch 'release/0.4.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-keyboard",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {

src/components/App.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { hot } from 'react-hot-loader'
 import { Emoji, Favorite, Save } from '../types'
+import { filterEmoji, load, save } from '../utils'
+import EmojiButton from './Emoji'
 import Footer from './Footer'
-
 const copy: (s: string) => void = require('copy-text-to-clipboard')
 
 import '../styles/app.css'
-import { filterEmoji, load, save } from '../utils'
 
 type State = {
 	query: string
@@ -60,7 +60,7 @@ class App extends React.Component<{}, State> {
 		return (
 			<div id="app">
 				<main>
-					<h1 className="title">Emoji Keyboard</h1>
+					<h1 className="title">Emoji Keyboard <small>(Click to copy)</small></h1>
 					<div>
 						<input onChange={e => this.setState({ query: e.target.value })} value={query} placeholder="Search emojis" />
 					</div>
@@ -69,21 +69,16 @@ class App extends React.Component<{}, State> {
 							{favorites.length > 0 && <h2>Most used</h2>}
 							<div className="emojis favorites">
 								{favorites.map(e =>
-									<button key={e.id} className="emoji" onClick={() => this.handleEmojiClick(e)}>
-										{e.emoji}
-									</button>
+									<EmojiButton key={e.id} emoji={e} onClick={() => this.handleEmojiClick(e)} />
 								)}
 							</div>
 						</div>
 					)}
-					<br />
 					{query.length > 0
 						? (
 							<div className="emojis">
 								{emojis.map(e =>
-									<button key={e.id} className="emoji" onClick={() => this.handleEmojiClick(e)}>
-										{e.emoji}
-									</button>
+									<EmojiButton key={e.id} emoji={e} onClick={() => this.handleEmojiClick(e)} />
 								)}
 							</div>
 						)
@@ -92,9 +87,7 @@ class App extends React.Component<{}, State> {
 							<h2>{category}</h2>
 							<div className="emojis">
 								{emojis.filter(e => e.category === category).map(e =>
-									<button key={e.id} className="emoji" onClick={() => this.handleEmojiClick(e)}>
-										{e.emoji}
-									</button>
+									<EmojiButton key={e.id} emoji={e} onClick={() => this.handleEmojiClick(e)} />
 								)}
 							</div>
 						</div>

src/components/Emoji.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Emoji } from '../types'
+
+import '../styles/emoji.css'
+
+type Props = {
+	emoji: Emoji
+	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+type State = {
+	hover: boolean
+}
+
+class EmojiButton extends React.Component<Props, State> {
+	state = {
+		hover: false
+	}
+
+	render () {
+		const { emoji, onClick } = this.props
+		const { hover } = this.state
+		return (
+			<div className="emojicontainer">
+				<button className="emoji" onClick={onClick}
+					onMouseOver={() => this.setState({ hover: true })}
+					onMouseLeave={() => this.setState({ hover: false })}
+				>
+					{emoji.emoji}
+				</button>
+				{hover && (
+					<ul className="tooltip">
+						<li>
+							<strong>Category: </strong><span>{emoji.category}</span>
+						</li>
+						<li>
+							<strong>Description: </strong><span>{emoji.description}</span>
+						</li>
+						{emoji.aliases.length > 0 &&
+						<li>
+							<strong>Also known as: </strong><span>{emoji.aliases.join(', ')}</span>
+						</li>
+						}
+						{emoji.tags.length > 0 &&
+						<li>
+							<strong>Tags: </strong><span>{emoji.tags.join(', ')}</span>
+						</li>
+						}
+					</ul>
+				)}
+			</div>
+		)
+	}
+
+}
+
+export default EmojiButton

src/styles/app.css

@@ -22,16 +22,3 @@ input {
 		justify-content: space-between;
 	}
 }
-
-.emoji {
-	font-size: 1.5rem;
-	padding: 0.5rem;
-	width: 50px;
-	cursor: pointer;
-	background: none;
-	border: none;
-}
-
-.emoji:hover {
-	background-color:#D3D3D3;
-}

src/styles/emoji.css

@@ -0,0 +1,30 @@
+.emoji {
+	font-size: 1.5rem;
+	padding: 0.5rem;
+	width: 50px;
+	cursor: pointer;
+	background: none;
+	border: none;
+}
+
+.emoji:hover {
+	background-color:#D3D3D3;
+}
+
+.emojicontainer {
+	position: relative;
+}
+
+.tooltip {
+	list-style: none;
+	z-index: 10;
+	width: 200px;
+	top: 30px;
+	margin-left: -75px;
+	position: absolute;
+	padding: 0.5rem;
+	background-color: white;
+	border: 2px solid gainsboro;
+	border-radius: 0.5rem;
+
+}

src/utils.ts

@@ -1,12 +1,13 @@
 import { Emoji, Save } from './types'
 
 export function filterEmoji (emoji: Emoji, query: string) {
+	query = query.toLocaleLowerCase()
 	return (
 		emoji.emoji.includes(query) ||
-		emoji.description.includes(query) ||
-		emoji.category.includes(query) ||
-		emoji.aliases.some(alias => alias.includes(query)) ||
-		emoji.tags.some(tag => tag.includes(query))
+		emoji.description.toLocaleLowerCase().includes(query) ||
+		emoji.category.toLocaleLowerCase().includes(query) ||
+		emoji.aliases.some(alias => alias.toLocaleLowerCase().includes(query)) ||
+		emoji.tags.some(tag => tag.toLocaleLowerCase().includes(query))
 	)
 }