@shoutem/ui 8.1.3-rc.5 → 8.2.1-rc.0

package/components/Icon/assets/add-to-shopping-cart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48H0zm36.62 12L31.1 22z" fill="none"/><path d="M22 18h4v-6h6V8h-6V2h-4v6h-6v4h6v6zm-8 18c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79 4-4-1.79-4-4-4zm20 0c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79 4-4-1.79-4-4-4zm-19.65-6.5c0-.09.02-.17.06-.24l1.8-3.26h14.9c1.5 0 2.81-.83 3.5-2.06l7.72-14.02L38.83 8h-.01l-2.21 4-5.51 10H17.07l-.26-.54L12.32 12l-1.9-4-1.89-4H2v4h4l7.2 15.17-2.71 4.9c-.31.58-.49 1.23-.49 1.93 0 2.21 1.79 4 4 4h24v-4H14.85c-.28 0-.5-.22-.5-.5z"/></svg>

package/components/Icon/assets/index.js

@@ -5,6 +5,7 @@ import addFriend from './add-friend.svg';
 import addToCart from './add-to-cart.svg';
 import addToFavoritesOff from './add-to-favorites-off.svg';
 import addToFavoritesOn from './add-to-favorites-on.svg';
+import addToShoppingCart from './add-to-shopping-cart.svg';
 import address from './address.svg';
 import attachMedia from './attach-media.svg';
 import back from './back.svg';
@@ -135,6 +136,7 @@ export const defaultConfig = [
   { name: 'add-event', icon: addEvent },
   { name: 'add-friend', icon: addFriend },
   { name: 'add-to-cart', icon: addToCart },
+  { name: 'add-to-shopping-cart', icon: addToShoppingCart },
   { name: 'add-to-favorites-off', icon: addToFavoritesOff },
   { name: 'add-to-favorites-on', icon: addToFavoritesOn },
   { name: 'address', icon: address },

package/components/TabMenu/TabMenu.js

@@ -11,70 +11,76 @@ class TabMenu extends PureComponent {
   constructor(props) {
     super(props);
 
+    this.scroll = {};
+
     autoBindReact(this);
 
     this.state = {
       itemWidths: {},
-      scrollOffset: 0,
+      viewportHorizontal: [],
     };
   }
 
-  handleOptionSelected(key, option) {
-    const { onOptionSelected } = this.props;
-    const { scrollOffset, itemWidths, viewportHorizontal } = this.state;
+  componentDidMount() {
+    this.scrollToSelectedItem();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { selectedOption } = this.props;
+
+    if (prevProps.selectedOption !== selectedOption) {
+      this.scrollToSelectedItem();
+    }
+  }
+
+  scrollToSelectedItem() {
+    const { selectedOption, options } = this.props;
+    const { itemWidths, viewportHorizontal } = this.state;
+
+    if (!selectedOption || !options.length || !this.scroll) {
+      return;
+    }
+
+    const selectedIndex = options.findIndex(
+      option => option.id === selectedOption.id,
+    );
+
+    if (selectedIndex === -1) {
+      return;
+    }
 
     let itemStart = 0;
 
     _.forEach(itemWidths, (itemWidth, index) => {
-      if (index < key) {
+      if (index < selectedIndex) {
         itemStart += itemWidth;
       }
     });
 
-    const itemEnd = itemStart + itemWidths[key];
-
-    LayoutAnimation.easeInEaseOut();
-    onOptionSelected(option);
+    const itemEnd = itemStart + itemWidths[selectedIndex];
 
+    // Ensure item is in view
     if (itemEnd > _.last(viewportHorizontal)) {
       const extraScroll = itemEnd - _.last(viewportHorizontal);
-
-      this.scroll.scrollTo({
-        x: extraScroll + scrollOffset,
-        y: 0,
-        animated: true,
-      });
+      this.scroll.scrollTo({ x: extraScroll, y: 0, animated: true });
     }
 
     if (itemStart < _.head(viewportHorizontal)) {
-      const extraScroll = _.head(viewportHorizontal) - itemStart;
-
       this.scroll.scrollTo({
-        x: scrollOffset - extraScroll,
+        x: itemStart,
         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] });
+    this.setState({ viewportHorizontal: [x, width] });
   }
 
   handleScrollLayout({
@@ -85,6 +91,24 @@ class TabMenu extends PureComponent {
     this.setState({ viewportHorizontal: [0, width] });
   }
 
+  handleItemLayout(key, width) {
+    const { itemWidths } = this.state;
+
+    this.setState({
+      itemWidths: {
+        ...itemWidths,
+        [key]: width,
+      },
+    });
+  }
+
+  handleOptionSelected(option) {
+    const { onOptionSelected } = this.props;
+
+    LayoutAnimation.easeInEaseOut();
+    onOptionSelected(option);
+  }
+
   renderOption(option, key) {
     const { selectedOption } = this.props;
 
@@ -95,7 +119,7 @@ class TabMenu extends PureComponent {
         key={key}
         isSelected={isSelected}
         item={option}
-        onItemPressed={option => this.handleOptionSelected(key, option)}
+        onItemPressed={option => this.handleOptionSelected(option)}
         onLayoutMeasured={width => this.handleItemLayout(key, width)}
       />
     );
@@ -113,6 +137,7 @@ class TabMenu extends PureComponent {
         ref={ref => {
           this.scroll = ref;
         }}
+        scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}
         style={style.list}
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "8.1.3-rc.5",
+  "version": "8.2.1-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -2556,6 +2556,7 @@ export default () => {
       list: {
         flexGrow: 0,
         flexShrink: 0,
+        backgroundColor: resolveVariable('backgroundColor'),
       },
     },