@shoutem/ui 5.3.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 (32) hide show
  1. package/README.md +0 -78
  2. package/components/DropDownMenu/DropDownMenu.js +1 -1
  3. package/components/EmptyListImage.js +0 -1
  4. package/components/GridRow.js +2 -2
  5. package/components/Image.js +2 -1
  6. package/components/NumberInput.js +4 -4
  7. package/components/ShareButton.js +6 -2
  8. package/components/Text.js +2 -1
  9. package/components/TextInput.js +2 -1
  10. package/components/View.js +2 -1
  11. package/index.js +2 -4
  12. package/package.json +8 -6
  13. package/theme.js +46 -32
  14. package/examples/components/Buttons.js +0 -95
  15. package/examples/components/Cards.js +0 -79
  16. package/examples/components/Dividers.js +0 -36
  17. package/examples/components/DropDownMenus.js +0 -93
  18. package/examples/components/Examples.js +0 -70
  19. package/examples/components/FormComponents.js +0 -48
  20. package/examples/components/Headers.js +0 -62
  21. package/examples/components/HorizontalPagers.js +0 -71
  22. package/examples/components/ImageGalleries.js +0 -55
  23. package/examples/components/Images.js +0 -140
  24. package/examples/components/InlineGalleries.js +0 -117
  25. package/examples/components/NavigationBars.js +0 -309
  26. package/examples/components/Rows.js +0 -200
  27. package/examples/components/Spinners.js +0 -14
  28. package/examples/components/Stage.js +0 -46
  29. package/examples/components/Tiles.js +0 -324
  30. package/examples/components/Typography.js +0 -30
  31. package/examples/components/Videos.js +0 -35
  32. package/examples/components/index.js +0 -1
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
- }
package/examples/components/Rows.js DELETED
@@ -1,200 +0,0 @@
1
- import React from 'react';
2
- import { Button } from '../../components/Button';
3
- import { Icon } from '../../components/Icon';
4
- import { Image } from '../../components/Image';
5
- import { Row } from '../../components/Row';
6
- import { Caption, Subtitle, Text } from '../../components/Text';
7
- import { View } from '../../components/View';
8
- import { Stage } from './Stage';
9
-
10
- export function Rows() {
11
- return (
12
- <View styleName="vertical collapsed">
13
- <Stage title="Small list item">
14
- <Row>
15
- <Text numberOfLines={1}>
16
- Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub
17
- roof party.
18
- </Text>
19
- </Row>
20
- </Stage>
21
-
22
- <Stage title="Small list item + Avatar thumbnail">
23
- <Row styleName="small">
24
- <Image
25
- styleName="small-avatar"
26
- source={{
27
- uri:
28
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
29
- }}
30
- />
31
- <Text>Add comment</Text>
32
- </Row>
33
- </Stage>
34
-
35
- <Stage title="Small list item + Icon">
36
- <Row styleName="small">
37
- <Icon name="add-to-favorites-off" />
38
- <Text>Add to favorites</Text>
39
- </Row>
40
- </Stage>
41
-
42
- <Stage title="Small list item + Icon + Right Arrow">
43
- <Row styleName="small">
44
- <Icon name="web" />
45
- <Text>About</Text>
46
- <Icon styleName="disclosure" name="right-arrow" />
47
- </Row>
48
- </Stage>
49
-
50
- <Stage title="Small list item + Icon + Description">
51
- <Row styleName="small">
52
- <Icon name="laptop" />
53
- <View styleName="vertical">
54
- <Subtitle>Bridges Rock Gym</Subtitle>
55
- <Text numberOfLines={1}>
56
- www.example.com/deal/link/that-is-really-long
57
- </Text>
58
- </View>
59
- <Icon styleName="disclosure" name="right-arrow" />
60
- </Row>
61
- </Stage>
62
-
63
- <Stage title="Small list item + Avatar + Description + Caption">
64
- <Row>
65
- <Image
66
- styleName="small-avatar top"
67
- source={{
68
- uri:
69
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
70
- }}
71
- />
72
- <View styleName="vertical">
73
- <View styleName="horizontal space-between">
74
- <Subtitle styleName="">Dustin Malone</Subtitle>
75
- <Caption>20 minutes ago</Caption>
76
- </View>
77
- <Text styleName="multiline">
78
- Banjo tote bag bicycle rights, High Life sartorial cray craft beer
79
- whatever street art fap. Hashtag typewriter banh mi, squid
80
- keffiyeh High.
81
- </Text>
82
- </View>
83
- </Row>
84
- </Stage>
85
-
86
- <Stage title="Medium list item">
87
- <Row>
88
- <Image
89
- styleName="small rounded-corners"
90
- source={{
91
- uri:
92
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png',
93
- }}
94
- />
95
- <Subtitle styleName="top">
96
- Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub
97
- roof party.
98
- </Subtitle>
99
- </Row>
100
- </Stage>
101
-
102
- <Stage title="Medium list item + Description">
103
- <Row>
104
- <Image
105
- styleName="small rounded-corners"
106
- source={{
107
- uri:
108
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-6.png',
109
- }}
110
- />
111
- <View styleName="vertical stretch space-between">
112
- <Subtitle>
113
- Fact Check: Wisconsin Music, Film & Photography Debate
114
- </Subtitle>
115
- <Caption>20 hours ago</Caption>
116
- </View>
117
- </Row>
118
- </Stage>
119
-
120
- <Stage title="Medium list item + Description + Icon">
121
- <Row>
122
- <Image
123
- styleName="small rounded-corners"
124
- source={{
125
- uri:
126
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
127
- }}
128
- />
129
- <View styleName="vertical stretch space-between">
130
- <Subtitle>Wilco Cover David Bowie&#39;s "Space Oddity"</Subtitle>
131
- <Caption>June 21 · 20:00</Caption>
132
- </View>
133
- <Button styleName="right-icon">
134
- <Icon name="add-event" />
135
- </Button>
136
- </Row>
137
- </Stage>
138
-
139
- <Stage title="Medium list item + Description + Icon + Label">
140
- <Row>
141
- <Image
142
- styleName="small rounded-corners"
143
- source={{
144
- uri:
145
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
146
- }}
147
- />
148
- <View styleName="vertical stretch space-between">
149
- <Subtitle>Family Safari Vacation To The Home Of The Gods</Subtitle>
150
- <View styleName="horizontal">
151
- <Subtitle styleName="md-gutter-right">$120.00</Subtitle>
152
- <Caption styleName="line-through">$150.00</Caption>
153
- </View>
154
- </View>
155
- <Button styleName="right-icon">
156
- <Icon name="add-to-cart" />
157
- </Button>
158
- </Row>
159
- </Stage>
160
-
161
- <Stage title="Medium list item + Notification dot">
162
- <Row>
163
- <View styleName="notification-dot" />
164
- <Image
165
- styleName="small rounded-corners"
166
- source={{
167
- uri:
168
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
169
- }}
170
- />
171
- <View styleName="vertical stretch space-between">
172
- <Subtitle>
173
- Fact Check: Wisconsin Music, Film & Photography Debate
174
- </Subtitle>
175
- <Caption>20 hours ago</Caption>
176
- </View>
177
- </Row>
178
- </Stage>
179
-
180
- <Stage title="Medium list item + Description + Label">
181
- <Row>
182
- <Image
183
- styleName="medium rounded-corners"
184
- source={{
185
- uri:
186
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
187
- }}
188
- />
189
- <View styleName="vertical stretch space-between">
190
- <Subtitle>Take A Romantic Break In A Boutique Hotel</Subtitle>
191
- <View styleName="horizontal space-between">
192
- <Caption>3 days ago</Caption>
193
- <Caption>12:16</Caption>
194
- </View>
195
- </View>
196
- </Row>
197
- </Stage>
198
- </View>
199
- );
200
- }
package/examples/components/Spinners.js DELETED
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { Spinner } from '../../components/Spinner';
3
- import { View } from '../../components/View';
4
- import { Stage } from './Stage';
5
-
6
- export function Spinners() {
7
- return (
8
- <View styleName="vertical collapsed">
9
- <Stage title="Spinner">
10
- <Spinner />
11
- </Stage>
12
- </View>
13
- );
14
- }
package/examples/components/Stage.js DELETED
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
- import { Text, View } from 'react-native';
3
- import PropTypes from 'prop-types';
4
-
5
- function Stage({ title, children }) {
6
- // eslint-disable-next-line no-use-before-define
7
- const { container, stage, titleStyle } = styles;
8
-
9
- return (
10
- <View style={container}>
11
- <Text style={titleStyle}>{title}</Text>
12
- <View style={stage}>{children}</View>
13
- </View>
14
- );
15
- }
16
-
17
- Stage.propTypes = {
18
- children: PropTypes.node,
19
- title: PropTypes.string,
20
- };
21
-
22
- Stage.defaultProps = {
23
- children: undefined,
24
- title: undefined,
25
- };
26
-
27
- const styles = {
28
- container: {
29
- marginVertical: 24,
30
- flexDirection: 'column',
31
- },
32
- titleStyle: {
33
- fontSize: 18,
34
- color: '#444f6c',
35
- margin: 8,
36
- },
37
- stage: {
38
- paddingVertical: 40,
39
- flexDirection: 'column',
40
- alignItems: 'center',
41
- justifyContent: 'center',
42
- backgroundColor: '#f5f6f7',
43
- },
44
- };
45
-
46
- export { Stage };