Add i18n prop to Picker [Close #20]

README.md

@@ -15,6 +15,7 @@ import { Picker } from 'emoji-mart'
 <Picker onClick={this.addEmoji} />
 <Picker title='Pick your emoji…' emoji='point_up' />
 <Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
+<Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />
 ```
 
 | Prop | Required | Default | Description |
@@ -24,12 +25,30 @@ import { Picker } from 'emoji-mart'
 | **emojiSize** | | `24` | The emoji width and height |
 | **onClick** | | | Params: `(emoji, event) => {}` |
 | **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
+| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
 | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **skin** | | `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 |
 
+#### I18n
+```js
+search: 'Search',
+categories: {
+  search: 'Search Results',
+  recent: 'Frequently Used',
+  people: 'Smileys & People',
+  nature: 'Animals & Nature',
+  foods: 'Food & Drink',
+  activity: 'Activity',
+  places: 'Travel & Places',
+  objects: 'Objects',
+  symbols: 'Symbols',
+  flags: 'Flags',
+}
+```
+
 #### Sheet sizes
 Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com).
 

src/components/anchors.js

@@ -18,7 +18,7 @@ export default class Anchors extends React.Component {
   }
 
   render() {
-    var { categories, onAnchorClick, color } = this.props,
+    var { categories, onAnchorClick, color, i18n } = this.props,
         { selected } = this.state
 
     return <div className='emoji-mart-anchors'>
@@ -33,7 +33,7 @@ export default class Anchors extends React.Component {
         return (
           <span
             key={name}
-            title={name}
+            title={i18n.categories[name.toLowerCase()]}
             onClick={() => onAnchorClick(category, i)}
             className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
             style={{ color: isSelected ? color : null }}

src/components/category.js

@@ -3,19 +3,6 @@ import React from 'react'
 import frequently from '../utils/frequently'
 import {Emoji} from '.'
 
-const LABELS = {
-  'Search': 'Search Results',
-  'Recent': 'Frequently Used',
-  'People': 'Smileys & People',
-  'Nature': 'Animals & Nature',
-  'Foods': 'Food & Drink',
-  'Activity': 'Activity',
-  'Places': 'Travel & Places',
-  'Objects': 'Objects',
-  'Symbols': 'Symbols',
-  'Flags': 'Flags',
-}
-
 export default class Category extends React.Component {
   componentDidMount() {
     this.container = this.refs.container
@@ -109,7 +96,7 @@ export default class Category extends React.Component {
   }
 
   render() {
-    var { name, hasStickyPosition, emojiProps } = this.props,
+    var { name, hasStickyPosition, emojiProps, i18n } = this.props,
         emojis = this.getEmojis(),
         labelStyles = {},
         labelSpanStyles = {},
@@ -133,7 +120,7 @@ export default class Category extends React.Component {
 
     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>
+        <span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span>
       </div>
 
       {emojis && emojis.map((emoji) =>

src/components/picker.js

@@ -5,6 +5,7 @@ import data from '../../data'
 
 import store from '../utils/store'
 import frequently from '../utils/frequently'
+import {deepMerge} from '../utils'
 
 import {Anchors, Category, Emoji, Preview, Search} from '.'
 
@@ -16,10 +17,27 @@ const CATEGORIES = [
   RECENT_CATEGORY,
 ].concat(data.categories)
 
+const I18N = {
+  search: 'Search',
+  categories: {
+    search: 'Search Results',
+    recent: 'Frequently Used',
+    people: 'Smileys & People',
+    nature: 'Animals & Nature',
+    foods: 'Food & Drink',
+    activity: 'Activity',
+    places: 'Travel & Places',
+    objects: 'Objects',
+    symbols: 'Symbols',
+    flags: 'Flags',
+  },
+}
+
 export default class Picker extends React.Component {
   constructor(props) {
     super(props)
 
+    this.i18n = deepMerge(I18N, props.i18n)
     this.state = {
       skin: store.get('skin') || props.skin,
       firstRender: true,
@@ -228,6 +246,7 @@ export default class Picker extends React.Component {
       <div className='emoji-mart-bar'>
         <Anchors
           ref='anchors'
+          i18n={this.i18n}
           color={color}
           categories={CATEGORIES}
           onAnchorClick={this.handleAnchorClick.bind(this)}
@@ -238,6 +257,7 @@ export default class Picker extends React.Component {
         <Search
           ref='search'
           onSearch={this.handleSearch.bind(this)}
+          i18n={this.i18n}
         />
 
         {this.getCategories().map((category, i) => {
@@ -248,6 +268,7 @@ export default class Picker extends React.Component {
             emojis={category.emojis}
             perLine={perLine}
             hasStickyPosition={this.hasStickyPosition}
+            i18n={this.i18n}
             emojiProps={{
               skin: skin,
               size: emojiSize,
@@ -286,6 +307,7 @@ Picker.propTypes = {
   onClick: React.PropTypes.func,
   perLine: React.PropTypes.number,
   emojiSize: React.PropTypes.number,
+  i18n: React.PropTypes.object,
   style: React.PropTypes.object,
   title: React.PropTypes.string,
   emoji: React.PropTypes.string,
@@ -299,6 +321,7 @@ Picker.defaultProps = {
   onClick: (() => {}),
   emojiSize: 24,
   perLine: 9,
+  i18n: {},
   style: {},
   title: 'Emoji Mart™',
   emoji: 'department_store',

src/components/search.js

@@ -14,11 +14,13 @@ export default class Search extends React.Component {
   }
 
   render() {
+    var { i18n } = this.props
+
     return <input
       ref='input'
       type='text'
       onChange={this.handleChange.bind(this)}
-      placeholder='Search'
+      placeholder={i18n.search}
       className='emoji-mart-search'
     />
   }

src/utils/index.js

@@ -89,4 +89,25 @@ function intersect(a, b) {
   return Array.from(intersection)
 }
 
-export { getData, getSanitizedData, intersect }
+function deepMerge(a, b) {
+  var o = {}
+
+  for (let key in a) {
+    let originalValue = a[key],
+        value = originalValue
+
+    if (b.hasOwnProperty(key)) {
+      value = b[key]
+    }
+
+    if (typeof value === 'object') {
+      value = deepMerge(originalValue, value)
+    }
+
+    o[key] = value
+  }
+
+  return o
+}
+
+export { getData, getSanitizedData, intersect, deepMerge }