@shoutem/ui 5.4.0 → 5.5.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 (25) 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/index.js +0 -4
  6. package/package.json +2 -3
  7. package/examples/components/Buttons.js +0 -95
  8. package/examples/components/Cards.js +0 -79
  9. package/examples/components/Dividers.js +0 -36
  10. package/examples/components/DropDownMenus.js +0 -93
  11. package/examples/components/Examples.js +0 -70
  12. package/examples/components/FormComponents.js +0 -48
  13. package/examples/components/Headers.js +0 -62
  14. package/examples/components/HorizontalPagers.js +0 -71
  15. package/examples/components/ImageGalleries.js +0 -55
  16. package/examples/components/Images.js +0 -140
  17. package/examples/components/InlineGalleries.js +0 -117
  18. package/examples/components/NavigationBars.js +0 -309
  19. package/examples/components/Rows.js +0 -200
  20. package/examples/components/Spinners.js +0 -14
  21. package/examples/components/Stage.js +0 -46
  22. package/examples/components/Tiles.js +0 -324
  23. package/examples/components/Typography.js +0 -30
  24. package/examples/components/Videos.js +0 -35
  25. package/examples/components/index.js +0 -1
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
- }
package/examples/components/NavigationBars.js DELETED
@@ -1,309 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import { Dimensions } from 'react-native';
3
- import PropTypes from 'prop-types';
4
- import { Button } from '../../components/Button';
5
- import { DropDownMenu } from '../../components/DropDownMenu';
6
- import { Icon } from '../../components/Icon';
7
- import { ImageBackground } from '../../components/ImageBackground';
8
- import { NavigationBar } from '../../components/NavigationBar';
9
- import { Heading, Text, Title } from '../../components/Text';
10
- import { View } from '../../components/View';
11
- import {
12
- IPHONE_X_NOTCH_PADDING,
13
- IPHONE_XR_NOTCH_PADDING,
14
- NAVIGATION_HEADER_HEIGHT,
15
- } from '../../const';
16
- import { Device } from '../../helpers/device-selector';
17
- import { Stage } from './Stage';
18
-
19
- const window = Dimensions.get('window');
20
-
21
- function NavBarStageContainer(props) {
22
- return (
23
- <View
24
- {...props}
25
- style={{
26
- width: window.width,
27
- height: Device.select({
28
- iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
29
- iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
30
- default: NAVIGATION_HEADER_HEIGHT,
31
- }),
32
- ...props.style,
33
- }}
34
- />
35
- );
36
- }
37
-
38
- NavBarStageContainer.propTypes = {
39
- style: PropTypes.object,
40
- };
41
-
42
- NavBarStageContainer.defaultProps = {
43
- style: {},
44
- };
45
-
46
- export class NavigationBars extends PureComponent {
47
- render() {
48
- const navBarDropDownOptions = [
49
- { name: 'All', value: 1 },
50
- { name: 'Sport', value: 1 },
51
- { name: 'World', value: 1 },
52
- { name: 'Lifestyle', value: 1 },
53
- { name: 'Food', value: 1 },
54
- { name: 'Music', value: 1 },
55
- { name: 'Movies', value: 1 },
56
- { name: 'Tech', value: 1 },
57
- { name: 'Fun', value: 1 },
58
- { name: 'Fashion', value: 1 },
59
- ];
60
- const navBarDropDownSelectedOption = navBarDropDownOptions[0];
61
-
62
- return (
63
- <View styleName="vertical collapsed">
64
- <Stage title="Navbar / Solid">
65
- <NavBarStageContainer>
66
- <NavigationBar title="TITLE" style={{ backgroundColor: 'red' }} />
67
- </NavBarStageContainer>
68
- </Stage>
69
- <Stage title="Navbar / Clear (Solid color)">
70
- <View style={{ backgroundColor: '#1a70d5' }}>
71
- <NavBarStageContainer>
72
- <NavigationBar
73
- styleName="clear"
74
- title="TITLE"
75
- style={{ backgroundColor: 'red' }}
76
- />
77
- </NavBarStageContainer>
78
- </View>
79
- </Stage>
80
- <Stage title="Navbar / Clear (Image)">
81
- <ImageBackground
82
- source={{
83
- uri:
84
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
85
- }}
86
- style={{
87
- width: window.width,
88
- height: Device.select({
89
- iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
90
- iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
91
- default: NAVIGATION_HEADER_HEIGHT,
92
- }),
93
- }}
94
- >
95
- <NavigationBar
96
- styleName="clear"
97
- centerComponent={<Title>TITLE</Title>}
98
- />
99
- </ImageBackground>
100
- </Stage>
101
- <Heading styleName="sm-gutter">Navigation bar variations</Heading>
102
- <Stage title="Navbar + Drawer">
103
- <NavBarStageContainer>
104
- <NavigationBar
105
- leftComponent={
106
- <Button>
107
- <Icon name="close" />
108
- </Button>
109
- }
110
- centerComponent={<Title>TITLE</Title>}
111
- />
112
- </NavBarStageContainer>
113
- </Stage>
114
- <Stage title="Navbar + Picker">
115
- <NavBarStageContainer>
116
- <NavigationBar
117
- leftComponent={
118
- <Button>
119
- <Icon name="sidebar" />
120
- </Button>
121
- }
122
- centerComponent={<Title>TITLE</Title>}
123
- rightComponent={
124
- <DropDownMenu
125
- options={navBarDropDownOptions}
126
- selectedOption={navBarDropDownSelectedOption}
127
- titleProperty="name"
128
- valueProperty="value"
129
- />
130
- }
131
- />
132
- </NavBarStageContainer>
133
- </Stage>
134
- <Stage title="Navbar + Action">
135
- <NavBarStageContainer>
136
- <NavigationBar
137
- leftComponent={
138
- <Button>
139
- <Icon name="sidebar" />
140
- </Button>
141
- }
142
- centerComponent={<Title>TITLE</Title>}
143
- rightComponent={
144
- <Button styleName="clear">
145
- <Text>List</Text>
146
- </Button>
147
- }
148
- />
149
- </NavBarStageContainer>
150
- </Stage>
151
- <Stage title="Navbar + Icon">
152
- <NavBarStageContainer>
153
- <NavigationBar
154
- leftComponent={
155
- <Button>
156
- <Icon name="sidebar" />
157
- </Button>
158
- }
159
- centerComponent={<Title>TITLE</Title>}
160
- rightComponent={
161
- <Button>
162
- <Icon name="cart" />
163
- </Button>
164
- }
165
- />
166
- </NavBarStageContainer>
167
- </Stage>
168
- <Stage title="Navbar (Sublevel) + Icon">
169
- <NavBarStageContainer>
170
- <NavigationBar
171
- leftComponent={
172
- <Button>
173
- <Icon name="back" />
174
- </Button>
175
- }
176
- title="TITLE"
177
- share={{
178
- link: 'http://shoutem.github.io',
179
- text: 'This is the best',
180
- title: 'Super cool UI Toolkit',
181
- }}
182
- />
183
- </NavBarStageContainer>
184
- </Stage>
185
- <Stage title="Navbar (Sublevel) + Action (no border)">
186
- <NavBarStageContainer>
187
- <NavigationBar
188
- styleName="no-border"
189
- leftComponent={
190
- <Button>
191
- <Icon name="back" />
192
- </Button>
193
- }
194
- title="TITLE"
195
- share={{
196
- link: 'http://shoutem.github.io',
197
- text: 'This is the best',
198
- title: 'Super cool UI Toolkit',
199
- }}
200
- />
201
- </NavBarStageContainer>
202
- </Stage>
203
- <Stage title="Navbar (Sublevel) + Action">
204
- <NavBarStageContainer>
205
- <NavigationBar
206
- leftComponent={
207
- <Button>
208
- <Icon name="back" />
209
- </Button>
210
- }
211
- title="TITLE"
212
- rightComponent={
213
- <Button styleName="clear">
214
- <Text>Report</Text>
215
- </Button>
216
- }
217
- />
218
- </NavBarStageContainer>
219
- </Stage>
220
- <Stage title="Navbar (Modal) + Icon">
221
- <NavBarStageContainer>
222
- <NavigationBar
223
- leftComponent={
224
- <Button>
225
- <Icon name="close" />
226
- </Button>
227
- }
228
- title="TITLE"
229
- share={{
230
- link: 'http://shoutem.github.io',
231
- text: 'This is the best',
232
- title: 'Super cool UI Toolkit',
233
- }}
234
- />
235
- </NavBarStageContainer>
236
- </Stage>
237
- <Stage title="Navbar (Modal) + Action">
238
- <NavBarStageContainer>
239
- <NavigationBar
240
- leftComponent={
241
- <Button>
242
- <Icon name="close" />
243
- </Button>
244
- }
245
- title="TITLE"
246
- rightComponent={
247
- <Button styleName="clear">
248
- <Text>Post</Text>
249
- </Button>
250
- }
251
- />
252
- </NavBarStageContainer>
253
- </Stage>
254
- <Stage title="Navbar (Modal) + Action 2">
255
- <NavBarStageContainer>
256
- <NavigationBar
257
- leftComponent={
258
- <Button>
259
- <Text>Cancel</Text>
260
- </Button>
261
- }
262
- title="TITLE"
263
- rightComponent={
264
- <Button>
265
- <Text>Done</Text>
266
- </Button>
267
- }
268
- />
269
- </NavBarStageContainer>
270
- </Stage>
271
- <Stage title="Navbar (Modal) + Action 2 (disabled)">
272
- <NavBarStageContainer>
273
- <NavigationBar
274
- leftComponent={
275
- <Button>
276
- <Text>Cancel</Text>
277
- </Button>
278
- }
279
- title="TITLE"
280
- rightComponent={
281
- <Button styleName="muted">
282
- <Text>Done</Text>
283
- </Button>
284
- }
285
- />
286
- </NavBarStageContainer>
287
- </Stage>
288
- <Stage title="Navbar / On primary color / back + share">
289
- <NavBarStageContainer style={{ backgroundColor: '#1a70d5' }}>
290
- <NavigationBar
291
- styleName="clear"
292
- leftComponent={
293
- <Button>
294
- <Icon name="back" />
295
- </Button>
296
- }
297
- title="TITLE"
298
- share={{
299
- link: 'http://shoutem.github.io',
300
- text: 'This is the best',
301
- title: 'Super cool UI Toolkit',
302
- }}
303
- />
304
- </NavBarStageContainer>
305
- </Stage>
306
- </View>
307
- );
308
- }
309
- }