@shoutem/ui 5.3.0 → 5.5.0

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>
-  );
-}

package/examples/components/HorizontalPagers.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Dimensions } from 'react-native';
-import { HorizontalPager } from '../../components/HorizontalPager/HorizontalPager';
-import { View } from '../../components/View';
-import { ImageBackground } from '../../ImageBackground';
-import { Caption, Subtitle } from '../../Text';
-import { Tile } from '../../Tile';
-import { Stage } from './Stage';
-
-const window = Dimensions.get('window');
-
-export function HorizontalPagers() {
-  return (
-    <View styleName="vertical collapsible">
-      <Stage title="Horizontal Pager (with tiles as content)">
-        <View style={{ height: 250, width: window.width }}>
-          <HorizontalPager
-            data={[
-              {
-                description: 'description',
-                title: 'When The Morning Dawns - DJ Silver Sample Album',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'When The Morning Dawns',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'DJ Silver Sample Album',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'When The Morning Dawns - DJ Silver Sample Album',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
-                },
-              },
-            ]}
-            renderPage={page => {
-              return (
-                <ImageBackground
-                  styleName="large-wide"
-                  source={{ uri: page.source.uri }}
-                >
-                  <Tile>
-                    <Subtitle numberOfLines={2}>{page.title}</Subtitle>
-                    <Caption>{page.description}</Caption>
-                  </Tile>
-                </ImageBackground>
-              );
-            }}
-            pageMargin={20}
-          />
-        </View>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/ImageGalleries.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Dimensions } from 'react-native';
-import { ImageGallery } from '../../components/ImageGallery';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-const window = Dimensions.get('window');
-
-export function ImageGalleries() {
-  return (
-    <View styleName="vertical collapsible">
-      <Stage title="Image Gallery">
-        <View style={{ height: 500, width: window.width }}>
-          <ImageGallery
-            data={[
-              {
-                description: 'description',
-                title: 'title',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'title',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'title',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-                },
-              },
-              {
-                description: 'description',
-                title: 'title',
-                source: {
-                  uri:
-                    'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
-                },
-              },
-            ]}
-            pageMargin={20}
-          />
-        </View>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Images.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import { Image } from '../../components/Image';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Images() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title={'List image thumbnail (65x65)\n(small)'}>
-        <Image
-          styleName="small"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'List video thumbnail (145x92)\n(medium)'}>
-        <Image
-          styleName="medium"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Card image thumbnail (180x85)\n(medium-wide)'}>
-        <Image
-          styleName="medium-wide"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Avatar thumbnail (25x25)\n(small-avatar)'}>
-        <Image
-          styleName="small-avatar"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Avatar image (145x145)\n(medium-avatar)'}>
-        <Image
-          styleName="medium-avatar"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'List medium image (145x145)\n(medium-square)'}>
-        <Image
-          styleName="medium-square"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Up next article image (375x130)\n(large-ultra-wide)'}>
-        <Image
-          styleName="large-ultra-wide"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'List large thumbnail (375x200)\n(large-banner)'}>
-        <Image
-          styleName="large-banner"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Featured image (365x345)\n(featured)'}>
-        <Image
-          styleName="featured"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Detail large photo (375x518)\n(large-portrait)'}>
-        <Image
-          styleName="large-portrait"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Detail medium photo (375x280)\n(large)'}>
-        <Image
-          styleName="large"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Detail wide photo (375x238)\n(large-wide)'}>
-        <Image
-          styleName="large-wide"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-
-      <Stage title={'Detail square photo (375x375)\n(large-square)'}>
-        <Image
-          styleName="large-square"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        />
-      </Stage>
-    </View>
-  );
-}