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