@shoutem/ui 5.4.0 → 5.5.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/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.5.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/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>
-    );
-  }
-}

package/examples/components/Examples.js

@@ -1,70 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Divider } from '../../components/Divider';
-import { DropDownMenu } from '../../components/DropDownMenu';
-import { Screen } from '../../components/Screen';
-import { ScrollView } from '../../components/ScrollView';
-import { Buttons } from './Buttons';
-import { Cards } from './Cards';
-import { Dividers } from './Dividers';
-import { DropDownMenus } from './DropDownMenus';
-import { FormComponents } from './FormComponents';
-import { Headers } from './Headers';
-import { Images } from './Images';
-import { NavigationBars } from './NavigationBars';
-import { Rows } from './Rows';
-import { Spinners } from './Spinners';
-import { Tiles } from './Tiles';
-import { Typography } from './Typography';
-import { Videos } from './Videos';
-
-const examples = [
-  { title: 'Typography', component: Typography },
-  { title: 'Navigation Bars', component: NavigationBars },
-  { title: 'Dropdown Menus', component: DropDownMenus },
-  { title: 'Dividers', component: Dividers },
-  { title: 'Cards', component: Cards },
-  { title: 'Rows', component: Rows },
-  { title: 'Tiles', component: Tiles },
-  { title: 'Headers', component: Headers },
-  { title: 'Spinners', component: Spinners },
-  { title: 'Buttons', component: Buttons },
-  { title: 'Images', component: Images },
-  { title: 'Video', component: Videos },
-  { title: 'Form Components', component: FormComponents },
-];
-
-export class Examples extends PureComponent {
-  constructor() {
-    super();
-
-    this.state = {
-      selectedExample: examples[0],
-    };
-  }
-
-  render() {
-    const { selectedExample } = this.state;
-
-    const SelectedComponent = selectedExample.component;
-
-    return (
-      <Screen>
-        <Divider />
-        <DropDownMenu
-          styleName="horizontal"
-          options={examples}
-          selectedOption={this.state.selectedExample}
-          onOptionSelected={example =>
-            this.setState({ selectedExample: example })
-          }
-          titleProperty="title"
-          valueProperty="component"
-        />
-
-        <ScrollView key={selectedExample.title}>
-          <SelectedComponent />
-        </ScrollView>
-      </Screen>
-    );
-  }
-}

package/examples/components/FormComponents.js

@@ -1,48 +0,0 @@
-import React, { PureComponent } from 'react';
-import { FormGroup } from '../../components/FormGroup';
-import { Switch } from '../../components/Switch';
-import { Caption } from '../../components/Text';
-import { TextInput } from '../../components/TextInput';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export class FormComponents extends PureComponent {
-  constructor() {
-    super();
-
-    this.state = {
-      switchOn: false,
-    };
-  }
-
-  render() {
-    const { switchOn } = this.state;
-
-    return (
-      <View styleName="vertical collapsed">
-        <Stage title="TextInput / Full width">
-          <TextInput styleName="stretch" placeholder="Username or Email" />
-        </Stage>
-        <Stage title="TextInput  /  Full width secure entry">
-          <TextInput
-            styleName="stretch"
-            placeholder="Password"
-            secureTextEntry
-          />
-        </Stage>
-        <Stage title="Input with label">
-          <FormGroup styleName="stretch">
-            <Caption>NAME</Caption>
-            <TextInput placeholder="Username or Email" />
-          </FormGroup>
-        </Stage>
-        <Stage title="Switch">
-          <Switch
-            onValueChange={value => this.setState({ switchOn: value })}
-            value={switchOn}
-          />
-        </Stage>
-      </View>
-    );
-  }
-}

package/examples/components/Headers.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
-import { Overlay } from '../../components/Overlay';
-import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
-import { Tile } from '../../components/Tile';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Headers() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Header / Article">
-        <Tile styleName="text-centric">
-          <Title styleName="sm-gutter-bottom">
-            MIKE PATTON TEAMING WITH JOHN KAADA FOR COLLAB ALBUM BACTERIA CULT
-          </Title>
-          <Caption>Sophia Jackson 21 hours ago</Caption>
-        </Tile>
-      </Stage>
-
-      <Stage title="Header / Shop item">
-        <Tile styleName="text-centric">
-          <Overlay styleName="image-overlay">
-            <Heading>-20%</Heading>
-          </Overlay>
-          <Title styleName="md-gutter-top">
-            COOL BLACK AND WHITE STYLISH WATCHES
-          </Title>
-          <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
-          <Heading>$250.00</Heading>
-          <Button styleName="secondary md-gutter-top">
-            <Icon name="cart" />
-            <Text>ADD TO BASKET</Text>
-          </Button>
-        </Tile>
-      </Stage>
-
-      <Stage title="Header / Deals item">
-        <Tile styleName="text-centric">
-          <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
-          <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
-          <Heading>99.99</Heading>
-          <Button styleName="secondary md-gutter-top">
-            <Text>CLAIM COUPON</Text>
-          </Button>
-        </Tile>
-      </Stage>
-
-      <Stage title="Header / Products item">
-        <Tile styleName="text-centric">
-          <Title styleName="md-gutter-bottom">
-            SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
-          </Title>
-          <Overlay styleName="image-overlay">
-            <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
-          </Overlay>
-        </Tile>
-      </Stage>
-    </View>
-  );
-}