Add support for server-side rendering [Fix #7]

missive · Oct 4, 2016 · f31a359 · f31a359
1 parent 29063f2
commit f31a359
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/src/components/category.js b/src/components/category.js
@@ -29,9 +29,9 @@ export default class Category extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    var { name, perLine, emojis, emojiProps } = this.props,
+    var { name, perLine, hasStickyPosition, emojis, emojiProps } = this.props,
         { skin, size, sheetURL } = emojiProps,
-        { perLine: nextPerLine, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
+        { perLine: nextPerLine, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
         { skin: nextSkin, size: nextSize, sheetURL: nextSheetURL } = nextEmojiProps,
         shouldUpdate = false
 
@@ -43,7 +43,7 @@ export default class Category extends React.Component {
       shouldUpdate = !(emojis == nextEmojis)
     }
 
-    if (skin != nextSkin || size != nextSize || sheetURL != nextSheetURL) {
+    if (skin != nextSkin || size != nextSize || sheetURL != nextSheetURL || hasStickyPosition != nextHasStickyPosition) {
       shouldUpdate = true
     }
 

diff --git a/src/components/picker.js b/src/components/picker.js
@@ -19,7 +19,6 @@ const CATEGORIES = [
 export default class Picker extends React.Component {
   constructor(props) {
     super(props)
-    this.testStickyPosition()
 
     this.state = {
       skin: store.get('skin') || props.skin,
@@ -35,6 +34,7 @@ export default class Picker extends React.Component {
 
   componentDidMount() {
     if (this.state.firstRender) {
+      this.testStickyPosition()
       this.firstRenderTimeout = setTimeout(() => {
         this.setState({ firstRender: false })
       }, 60)

diff --git a/src/utils/store.js b/src/utils/store.js
@@ -1,5 +1,8 @@
 const NAMESPACE = 'emoji-mart'
 
+var isLocalStorageSupported = typeof window !== 'undefined' &&
+                              'localStorage' in window
+
 function update(state) {
   for (let key in state) {
     let value = state[key]
@@ -8,13 +11,12 @@ function update(state) {
 }
 
 function set(key, value) {
-  if (!('localStorage' in window)) return
+  if (!isLocalStorageSupported) return
   window.localStorage[`${NAMESPACE}.${key}`] = JSON.stringify(value)
 }
 
 function get(key) {
-  if (!('localStorage' in window)) return
-
+  if (!isLocalStorageSupported) return
   var value = window.localStorage[`${NAMESPACE}.${key}`]
 
   if (value) {

diff --git a/src/vendor/raf-polyfill.js b/src/vendor/raf-polyfill.js
@@ -5,7 +5,9 @@
 
 // MIT license
 
-(function() {
+var isWindowAvailable = typeof window !== 'undefined'
+
+isWindowAvailable && (function() {
     var lastTime = 0;
     var vendors = ['ms', 'moz', 'webkit', 'o'];
     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {