diff --git a/README.md b/README.md index c523def..a98a8c8 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ import { Picker } from 'emoji-mart' + ``` | 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). diff --git a/src/components/anchors.js b/src/components/anchors.js index 5febf77..d163ade 100644 --- a/src/components/anchors.js +++ b/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
@@ -33,7 +33,7 @@ export default class Anchors extends React.Component { return ( onAnchorClick(category, i)} className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`} style={{ color: isSelected ? color : null }} diff --git a/src/components/category.js b/src/components/category.js index bbd8160..78ed61f 100644 --- a/src/components/category.js +++ b/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
- {LABELS[name]} + {i18n.categories[name.toLowerCase()]}
{emojis && emojis.map((emoji) => diff --git a/src/components/picker.js b/src/components/picker.js index 30bb835..cc93756 100644 --- a/src/components/picker.js +++ b/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 {
{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', diff --git a/src/components/search.js b/src/components/search.js index 9550daa..47d9055 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -14,11 +14,13 @@ export default class Search extends React.Component { } render() { + var { i18n } = this.props + return } diff --git a/src/utils/index.js b/src/utils/index.js index 2107c10..2de079a 100644 --- a/src/utils/index.js +++ b/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 }