@shoutem/ui 5.5.0 → 5.6.0

package/components/TabMenu/TabMenu.js

@@ -12,26 +12,91 @@ class TabMenu extends PureComponent {
     super(props);
 
     autoBindReact(this);
+
+    this.state = {
+      itemWidths: {},
+      scrollOffset: 0,
+    };
   }
 
-  handleOptionSelected(option) {
+  handleOptionSelected(key, option) {
     const { onOptionSelected } = this.props;
+    const { scrollOffset, itemWidths, viewportHorizontal } = this.state;
+
+    let itemStart = 0;
+
+    _.forEach(itemWidths, (itemWidth, index) => {
+      if (index < key) {
+        itemStart += itemWidth;
+      }
+    });
+
+    const itemEnd = itemStart + itemWidths[key];
 
     LayoutAnimation.easeInEaseOut();
     onOptionSelected(option);
+
+    if (itemEnd > _.last(viewportHorizontal)) {
+      const extraScroll = itemEnd - _.last(viewportHorizontal);
+
+      this.scroll.scrollTo({
+        x: extraScroll + scrollOffset,
+        y: 0,
+        animated: true,
+      });
+    }
+
+    if (itemStart < _.head(viewportHorizontal)) {
+      const extraScroll = _.head(viewportHorizontal) - itemStart;
+
+      this.scroll.scrollTo({
+        x: scrollOffset - extraScroll,
+        y: 0,
+        animated: true,
+      });
+    }
+  }
+
+  handleItemLayout(key, width) {
+    const { itemWidths } = this.state;
+
+    this.setState({
+      itemWidths: {
+        ...itemWidths,
+        [key]: width,
+      },
+    });
+  }
+
+  handleScroll({
+    nativeEvent: {
+      contentOffset: { x },
+      layoutMeasurement: { width },
+    },
+  }) {
+    this.setState({ scrollOffset: x, viewportHorizontal: [x, x + width] });
+  }
+
+  handleScrollLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
+    this.setState({ viewportHorizontal: [0, width] });
   }
 
-  renderOption(option) {
+  renderOption(option, key) {
     const { selectedOption } = this.props;
 
     const isSelected = selectedOption && option.title === selectedOption.title;
 
     return (
       <TabMenuItem
-        key={option.title}
+        key={key}
         isSelected={isSelected}
         item={option}
-        onItemPressed={this.handleOptionSelected}
+        onItemPressed={option => this.handleOptionSelected(key, option)}
+        onLayoutMeasured={width => this.handleItemLayout(key, width)}
       />
     );
   }
@@ -43,6 +108,11 @@ class TabMenu extends PureComponent {
       <ScrollView
         horizontal
         contentContainerStyle={style.container}
+        onScroll={this.handleScroll}
+        onLayout={this.handleScrollLayout}
+        ref={ref => {
+          this.scroll = ref;
+        }}
         showsHorizontalScrollIndicator={false}
         style={style.list}
       >

package/components/TabMenu/TabMenuItem.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation } from 'react-native';
 import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
@@ -26,7 +25,7 @@ class TabMenuItem extends PureComponent {
     onItemPressed(item);
   }
 
-  handleLayout({
+  handleTextLayout({
     nativeEvent: {
       layout: { width },
     },
@@ -35,6 +34,16 @@ class TabMenuItem extends PureComponent {
     this.setState({ baseWidth: width });
   }
 
+  handleContainerLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
+    const { onLayoutMeasured } = this.props;
+
+    onLayoutMeasured(width);
+  }
+
   render() {
     const { style, isSelected, item } = this.props;
     const { baseWidth } = this.state;
@@ -42,11 +51,12 @@ class TabMenuItem extends PureComponent {
     return (
       <TouchableOpacity
         onPress={this.handleItemPressed}
+        onLayout={this.handleContainerLayout}
         styleName="vertical h-center"
       >
         <Text
           style={[style.text, isSelected && style.selectedText]}
-          onLayout={this.handleLayout}
+          onLayout={this.handleTextLayout}
         >
           {item.title}
         </Text>
@@ -58,6 +68,7 @@ class TabMenuItem extends PureComponent {
 
 TabMenuItem.propTypes = {
   style: PropTypes.object.isRequired,
+  onLayoutMeasured: PropTypes.func.isRequired,
   isSelected: PropTypes.bool,
   item: optionShape,
   onItemPressed: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -1,4 +1,4 @@
-import { Dimensions, Platform, StatusBar, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 import {
   changeColorAlpha,
   createSharedStyle,
@@ -2899,7 +2899,6 @@ export default () => {
         borderRadius: 1,
         flexDirection: 'row',
         marginBottom: 8,
-        marginLeft: 8,
       },
       text: {
         marginTop: 12,