Merge branch 'master' into mark-as-unread

app/components/__snapshots__/swiper.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swiper should match snapshot 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "flex": 1,
+        "position": "relative",
+      },
+    ]
+  }
+>
+  <ScrollViewMock
+    automaticallyAdjustContentInsets={true}
+    bounces={false}
+    contentContainerStyle={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
+    }
+    horizontal={true}
+    keyboardShouldPersistTaps="handled"
+    onMomentumScrollEnd={[Function]}
+    onScrollBeginDrag={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={true}
+    scrollEnabled={true}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+  />
+</View>
+`;

app/components/emoji_picker/emoji_picker_base.js

@@ -72,7 +72,7 @@ export default class EmojiPicker extends PureComponent {
 
         this.sectionListGetItemLayout = sectionListGetItemLayout({
             getItemHeight: () => {
-                return (EMOJI_SIZE + 5) + (EMOJI_GUTTER * 2);
+                return (EMOJI_SIZE + 7) + (EMOJI_GUTTER * 2);
             },
             getSectionHeaderHeight: () => SECTION_HEADER_HEIGHT,
         });
@@ -161,7 +161,7 @@ export default class EmojiPicker extends PureComponent {
         let lastOffset = 0;
         return emojiSections.map((section) => {
             const start = lastOffset;
-            const nextOffset = (section.data.length * (EMOJI_SIZE + (EMOJI_GUTTER * 2))) + SECTION_HEADER_HEIGHT;
+            const nextOffset = (section.data.length * ((EMOJI_SIZE + 7) + (EMOJI_GUTTER * 2))) + SECTION_HEADER_HEIGHT;
             lastOffset += nextOffset;
 
             return start;
@@ -216,7 +216,7 @@ export default class EmojiPicker extends PureComponent {
 
     getNumberOfColumns = (deviceWidth) => {
         const shorten = DeviceTypes.IS_IPHONE_WITH_INSETS && this.props.isLandscape ? 4 : 2;
-        return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / (EMOJI_SIZE + (EMOJI_GUTTER * shorten)))));
+        return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / ((EMOJI_SIZE + 7) + (EMOJI_GUTTER * shorten)))));
     };
 
     renderItem = ({item}) => {

app/components/emoji_picker/emoji_picker_row.js

@@ -27,7 +27,7 @@ export default class EmojiPickerRow extends Component {
     renderEmojis = (emoji, index, emojis) => {
         const {emojiGutter, emojiSize} = this.props;
 
-        const size = emojiSize + 5;
+        const size = emojiSize + 7;
         const style = [
             styles.emoji,
             {

app/components/sidebars/main/main_sidebar.js

@@ -24,7 +24,7 @@ import tracker from 'app/utils/time_tracker';
 import {t} from 'app/utils/i18n';
 
 import ChannelsList from './channels_list';
-import DrawerSwiper from './drawer_swipper';
+import DrawerSwiper from './drawer_swiper';
 import TeamsList from './teams_list';
 
 import telemetry from 'app/telemetry';

app/components/swiper.js

@@ -52,6 +52,14 @@ export default class Swiper extends PureComponent {
         this.state = this.initialState(props);
     }
 
+    static getDerivedStateFromProps(props, state) {
+        const total = React.Children.count(props.children);
+        if (total !== state.total) {
+            return {total};
+        }
+        return null;
+    }
+
     componentDidUpdate(prevProps, prevState) {
         // If the index has changed, we notify the parent via the onIndexChanged callback
         if (this.state.index !== prevState.index) {

app/components/swiper.test.js

@@ -0,0 +1,67 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Swiper from './swiper.js';
+
+describe('Swiper', () => {
+    const baseProps = {
+        children: [],
+    };
+
+    test('should match snapshot', async () => {
+        const wrapper = shallow(
+            <Swiper {...baseProps}/>,
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should not call scrollView.scrollTo and updateIndex when children < 2', () => {
+        const children = [];
+        while (children.length < 2) {
+            const props = {...baseProps, children};
+            const wrapper = shallow(
+                <Swiper {...props}/>,
+            );
+
+            const instance = wrapper.instance();
+            instance.updateIndex = jest.fn();
+            instance.refScrollView({
+                scrollTo: jest.fn(),
+            });
+
+            instance.scrollToIndex(1, false);
+            expect(instance.scrollView.scrollTo).not.toHaveBeenCalled();
+            expect(instance.updateIndex).not.toHaveBeenCalled();
+
+            children.push('test');
+        }
+
+        expect(children.length).toBe(2);
+    });
+
+    test('should call scrollView.scrollTo and updateIndex when children >= 2', () => {
+        const children = [1, 2, 3];
+        while (children.length >= 2) {
+            const props = {...baseProps, children};
+            const wrapper = shallow(
+                <Swiper {...props}/>,
+            );
+
+            const instance = wrapper.instance();
+            instance.updateIndex = jest.fn();
+            instance.refScrollView({
+                scrollTo: jest.fn(),
+            });
+
+            instance.scrollToIndex(1, false);
+            expect(instance.scrollView.scrollTo).toHaveBeenCalled();
+            expect(instance.updateIndex).toHaveBeenCalled();
+
+            children.pop();
+        }
+
+        expect(children.length).toBe(1);
+    });
+});

packager/moduleNames.js

@@ -153,8 +153,8 @@ module.exports = [
     'app/components/sidebars/main/channels_list/list/list.js',
     'app/components/sidebars/main/channels_list/switch_teams_button/index.js',
     'app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js',
-    'app/components/sidebars/main/drawer_swipper/drawer_swiper.js',
-    'app/components/sidebars/main/drawer_swipper/index.js',
+    'app/components/sidebars/main/drawer_swiper/drawer_swiper.js',
+    'app/components/sidebars/main/drawer_swiper/index.js',
     'app/components/sidebars/main/index.js',
     'app/components/sidebars/main/main_sidebar.js',
     'app/components/sidebars/main/teams_list/index.js',