Merge pull request #212 from jdecked/sheet-columns-props

Add sheetColumns and sheetRows props for non-square sprite sheets

src/components/emoji/nimble-emoji.js

@@ -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) => {
@@ -150,7 +149,7 @@ const NimbleEmoji = (props) => {
           props.set,
           props.sheetSize,
         )})`,
-        backgroundSize: `${100 * SHEET_COLUMNS}%`,
+        backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
         backgroundPosition: _getPosition(props),
       }
     }

src/components/picker/nimble-picker.js

@@ -455,6 +455,8 @@ export default class NimblePicker extends React.PureComponent {
         emojiSize,
         set,
         sheetSize,
+        sheetColumns,
+        sheetRows,
         style,
         title,
         emoji,
@@ -537,6 +539,8 @@ export default class NimblePicker extends React.PureComponent {
                   size: emojiSize,
                   set: set,
                   sheetSize: sheetSize,
+                  sheetColumns: sheetColumns,
+                  sheetRows: sheetRows,
                   forceSize: native,
                   tooltip: emojiTooltip,
                   backgroundImageFn: backgroundImageFn,

src/utils/shared-props.js

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