@shoutem/ui 5.4.0 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/README.md +0 -78
  2. package/components/DropDownMenu/DropDownMenu.js +1 -1
  3. package/components/NumberInput.js +4 -4
  4. package/components/ShareButton.js +6 -2
  5. package/components/TabMenu/TabMenu.js +74 -4
  6. package/components/TabMenu/TabMenuItem.js +14 -3
  7. package/index.js +0 -4
  8. package/package.json +2 -3
  9. package/theme.js +1 -2
  10. package/examples/components/Buttons.js +0 -95
  11. package/examples/components/Cards.js +0 -79
  12. package/examples/components/Dividers.js +0 -36
  13. package/examples/components/DropDownMenus.js +0 -93
  14. package/examples/components/Examples.js +0 -70
  15. package/examples/components/FormComponents.js +0 -48
  16. package/examples/components/Headers.js +0 -62
  17. package/examples/components/HorizontalPagers.js +0 -71
  18. package/examples/components/ImageGalleries.js +0 -55
  19. package/examples/components/Images.js +0 -140
  20. package/examples/components/InlineGalleries.js +0 -117
  21. package/examples/components/NavigationBars.js +0 -309
  22. package/examples/components/Rows.js +0 -200
  23. package/examples/components/Spinners.js +0 -14
  24. package/examples/components/Stage.js +0 -46
  25. package/examples/components/Tiles.js +0 -324
  26. package/examples/components/Typography.js +0 -30
  27. package/examples/components/Videos.js +0 -35
  28. package/examples/components/index.js +0 -1
