diff --git a/app/components/__snapshots__/swiper.test.js.snap b/app/components/__snapshots__/swiper.test.js.snap
new file mode 100644
index 000000000..cc5bad0f4
--- /dev/null
+++ b/app/components/__snapshots__/swiper.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swiper should match snapshot 1`] = `
+
+
+
+`;
diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js
index a8843a8ab..05a3afb61 100644
--- a/app/components/emoji_picker/emoji_picker_base.js
+++ b/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}) => {
diff --git a/app/components/emoji_picker/emoji_picker_row.js b/app/components/emoji_picker/emoji_picker_row.js
index af0ae6bef..5527845f9 100644
--- a/app/components/emoji_picker/emoji_picker_row.js
+++ b/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,
{
diff --git a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js b/app/components/sidebars/main/drawer_swiper/drawer_swiper.js
similarity index 100%
rename from app/components/sidebars/main/drawer_swipper/drawer_swiper.js
rename to app/components/sidebars/main/drawer_swiper/drawer_swiper.js
diff --git a/app/components/sidebars/main/drawer_swipper/index.js b/app/components/sidebars/main/drawer_swiper/index.js
similarity index 100%
rename from app/components/sidebars/main/drawer_swipper/index.js
rename to app/components/sidebars/main/drawer_swiper/index.js
diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js
index 47fb4c493..58ae8d77a 100644
--- a/app/components/sidebars/main/main_sidebar.js
+++ b/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';
diff --git a/app/components/swiper.js b/app/components/swiper.js
index 187a44201..642630974 100644
--- a/app/components/swiper.js
+++ b/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) {
diff --git a/app/components/swiper.test.js b/app/components/swiper.test.js
new file mode 100644
index 000000000..0e44baa9b
--- /dev/null
+++ b/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(
+ ,
+ );
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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);
+ });
+});
diff --git a/packager/moduleNames.js b/packager/moduleNames.js
index 7d6583ee9..a7c0e11a1 100644
--- a/packager/moduleNames.js
+++ b/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',