@fluentui-react-native/tester 0.99.7 → 0.99.9
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.
- package/CHANGELOG.json +83 -29
- package/CHANGELOG.md +22 -2
- package/lib/TestComponents/Badge/BasicBadgeTest.d.ts.map +1 -1
- package/lib/TestComponents/Badge/BasicBadgeTest.js +31 -18
- package/lib/TestComponents/Badge/BasicBadgeTest.js.map +1 -1
- package/lib/TestComponents/Badge/CounterBadgeTest.d.ts.map +1 -1
- package/lib/TestComponents/Badge/CounterBadgeTest.js +0 -1
- package/lib/TestComponents/Badge/CounterBadgeTest.js.map +1 -1
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js +30 -17
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js.map +1 -1
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js +0 -1
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js.map +1 -1
- package/package.json +4 -4
- package/src/TestComponents/Badge/BasicBadgeTest.tsx +39 -22
- package/src/TestComponents/Badge/CounterBadgeTest.tsx +1 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 06 Oct 2022 14:00:55 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/tester_v0.99.9",
|
|
7
|
+
"version": "0.99.9",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"comment": "Bump @fluentui-react-native/avatar to v1.2.16",
|
|
14
|
+
"commit": "051d8db9ebfb4ea18f4cec3a7839cba20762a547"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/tester",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/badge to v0.1.39",
|
|
20
|
+
"commit": "051d8db9ebfb4ea18f4cec3a7839cba20762a547"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/tester",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/dropdown to v0.4.6",
|
|
26
|
+
"commit": "051d8db9ebfb4ea18f4cec3a7839cba20762a547"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Wed, 05 Oct 2022 14:33:50 GMT",
|
|
33
|
+
"tag": "@fluentui-react-native/tester_v0.99.8",
|
|
34
|
+
"version": "0.99.8",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "vkozlova@microsoft.com",
|
|
39
|
+
"package": "@fluentui-react-native/tester",
|
|
40
|
+
"commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c",
|
|
41
|
+
"comment": "Added Shadow to CounterBadge"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui-react-native/tester",
|
|
46
|
+
"comment": "Bump @fluentui-react-native/avatar to v1.2.15",
|
|
47
|
+
"commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui-react-native/tester",
|
|
52
|
+
"comment": "Bump @fluentui-react-native/badge to v0.1.38",
|
|
53
|
+
"commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Tue, 04 Oct 2022 21:09:28 GMT",
|
|
6
60
|
"tag": "@fluentui-react-native/tester_v0.99.7",
|
|
7
61
|
"version": "0.99.7",
|
|
8
62
|
"comments": {
|
|
@@ -11,169 +65,169 @@
|
|
|
11
65
|
"author": "beachball",
|
|
12
66
|
"package": "@fluentui-react-native/tester",
|
|
13
67
|
"comment": "Bump @fluentui-react-native/android-theme to v0.12.5",
|
|
14
|
-
"commit": "
|
|
68
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
15
69
|
},
|
|
16
70
|
{
|
|
17
71
|
"author": "beachball",
|
|
18
72
|
"package": "@fluentui-react-native/tester",
|
|
19
73
|
"comment": "Bump @fluentui-react-native/apple-theme to v0.15.3",
|
|
20
|
-
"commit": "
|
|
74
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
21
75
|
},
|
|
22
76
|
{
|
|
23
77
|
"author": "beachball",
|
|
24
78
|
"package": "@fluentui-react-native/tester",
|
|
25
79
|
"comment": "Bump @fluentui-react-native/avatar to v1.2.14",
|
|
26
|
-
"commit": "
|
|
80
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
27
81
|
},
|
|
28
82
|
{
|
|
29
83
|
"author": "beachball",
|
|
30
84
|
"package": "@fluentui-react-native/tester",
|
|
31
85
|
"comment": "Bump @fluentui-react-native/badge to v0.1.37",
|
|
32
|
-
"commit": "
|
|
86
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
33
87
|
},
|
|
34
88
|
{
|
|
35
89
|
"author": "beachball",
|
|
36
90
|
"package": "@fluentui-react-native/tester",
|
|
37
91
|
"comment": "Bump @fluentui-react-native/button to v0.25.5",
|
|
38
|
-
"commit": "
|
|
92
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
39
93
|
},
|
|
40
94
|
{
|
|
41
95
|
"author": "beachball",
|
|
42
96
|
"package": "@fluentui-react-native/tester",
|
|
43
97
|
"comment": "Bump @fluentui-react-native/default-theme to v0.16.1",
|
|
44
|
-
"commit": "
|
|
98
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
45
99
|
},
|
|
46
100
|
{
|
|
47
101
|
"author": "beachball",
|
|
48
102
|
"package": "@fluentui-react-native/tester",
|
|
49
103
|
"comment": "Bump @fluentui-react-native/dropdown to v0.4.5",
|
|
50
|
-
"commit": "
|
|
104
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
51
105
|
},
|
|
52
106
|
{
|
|
53
107
|
"author": "beachball",
|
|
54
108
|
"package": "@fluentui-react-native/tester",
|
|
55
109
|
"comment": "Bump @fluentui-react-native/experimental-activity-indicator to v0.6.7",
|
|
56
|
-
"commit": "
|
|
110
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
57
111
|
},
|
|
58
112
|
{
|
|
59
113
|
"author": "beachball",
|
|
60
114
|
"package": "@fluentui-react-native/tester",
|
|
61
115
|
"comment": "Bump @fluentui-react-native/experimental-avatar to v0.16.10",
|
|
62
|
-
"commit": "
|
|
116
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
63
117
|
},
|
|
64
118
|
{
|
|
65
119
|
"author": "beachball",
|
|
66
120
|
"package": "@fluentui-react-native/tester",
|
|
67
121
|
"comment": "Bump @fluentui-react-native/experimental-button to v0.16.32",
|
|
68
|
-
"commit": "
|
|
122
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
69
123
|
},
|
|
70
124
|
{
|
|
71
125
|
"author": "beachball",
|
|
72
126
|
"package": "@fluentui-react-native/tester",
|
|
73
127
|
"comment": "Bump @fluentui-react-native/experimental-checkbox to v0.12.23",
|
|
74
|
-
"commit": "
|
|
128
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
75
129
|
},
|
|
76
130
|
{
|
|
77
131
|
"author": "beachball",
|
|
78
132
|
"package": "@fluentui-react-native/tester",
|
|
79
133
|
"comment": "Bump @fluentui-react-native/experimental-expander to v0.4.9",
|
|
80
|
-
"commit": "
|
|
134
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
81
135
|
},
|
|
82
136
|
{
|
|
83
137
|
"author": "beachball",
|
|
84
138
|
"package": "@fluentui-react-native/tester",
|
|
85
139
|
"comment": "Bump @fluentui-react-native/experimental-menu-button to v0.4.37",
|
|
86
|
-
"commit": "
|
|
140
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
87
141
|
},
|
|
88
142
|
{
|
|
89
143
|
"author": "beachball",
|
|
90
144
|
"package": "@fluentui-react-native/tester",
|
|
91
145
|
"comment": "Bump @fluentui-react-native/experimental-radio-group to v0.5.5",
|
|
92
|
-
"commit": "
|
|
146
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
93
147
|
},
|
|
94
148
|
{
|
|
95
149
|
"author": "beachball",
|
|
96
150
|
"package": "@fluentui-react-native/tester",
|
|
97
151
|
"comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.25",
|
|
98
|
-
"commit": "
|
|
152
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
99
153
|
},
|
|
100
154
|
{
|
|
101
155
|
"author": "beachball",
|
|
102
156
|
"package": "@fluentui-react-native/tester",
|
|
103
157
|
"comment": "Bump @fluentui-react-native/experimental-shimmer to v0.7.7",
|
|
104
|
-
"commit": "
|
|
158
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
105
159
|
},
|
|
106
160
|
{
|
|
107
161
|
"author": "beachball",
|
|
108
162
|
"package": "@fluentui-react-native/tester",
|
|
109
163
|
"comment": "Bump @fluentui-react-native/experimental-tabs to v0.5.21",
|
|
110
|
-
"commit": "
|
|
164
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
111
165
|
},
|
|
112
166
|
{
|
|
113
167
|
"author": "beachball",
|
|
114
168
|
"package": "@fluentui-react-native/tester",
|
|
115
169
|
"comment": "Bump @fluentui-react-native/experimental-text to v0.11.9",
|
|
116
|
-
"commit": "
|
|
170
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
117
171
|
},
|
|
118
172
|
{
|
|
119
173
|
"author": "beachball",
|
|
120
174
|
"package": "@fluentui-react-native/tester",
|
|
121
175
|
"comment": "Bump @fluentui-react-native/framework to v0.8.7",
|
|
122
|
-
"commit": "
|
|
176
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
123
177
|
},
|
|
124
178
|
{
|
|
125
179
|
"author": "beachball",
|
|
126
180
|
"package": "@fluentui-react-native/tester",
|
|
127
181
|
"comment": "Bump @fluentui-react-native/icon to v0.13.12",
|
|
128
|
-
"commit": "
|
|
182
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
129
183
|
},
|
|
130
184
|
{
|
|
131
185
|
"author": "beachball",
|
|
132
186
|
"package": "@fluentui-react-native/tester",
|
|
133
187
|
"comment": "Bump @fluentui-react-native/interactive-hooks to v0.18.10",
|
|
134
|
-
"commit": "
|
|
188
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
135
189
|
},
|
|
136
190
|
{
|
|
137
191
|
"author": "beachball",
|
|
138
192
|
"package": "@fluentui-react-native/tester",
|
|
139
193
|
"comment": "Bump @fluentui-react-native/menu to v1.0.43",
|
|
140
|
-
"commit": "
|
|
194
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
141
195
|
},
|
|
142
196
|
{
|
|
143
197
|
"author": "beachball",
|
|
144
198
|
"package": "@fluentui-react-native/tester",
|
|
145
199
|
"comment": "Bump @fluentui-react-native/notification to v0.17.15",
|
|
146
|
-
"commit": "
|
|
200
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
147
201
|
},
|
|
148
202
|
{
|
|
149
203
|
"author": "beachball",
|
|
150
204
|
"package": "@fluentui-react-native/tester",
|
|
151
205
|
"comment": "Bump @fluentui-react-native/stack to v0.7.11",
|
|
152
|
-
"commit": "
|
|
206
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
153
207
|
},
|
|
154
208
|
{
|
|
155
209
|
"author": "beachball",
|
|
156
210
|
"package": "@fluentui-react-native/tester",
|
|
157
211
|
"comment": "Bump @fluentui-react-native/switch to v0.6.12",
|
|
158
|
-
"commit": "
|
|
212
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
159
213
|
},
|
|
160
214
|
{
|
|
161
215
|
"author": "beachball",
|
|
162
216
|
"package": "@fluentui-react-native/tester",
|
|
163
217
|
"comment": "Bump @fluentui-react-native/text to v0.15.3",
|
|
164
|
-
"commit": "
|
|
218
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
165
219
|
},
|
|
166
220
|
{
|
|
167
221
|
"author": "beachball",
|
|
168
222
|
"package": "@fluentui-react-native/tester",
|
|
169
223
|
"comment": "Bump @fluentui-react-native/win32-theme to v0.21.5",
|
|
170
|
-
"commit": "
|
|
224
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
171
225
|
},
|
|
172
226
|
{
|
|
173
227
|
"author": "beachball",
|
|
174
228
|
"package": "@fluentui-react-native/tester",
|
|
175
229
|
"comment": "Bump @fluentui/react-native to v0.32.29",
|
|
176
|
-
"commit": "
|
|
230
|
+
"commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
|
|
177
231
|
}
|
|
178
232
|
]
|
|
179
233
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/tester
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Oct 2022 14:00:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.99.9
|
|
8
|
+
|
|
9
|
+
Thu, 06 Oct 2022 14:00:55 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/avatar to v1.2.16
|
|
14
|
+
- Bump @fluentui-react-native/badge to v0.1.39
|
|
15
|
+
- Bump @fluentui-react-native/dropdown to v0.4.6
|
|
16
|
+
|
|
17
|
+
## 0.99.8
|
|
18
|
+
|
|
19
|
+
Wed, 05 Oct 2022 14:33:50 GMT
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Added Shadow to CounterBadge (vkozlova@microsoft.com)
|
|
24
|
+
- Bump @fluentui-react-native/avatar to v1.2.15
|
|
25
|
+
- Bump @fluentui-react-native/badge to v0.1.38
|
|
26
|
+
|
|
7
27
|
## 0.99.7
|
|
8
28
|
|
|
9
|
-
Tue, 04 Oct 2022 21:
|
|
29
|
+
Tue, 04 Oct 2022 21:09:28 GMT
|
|
10
30
|
|
|
11
31
|
### Patches
|
|
12
32
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiC9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBA2G9B,CAAC"}
|
|
@@ -1,29 +1,21 @@
|
|
|
1
1
|
import { __assign, __spreadArray } from "tslib";
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
3
|
-
import React, { useState, useCallback } from 'react';
|
|
3
|
+
import React, { useState, useCallback, useMemo } from 'react';
|
|
4
4
|
import { View, Platform, Text, Image } from 'react-native';
|
|
5
5
|
import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes, } from '@fluentui-react-native/badge';
|
|
6
6
|
import { StyledPicker } from '../Common/StyledPicker';
|
|
7
7
|
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
8
8
|
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
9
9
|
import { ToggleButton } from '@fluentui/react-native';
|
|
10
|
+
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
10
11
|
var badgeColors = __spreadArray([], BadgeColors, true);
|
|
11
12
|
var badgeShapes = __spreadArray([], BadgeShapes, true);
|
|
12
13
|
var badgeSizes = __spreadArray([], BadgeSizes, true);
|
|
13
14
|
var badgeAppearances = __spreadArray([], BadgeAppearances, true);
|
|
14
15
|
var badgeIconPositions = ['before', 'after'];
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
fontFamily: 'Georgia',
|
|
19
|
-
backgroundColor: '#f09',
|
|
20
|
-
borderColor: 'purple',
|
|
21
|
-
color: 'yellow',
|
|
22
|
-
borderWidth: 4,
|
|
23
|
-
borderStyle: 'dashed',
|
|
24
|
-
borderRadius: 2,
|
|
25
|
-
iconColor: 'cyan',
|
|
26
|
-
});
|
|
16
|
+
var useCustomizedBadge = function (tokensAndprops) {
|
|
17
|
+
return useMemo(function () { return Badge.customize(__assign({}, tokensAndprops)); }, [tokensAndprops]);
|
|
18
|
+
};
|
|
27
19
|
export var BasicBadge = function () {
|
|
28
20
|
var _a = useState('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
29
21
|
var _b = useState('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
@@ -31,11 +23,15 @@ export var BasicBadge = function () {
|
|
|
31
23
|
var _d = useState('medium'), size = _d[0], setSize = _d[1];
|
|
32
24
|
var _e = useState(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
33
25
|
var _f = useState('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
26
|
+
var _g = useState(false), showShadow = _g[0], setShowShadow = _g[1];
|
|
34
27
|
var onBadgeAppearanceChange = useCallback(function (value) { return setBadgeAppearance(value); }, []);
|
|
35
28
|
var onBadgeColorChange = useCallback(function (value) { return setBadgeColor(value); }, []);
|
|
36
29
|
var onShapeChange = useCallback(function (value) { return setShape(value); }, []);
|
|
37
30
|
var onSizeChange = useCallback(function (value) { return setSize(value); }, []);
|
|
38
31
|
var onIconPositionChange = useCallback(function (value) { return setIconPosition(value); }, []);
|
|
32
|
+
var onShowShadowChange = useCallback(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
|
|
33
|
+
var onShowIconChange = useCallback(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
|
|
34
|
+
var theme = useFluentTheme();
|
|
39
35
|
var svgProps = {
|
|
40
36
|
src: TestSvg,
|
|
41
37
|
viewBox: '0 0 500 500',
|
|
@@ -47,29 +43,46 @@ export var BasicBadge = function () {
|
|
|
47
43
|
};
|
|
48
44
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
49
45
|
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
46
|
+
var shadow = showShadow ? theme.shadows.shadow4 : undefined;
|
|
47
|
+
var CustomBadge = useCustomizedBadge({ shadowToken: shadow });
|
|
50
48
|
var badgeConfig = {
|
|
51
49
|
appearance: badgeAppearance,
|
|
52
50
|
badgeColor: badgeColor,
|
|
53
|
-
position: 'absolute',
|
|
54
51
|
size: size,
|
|
55
52
|
shape: shape,
|
|
56
53
|
};
|
|
54
|
+
var StyledBadge = useCustomizedBadge({
|
|
55
|
+
fontWeight: 'bold',
|
|
56
|
+
fontSize: 12,
|
|
57
|
+
fontFamily: 'Georgia',
|
|
58
|
+
backgroundColor: '#f09',
|
|
59
|
+
borderColor: 'purple',
|
|
60
|
+
color: 'yellow',
|
|
61
|
+
borderWidth: 4,
|
|
62
|
+
borderStyle: 'dashed',
|
|
63
|
+
borderRadius: 2,
|
|
64
|
+
iconColor: 'cyan',
|
|
65
|
+
shadowToken: theme.shadows.shadow16,
|
|
66
|
+
});
|
|
57
67
|
return (React.createElement(View, null,
|
|
58
68
|
React.createElement(StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
59
69
|
React.createElement(StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
60
70
|
React.createElement(StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
61
71
|
React.createElement(StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
62
72
|
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
63
|
-
React.createElement(ToggleButton, { onClick:
|
|
73
|
+
React.createElement(ToggleButton, { onClick: onShowIconChange, checked: showIcon },
|
|
64
74
|
"Set ",
|
|
65
75
|
showIcon ? ' Hide icon' : ' Show icon'),
|
|
66
76
|
React.createElement(StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
|
|
77
|
+
React.createElement(ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
|
|
78
|
+
"Set ",
|
|
79
|
+
showShadow ? ' Hide shadow' : ' Show shadow'),
|
|
67
80
|
React.createElement(View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
|
|
68
81
|
React.createElement(Text, null, "Parent component for the Badge"),
|
|
69
|
-
svgIconsEnabled && showIcon ? (React.createElement(
|
|
82
|
+
svgIconsEnabled && showIcon ? (React.createElement(CustomBadge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (React.createElement(CustomBadge, __assign({}, badgeConfig), "Basic badge"))),
|
|
70
83
|
React.createElement(Text, null, "Size"),
|
|
71
|
-
React.createElement(Badge, { size: "tiny"
|
|
72
|
-
React.createElement(Badge, { size: "extraSmall",
|
|
84
|
+
React.createElement(Badge, { size: "tiny" }),
|
|
85
|
+
React.createElement(Badge, { size: "extraSmall", badgeColor: "red" }),
|
|
73
86
|
React.createElement(Badge, { size: "small" }, "Small"),
|
|
74
87
|
React.createElement(Badge, { size: "medium" }, "Medium"),
|
|
75
88
|
React.createElement(Badge, { size: "large" }, "Large"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EACL,KAAK,EAEL,gBAAgB,EAEhB,WAAW,EAEX,WAAW,EAEX,UAAU,GAIX,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,IAAM,WAAW,qBAAqB,WAAW,OAAC,CAAC;AACnD,IAAM,WAAW,qBAAqB,WAAW,OAAC,CAAC;AACnD,IAAM,UAAU,qBAAoB,UAAU,OAAC,CAAC;AAChD,IAAM,gBAAgB,qBAA0B,gBAAgB,OAAC,CAAC;AAClE,IAAM,kBAAkB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAE/C,IAAM,kBAAkB,GAAG,UAAC,cAAwC;IAClE,OAAO,OAAO,CAAC,cAAM,OAAA,KAAK,CAAC,SAAS,cAAM,cAAc,EAAG,EAAtC,CAAsC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AACjF,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAA4B;IAC3C,IAAA,KAAwC,QAAQ,CAAkB,QAAQ,CAAC,EAA1E,eAAe,QAAA,EAAE,kBAAkB,QAAuC,CAAC;IAC5E,IAAA,KAA8B,QAAQ,CAAa,OAAO,CAAC,EAA1D,UAAU,QAAA,EAAE,aAAa,QAAiC,CAAC;IAC5D,IAAA,KAAoB,QAAQ,CAAa,UAAU,CAAC,EAAnD,KAAK,QAAA,EAAE,QAAQ,QAAoC,CAAC;IACrD,IAAA,KAAkB,QAAQ,CAAY,QAAQ,CAAC,EAA9C,IAAI,QAAA,EAAE,OAAO,QAAiC,CAAC;IAChD,IAAA,KAA0B,QAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAC1C,IAAA,KAAkC,QAAQ,CAAoB,QAAQ,CAAC,EAAtE,YAAY,QAAA,EAAE,eAAe,QAAyC,CAAC;IACxE,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAEpD,IAAM,uBAAuB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,kBAAkB,CAAC,KAAK,CAAC,EAAzB,CAAyB,EAAE,EAAE,CAAC,CAAC;IACtF,IAAM,kBAAkB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,EAAE,EAAE,CAAC,CAAC;IAC5E,IAAM,aAAa,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,EAAE,EAAE,CAAC,CAAC;IAClE,IAAM,YAAY,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,EAAE,CAAC,CAAC;IAChE,IAAM,oBAAoB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,EAAE,EAAE,CAAC,CAAC;IAChF,IAAM,kBAAkB,GAAG,WAAW,CAAC,cAAM,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,EAA1B,CAA0B,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IACtG,IAAM,gBAAgB,GAAG,WAAW,CAAC,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5F,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACvB,UAAU,EAAE,OAAO;QACnB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,EAAE;KACb,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAC7F,IAAM,SAAS,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IAEjE,IAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,IAAM,WAAW,GAAG,kBAAkB,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEhE,IAAM,WAAW,GAAG;QAClB,UAAU,EAAE,eAAe;QAC3B,UAAU,YAAA;QACV,IAAI,MAAA;QACJ,KAAK,OAAA;KACN,CAAC;IAEF,IAAM,WAAW,GAAG,kBAAkB,CAAC;QACrC,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,QAAQ;QACrB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,YAAY,IAAC,MAAM,EAAC,kBAAkB,EAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,uBAAuB,EAAE,UAAU,EAAE,gBAAgB,GAAI;QACtI,oBAAC,YAAY,IAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,WAAW,GAAI;QAClH,oBAAC,YAAY,IAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,GAAI;QAClG,oBAAC,YAAY,IAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI;QAC7F,eAAe,IAAI,CAClB;YACE,oBAAC,YAAY,IAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ;;gBACnD,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAC9B;YACf,oBAAC,YAAY,IAAC,MAAM,EAAC,eAAe,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,EAAE,UAAU,EAAE,kBAAkB,GAAI,CAC9H,CACJ;QACD,oBAAC,YAAY,IAAC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU;;YACvD,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CACpC;QAEf,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YACvF,oBAAC,IAAI,yCAAsC;YAC1C,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,CAC7B,oBAAC,WAAW,eAAK,WAAW,IAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAE,YAAY,mBAEzE,CACf,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,eAAK,WAAW,iBAA2B,CACxD,CACI;QACP,oBAAC,IAAI,eAAY;QACjB,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,GAAG;QACrB,oBAAC,KAAK,IAAC,IAAI,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,GAAG;QAC5C,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,YAAc;QACjC,oBAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,aAAe;QACnC,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,YAAc;QACjC,oBAAC,KAAK,IAAC,IAAI,EAAC,YAAY,kBAAoB;QAC3C,eAAe,IAAI,CAClB;YACE,oBAAC,IAAI,0BAAuB;YAC5B,oBAAC,KAAK,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO;;gBAExD,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI;gBAC3E,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,uBAAyB,CAC7D;YACR,oBAAC,KAAK,IAAC,UAAU,EAAC,SAAS,EAAC,IAAI,EAAE,SAAS,GAAI;YAC/C,oBAAC,KAAK,IAAC,IAAI,EAAE,EAAE,UAAU,eAAO,gBAAgB,CAAE,EAAE,KAAK,EAAE,MAAM,EAAE,sBAAyB;YAC5F,oBAAC,IAAI,qCAAkC;YACvC,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,mBAA4B,CACrE,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAwBpC,CAAC"}
|
|
@@ -21,7 +21,6 @@ export var CounterBadgeTest = function () {
|
|
|
21
21
|
React.createElement(CounterBadge, { badgeColor: "important", overflowCount: 1000, count: 777 }),
|
|
22
22
|
React.createElement(CounterBadge, { badgeColor: "danger", overflowCount: 1000, count: 1500 }),
|
|
23
23
|
React.createElement(CounterBadge, { count: 13 }),
|
|
24
|
-
React.createElement(CounterBadge, { count: 13 }, "CounterBadge"),
|
|
25
24
|
svgIconsEnabled && React.createElement(CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
|
|
26
25
|
};
|
|
27
26
|
//# sourceMappingURL=CounterBadgeTest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAE5D,MAAM,CAAC,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,oBAAiB;QACtB,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,oBAAC,IAAI,mCAAgC;QACrC,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,oBAAC,IAAI,qDAAkD;QACvD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,oBAAC,YAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,oBAAC,YAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,oBAAC,YAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAE5D,MAAM,CAAC,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,oBAAiB;QACtB,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,oBAAC,IAAI,mCAAgC;QACrC,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,oBAAC,IAAI,qDAAkD;QACvD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,oBAAC,YAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,oBAAC,YAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,oBAAC,YAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,GAAI;QAC1B,eAAe,IAAI,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiC9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBA2G9B,CAAC"}
|
|
@@ -10,23 +10,15 @@ var StyledPicker_1 = require("../Common/StyledPicker");
|
|
|
10
10
|
var styles_1 = require("./../PersonaCoin/styles");
|
|
11
11
|
var test_svg_1 = (0, tslib_1.__importDefault)(require("../../FluentTester/test-data/test.svg"));
|
|
12
12
|
var react_native_2 = require("@fluentui/react-native");
|
|
13
|
+
var framework_1 = require("@fluentui-react-native/framework");
|
|
13
14
|
var badgeColors = (0, tslib_1.__spreadArray)([], badge_1.BadgeColors, true);
|
|
14
15
|
var badgeShapes = (0, tslib_1.__spreadArray)([], badge_1.BadgeShapes, true);
|
|
15
16
|
var badgeSizes = (0, tslib_1.__spreadArray)([], badge_1.BadgeSizes, true);
|
|
16
17
|
var badgeAppearances = (0, tslib_1.__spreadArray)([], badge_1.BadgeAppearances, true);
|
|
17
18
|
var badgeIconPositions = ['before', 'after'];
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
fontFamily: 'Georgia',
|
|
22
|
-
backgroundColor: '#f09',
|
|
23
|
-
borderColor: 'purple',
|
|
24
|
-
color: 'yellow',
|
|
25
|
-
borderWidth: 4,
|
|
26
|
-
borderStyle: 'dashed',
|
|
27
|
-
borderRadius: 2,
|
|
28
|
-
iconColor: 'cyan',
|
|
29
|
-
});
|
|
19
|
+
var useCustomizedBadge = function (tokensAndprops) {
|
|
20
|
+
return (0, react_1.useMemo)(function () { return badge_1.Badge.customize((0, tslib_1.__assign)({}, tokensAndprops)); }, [tokensAndprops]);
|
|
21
|
+
};
|
|
30
22
|
var BasicBadge = function () {
|
|
31
23
|
var _a = (0, react_1.useState)('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
32
24
|
var _b = (0, react_1.useState)('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
@@ -34,11 +26,15 @@ var BasicBadge = function () {
|
|
|
34
26
|
var _d = (0, react_1.useState)('medium'), size = _d[0], setSize = _d[1];
|
|
35
27
|
var _e = (0, react_1.useState)(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
36
28
|
var _f = (0, react_1.useState)('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
29
|
+
var _g = (0, react_1.useState)(false), showShadow = _g[0], setShowShadow = _g[1];
|
|
37
30
|
var onBadgeAppearanceChange = (0, react_1.useCallback)(function (value) { return setBadgeAppearance(value); }, []);
|
|
38
31
|
var onBadgeColorChange = (0, react_1.useCallback)(function (value) { return setBadgeColor(value); }, []);
|
|
39
32
|
var onShapeChange = (0, react_1.useCallback)(function (value) { return setShape(value); }, []);
|
|
40
33
|
var onSizeChange = (0, react_1.useCallback)(function (value) { return setSize(value); }, []);
|
|
41
34
|
var onIconPositionChange = (0, react_1.useCallback)(function (value) { return setIconPosition(value); }, []);
|
|
35
|
+
var onShowShadowChange = (0, react_1.useCallback)(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
|
|
36
|
+
var onShowIconChange = (0, react_1.useCallback)(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
|
|
37
|
+
var theme = (0, framework_1.useFluentTheme)();
|
|
42
38
|
var svgProps = {
|
|
43
39
|
src: test_svg_1.default,
|
|
44
40
|
viewBox: '0 0 500 500',
|
|
@@ -50,29 +46,46 @@ var BasicBadge = function () {
|
|
|
50
46
|
};
|
|
51
47
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
52
48
|
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
49
|
+
var shadow = showShadow ? theme.shadows.shadow4 : undefined;
|
|
50
|
+
var CustomBadge = useCustomizedBadge({ shadowToken: shadow });
|
|
53
51
|
var badgeConfig = {
|
|
54
52
|
appearance: badgeAppearance,
|
|
55
53
|
badgeColor: badgeColor,
|
|
56
|
-
position: 'absolute',
|
|
57
54
|
size: size,
|
|
58
55
|
shape: shape,
|
|
59
56
|
};
|
|
57
|
+
var StyledBadge = useCustomizedBadge({
|
|
58
|
+
fontWeight: 'bold',
|
|
59
|
+
fontSize: 12,
|
|
60
|
+
fontFamily: 'Georgia',
|
|
61
|
+
backgroundColor: '#f09',
|
|
62
|
+
borderColor: 'purple',
|
|
63
|
+
color: 'yellow',
|
|
64
|
+
borderWidth: 4,
|
|
65
|
+
borderStyle: 'dashed',
|
|
66
|
+
borderRadius: 2,
|
|
67
|
+
iconColor: 'cyan',
|
|
68
|
+
shadowToken: theme.shadows.shadow16,
|
|
69
|
+
});
|
|
60
70
|
return (react_1.default.createElement(react_native_1.View, null,
|
|
61
71
|
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
62
72
|
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
63
73
|
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
64
74
|
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
65
75
|
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
66
|
-
react_1.default.createElement(react_native_2.ToggleButton, { onClick:
|
|
76
|
+
react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowIconChange, checked: showIcon },
|
|
67
77
|
"Set ",
|
|
68
78
|
showIcon ? ' Hide icon' : ' Show icon'),
|
|
69
79
|
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
|
|
80
|
+
react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
|
|
81
|
+
"Set ",
|
|
82
|
+
showShadow ? ' Hide shadow' : ' Show shadow'),
|
|
70
83
|
react_1.default.createElement(react_native_1.View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
|
|
71
84
|
react_1.default.createElement(react_native_1.Text, null, "Parent component for the Badge"),
|
|
72
|
-
svgIconsEnabled && showIcon ? (react_1.default.createElement(
|
|
85
|
+
svgIconsEnabled && showIcon ? (react_1.default.createElement(CustomBadge, (0, tslib_1.__assign)({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (react_1.default.createElement(CustomBadge, (0, tslib_1.__assign)({}, badgeConfig), "Basic badge"))),
|
|
73
86
|
react_1.default.createElement(react_native_1.Text, null, "Size"),
|
|
74
|
-
react_1.default.createElement(badge_1.Badge, { size: "tiny"
|
|
75
|
-
react_1.default.createElement(badge_1.Badge, { size: "extraSmall",
|
|
87
|
+
react_1.default.createElement(badge_1.Badge, { size: "tiny" }),
|
|
88
|
+
react_1.default.createElement(badge_1.Badge, { size: "extraSmall", badgeColor: "red" }),
|
|
76
89
|
react_1.default.createElement(badge_1.Badge, { size: "small" }, "Small"),
|
|
77
90
|
react_1.default.createElement(badge_1.Badge, { size: "medium" }, "Medium"),
|
|
78
91
|
react_1.default.createElement(badge_1.Badge, { size: "large" }, "Large"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAwBpC,CAAC"}
|
|
@@ -25,7 +25,6 @@ var CounterBadgeTest = function () {
|
|
|
25
25
|
react_1.default.createElement(badge_1.CounterBadge, { badgeColor: "important", overflowCount: 1000, count: 777 }),
|
|
26
26
|
react_1.default.createElement(badge_1.CounterBadge, { badgeColor: "danger", overflowCount: 1000, count: 1500 }),
|
|
27
27
|
react_1.default.createElement(badge_1.CounterBadge, { count: 13 }),
|
|
28
|
-
react_1.default.createElement(badge_1.CounterBadge, { count: 13 }, "CounterBadge"),
|
|
29
28
|
svgIconsEnabled && react_1.default.createElement(badge_1.CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
|
|
30
29
|
};
|
|
31
30
|
exports.CounterBadgeTest = CounterBadgeTest;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6DAA0B;AAC1B,6CAAoD;AACpD,sDAA4D;AAE5D,gGAA4D;AAErD,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,kBAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,uBAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,mBAAI,oBAAiB;QACtB,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,8BAAC,mBAAI,mCAAgC;QACrC,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,8BAAC,mBAAI,qDAAkD;QACvD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,8BAAC,oBAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,8BAAC,oBAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,8BAAC,oBAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6DAA0B;AAC1B,6CAAoD;AACpD,sDAA4D;AAE5D,gGAA4D;AAErD,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,kBAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,uBAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,mBAAI,oBAAiB;QACtB,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,8BAAC,mBAAI,mCAAgC;QACrC,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,8BAAC,mBAAI,qDAAkD;QACvD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,8BAAC,oBAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,8BAAC,oBAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,8BAAC,oBAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,GAAI;QAC1B,eAAe,IAAI,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,gBAAgB,oBAwB3B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
|
-
"version": "0.99.
|
|
3
|
+
"version": "0.99.9",
|
|
4
4
|
"description": "A test app to test FluentUI React Native Components during development",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Microsoft <fluentuinativeowners@microsoft.com>",
|
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@fluentui-react-native/android-theme": ">=0.12.5 <1.0.0",
|
|
40
40
|
"@fluentui-react-native/apple-theme": ">=0.15.3 <1.0.0",
|
|
41
|
-
"@fluentui-react-native/avatar": "^1.2.
|
|
42
|
-
"@fluentui-react-native/badge": ">=0.1.
|
|
41
|
+
"@fluentui-react-native/avatar": "^1.2.16",
|
|
42
|
+
"@fluentui-react-native/badge": ">=0.1.39 <1.0.0",
|
|
43
43
|
"@fluentui-react-native/button": ">=0.25.5 <1.0.0",
|
|
44
44
|
"@fluentui-react-native/default-theme": ">=0.16.1 <1.0.0",
|
|
45
|
-
"@fluentui-react-native/dropdown": ">=0.4.
|
|
45
|
+
"@fluentui-react-native/dropdown": ">=0.4.6 <1.0.0",
|
|
46
46
|
"@fluentui-react-native/experimental-activity-indicator": ">=0.6.7 <1.0.0",
|
|
47
47
|
"@fluentui-react-native/experimental-avatar": ">=0.16.10 <1.0.0",
|
|
48
48
|
"@fluentui-react-native/experimental-button": "0.16.32",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
-
import React, { useState, useCallback } from 'react';
|
|
3
|
-
import { View, Platform, Text, Image
|
|
2
|
+
import React, { useState, useCallback, useMemo } from 'react';
|
|
3
|
+
import { View, Platform, Text, Image } from 'react-native';
|
|
4
4
|
import {
|
|
5
5
|
Badge,
|
|
6
6
|
BadgeAppearance,
|
|
@@ -12,12 +12,15 @@ import {
|
|
|
12
12
|
BadgeSize,
|
|
13
13
|
BadgeSizes,
|
|
14
14
|
BadgeIconPosition,
|
|
15
|
+
BadgeProps,
|
|
16
|
+
BadgeTokens,
|
|
15
17
|
} from '@fluentui-react-native/badge';
|
|
16
18
|
import { SvgIconProps } from '@fluentui-react-native/icon';
|
|
17
19
|
import { StyledPicker } from '../Common/StyledPicker';
|
|
18
20
|
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
19
21
|
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
20
22
|
import { ToggleButton } from '@fluentui/react-native';
|
|
23
|
+
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
21
24
|
|
|
22
25
|
const badgeColors: BadgeColor[] = [...BadgeColors];
|
|
23
26
|
const badgeShapes: BadgeShape[] = [...BadgeShapes];
|
|
@@ -25,18 +28,9 @@ const badgeSizes: BadgeSize[] = [...BadgeSizes];
|
|
|
25
28
|
const badgeAppearances: BadgeAppearance[] = [...BadgeAppearances];
|
|
26
29
|
const badgeIconPositions = ['before', 'after'];
|
|
27
30
|
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
fontFamily: 'Georgia',
|
|
32
|
-
backgroundColor: '#f09',
|
|
33
|
-
borderColor: 'purple',
|
|
34
|
-
color: 'yellow',
|
|
35
|
-
borderWidth: 4,
|
|
36
|
-
borderStyle: 'dashed',
|
|
37
|
-
borderRadius: 2,
|
|
38
|
-
iconColor: 'cyan',
|
|
39
|
-
});
|
|
31
|
+
const useCustomizedBadge = (tokensAndprops: BadgeProps & BadgeTokens) => {
|
|
32
|
+
return useMemo(() => Badge.customize({ ...tokensAndprops }), [tokensAndprops]);
|
|
33
|
+
};
|
|
40
34
|
|
|
41
35
|
export const BasicBadge: React.FunctionComponent = () => {
|
|
42
36
|
const [badgeAppearance, setBadgeAppearance] = useState<BadgeAppearance>('filled');
|
|
@@ -45,13 +39,17 @@ export const BasicBadge: React.FunctionComponent = () => {
|
|
|
45
39
|
const [size, setSize] = useState<BadgeSize>('medium');
|
|
46
40
|
const [showIcon, setShowIcon] = useState(false);
|
|
47
41
|
const [iconPosition, setIconPosition] = useState<BadgeIconPosition>('before');
|
|
42
|
+
const [showShadow, setShowShadow] = useState(false);
|
|
48
43
|
|
|
49
44
|
const onBadgeAppearanceChange = useCallback((value) => setBadgeAppearance(value), []);
|
|
50
45
|
const onBadgeColorChange = useCallback((value) => setBadgeColor(value), []);
|
|
51
46
|
const onShapeChange = useCallback((value) => setShape(value), []);
|
|
52
47
|
const onSizeChange = useCallback((value) => setSize(value), []);
|
|
53
48
|
const onIconPositionChange = useCallback((value) => setIconPosition(value), []);
|
|
49
|
+
const onShowShadowChange = useCallback(() => setShowShadow(!showShadow), [showShadow, setShowShadow]);
|
|
50
|
+
const onShowIconChange = useCallback(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
|
|
54
51
|
|
|
52
|
+
const theme = useFluentTheme();
|
|
55
53
|
const svgProps: SvgIconProps = {
|
|
56
54
|
src: TestSvg,
|
|
57
55
|
viewBox: '0 0 500 500',
|
|
@@ -65,14 +63,31 @@ export const BasicBadge: React.FunctionComponent = () => {
|
|
|
65
63
|
|
|
66
64
|
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
67
65
|
const iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
66
|
+
|
|
67
|
+
const shadow = showShadow ? theme.shadows.shadow4 : undefined;
|
|
68
|
+
const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
|
|
69
|
+
|
|
68
70
|
const badgeConfig = {
|
|
69
71
|
appearance: badgeAppearance,
|
|
70
72
|
badgeColor,
|
|
71
|
-
position: 'absolute' as FlexStyle['position'],
|
|
72
73
|
size,
|
|
73
74
|
shape,
|
|
74
75
|
};
|
|
75
76
|
|
|
77
|
+
const StyledBadge = useCustomizedBadge({
|
|
78
|
+
fontWeight: 'bold',
|
|
79
|
+
fontSize: 12,
|
|
80
|
+
fontFamily: 'Georgia',
|
|
81
|
+
backgroundColor: '#f09',
|
|
82
|
+
borderColor: 'purple',
|
|
83
|
+
color: 'yellow',
|
|
84
|
+
borderWidth: 4,
|
|
85
|
+
borderStyle: 'dashed',
|
|
86
|
+
borderRadius: 2,
|
|
87
|
+
iconColor: 'cyan',
|
|
88
|
+
shadowToken: theme.shadows.shadow16,
|
|
89
|
+
});
|
|
90
|
+
|
|
76
91
|
return (
|
|
77
92
|
<View>
|
|
78
93
|
<StyledPicker prompt="Badge appearance" selected={badgeAppearance} onChange={onBadgeAppearanceChange} collection={badgeAppearances} />
|
|
@@ -81,27 +96,29 @@ export const BasicBadge: React.FunctionComponent = () => {
|
|
|
81
96
|
<StyledPicker prompt="Size" selected={size} onChange={onSizeChange} collection={badgeSizes} />
|
|
82
97
|
{svgIconsEnabled && (
|
|
83
98
|
<>
|
|
84
|
-
<ToggleButton onClick={
|
|
99
|
+
<ToggleButton onClick={onShowIconChange} checked={showIcon}>
|
|
85
100
|
Set {showIcon ? ' Hide icon' : ' Show icon'}
|
|
86
101
|
</ToggleButton>
|
|
87
102
|
<StyledPicker prompt="Icon position" selected={iconPosition} onChange={onIconPositionChange} collection={badgeIconPositions} />
|
|
88
103
|
</>
|
|
89
104
|
)}
|
|
105
|
+
<ToggleButton onClick={onShowShadowChange} checked={showShadow}>
|
|
106
|
+
Set {showShadow ? ' Hide shadow' : ' Show shadow'}
|
|
107
|
+
</ToggleButton>
|
|
90
108
|
|
|
91
109
|
<View style={{ position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 }}>
|
|
92
110
|
<Text>Parent component for the Badge</Text>
|
|
93
111
|
{svgIconsEnabled && showIcon ? (
|
|
94
|
-
<
|
|
112
|
+
<CustomBadge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
|
|
95
113
|
Basic badge
|
|
96
|
-
</
|
|
114
|
+
</CustomBadge>
|
|
97
115
|
) : (
|
|
98
|
-
<
|
|
116
|
+
<CustomBadge {...badgeConfig}>Basic badge</CustomBadge>
|
|
99
117
|
)}
|
|
100
118
|
</View>
|
|
101
|
-
|
|
102
119
|
<Text>Size</Text>
|
|
103
|
-
<Badge size="tiny"
|
|
104
|
-
<Badge size="extraSmall"
|
|
120
|
+
<Badge size="tiny" />
|
|
121
|
+
<Badge size="extraSmall" badgeColor="red" />
|
|
105
122
|
<Badge size="small">Small</Badge>
|
|
106
123
|
<Badge size="medium">Medium</Badge>
|
|
107
124
|
<Badge size="large">Large</Badge>
|
|
@@ -25,8 +25,7 @@ export const CounterBadgeTest: React.FunctionComponent = () => {
|
|
|
25
25
|
<CounterBadge badgeColor="informative" count={777}></CounterBadge>
|
|
26
26
|
<CounterBadge badgeColor="important" overflowCount={1000} count={777}></CounterBadge>
|
|
27
27
|
<CounterBadge badgeColor="danger" overflowCount={1000} count={1500}></CounterBadge>
|
|
28
|
-
<CounterBadge count={13}
|
|
29
|
-
<CounterBadge count={13}>CounterBadge</CounterBadge>
|
|
28
|
+
<CounterBadge count={13} />
|
|
30
29
|
{svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}
|
|
31
30
|
</View>
|
|
32
31
|
);
|