package/examples/components/Examples.js DELETED
@@ -1,70 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { Divider } from '../../components/Divider';
3
- import { DropDownMenu } from '../../components/DropDownMenu';
4
- import { Screen } from '../../components/Screen';
5
- import { ScrollView } from '../../components/ScrollView';
6
- import { Buttons } from './Buttons';
7
- import { Cards } from './Cards';
8
- import { Dividers } from './Dividers';
9
- import { DropDownMenus } from './DropDownMenus';
10
- import { FormComponents } from './FormComponents';
11
- import { Headers } from './Headers';
12
- import { Images } from './Images';
13
- import { NavigationBars } from './NavigationBars';
14
- import { Rows } from './Rows';
15
- import { Spinners } from './Spinners';
16
- import { Tiles } from './Tiles';
17
- import { Typography } from './Typography';
18
- import { Videos } from './Videos';
19
-
20
- const examples = [
21
- { title: 'Typography', component: Typography },
22
- { title: 'Navigation Bars', component: NavigationBars },
23
- { title: 'Dropdown Menus', component: DropDownMenus },
24
- { title: 'Dividers', component: Dividers },
25
- { title: 'Cards', component: Cards },
26
- { title: 'Rows', component: Rows },
27
- { title: 'Tiles', component: Tiles },
28
- { title: 'Headers', component: Headers },
29
- { title: 'Spinners', component: Spinners },
30
- { title: 'Buttons', component: Buttons },
31
- { title: 'Images', component: Images },
32
- { title: 'Video', component: Videos },
33
- { title: 'Form Components', component: FormComponents },
34
- ];
35
-
36
- export class Examples extends PureComponent {
37
- constructor() {
38
- super();
39
-
40
- this.state = {
41
- selectedExample: examples[0],
42
- };
43
- }
44
-
45
- render() {
46
- const { selectedExample } = this.state;
47
-
48
- const SelectedComponent = selectedExample.component;
49
-
50
- return (
51
- <Screen>
52
- <Divider />
53
- <DropDownMenu
54
- styleName="horizontal"
55
- options={examples}
56
- selectedOption={this.state.selectedExample}
57
- onOptionSelected={example =>
58
- this.setState({ selectedExample: example })
59
- }
60
- titleProperty="title"
61
- valueProperty="component"
62
- />
63
-
64
- <ScrollView key={selectedExample.title}>
65
- <SelectedComponent />
66
- </ScrollView>
67
- </Screen>
68
- );
69
- }
70
- }
package/examples/components/FormComponents.js DELETED
@@ -1,48 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { FormGroup } from '../../components/FormGroup';
3
- import { Switch } from '../../components/Switch';
4
- import { Caption } from '../../components/Text';
5
- import { TextInput } from '../../components/TextInput';
6
- import { View } from '../../components/View';
7
- import { Stage } from './Stage';
8
-
9
- export class FormComponents extends PureComponent {
10
- constructor() {
11
- super();
12
-
13
- this.state = {
14
- switchOn: false,
15
- };
16
- }
17
-
18
- render() {
19
- const { switchOn } = this.state;
20
-
21
- return (
22
- <View styleName="vertical collapsed">
23
- <Stage title="TextInput / Full width">
24
- <TextInput styleName="stretch" placeholder="Username or Email" />
25
- </Stage>
26
- <Stage title="TextInput / Full width secure entry">
27
- <TextInput
28
- styleName="stretch"
29
- placeholder="Password"
30
- secureTextEntry
31
- />
32
- </Stage>
33
- <Stage title="Input with label">
34
- <FormGroup styleName="stretch">
35
- <Caption>NAME</Caption>
36
- <TextInput placeholder="Username or Email" />
37
- </FormGroup>
38
- </Stage>
39
- <Stage title="Switch">
40
- <Switch
41
- onValueChange={value => this.setState({ switchOn: value })}
42
- value={switchOn}
43
- />
44
- </Stage>
45
- </View>
46
- );
47
- }
48
- }
package/examples/components/Headers.js DELETED
@@ -1,62 +0,0 @@
1
- import React from 'react';
2
- import { Button } from '../../components/Button';
3
- import { Icon } from '../../components/Icon';
4
- import { Overlay } from '../../components/Overlay';
5
- import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
6
- import { Tile } from '../../components/Tile';
7
- import { View } from '../../components/View';
8
- import { Stage } from './Stage';
9
-
10
- export function Headers() {
11
- return (
12
- <View styleName="vertical collapsed">
13
- <Stage title="Header / Article">
14
- <Tile styleName="text-centric">
15
- <Title styleName="sm-gutter-bottom">
16
- MIKE PATTON TEAMING WITH JOHN KAADA FOR COLLAB ALBUM BACTERIA CULT
17
- </Title>
18
- <Caption>Sophia Jackson 21 hours ago</Caption>
19
- </Tile>
20
- </Stage>
21
-
22
- <Stage title="Header / Shop item">
23
- <Tile styleName="text-centric">
24
- <Overlay styleName="image-overlay">
25
- <Heading>-20%</Heading>
26
- </Overlay>
27
- <Title styleName="md-gutter-top">
28
- COOL BLACK AND WHITE STYLISH WATCHES
29
- </Title>
30
- <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
31
- <Heading>$250.00</Heading>
32
- <Button styleName="secondary md-gutter-top">
33
- <Icon name="cart" />
34
- <Text>ADD TO BASKET</Text>
35
- </Button>
36
- </Tile>
37
- </Stage>
38
-
39
- <Stage title="Header / Deals item">
40
- <Tile styleName="text-centric">
41
- <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
42
- <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
43
- <Heading>99.99</Heading>
44
- <Button styleName="secondary md-gutter-top">
45
- <Text>CLAIM COUPON</Text>
46
- </Button>
47
- </Tile>
48
- </Stage>
49
-
50
- <Stage title="Header / Products item">
51
- <Tile styleName="text-centric">
52
- <Title styleName="md-gutter-bottom">
53
- SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
54
- </Title>
55
- <Overlay styleName="image-overlay">
56
- <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
57
- </Overlay>
58
- </Tile>
59
- </Stage>
60
- </View>
61
- );
62
- }
package/examples/components/HorizontalPagers.js DELETED
@@ -1,71 +0,0 @@
1
- import React from 'react';
2
- import { Dimensions } from 'react-native';
3
- import { HorizontalPager } from '../../components/HorizontalPager/HorizontalPager';
4
- import { View } from '../../components/View';
5
- import { ImageBackground } from '../../ImageBackground';
6
- import { Caption, Subtitle } from '../../Text';
7
- import { Tile } from '../../Tile';
8
- import { Stage } from './Stage';
9
-
10
- const window = Dimensions.get('window');
11
-
12
- export function HorizontalPagers() {
13
- return (
14
- <View styleName="vertical collapsible">
15
- <Stage title="Horizontal Pager (with tiles as content)">
16
- <View style={{ height: 250, width: window.width }}>
17
- <HorizontalPager
18
- data={[
19
- {
20
- description: 'description',
21
- title: 'When The Morning Dawns - DJ Silver Sample Album',
22
- source: {
23
- uri:
24
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
25
- },
26
- },
27
- {
28
- description: 'description',
29
- title: 'When The Morning Dawns',
30
- source: {
31
- uri:
32
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
33
- },
34
- },
35
- {
36
- description: 'description',
37
- title: 'DJ Silver Sample Album',
38
- source: {
39
- uri:
40
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
41
- },
42
- },
43
- {
44
- description: 'description',
45
- title: 'When The Morning Dawns - DJ Silver Sample Album',
46
- source: {
47
- uri:
48
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
49
- },
50
- },
51
- ]}
52
- renderPage={page => {
53
- return (
54
- <ImageBackground
55
- styleName="large-wide"
56
- source={{ uri: page.source.uri }}
57
- >
58
- <Tile>
59
- <Subtitle numberOfLines={2}>{page.title}</Subtitle>
60
- <Caption>{page.description}</Caption>
61
- </Tile>
62
- </ImageBackground>
63
- );
64
- }}
65
- pageMargin={20}
66
- />
67
- </View>
68
- </Stage>
69
- </View>
70
- );
71
- }
package/examples/components/ImageGalleries.js DELETED
@@ -1,55 +0,0 @@
1
- import React from 'react';
2
- import { Dimensions } from 'react-native';
3
- import { ImageGallery } from '../../components/ImageGallery';
4
- import { View } from '../../components/View';
5
- import { Stage } from './Stage';
6
-
7
- const window = Dimensions.get('window');
8
-
9
- export function ImageGalleries() {
10
- return (
11
- <View styleName="vertical collapsible">
12
- <Stage title="Image Gallery">
13
- <View style={{ height: 500, width: window.width }}>
14
- <ImageGallery
15
- data={[
16
- {
17
- description: 'description',
18
- title: 'title',
19
- source: {
20
- uri:
21
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
22
- },
23
- },
24
- {
25
- description: 'description',
26
- title: 'title',
27
- source: {
28
- uri:
29
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
30
- },
31
- },
32
- {
33
- description: 'description',
34
- title: 'title',
35
- source: {
36
- uri:
37
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
38
- },
39
- },
40
- {
41
- description: 'description',
42
- title: 'title',
43
- source: {
44
- uri:
45
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
46
- },
47
- },
48
- ]}
49
- pageMargin={20}
50
- />
51
- </View>
52
- </Stage>
53
- </View>
54
- );
55
- }
package/examples/components/Images.js DELETED
@@ -1,140 +0,0 @@
1
- import React from 'react';
2
- import { Image } from '../../components/Image';
3
- import { View } from '../../components/View';
4
- import { Stage } from './Stage';
5
-
6
- export function Images() {
7
- return (
8
- <View styleName="vertical collapsed">
9
- <Stage title={'List image thumbnail (65x65)\n(small)'}>
10
- <Image
11
- styleName="small"
12
- source={{
13
- uri:
14
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
15
- }}
16
- />
17
- </Stage>
18
-
19
- <Stage title={'List video thumbnail (145x92)\n(medium)'}>
20
- <Image
21
- styleName="medium"
22
- source={{
23
- uri:
24
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
25
- }}
26
- />
27
- </Stage>
28
-
29
- <Stage title={'Card image thumbnail (180x85)\n(medium-wide)'}>
30
- <Image
31
- styleName="medium-wide"
32
- source={{
33
- uri:
34
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
35
- }}
36
- />
37
- </Stage>
38
-
39
- <Stage title={'Avatar thumbnail (25x25)\n(small-avatar)'}>
40
- <Image
41
- styleName="small-avatar"
42
- source={{
43
- uri:
44
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
45
- }}
46
- />
47
- </Stage>
48
-
49
- <Stage title={'Avatar image (145x145)\n(medium-avatar)'}>
50
- <Image
51
- styleName="medium-avatar"
52
- source={{
53
- uri:
54
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
55
- }}
56
- />
57
- </Stage>
58
-
59
- <Stage title={'List medium image (145x145)\n(medium-square)'}>
60
- <Image
61
- styleName="medium-square"
62
- source={{
63
- uri:
64
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
65
- }}
66
- />
67
- </Stage>
68
-
69
- <Stage title={'Up next article image (375x130)\n(large-ultra-wide)'}>
70
- <Image
71
- styleName="large-ultra-wide"
72
- source={{
73
- uri:
74
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
75
- }}
76
- />
77
- </Stage>
78
-
79
- <Stage title={'List large thumbnail (375x200)\n(large-banner)'}>
80
- <Image
81
- styleName="large-banner"
82
- source={{
83
- uri:
84
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
85
- }}
86
- />
87
- </Stage>
88
-
89
- <Stage title={'Featured image (365x345)\n(featured)'}>
90
- <Image
91
- styleName="featured"
92
- source={{
93
- uri:
94
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
95
- }}
96
- />
97
- </Stage>
98
-
99
- <Stage title={'Detail large photo (375x518)\n(large-portrait)'}>
100
- <Image
101
- styleName="large-portrait"
102
- source={{
103
- uri:
104
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
105
- }}
106
- />
107
- </Stage>
108
-
109
- <Stage title={'Detail medium photo (375x280)\n(large)'}>
110
- <Image
111
- styleName="large"
112
- source={{
113
- uri:
114
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
115
- }}
116
- />
117
- </Stage>
118
-
119
- <Stage title={'Detail wide photo (375x238)\n(large-wide)'}>
120
- <Image
121
- styleName="large-wide"
122
- source={{
123
- uri:
124
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
125
- }}
126
- />
127
- </Stage>
128
-
129
- <Stage title={'Detail square photo (375x375)\n(large-square)'}>
130
- <Image
131
- styleName="large-square"
132
- source={{
133
- uri:
134
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
135
- }}
136
- />
137
- </Stage>
138
- </View>
139
- );
140
- }
package/examples/components/InlineGalleries.js DELETED
@@ -1,117 +0,0 @@
1
- import React from 'react';
2
- import { Dimensions } from 'react-native';
3
- import { InlineGallery } from '../../components/InlineGallery';
4
- import { View } from '../../components/View';
5
- import { Stage } from './Stage';
6
-
7
- const window = Dimensions.get('window');
8
-
9
- export function InlineGalleries() {
10
- return (
11
- <View styleName="vertical collapsible">
12
- <Stage title="Inline Gallery (regular size)">
13
- <View style={{ flex: 1, width: window.width }}>
14
- <InlineGallery
15
- data={[
16
- {
17
- source: {
18
- uri:
19
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
20
- },
21
- },
22
- {
23
- source: {
24
- uri:
25
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
26
- },
27
- },
28
- {
29
- source: {
30
- uri:
31
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
32
- },
33
- },
34
- {
35
- source: {
36
- uri:
37
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
38
- },
39
- },
40
- ]}
41
- pageMargin={20}
42
- />
43
- </View>
44
- </Stage>
45
-
46
- <Stage title="Inline Gallery (large-wide size)">
47
- <View style={{ flex: 1, width: window.width }}>
48
- <InlineGallery
49
- data={[
50
- {
51
- source: {
52
- uri:
53
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
54
- },
55
- },
56
- {
57
- source: {
58
- uri:
59
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
60
- },
61
- },
62
- {
63
- source: {
64
- uri:
65
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
66
- },
67
- },
68
- {
69
- source: {
70
- uri:
71
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
72
- },
73
- },
74
- ]}
75
- pageMargin={20}
76
- styleName="large-wide"
77
- />
78
- </View>
79
- </Stage>
80
-
81
- <Stage title="Inline Gallery (large-ultra-wide size)">
82
- <View style={{ flex: 1, width: window.width }}>
83
- <InlineGallery
84
- data={[
85
- {
86
- source: {
87
- uri:
88
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
89
- },
90
- },
91
- {
92
- source: {
93
- uri:
94
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
95
- },
96
- },
97
- {
98
- source: {
99
- uri:
100
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
101
- },
102
- },
103
- {
104
- source: {
105
- uri:
106
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
107
- },
108
- },
109
- ]}
110
- pageMargin={20}
111
- styleName="large-ultra-wide"
112
- />
113
- </View>
114
- </Stage>
115
- </View>
116
- );
117
- }