@shoutem/ui 5.4.0 → 5.6.0

package/README.md

@@ -20,84 +20,6 @@ All the documentation is available on the [Developer portal](http://shoutem.gith
 
 Join [our community](https://www.facebook.com/groups/shoutem.community/) on Facebook. Also, feel free to ask a question on Stack Overflow using ["shoutem" tag](http://stackoverflow.com/tags/shoutem).
 
-## Examples
-
-To see how Shoutem UI works, you can:
-
-- include the `Examples` component into your React Native app or
-- run `Restaurants` app in `examples` folder.
-
-### Examples component
-
-**If you are using Expo, see [this
-project](https://github.com/shoutem/ui/blob/develop/examples/create-react-native-app/App.js)
-for example usage. Otherwise, follow the steps below.**
-
-Create new React Native project and locate to it:
-
-```bash
-$ react-native init HelloWorld && cd HelloWorld
-```
-
-Install `@shoutem/ui` in your project:
-
-```bash
-$ npm install --save @shoutem/ui
-```
-
-Now, simply copy the following to your `App.js` files of the React Native project:
-
-```JavaScript
-import React, { PureComponent } from 'react';
-import { Examples } from '@shoutem/ui';
-
-export default class App extends PureComponent {
-  render() {
-    return (
-      <Examples />
-    );
-  }
-}
-```
-
-Finally, run the app!
-
-```bash
-$ react-native run-ios
-```
-
-To see other components, just import them from `@shoutem/ui` and render them.
-
-You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.
-
-### Restaurants app
-
-Clone the [Shoutem UI](https://github.com/shoutem/ui) repository:
-
-```bash
-git clone https://github.com/shoutem/ui.git
-```
-
-Locate to `RestaurantsApp` folder:
-
-```bash
-cd ui/examples/RestaurantsApp
-```
-
-Install and link dependencies:
-
-```bash
-npm install
-react-native link
-```
-
-Finally, run the app!
-
-```bash
-react-native run-ios
-react-native run-android
-```
-
 ## UI Toolkit
 
 Shoutem UI is a part of the [Shoutem UI Toolkit](https://shoutem.github.io/ui/) that enables you to build professional looking React Native apps with ease.

package/components/DropDownMenu/DropDownMenu.js

@@ -54,7 +54,7 @@ class DropDownMenu extends PureComponent {
       <View style={style.horizontalContainer}>
         <Button onPress={this.collapse} style={style.selectedOption}>
           {showSelectedOption && <Text>{selectedOption[titleProperty]}</Text>}
-          <Icon name={iconName} />
+          <Icon name={iconName} style={style.icon} />
         </Button>
       </View>
     ) : null;

package/components/NumberInput.js

@@ -65,11 +65,11 @@ class NumberInput extends PureComponent {
     return (
       <View style={style.container} styleName="horizontal">
         <Button
-          style={style.button}
+          style={[style.button, style.buttonLeft]}
           styleName="secondary"
           onPress={this.decreaseValue}
         >
-          <Icon name="minus-button" style={style.icon} />
+          <Icon name="minus-button" style={[style.icon, style.iconLeft]} />
         </Button>
         <View style={style.inputContainer} styleName="horizontal">
           <TextInput
@@ -80,11 +80,11 @@ class NumberInput extends PureComponent {
           />
         </View>
         <Button
-          style={style.button}
+          style={[style.button, style.buttonRight]}
           styleName="secondary"
           onPress={this.increaseValue}
         >
-          <Icon name="plus-button" style={style.icon} />
+          <Icon name="plus-button" style={[style.icon, style.iconRight]} />
         </Button>
       </View>
     );

package/components/ShareButton.js

@@ -24,7 +24,7 @@ class ShareButton extends PureComponent {
   onShare() {
     const { title, message, url } = this.props;
 
-    Share.share({
+    return Share.share({
       title,
       // URL property isn't supported on Android, so we are
       // including it as the message for now.
@@ -34,7 +34,11 @@ class ShareButton extends PureComponent {
   }
 
   render() {
-    const { animationName, iconProps, ...otherProps } = this.props;
+    const { animationName, iconProps, url, ...otherProps } = this.props;
+
+    if (!url) {
+      return null;
+    }
 
     return (
       <Button onPress={this.onShare} {...otherProps}>

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/index.js

@@ -72,9 +72,6 @@ export { Video } from './components/Video';
 export { View } from './components/View';
 export { YearRangePicker } from './components/YearRangePicker';
 
-// Examples
-export { Examples } from './examples/components';
-
 // Helpers
 export { calculateKeyboardOffset, Device, Keyboard } from './helpers';
 
@@ -89,7 +86,6 @@ export {
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
-  nativeDependencies,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
   STATUS_BAR_OFFSET,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -121,8 +121,7 @@
   "jest": {
     "preset": "react-native",
     "testPathIgnorePatterns": [
-      "/node_modules/",
-      "examples/"
+      "/node_modules/"
     ],
     "transformIgnorePatterns": [
       "!/node_modules/@shoutem"

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,

package/examples/components/Buttons.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
-import { Text } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Buttons() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Button / Text only / Light">
-        <Button>
-          <Text>CHECK IN HERE</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Text only / Dark">
-        <Button styleName="secondary">
-          <Text>CHECK IN HERE</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Icon + Text / Light">
-        <Button>
-          <Icon name="add-event" />
-          <Text>ADD TO CALENDAR</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Icon + Text / Dark">
-        <Button styleName="secondary">
-          <Icon name="add-event" />
-          <Text>ADD TO CALENDAR</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Fixed size">
-        <View styleName="horizontal flexible">
-          <Button styleName="confirmation">
-            <Text>REMOVE</Text>
-          </Button>
-
-          <Button styleName="confirmation secondary">
-            <Text>UPDATE</Text>
-          </Button>
-        </View>
-      </Stage>
-
-      <Stage title="Button / Full width">
-        <Button styleName="full-width">
-          <Text>SEE ALL COMMENTS</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Navbar">
-        <Button styleName="textual">
-          <Icon name="add-to-favorites-on" />
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Vertical / Icon + Text">
-        <Button styleName="stacked textual">
-          <Icon name="tweet" />
-          <Text>Text description</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Full width - Muted">
-        <View styleName="horizontal flexible">
-          <Button styleName="full-width muted">
-            <Icon name="add-to-favorites-on" />
-            <Text>LIKE</Text>
-          </Button>
-          <Button styleName="full-width muted">
-            <Icon name="comment" />
-            <Text>COMMENT</Text>
-          </Button>
-        </View>
-      </Stage>
-
-      <Stage title="Button / Full width - Active">
-        <View styleName="horizontal flexible">
-          <Button styleName="full-width">
-            <Icon name="add-to-favorites-on" />
-            <Text>LIKE</Text>
-          </Button>
-          <Button styleName="full-width">
-            <Icon name="comment" />
-            <Text>COMMENT</Text>
-          </Button>
-        </View>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Cards.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Card } from '../../components/Card';
-import { Icon } from '../../components/Icon';
-import { Image } from '../../components/Image';
-import { Caption, Subtitle } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Cards() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Card">
-        <Card>
-          <Image
-            styleName="medium-wide"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png',
-            }}
-          />
-          <View styleName="content">
-            <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
-            <Caption>21 hours ago</Caption>
-          </View>
-        </Card>
-      </Stage>
-
-      <Stage title="Card + Icon">
-        <Card>
-          <Image
-            styleName="medium-wide"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-12.png',
-            }}
-          />
-          <View styleName="content">
-            <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
-            <View styleName="horizontal v-center space-between">
-              <Caption>Dec 21, 13:45</Caption>
-              <Button styleName="tight clear">
-                <Icon name="add-event" />
-              </Button>
-            </View>
-          </View>
-        </Card>
-      </Stage>
-
-      <Stage title="Card + Icon (Shop)">
-        <Card>
-          <Image
-            styleName="medium-wide"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-            }}
-          />
-          <View styleName="content">
-            <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
-            <View styleName="horizontal v-center space-between">
-              <View styleName="horizontal">
-                <Subtitle styleName="md-gutter-right">$99.99</Subtitle>
-                <Caption styleName="line-through">$120.00</Caption>
-              </View>
-              {
-                // TODO (zeljko): Should we add an IconButton?
-                // <IconButton icon="cart" onPress={...} />
-              }
-              <Button styleName="tight clear">
-                <Icon name="cart" />
-              </Button>
-            </View>
-          </View>
-        </Card>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Dividers.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Divider } from '../../components/Divider';
-import { Caption } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Dividers() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Divider">
-        <Divider />
-      </Stage>
-
-      <Stage title="Line divider">
-        <Divider styleName="line" />
-      </Stage>
-
-      <Stage title="Section divider">
-        <Divider styleName="section-header" />
-      </Stage>
-
-      <Stage title="Section divider + label">
-        <Divider styleName="section-header">
-          <Caption>INFORMATION</Caption>
-        </Divider>
-      </Stage>
-
-      <Stage title="Section divider + label + caption">
-        <Divider styleName="section-header">
-          <Caption>PRODUCT NAME</Caption>
-          <Caption>PRICE</Caption>
-        </Divider>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/DropDownMenus.js

@@ -1,93 +0,0 @@
-import React, { PureComponent } from 'react';
-import { DropDownMenu } from '../../components/DropDownMenu';
-import { FormGroup } from '../../components/FormGroup';
-import { Caption } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-const options = [
-  {
-    name: 'Lifestyle',
-    id: '7',
-  },
-  {
-    name: 'Food',
-    id: '8',
-  },
-  {
-    name: 'Nature',
-    id: '9',
-  },
-];
-
-const emptyOption = { id: '', name: 'Select' };
-const optionsWithEmptyOption = [emptyOption, ...options];
-
-export class DropDownMenus extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      selectedOption: options[0],
-      selectedOptionForFormGroupDropdown: emptyOption,
-    };
-  }
-
-  render() {
-    const { selectedOption, selectedOptionForFormGroupDropdown } = this.state;
-
-    return (
-      <View styleName="vertical collapsed">
-        <Stage title="Dropdown">
-          <DropDownMenu
-            options={options}
-            selectedOption={selectedOption}
-            onOptionSelected={option =>
-              this.setState({ selectedOption: option })
-            }
-            titleProperty="name"
-            valueProperty="id"
-          />
-        </Stage>
-        <Stage title="Dropdown (horizontal)">
-          <DropDownMenu
-            styleName="horizontal"
-            options={options}
-            selectedOption={selectedOption}
-            onOptionSelected={option =>
-              this.setState({ selectedOption: option })
-            }
-            titleProperty="name"
-            valueProperty="id"
-          />
-        </Stage>
-        <Stage title="Dropdown (large)">
-          <DropDownMenu
-            styleName="large"
-            options={options}
-            selectedOption={selectedOption}
-            onOptionSelected={option =>
-              this.setState({ selectedOption: option })
-            }
-            titleProperty="name"
-            valueProperty="id"
-          />
-        </Stage>
-        <Stage title="Dropdown (inside a form group)">
-          <FormGroup styleName="stretch">
-            <Caption>CATEGORY</Caption>
-            <DropDownMenu
-              styleName={selectedOptionForFormGroupDropdown.id ? '' : 'empty'}
-              options={optionsWithEmptyOption}
-              selectedOption={selectedOptionForFormGroupDropdown}
-              onOptionSelected={option =>
-                this.setState({ selectedOptionForFormGroupDropdown: option })
-              }
-              titleProperty="name"
-              valueProperty="id"
-            />
-          </FormGroup>
-        </Stage>
-      </View>
-    );
-  }
-}