From 385cb8f8c2888af3bfbe94b6bd1cf6fd9681280d Mon Sep 17 00:00:00 2001
From: Justine De Caires <justine@minerva.kgi.edu>
Date: Mon, 6 Aug 2018 14:31:02 -0700
Subject: [PATCH] Add sheetColumns and sheetRows props for non-square sprite
 sheets

---
 src/components/emoji/nimble-emoji.js   | 9 ++++-----
 src/components/picker/nimble-picker.js | 4 ++++
 src/utils/shared-props.js              | 4 ++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 135e735..765a68c 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/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),
       }
     }
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 5d54057..762c950 100644
--- a/src/components/picker/nimble-picker.js
+++ b/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,
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index fcea08f..4d4e3f8 100644
--- a/src/utils/shared-props.js
+++ b/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,