@fluentui-react-native/tester 0.83.1 → 0.83.2
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 +28 -1
- package/CHANGELOG.md +12 -2
- package/lib/TestComponents/Badge/BadgeTest.d.ts +1 -2
- package/lib/TestComponents/Badge/BadgeTest.d.ts.map +1 -1
- package/lib/TestComponents/Badge/BadgeTest.js +12 -108
- package/lib/TestComponents/Badge/BadgeTest.js.map +1 -1
- package/lib/TestComponents/Badge/BasicBadgeTest.d.ts +3 -0
- package/lib/TestComponents/Badge/BasicBadgeTest.d.ts.map +1 -0
- package/lib/TestComponents/Badge/BasicBadgeTest.js +83 -0
- package/lib/TestComponents/Badge/BasicBadgeTest.js.map +1 -0
- package/lib/TestComponents/Badge/CounterBadgeTest.d.ts +3 -0
- package/lib/TestComponents/Badge/CounterBadgeTest.d.ts.map +1 -0
- package/lib/TestComponents/Badge/CounterBadgeTest.js +24 -0
- package/lib/TestComponents/Badge/CounterBadgeTest.js.map +1 -0
- package/lib/TestComponents/Badge/PresenceBadgeTest.d.ts +3 -0
- package/lib/TestComponents/Badge/PresenceBadgeTest.d.ts.map +1 -0
- package/lib/TestComponents/Badge/PresenceBadgeTest.js +18 -0
- package/lib/TestComponents/Badge/PresenceBadgeTest.js.map +1 -0
- package/lib-commonjs/TestComponents/Badge/BadgeTest.d.ts +1 -2
- package/lib-commonjs/TestComponents/Badge/BadgeTest.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Badge/BadgeTest.js +15 -111
- package/lib-commonjs/TestComponents/Badge/BadgeTest.js.map +1 -1
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.d.ts +3 -0
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.d.ts.map +1 -0
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js +87 -0
- package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js.map +1 -0
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.d.ts +3 -0
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.d.ts.map +1 -0
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js +29 -0
- package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js.map +1 -0
- package/lib-commonjs/TestComponents/Badge/PresenceBadgeTest.d.ts +3 -0
- package/lib-commonjs/TestComponents/Badge/PresenceBadgeTest.d.ts.map +1 -0
- package/lib-commonjs/TestComponents/Badge/PresenceBadgeTest.js +23 -0
- package/lib-commonjs/TestComponents/Badge/PresenceBadgeTest.js.map +1 -0
- package/package.json +3 -3
- package/src/TestComponents/Badge/BadgeTest.tsx +12 -181
- package/src/TestComponents/Badge/BasicBadgeTest.tsx +120 -0
- package/src/TestComponents/Badge/CounterBadgeTest.tsx +30 -0
- package/src/TestComponents/Badge/PresenceBadgeTest.tsx +26 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,34 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 08 Aug 2022 11:50:11 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/tester_v0.83.2",
|
|
7
|
+
"version": "0.83.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "v.kozova13@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"commit": "b9e1f165db6bd4bfbb61ce614ede3f8b43e315d2",
|
|
14
|
+
"comment": "Added CounterBadge"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/tester",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/avatar to v1.1.34",
|
|
20
|
+
"commit": "b9e1f165db6bd4bfbb61ce614ede3f8b43e315d2"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/tester",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/badge to v0.1.19",
|
|
26
|
+
"commit": "b9e1f165db6bd4bfbb61ce614ede3f8b43e315d2"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Sun, 07 Aug 2022 20:38:13 GMT",
|
|
6
33
|
"tag": "@fluentui-react-native/tester_v0.83.1",
|
|
7
34
|
"version": "0.83.1",
|
|
8
35
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/tester
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 08 Aug 2022 11:50:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.83.2
|
|
8
|
+
|
|
9
|
+
Mon, 08 Aug 2022 11:50:11 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Added CounterBadge (v.kozova13@gmail.com)
|
|
14
|
+
- Bump @fluentui-react-native/avatar to v1.1.34
|
|
15
|
+
- Bump @fluentui-react-native/badge to v0.1.19
|
|
16
|
+
|
|
7
17
|
## 0.83.1
|
|
8
18
|
|
|
9
|
-
Sun, 07 Aug 2022 20:38:
|
|
19
|
+
Sun, 07 Aug 2022 20:38:13 GMT
|
|
10
20
|
|
|
11
21
|
### Patches
|
|
12
22
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAa7B,CAAC"}
|
|
@@ -1,119 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
3
|
-
import React, { useState, useCallback } from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
4
2
|
import { BADGE_TESTPAGE } from './consts';
|
|
5
3
|
import { Test } from '../Test';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { StyledPicker } from '../Common/StyledPicker';
|
|
10
|
-
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
11
|
-
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
12
|
-
import { ToggleButton } from '@fluentui/react-native';
|
|
13
|
-
var badgeColors = __spreadArray([], BadgeColors, true);
|
|
14
|
-
var badgeShapes = __spreadArray([], BadgeShapes, true);
|
|
15
|
-
var badgeSizes = __spreadArray([], BadgeSizes, true);
|
|
16
|
-
var badgeAppearances = __spreadArray([], BadgeAppearances, true);
|
|
17
|
-
var badgeIconPositions = ['before', 'after'];
|
|
18
|
-
var StyledBadge = Badge.customize({
|
|
19
|
-
backgroundColor: 'yellow',
|
|
20
|
-
borderColor: '#f09',
|
|
21
|
-
borderWidth: 4,
|
|
22
|
-
});
|
|
23
|
-
export var BasicBadge = function () {
|
|
24
|
-
var _a = useState('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
25
|
-
var _b = useState('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
26
|
-
var _c = useState('circular'), shape = _c[0], setShape = _c[1];
|
|
27
|
-
var _d = useState('medium'), size = _d[0], setSize = _d[1];
|
|
28
|
-
var _e = useState(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
29
|
-
var _f = useState('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
30
|
-
var onBadgeAppearanceChange = useCallback(function (value) { return setBadgeAppearance(value); }, []);
|
|
31
|
-
var onBadgeColorChange = useCallback(function (value) { return setBadgeColor(value); }, []);
|
|
32
|
-
var onShapeChange = useCallback(function (value) { return setShape(value); }, []);
|
|
33
|
-
var onSizeChange = useCallback(function (value) { return setSize(value); }, []);
|
|
34
|
-
var onIconPositionChange = useCallback(function (value) { return setIconPosition(value); }, []);
|
|
35
|
-
var svgProps = {
|
|
36
|
-
src: TestSvg,
|
|
37
|
-
viewBox: '0 0 500 500',
|
|
38
|
-
};
|
|
39
|
-
var fontBuiltInProps = {
|
|
40
|
-
fontFamily: 'Arial',
|
|
41
|
-
codepoint: 0x2663,
|
|
42
|
-
fontSize: 16,
|
|
43
|
-
};
|
|
44
|
-
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
45
|
-
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
46
|
-
var badgeConfig = {
|
|
47
|
-
appearance: badgeAppearance,
|
|
48
|
-
color: badgeColor,
|
|
49
|
-
size: size,
|
|
50
|
-
shape: shape,
|
|
51
|
-
};
|
|
52
|
-
var badgeContent = size !== 'tiny' && size !== 'extraSmall' ? 'Basic badge' : '';
|
|
53
|
-
return (React.createElement(View, null,
|
|
54
|
-
React.createElement(View, { style: { flexDirection: 'row' } },
|
|
55
|
-
React.createElement(View, null,
|
|
56
|
-
React.createElement(StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
57
|
-
React.createElement(StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
58
|
-
React.createElement(StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
59
|
-
React.createElement(StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
60
|
-
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
61
|
-
React.createElement(ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
|
|
62
|
-
"Set ",
|
|
63
|
-
showIcon ? ' Hide icon' : ' Show icon'),
|
|
64
|
-
React.createElement(StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions })))),
|
|
65
|
-
React.createElement(View, { style: __assign({ paddingHorizontal: 40 }, commonTestStyles.vmargin) }, svgIconsEnabled && showIcon ? (React.createElement(Badge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), badgeContent)) : (React.createElement(Badge, __assign({}, badgeConfig), badgeContent)))),
|
|
66
|
-
React.createElement(View, { style: { flexDirection: 'row' } },
|
|
67
|
-
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
68
|
-
React.createElement(View, null,
|
|
69
|
-
React.createElement(Badge, { size: "small", icon: { svgSource: svgProps } }),
|
|
70
|
-
React.createElement(Badge, { size: "medium", icon: { svgSource: svgProps } }),
|
|
71
|
-
React.createElement(Badge, { size: "large", icon: { svgSource: svgProps } }),
|
|
72
|
-
React.createElement(Badge, { size: "extraLarge", icon: { svgSource: svgProps } })),
|
|
73
|
-
React.createElement(View, null,
|
|
74
|
-
React.createElement(Badge, { size: "small", icon: { svgSource: svgProps } }, "999+"),
|
|
75
|
-
React.createElement(Badge, { size: "medium", icon: { svgSource: svgProps } }, "999+"),
|
|
76
|
-
React.createElement(Badge, { size: "large", icon: { svgSource: svgProps } }, "999+"),
|
|
77
|
-
React.createElement(Badge, { size: "extraLarge", icon: { svgSource: svgProps } }, "999+")),
|
|
78
|
-
React.createElement(View, null,
|
|
79
|
-
React.createElement(Badge, { icon: { svgSource: svgProps } }),
|
|
80
|
-
React.createElement(Badge, { icon: { svgSource: svgProps } }, "Icon before by default"),
|
|
81
|
-
React.createElement(Badge, { icon: { svgSource: svgProps }, iconPosition: "before" }, "Icon before"),
|
|
82
|
-
React.createElement(Badge, { icon: { svgSource: svgProps }, iconPosition: "after" }, "Icon after")))),
|
|
83
|
-
React.createElement(Text, null, "Size"),
|
|
84
|
-
React.createElement(Badge, { size: "tiny", shape: "circular" }),
|
|
85
|
-
React.createElement(Badge, { size: "extraSmall", shape: "circular" }),
|
|
86
|
-
React.createElement(Badge, { size: "small" }, "Small"),
|
|
87
|
-
React.createElement(Badge, { size: "medium" }, "Medium"),
|
|
88
|
-
React.createElement(Badge, { size: "large" }, "Large"),
|
|
89
|
-
React.createElement(Badge, { size: "extraLarge" }, "Extra Large")),
|
|
90
|
-
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
91
|
-
React.createElement(Text, null, "Badge with icon"),
|
|
92
|
-
React.createElement(Badge, { icon: { svgSource: svgProps }, iconPosition: "after" },
|
|
93
|
-
React.createElement(Image, { source: { uri: satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
94
|
-
"Badge with",
|
|
95
|
-
React.createElement(Image, { source: { uri: satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
96
|
-
React.createElement(Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
|
|
97
|
-
React.createElement(Badge, { appearance: "outline", icon: iconProps }),
|
|
98
|
-
React.createElement(Badge, { icon: { fontSource: __assign({}, fontBuiltInProps), color: '#fff' } }, "Badge with icon"))),
|
|
99
|
-
React.createElement(StyledBadge, { appearance: "outline" }, "Styled badge"),
|
|
100
|
-
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
101
|
-
React.createElement(Text, null, "Presence Badge"),
|
|
102
|
-
React.createElement(PresenceBadge, { status: "available", size: "extraLarge" }),
|
|
103
|
-
React.createElement(PresenceBadge, { status: "available", outOfOffice: true, size: "large" }),
|
|
104
|
-
React.createElement(PresenceBadge, { status: "doNotDisturb", outOfOffice: true }),
|
|
105
|
-
React.createElement(PresenceBadge, { status: "away", size: "small" }),
|
|
106
|
-
React.createElement(PresenceBadge, { status: "busy", size: "tiny" }),
|
|
107
|
-
React.createElement(PresenceBadge, { status: "offline" }),
|
|
108
|
-
React.createElement(PresenceBadge, { status: "outOfOffice" }),
|
|
109
|
-
React.createElement(PresenceBadge, { status: "away" })))));
|
|
110
|
-
};
|
|
4
|
+
import { BasicBadge } from './BasicBadgeTest';
|
|
5
|
+
import { CounterBadgeTest } from './CounterBadgeTest';
|
|
6
|
+
import { PresenceBadgeTest } from './PresenceBadgeTest';
|
|
111
7
|
var badgeSections = [
|
|
112
8
|
{
|
|
113
9
|
name: 'Basic Badge',
|
|
114
10
|
testID: BADGE_TESTPAGE,
|
|
115
11
|
component: BasicBadge,
|
|
116
12
|
},
|
|
13
|
+
{
|
|
14
|
+
name: 'Counter Badge',
|
|
15
|
+
component: CounterBadgeTest,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: 'Presence Badge',
|
|
19
|
+
component: PresenceBadgeTest,
|
|
20
|
+
},
|
|
117
21
|
];
|
|
118
22
|
export var BadgeTest = function () {
|
|
119
23
|
var status = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,IAAI,EAA+B,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,IAAM,aAAa,GAAkB;IACnC;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,cAAc;QACtB,SAAS,EAAE,UAAU;KACtB;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,gBAAgB;KAC5B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAA4B;IAChD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,uSAAuS,CAAC;IAE1S,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAS,CAAC;AAC5G,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAqCrD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAiF9B,CAAC"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { __assign, __spreadArray } from "tslib";
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
3
|
+
import React, { useState, useCallback } from 'react';
|
|
4
|
+
import { View, Platform, Text, Image } from 'react-native';
|
|
5
|
+
import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes, } from '@fluentui-react-native/badge';
|
|
6
|
+
import { StyledPicker } from '../Common/StyledPicker';
|
|
7
|
+
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
8
|
+
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
9
|
+
import { ToggleButton } from '@fluentui/react-native';
|
|
10
|
+
var badgeColors = __spreadArray([], BadgeColors, true);
|
|
11
|
+
var badgeShapes = __spreadArray([], BadgeShapes, true);
|
|
12
|
+
var badgeSizes = __spreadArray([], BadgeSizes, true);
|
|
13
|
+
var badgeAppearances = __spreadArray([], BadgeAppearances, true);
|
|
14
|
+
var badgeIconPositions = ['before', 'after'];
|
|
15
|
+
var BadgeNoBorder = Badge.customize({
|
|
16
|
+
borderColor: 'transparent',
|
|
17
|
+
borderWidth: 0,
|
|
18
|
+
});
|
|
19
|
+
var StyledBadge = Badge.customize({
|
|
20
|
+
backgroundColor: 'yellow',
|
|
21
|
+
borderColor: '#f09',
|
|
22
|
+
borderWidth: 4,
|
|
23
|
+
});
|
|
24
|
+
export var BasicBadge = function () {
|
|
25
|
+
var _a = useState('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
26
|
+
var _b = useState('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
27
|
+
var _c = useState('circular'), shape = _c[0], setShape = _c[1];
|
|
28
|
+
var _d = useState('medium'), size = _d[0], setSize = _d[1];
|
|
29
|
+
var _e = useState(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
30
|
+
var _f = useState('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
31
|
+
var onBadgeAppearanceChange = useCallback(function (value) { return setBadgeAppearance(value); }, []);
|
|
32
|
+
var onBadgeColorChange = useCallback(function (value) { return setBadgeColor(value); }, []);
|
|
33
|
+
var onShapeChange = useCallback(function (value) { return setShape(value); }, []);
|
|
34
|
+
var onSizeChange = useCallback(function (value) { return setSize(value); }, []);
|
|
35
|
+
var onIconPositionChange = useCallback(function (value) { return setIconPosition(value); }, []);
|
|
36
|
+
var svgProps = {
|
|
37
|
+
src: TestSvg,
|
|
38
|
+
viewBox: '0 0 500 500',
|
|
39
|
+
};
|
|
40
|
+
var fontBuiltInProps = {
|
|
41
|
+
fontFamily: 'Arial',
|
|
42
|
+
codepoint: 0x2663,
|
|
43
|
+
fontSize: 16,
|
|
44
|
+
};
|
|
45
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
46
|
+
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
47
|
+
var badgeConfig = {
|
|
48
|
+
appearance: badgeAppearance,
|
|
49
|
+
color: badgeColor,
|
|
50
|
+
size: size,
|
|
51
|
+
shape: shape,
|
|
52
|
+
};
|
|
53
|
+
return (React.createElement(View, null,
|
|
54
|
+
React.createElement(StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
55
|
+
React.createElement(StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
56
|
+
React.createElement(StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
57
|
+
React.createElement(StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
58
|
+
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
59
|
+
React.createElement(ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
|
|
60
|
+
"Set ",
|
|
61
|
+
showIcon ? ' Hide icon' : ' Show icon'),
|
|
62
|
+
React.createElement(StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
|
|
63
|
+
svgIconsEnabled && showIcon ? (React.createElement(Badge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (React.createElement(Badge, __assign({}, badgeConfig), "Basic badge")),
|
|
64
|
+
React.createElement(Text, null, "Size"),
|
|
65
|
+
React.createElement(Badge, { size: "tiny", shape: "circular" }),
|
|
66
|
+
React.createElement(Badge, { size: "extraSmall", shape: "circular" }),
|
|
67
|
+
React.createElement(Badge, { size: "small" }, "Small"),
|
|
68
|
+
React.createElement(Badge, { size: "medium" }, "Medium"),
|
|
69
|
+
React.createElement(Badge, { size: "large" }, "Large"),
|
|
70
|
+
React.createElement(Badge, { size: "extraLarge" }, "Extra Large"),
|
|
71
|
+
svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
72
|
+
React.createElement(Text, null, "Badge with icon"),
|
|
73
|
+
React.createElement(Badge, { icon: { svgSource: svgProps }, iconPosition: "after" },
|
|
74
|
+
"Badge with",
|
|
75
|
+
React.createElement(Image, { source: { uri: satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
76
|
+
React.createElement(Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
|
|
77
|
+
React.createElement(Badge, { appearance: "outline", icon: iconProps }),
|
|
78
|
+
React.createElement(Badge, { icon: { fontSource: __assign({}, fontBuiltInProps), color: '#fff' } }, "Badge with icon"),
|
|
79
|
+
React.createElement(Text, null, "Customized Badge"),
|
|
80
|
+
React.createElement(BadgeNoBorder, { appearance: "outline", icon: iconProps }))),
|
|
81
|
+
React.createElement(StyledBadge, { appearance: "outline" }, "Styled badge")));
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=BasicBadgeTest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +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,iBAsBpC,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { View, Platform, Text } from 'react-native';
|
|
4
|
+
import { CounterBadge } from '@fluentui-react-native/badge';
|
|
5
|
+
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
6
|
+
export var CounterBadgeTest = function () {
|
|
7
|
+
var svgProps = {
|
|
8
|
+
src: TestSvg,
|
|
9
|
+
viewBox: '0 0 500 500',
|
|
10
|
+
};
|
|
11
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
12
|
+
return (React.createElement(View, null,
|
|
13
|
+
React.createElement(Text, null, "Here should be no Badge:"),
|
|
14
|
+
React.createElement(CounterBadge, { count: 0 }),
|
|
15
|
+
React.createElement(Text, null, "And here is the Badge with showZero = true"),
|
|
16
|
+
React.createElement(CounterBadge, { count: 0, showZero: true }),
|
|
17
|
+
React.createElement(CounterBadge, { color: "informative", count: 777 }),
|
|
18
|
+
React.createElement(CounterBadge, { color: "important", overflowCount: 1000, count: 777 }),
|
|
19
|
+
React.createElement(CounterBadge, { color: "danger", overflowCount: 1000, count: 1500 }),
|
|
20
|
+
React.createElement(CounterBadge, { count: 13 }),
|
|
21
|
+
React.createElement(CounterBadge, { count: 13 }, "CounterBadge"),
|
|
22
|
+
svgIconsEnabled && React.createElement(CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=CounterBadgeTest.js.map
|
|
@@ -0,0 +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,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,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAC7D,oBAAC,YAAY,IAAC,KAAK,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QAChF,oBAAC,YAAY,IAAC,KAAK,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QAC9E,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,GAAiB;QACxC,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,mBAA6B;QACnD,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/PresenceBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAoBrC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { View, Platform, Text } from 'react-native';
|
|
4
|
+
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
5
|
+
export var PresenceBadgeTest = function () {
|
|
6
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
7
|
+
return (React.createElement(View, null, svgIconsEnabled && (React.createElement(React.Fragment, null,
|
|
8
|
+
React.createElement(Text, null, "Presence Badge"),
|
|
9
|
+
React.createElement(PresenceBadge, { status: "available", size: "extraLarge" }),
|
|
10
|
+
React.createElement(PresenceBadge, { status: "available", outOfOffice: true, size: "large" }),
|
|
11
|
+
React.createElement(PresenceBadge, { status: "doNotDisturb", outOfOffice: true }),
|
|
12
|
+
React.createElement(PresenceBadge, { status: "away", size: "small" }),
|
|
13
|
+
React.createElement(PresenceBadge, { status: "busy", size: "tiny" }),
|
|
14
|
+
React.createElement(PresenceBadge, { status: "offline" }),
|
|
15
|
+
React.createElement(PresenceBadge, { status: "outOfOffice" }),
|
|
16
|
+
React.createElement(PresenceBadge, { status: "away" })))));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=PresenceBadgeTest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/PresenceBadgeTest.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,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,IAAM,iBAAiB,GAA4B;IACxD,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,QACF,eAAe,IAAI,CAClB;QACE,oBAAC,IAAI,yBAAsB;QAC3B,oBAAC,aAAa,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,YAAY,GAAG;QACtD,oBAAC,aAAa,IAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG;QACpE,oBAAC,aAAa,IAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAE,IAAI,GAAI;QAC1D,oBAAC,aAAa,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAG;QAC5C,oBAAC,aAAa,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG;QAC3C,oBAAC,aAAa,IAAC,MAAM,EAAC,SAAS,GAAG;QAClC,oBAAC,aAAa,IAAC,MAAM,EAAC,aAAa,GAAG;QACtC,oBAAC,aAAa,IAAC,MAAM,EAAC,MAAM,GAAG,CAC9B,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAa7B,CAAC"}
|
|
@@ -1,122 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BadgeTest =
|
|
3
|
+
exports.BadgeTest = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
-
|
|
6
|
-
var react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
5
|
+
var React = (0, tslib_1.__importStar)(require("react"));
|
|
7
6
|
var consts_1 = require("./consts");
|
|
8
7
|
var Test_1 = require("../Test");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var StyledPicker_1 = require("../Common/StyledPicker");
|
|
13
|
-
var styles_2 = require("./../PersonaCoin/styles");
|
|
14
|
-
var test_svg_1 = (0, tslib_1.__importDefault)(require("../../FluentTester/test-data/test.svg"));
|
|
15
|
-
var react_native_2 = require("@fluentui/react-native");
|
|
16
|
-
var badgeColors = (0, tslib_1.__spreadArray)([], badge_1.BadgeColors, true);
|
|
17
|
-
var badgeShapes = (0, tslib_1.__spreadArray)([], badge_1.BadgeShapes, true);
|
|
18
|
-
var badgeSizes = (0, tslib_1.__spreadArray)([], badge_1.BadgeSizes, true);
|
|
19
|
-
var badgeAppearances = (0, tslib_1.__spreadArray)([], badge_1.BadgeAppearances, true);
|
|
20
|
-
var badgeIconPositions = ['before', 'after'];
|
|
21
|
-
var StyledBadge = badge_1.Badge.customize({
|
|
22
|
-
backgroundColor: 'yellow',
|
|
23
|
-
borderColor: '#f09',
|
|
24
|
-
borderWidth: 4,
|
|
25
|
-
});
|
|
26
|
-
var BasicBadge = function () {
|
|
27
|
-
var _a = (0, react_1.useState)('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
28
|
-
var _b = (0, react_1.useState)('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
29
|
-
var _c = (0, react_1.useState)('circular'), shape = _c[0], setShape = _c[1];
|
|
30
|
-
var _d = (0, react_1.useState)('medium'), size = _d[0], setSize = _d[1];
|
|
31
|
-
var _e = (0, react_1.useState)(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
32
|
-
var _f = (0, react_1.useState)('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
33
|
-
var onBadgeAppearanceChange = (0, react_1.useCallback)(function (value) { return setBadgeAppearance(value); }, []);
|
|
34
|
-
var onBadgeColorChange = (0, react_1.useCallback)(function (value) { return setBadgeColor(value); }, []);
|
|
35
|
-
var onShapeChange = (0, react_1.useCallback)(function (value) { return setShape(value); }, []);
|
|
36
|
-
var onSizeChange = (0, react_1.useCallback)(function (value) { return setSize(value); }, []);
|
|
37
|
-
var onIconPositionChange = (0, react_1.useCallback)(function (value) { return setIconPosition(value); }, []);
|
|
38
|
-
var svgProps = {
|
|
39
|
-
src: test_svg_1.default,
|
|
40
|
-
viewBox: '0 0 500 500',
|
|
41
|
-
};
|
|
42
|
-
var fontBuiltInProps = {
|
|
43
|
-
fontFamily: 'Arial',
|
|
44
|
-
codepoint: 0x2663,
|
|
45
|
-
fontSize: 16,
|
|
46
|
-
};
|
|
47
|
-
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
48
|
-
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
49
|
-
var badgeConfig = {
|
|
50
|
-
appearance: badgeAppearance,
|
|
51
|
-
color: badgeColor,
|
|
52
|
-
size: size,
|
|
53
|
-
shape: shape,
|
|
54
|
-
};
|
|
55
|
-
var badgeContent = size !== 'tiny' && size !== 'extraSmall' ? 'Basic badge' : '';
|
|
56
|
-
return (react_1.default.createElement(react_native_1.View, null,
|
|
57
|
-
react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
|
|
58
|
-
react_1.default.createElement(react_native_1.View, null,
|
|
59
|
-
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
60
|
-
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
61
|
-
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
62
|
-
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
63
|
-
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
64
|
-
react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
|
|
65
|
-
"Set ",
|
|
66
|
-
showIcon ? ' Hide icon' : ' Show icon'),
|
|
67
|
-
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions })))),
|
|
68
|
-
react_1.default.createElement(react_native_1.View, { style: (0, tslib_1.__assign)({ paddingHorizontal: 40 }, styles_1.commonTestStyles.vmargin) }, svgIconsEnabled && showIcon ? (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), badgeContent)) : (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig), badgeContent)))),
|
|
69
|
-
react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
|
|
70
|
-
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
71
|
-
react_1.default.createElement(react_native_1.View, null,
|
|
72
|
-
react_1.default.createElement(badge_1.Badge, { size: "small", icon: { svgSource: svgProps } }),
|
|
73
|
-
react_1.default.createElement(badge_1.Badge, { size: "medium", icon: { svgSource: svgProps } }),
|
|
74
|
-
react_1.default.createElement(badge_1.Badge, { size: "large", icon: { svgSource: svgProps } }),
|
|
75
|
-
react_1.default.createElement(badge_1.Badge, { size: "extraLarge", icon: { svgSource: svgProps } })),
|
|
76
|
-
react_1.default.createElement(react_native_1.View, null,
|
|
77
|
-
react_1.default.createElement(badge_1.Badge, { size: "small", icon: { svgSource: svgProps } }, "999+"),
|
|
78
|
-
react_1.default.createElement(badge_1.Badge, { size: "medium", icon: { svgSource: svgProps } }, "999+"),
|
|
79
|
-
react_1.default.createElement(badge_1.Badge, { size: "large", icon: { svgSource: svgProps } }, "999+"),
|
|
80
|
-
react_1.default.createElement(badge_1.Badge, { size: "extraLarge", icon: { svgSource: svgProps } }, "999+")),
|
|
81
|
-
react_1.default.createElement(react_native_1.View, null,
|
|
82
|
-
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps } }),
|
|
83
|
-
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps } }, "Icon before by default"),
|
|
84
|
-
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps }, iconPosition: "before" }, "Icon before"),
|
|
85
|
-
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps }, iconPosition: "after" }, "Icon after")))),
|
|
86
|
-
react_1.default.createElement(react_native_1.Text, null, "Size"),
|
|
87
|
-
react_1.default.createElement(badge_1.Badge, { size: "tiny", shape: "circular" }),
|
|
88
|
-
react_1.default.createElement(badge_1.Badge, { size: "extraSmall", shape: "circular" }),
|
|
89
|
-
react_1.default.createElement(badge_1.Badge, { size: "small" }, "Small"),
|
|
90
|
-
react_1.default.createElement(badge_1.Badge, { size: "medium" }, "Medium"),
|
|
91
|
-
react_1.default.createElement(badge_1.Badge, { size: "large" }, "Large"),
|
|
92
|
-
react_1.default.createElement(badge_1.Badge, { size: "extraLarge" }, "Extra Large")),
|
|
93
|
-
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
94
|
-
react_1.default.createElement(react_native_1.Text, null, "Badge with icon"),
|
|
95
|
-
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps }, iconPosition: "after" },
|
|
96
|
-
react_1.default.createElement(react_native_1.Image, { source: { uri: styles_2.satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
97
|
-
"Badge with",
|
|
98
|
-
react_1.default.createElement(react_native_1.Image, { source: { uri: styles_2.satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
99
|
-
react_1.default.createElement(react_native_1.Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
|
|
100
|
-
react_1.default.createElement(badge_1.Badge, { appearance: "outline", icon: iconProps }),
|
|
101
|
-
react_1.default.createElement(badge_1.Badge, { icon: { fontSource: (0, tslib_1.__assign)({}, fontBuiltInProps), color: '#fff' } }, "Badge with icon"))),
|
|
102
|
-
react_1.default.createElement(StyledBadge, { appearance: "outline" }, "Styled badge"),
|
|
103
|
-
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
104
|
-
react_1.default.createElement(react_native_1.Text, null, "Presence Badge"),
|
|
105
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "available", size: "extraLarge" }),
|
|
106
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "available", outOfOffice: true, size: "large" }),
|
|
107
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "doNotDisturb", outOfOffice: true }),
|
|
108
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "away", size: "small" }),
|
|
109
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "busy", size: "tiny" }),
|
|
110
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "offline" }),
|
|
111
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "outOfOffice" }),
|
|
112
|
-
react_1.default.createElement(badge_1.PresenceBadge, { status: "away" })))));
|
|
113
|
-
};
|
|
114
|
-
exports.BasicBadge = BasicBadge;
|
|
8
|
+
var BasicBadgeTest_1 = require("./BasicBadgeTest");
|
|
9
|
+
var CounterBadgeTest_1 = require("./CounterBadgeTest");
|
|
10
|
+
var PresenceBadgeTest_1 = require("./PresenceBadgeTest");
|
|
115
11
|
var badgeSections = [
|
|
116
12
|
{
|
|
117
13
|
name: 'Basic Badge',
|
|
118
14
|
testID: consts_1.BADGE_TESTPAGE,
|
|
119
|
-
component:
|
|
15
|
+
component: BasicBadgeTest_1.BasicBadge,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: 'Counter Badge',
|
|
19
|
+
component: CounterBadgeTest_1.CounterBadgeTest,
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
name: 'Presence Badge',
|
|
23
|
+
component: PresenceBadgeTest_1.PresenceBadgeTest,
|
|
120
24
|
},
|
|
121
25
|
];
|
|
122
26
|
var BadgeTest = function () {
|
|
@@ -128,7 +32,7 @@ var BadgeTest = function () {
|
|
|
128
32
|
androidStatus: 'Backlog',
|
|
129
33
|
};
|
|
130
34
|
var description = 'A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.\n Included in this spec are base properties for usage in all badge scenarios. Reference properties for other badge types i.e. size, layout, and style variations';
|
|
131
|
-
return
|
|
35
|
+
return React.createElement(Test_1.Test, { name: "Badge Test", description: description, sections: badgeSections, status: status });
|
|
132
36
|
};
|
|
133
37
|
exports.BadgeTest = BadgeTest;
|
|
134
38
|
//# sourceMappingURL=BadgeTest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"BadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,mCAA0C;AAC1C,gCAA4D;AAC5D,mDAA8C;AAC9C,uDAAsD;AACtD,yDAAwD;AAExD,IAAM,aAAa,GAAkB;IACnC;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,uBAAc;QACtB,SAAS,EAAE,2BAAU;KACtB;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,mCAAgB;KAC5B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,qCAAiB;KAC7B;CACF,CAAC;AAEK,IAAM,SAAS,GAA4B;IAChD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,uSAAuS,CAAC;IAE1S,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,YAAY,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAS,CAAC;AAC5G,CAAC,CAAC;AAbW,QAAA,SAAS,aAapB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAqCrD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAiF9B,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BasicBadge = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
6
|
+
var react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
7
|
+
var react_native_1 = require("react-native");
|
|
8
|
+
var badge_1 = require("@fluentui-react-native/badge");
|
|
9
|
+
var StyledPicker_1 = require("../Common/StyledPicker");
|
|
10
|
+
var styles_1 = require("./../PersonaCoin/styles");
|
|
11
|
+
var test_svg_1 = (0, tslib_1.__importDefault)(require("../../FluentTester/test-data/test.svg"));
|
|
12
|
+
var react_native_2 = require("@fluentui/react-native");
|
|
13
|
+
var badgeColors = (0, tslib_1.__spreadArray)([], badge_1.BadgeColors, true);
|
|
14
|
+
var badgeShapes = (0, tslib_1.__spreadArray)([], badge_1.BadgeShapes, true);
|
|
15
|
+
var badgeSizes = (0, tslib_1.__spreadArray)([], badge_1.BadgeSizes, true);
|
|
16
|
+
var badgeAppearances = (0, tslib_1.__spreadArray)([], badge_1.BadgeAppearances, true);
|
|
17
|
+
var badgeIconPositions = ['before', 'after'];
|
|
18
|
+
var BadgeNoBorder = badge_1.Badge.customize({
|
|
19
|
+
borderColor: 'transparent',
|
|
20
|
+
borderWidth: 0,
|
|
21
|
+
});
|
|
22
|
+
var StyledBadge = badge_1.Badge.customize({
|
|
23
|
+
backgroundColor: 'yellow',
|
|
24
|
+
borderColor: '#f09',
|
|
25
|
+
borderWidth: 4,
|
|
26
|
+
});
|
|
27
|
+
var BasicBadge = function () {
|
|
28
|
+
var _a = (0, react_1.useState)('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
|
|
29
|
+
var _b = (0, react_1.useState)('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
|
|
30
|
+
var _c = (0, react_1.useState)('circular'), shape = _c[0], setShape = _c[1];
|
|
31
|
+
var _d = (0, react_1.useState)('medium'), size = _d[0], setSize = _d[1];
|
|
32
|
+
var _e = (0, react_1.useState)(false), showIcon = _e[0], setShowIcon = _e[1];
|
|
33
|
+
var _f = (0, react_1.useState)('before'), iconPosition = _f[0], setIconPosition = _f[1];
|
|
34
|
+
var onBadgeAppearanceChange = (0, react_1.useCallback)(function (value) { return setBadgeAppearance(value); }, []);
|
|
35
|
+
var onBadgeColorChange = (0, react_1.useCallback)(function (value) { return setBadgeColor(value); }, []);
|
|
36
|
+
var onShapeChange = (0, react_1.useCallback)(function (value) { return setShape(value); }, []);
|
|
37
|
+
var onSizeChange = (0, react_1.useCallback)(function (value) { return setSize(value); }, []);
|
|
38
|
+
var onIconPositionChange = (0, react_1.useCallback)(function (value) { return setIconPosition(value); }, []);
|
|
39
|
+
var svgProps = {
|
|
40
|
+
src: test_svg_1.default,
|
|
41
|
+
viewBox: '0 0 500 500',
|
|
42
|
+
};
|
|
43
|
+
var fontBuiltInProps = {
|
|
44
|
+
fontFamily: 'Arial',
|
|
45
|
+
codepoint: 0x2663,
|
|
46
|
+
fontSize: 16,
|
|
47
|
+
};
|
|
48
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
49
|
+
var iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
50
|
+
var badgeConfig = {
|
|
51
|
+
appearance: badgeAppearance,
|
|
52
|
+
color: badgeColor,
|
|
53
|
+
size: size,
|
|
54
|
+
shape: shape,
|
|
55
|
+
};
|
|
56
|
+
return (react_1.default.createElement(react_native_1.View, null,
|
|
57
|
+
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
|
|
58
|
+
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
|
|
59
|
+
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
|
|
60
|
+
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
|
|
61
|
+
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
62
|
+
react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
|
|
63
|
+
"Set ",
|
|
64
|
+
showIcon ? ' Hide icon' : ' Show icon'),
|
|
65
|
+
react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
|
|
66
|
+
svgIconsEnabled && showIcon ? (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig), "Basic badge")),
|
|
67
|
+
react_1.default.createElement(react_native_1.Text, null, "Size"),
|
|
68
|
+
react_1.default.createElement(badge_1.Badge, { size: "tiny", shape: "circular" }),
|
|
69
|
+
react_1.default.createElement(badge_1.Badge, { size: "extraSmall", shape: "circular" }),
|
|
70
|
+
react_1.default.createElement(badge_1.Badge, { size: "small" }, "Small"),
|
|
71
|
+
react_1.default.createElement(badge_1.Badge, { size: "medium" }, "Medium"),
|
|
72
|
+
react_1.default.createElement(badge_1.Badge, { size: "large" }, "Large"),
|
|
73
|
+
react_1.default.createElement(badge_1.Badge, { size: "extraLarge" }, "Extra Large"),
|
|
74
|
+
svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
75
|
+
react_1.default.createElement(react_native_1.Text, null, "Badge with icon"),
|
|
76
|
+
react_1.default.createElement(badge_1.Badge, { icon: { svgSource: svgProps }, iconPosition: "after" },
|
|
77
|
+
"Badge with",
|
|
78
|
+
react_1.default.createElement(react_native_1.Image, { source: { uri: styles_1.satyaPhotoUrl }, style: { width: 20, height: 20 } }),
|
|
79
|
+
react_1.default.createElement(react_native_1.Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
|
|
80
|
+
react_1.default.createElement(badge_1.Badge, { appearance: "outline", icon: iconProps }),
|
|
81
|
+
react_1.default.createElement(badge_1.Badge, { icon: { fontSource: (0, tslib_1.__assign)({}, fontBuiltInProps), color: '#fff' } }, "Badge with icon"),
|
|
82
|
+
react_1.default.createElement(react_native_1.Text, null, "Customized Badge"),
|
|
83
|
+
react_1.default.createElement(BadgeNoBorder, { appearance: "outline", icon: iconProps }))),
|
|
84
|
+
react_1.default.createElement(StyledBadge, { appearance: "outline" }, "Styled badge")));
|
|
85
|
+
};
|
|
86
|
+
exports.BasicBadge = BasicBadge;
|
|
87
|
+
//# sourceMappingURL=BasicBadgeTest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +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,iBAsBpC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CounterBadgeTest = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
6
|
+
var react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
7
|
+
var react_native_1 = require("react-native");
|
|
8
|
+
var badge_1 = require("@fluentui-react-native/badge");
|
|
9
|
+
var test_svg_1 = (0, tslib_1.__importDefault)(require("../../FluentTester/test-data/test.svg"));
|
|
10
|
+
var CounterBadgeTest = function () {
|
|
11
|
+
var svgProps = {
|
|
12
|
+
src: test_svg_1.default,
|
|
13
|
+
viewBox: '0 0 500 500',
|
|
14
|
+
};
|
|
15
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
16
|
+
return (react_1.default.createElement(react_native_1.View, null,
|
|
17
|
+
react_1.default.createElement(react_native_1.Text, null, "Here should be no Badge:"),
|
|
18
|
+
react_1.default.createElement(badge_1.CounterBadge, { count: 0 }),
|
|
19
|
+
react_1.default.createElement(react_native_1.Text, null, "And here is the Badge with showZero = true"),
|
|
20
|
+
react_1.default.createElement(badge_1.CounterBadge, { count: 0, showZero: true }),
|
|
21
|
+
react_1.default.createElement(badge_1.CounterBadge, { color: "informative", count: 777 }),
|
|
22
|
+
react_1.default.createElement(badge_1.CounterBadge, { color: "important", overflowCount: 1000, count: 777 }),
|
|
23
|
+
react_1.default.createElement(badge_1.CounterBadge, { color: "danger", overflowCount: 1000, count: 1500 }),
|
|
24
|
+
react_1.default.createElement(badge_1.CounterBadge, { count: 13 }),
|
|
25
|
+
react_1.default.createElement(badge_1.CounterBadge, { count: 13 }, "CounterBadge"),
|
|
26
|
+
svgIconsEnabled && react_1.default.createElement(badge_1.CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
|
|
27
|
+
};
|
|
28
|
+
exports.CounterBadgeTest = CounterBadgeTest;
|
|
29
|
+
//# sourceMappingURL=CounterBadgeTest.js.map
|
|
@@ -0,0 +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,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,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAC7D,8BAAC,oBAAY,IAAC,KAAK,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QAChF,8BAAC,oBAAY,IAAC,KAAK,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QAC9E,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,GAAiB;QACxC,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,mBAA6B;QACnD,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;AAtBW,QAAA,gBAAgB,oBAsB3B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/PresenceBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAoBrC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PresenceBadgeTest = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
6
|
+
var react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
7
|
+
var react_native_1 = require("react-native");
|
|
8
|
+
var badge_1 = require("@fluentui-react-native/badge");
|
|
9
|
+
var PresenceBadgeTest = function () {
|
|
10
|
+
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
11
|
+
return (react_1.default.createElement(react_native_1.View, null, svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
12
|
+
react_1.default.createElement(react_native_1.Text, null, "Presence Badge"),
|
|
13
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "available", size: "extraLarge" }),
|
|
14
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "available", outOfOffice: true, size: "large" }),
|
|
15
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "doNotDisturb", outOfOffice: true }),
|
|
16
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "away", size: "small" }),
|
|
17
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "busy", size: "tiny" }),
|
|
18
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "offline" }),
|
|
19
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "outOfOffice" }),
|
|
20
|
+
react_1.default.createElement(badge_1.PresenceBadge, { status: "away" })))));
|
|
21
|
+
};
|
|
22
|
+
exports.PresenceBadgeTest = PresenceBadgeTest;
|
|
23
|
+
//# sourceMappingURL=PresenceBadgeTest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/PresenceBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6DAA0B;AAC1B,6CAAoD;AACpD,sDAA6D;AAEtD,IAAM,iBAAiB,GAA4B;IACxD,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,QACF,eAAe,IAAI,CAClB;QACE,8BAAC,mBAAI,yBAAsB;QAC3B,8BAAC,qBAAa,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,YAAY,GAAG;QACtD,8BAAC,qBAAa,IAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG;QACpE,8BAAC,qBAAa,IAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAE,IAAI,GAAI;QAC1D,8BAAC,qBAAa,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAG;QAC5C,8BAAC,qBAAa,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG;QAC3C,8BAAC,qBAAa,IAAC,MAAM,EAAC,SAAS,GAAG;QAClC,8BAAC,qBAAa,IAAC,MAAM,EAAC,aAAa,GAAG;QACtC,8BAAC,qBAAa,IAAC,MAAM,EAAC,MAAM,GAAG,CAC9B,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,iBAAiB,qBAoB5B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
|
-
"version": "0.83.
|
|
3
|
+
"version": "0.83.2",
|
|
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>",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
|
|
39
39
|
"@fluentui-react-native/apple-theme": ">=0.13.2 <1.0.0",
|
|
40
|
-
"@fluentui-react-native/avatar": "^1.1.
|
|
41
|
-
"@fluentui-react-native/badge": ">=0.1.
|
|
40
|
+
"@fluentui-react-native/avatar": "^1.1.34",
|
|
41
|
+
"@fluentui-react-native/badge": ">=0.1.19 <1.0.0",
|
|
42
42
|
"@fluentui-react-native/button": ">=0.24.14 <1.0.0",
|
|
43
43
|
"@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
|
|
44
44
|
"@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
|
|
@@ -1,186 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useState, useCallback } from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
3
2
|
import { BADGE_TESTPAGE } from './consts';
|
|
4
3
|
import { Test, TestSection, PlatformStatus } from '../Test';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
Badge,
|
|
9
|
-
PresenceBadge,
|
|
10
|
-
BadgeAppearance,
|
|
11
|
-
BadgeAppearances,
|
|
12
|
-
BadgeColor,
|
|
13
|
-
BadgeColors,
|
|
14
|
-
BadgeShape,
|
|
15
|
-
BadgeShapes,
|
|
16
|
-
BadgeSize,
|
|
17
|
-
BadgeSizes,
|
|
18
|
-
BadgeIconPosition,
|
|
19
|
-
} from '@fluentui-react-native/badge';
|
|
20
|
-
import { SvgIconProps } from '@fluentui-react-native/icon';
|
|
21
|
-
import { StyledPicker } from '../Common/StyledPicker';
|
|
22
|
-
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
23
|
-
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
24
|
-
import { ToggleButton } from '@fluentui/react-native';
|
|
25
|
-
|
|
26
|
-
const badgeColors: BadgeColor[] = [...BadgeColors];
|
|
27
|
-
const badgeShapes: BadgeShape[] = [...BadgeShapes];
|
|
28
|
-
const badgeSizes: BadgeSize[] = [...BadgeSizes];
|
|
29
|
-
const badgeAppearances: BadgeAppearance[] = [...BadgeAppearances];
|
|
30
|
-
const badgeIconPositions = ['before', 'after'];
|
|
31
|
-
|
|
32
|
-
const StyledBadge = Badge.customize({
|
|
33
|
-
backgroundColor: 'yellow',
|
|
34
|
-
borderColor: '#f09',
|
|
35
|
-
borderWidth: 4,
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
export const BasicBadge: React.FunctionComponent = () => {
|
|
39
|
-
const [badgeAppearance, setBadgeAppearance] = useState<BadgeAppearance>('filled');
|
|
40
|
-
const [badgeColor, setBadgeColor] = useState<BadgeColor>('brand');
|
|
41
|
-
const [shape, setShape] = useState<BadgeShape>('circular');
|
|
42
|
-
const [size, setSize] = useState<BadgeSize>('medium');
|
|
43
|
-
const [showIcon, setShowIcon] = useState(false);
|
|
44
|
-
const [iconPosition, setIconPosition] = useState<BadgeIconPosition>('before');
|
|
45
|
-
|
|
46
|
-
const onBadgeAppearanceChange = useCallback((value) => setBadgeAppearance(value), []);
|
|
47
|
-
const onBadgeColorChange = useCallback((value) => setBadgeColor(value), []);
|
|
48
|
-
const onShapeChange = useCallback((value) => setShape(value), []);
|
|
49
|
-
const onSizeChange = useCallback((value) => setSize(value), []);
|
|
50
|
-
const onIconPositionChange = useCallback((value) => setIconPosition(value), []);
|
|
51
|
-
|
|
52
|
-
const svgProps: SvgIconProps = {
|
|
53
|
-
src: TestSvg,
|
|
54
|
-
viewBox: '0 0 500 500',
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const fontBuiltInProps = {
|
|
58
|
-
fontFamily: 'Arial',
|
|
59
|
-
codepoint: 0x2663,
|
|
60
|
-
fontSize: 16,
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
64
|
-
const iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
65
|
-
const badgeConfig = {
|
|
66
|
-
appearance: badgeAppearance,
|
|
67
|
-
color: badgeColor,
|
|
68
|
-
size,
|
|
69
|
-
shape,
|
|
70
|
-
};
|
|
71
|
-
const badgeContent = size !== 'tiny' && size !== 'extraSmall' ? 'Basic badge' : '';
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<View>
|
|
75
|
-
<View style={{ flexDirection: 'row' }}>
|
|
76
|
-
<View>
|
|
77
|
-
<StyledPicker
|
|
78
|
-
prompt="Badge appearance"
|
|
79
|
-
selected={badgeAppearance}
|
|
80
|
-
onChange={onBadgeAppearanceChange}
|
|
81
|
-
collection={badgeAppearances}
|
|
82
|
-
/>
|
|
83
|
-
<StyledPicker prompt="Badge color" selected={badgeColor} onChange={onBadgeColorChange} collection={badgeColors} />
|
|
84
|
-
<StyledPicker prompt="Shape" selected={shape} onChange={onShapeChange} collection={badgeShapes} />
|
|
85
|
-
<StyledPicker prompt="Size" selected={size} onChange={onSizeChange} collection={badgeSizes} />
|
|
86
|
-
{svgIconsEnabled && (
|
|
87
|
-
<>
|
|
88
|
-
<ToggleButton onClick={() => setShowIcon(!showIcon)} checked={showIcon}>
|
|
89
|
-
Set {showIcon ? ' Hide icon' : ' Show icon'}
|
|
90
|
-
</ToggleButton>
|
|
91
|
-
<StyledPicker
|
|
92
|
-
prompt="Icon position"
|
|
93
|
-
selected={iconPosition}
|
|
94
|
-
onChange={onIconPositionChange}
|
|
95
|
-
collection={badgeIconPositions}
|
|
96
|
-
/>
|
|
97
|
-
</>
|
|
98
|
-
)}
|
|
99
|
-
</View>
|
|
100
|
-
<View style={{ paddingHorizontal: 40, ...commonTestStyles.vmargin }}>
|
|
101
|
-
{svgIconsEnabled && showIcon ? (
|
|
102
|
-
<Badge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
|
|
103
|
-
{badgeContent}
|
|
104
|
-
</Badge>
|
|
105
|
-
) : (
|
|
106
|
-
<Badge {...badgeConfig}>{badgeContent}</Badge>
|
|
107
|
-
)}
|
|
108
|
-
</View>
|
|
109
|
-
</View>
|
|
110
|
-
<View style={{ flexDirection: 'row' }}>
|
|
111
|
-
{svgIconsEnabled && (
|
|
112
|
-
<>
|
|
113
|
-
<View>
|
|
114
|
-
<Badge size="small" icon={{ svgSource: svgProps }}></Badge>
|
|
115
|
-
<Badge size="medium" icon={{ svgSource: svgProps }}></Badge>
|
|
116
|
-
<Badge size="large" icon={{ svgSource: svgProps }}></Badge>
|
|
117
|
-
<Badge size="extraLarge" icon={{ svgSource: svgProps }}></Badge>
|
|
118
|
-
</View>
|
|
119
|
-
<View>
|
|
120
|
-
<Badge size="small" icon={{ svgSource: svgProps }}>
|
|
121
|
-
999+
|
|
122
|
-
</Badge>
|
|
123
|
-
<Badge size="medium" icon={{ svgSource: svgProps }}>
|
|
124
|
-
999+
|
|
125
|
-
</Badge>
|
|
126
|
-
<Badge size="large" icon={{ svgSource: svgProps }}>
|
|
127
|
-
999+
|
|
128
|
-
</Badge>
|
|
129
|
-
<Badge size="extraLarge" icon={{ svgSource: svgProps }}>
|
|
130
|
-
999+
|
|
131
|
-
</Badge>
|
|
132
|
-
</View>
|
|
133
|
-
<View>
|
|
134
|
-
<Badge icon={{ svgSource: svgProps }} />
|
|
135
|
-
<Badge icon={{ svgSource: svgProps }}>Icon before by default</Badge>
|
|
136
|
-
<Badge icon={{ svgSource: svgProps }} iconPosition="before">
|
|
137
|
-
Icon before
|
|
138
|
-
</Badge>
|
|
139
|
-
<Badge icon={{ svgSource: svgProps }} iconPosition="after">
|
|
140
|
-
Icon after
|
|
141
|
-
</Badge>
|
|
142
|
-
</View>
|
|
143
|
-
</>
|
|
144
|
-
)}
|
|
145
|
-
|
|
146
|
-
<Text>Size</Text>
|
|
147
|
-
<Badge size="tiny" shape="circular" />
|
|
148
|
-
<Badge size="extraSmall" shape="circular" />
|
|
149
|
-
<Badge size="small">Small</Badge>
|
|
150
|
-
<Badge size="medium">Medium</Badge>
|
|
151
|
-
<Badge size="large">Large</Badge>
|
|
152
|
-
<Badge size="extraLarge">Extra Large</Badge>
|
|
153
|
-
</View>
|
|
154
|
-
{svgIconsEnabled && (
|
|
155
|
-
<>
|
|
156
|
-
<Text>Badge with icon</Text>
|
|
157
|
-
<Badge icon={{ svgSource: svgProps }} iconPosition="after">
|
|
158
|
-
<Image source={{ uri: satyaPhotoUrl }} style={{ width: 20, height: 20 }} />
|
|
159
|
-
Badge with
|
|
160
|
-
<Image source={{ uri: satyaPhotoUrl }} style={{ width: 20, height: 20 }} />
|
|
161
|
-
<Text style={{ backgroundColor: 'yellow' }}>optional content</Text>
|
|
162
|
-
</Badge>
|
|
163
|
-
<Badge appearance="outline" icon={iconProps} />
|
|
164
|
-
<Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }}>Badge with icon</Badge>
|
|
165
|
-
</>
|
|
166
|
-
)}
|
|
167
|
-
<StyledBadge appearance="outline">Styled badge</StyledBadge>
|
|
168
|
-
{svgIconsEnabled && (
|
|
169
|
-
<>
|
|
170
|
-
<Text>Presence Badge</Text>
|
|
171
|
-
<PresenceBadge status="available" size="extraLarge" />
|
|
172
|
-
<PresenceBadge status="available" outOfOffice={true} size="large" />
|
|
173
|
-
<PresenceBadge status="doNotDisturb" outOfOffice={true} />
|
|
174
|
-
<PresenceBadge status="away" size="small" />
|
|
175
|
-
<PresenceBadge status="busy" size="tiny" />
|
|
176
|
-
<PresenceBadge status="offline" />
|
|
177
|
-
<PresenceBadge status="outOfOffice" />
|
|
178
|
-
<PresenceBadge status="away" />
|
|
179
|
-
</>
|
|
180
|
-
)}
|
|
181
|
-
</View>
|
|
182
|
-
);
|
|
183
|
-
};
|
|
4
|
+
import { BasicBadge } from './BasicBadgeTest';
|
|
5
|
+
import { CounterBadgeTest } from './CounterBadgeTest';
|
|
6
|
+
import { PresenceBadgeTest } from './PresenceBadgeTest';
|
|
184
7
|
|
|
185
8
|
const badgeSections: TestSection[] = [
|
|
186
9
|
{
|
|
@@ -188,6 +11,14 @@ const badgeSections: TestSection[] = [
|
|
|
188
11
|
testID: BADGE_TESTPAGE,
|
|
189
12
|
component: BasicBadge,
|
|
190
13
|
},
|
|
14
|
+
{
|
|
15
|
+
name: 'Counter Badge',
|
|
16
|
+
component: CounterBadgeTest,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: 'Presence Badge',
|
|
20
|
+
component: PresenceBadgeTest,
|
|
21
|
+
},
|
|
191
22
|
];
|
|
192
23
|
|
|
193
24
|
export const BadgeTest: React.FunctionComponent = () => {
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
+
import React, { useState, useCallback } from 'react';
|
|
3
|
+
import { View, Platform, Text, Image } from 'react-native';
|
|
4
|
+
import {
|
|
5
|
+
Badge,
|
|
6
|
+
BadgeAppearance,
|
|
7
|
+
BadgeAppearances,
|
|
8
|
+
BadgeColor,
|
|
9
|
+
BadgeColors,
|
|
10
|
+
BadgeShape,
|
|
11
|
+
BadgeShapes,
|
|
12
|
+
BadgeSize,
|
|
13
|
+
BadgeSizes,
|
|
14
|
+
BadgeIconPosition,
|
|
15
|
+
} from '@fluentui-react-native/badge';
|
|
16
|
+
import { SvgIconProps } from '@fluentui-react-native/icon';
|
|
17
|
+
import { StyledPicker } from '../Common/StyledPicker';
|
|
18
|
+
import { satyaPhotoUrl } from './../PersonaCoin/styles';
|
|
19
|
+
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
20
|
+
import { ToggleButton } from '@fluentui/react-native';
|
|
21
|
+
|
|
22
|
+
const badgeColors: BadgeColor[] = [...BadgeColors];
|
|
23
|
+
const badgeShapes: BadgeShape[] = [...BadgeShapes];
|
|
24
|
+
const badgeSizes: BadgeSize[] = [...BadgeSizes];
|
|
25
|
+
const badgeAppearances: BadgeAppearance[] = [...BadgeAppearances];
|
|
26
|
+
const badgeIconPositions = ['before', 'after'];
|
|
27
|
+
|
|
28
|
+
const BadgeNoBorder = Badge.customize({
|
|
29
|
+
borderColor: 'transparent',
|
|
30
|
+
borderWidth: 0,
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const StyledBadge = Badge.customize({
|
|
34
|
+
backgroundColor: 'yellow',
|
|
35
|
+
borderColor: '#f09',
|
|
36
|
+
borderWidth: 4,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
export const BasicBadge: React.FunctionComponent = () => {
|
|
40
|
+
const [badgeAppearance, setBadgeAppearance] = useState<BadgeAppearance>('filled');
|
|
41
|
+
const [badgeColor, setBadgeColor] = useState<BadgeColor>('brand');
|
|
42
|
+
const [shape, setShape] = useState<BadgeShape>('circular');
|
|
43
|
+
const [size, setSize] = useState<BadgeSize>('medium');
|
|
44
|
+
const [showIcon, setShowIcon] = useState(false);
|
|
45
|
+
const [iconPosition, setIconPosition] = useState<BadgeIconPosition>('before');
|
|
46
|
+
|
|
47
|
+
const onBadgeAppearanceChange = useCallback((value) => setBadgeAppearance(value), []);
|
|
48
|
+
const onBadgeColorChange = useCallback((value) => setBadgeColor(value), []);
|
|
49
|
+
const onShapeChange = useCallback((value) => setShape(value), []);
|
|
50
|
+
const onSizeChange = useCallback((value) => setSize(value), []);
|
|
51
|
+
const onIconPositionChange = useCallback((value) => setIconPosition(value), []);
|
|
52
|
+
|
|
53
|
+
const svgProps: SvgIconProps = {
|
|
54
|
+
src: TestSvg,
|
|
55
|
+
viewBox: '0 0 500 500',
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const fontBuiltInProps = {
|
|
59
|
+
fontFamily: 'Arial',
|
|
60
|
+
codepoint: 0x2663,
|
|
61
|
+
fontSize: 16,
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
65
|
+
const iconProps = { svgSource: svgProps, width: 20, height: 20 };
|
|
66
|
+
const badgeConfig = {
|
|
67
|
+
appearance: badgeAppearance,
|
|
68
|
+
color: badgeColor,
|
|
69
|
+
size,
|
|
70
|
+
shape,
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<View>
|
|
75
|
+
<StyledPicker prompt="Badge appearance" selected={badgeAppearance} onChange={onBadgeAppearanceChange} collection={badgeAppearances} />
|
|
76
|
+
<StyledPicker prompt="Badge color" selected={badgeColor} onChange={onBadgeColorChange} collection={badgeColors} />
|
|
77
|
+
<StyledPicker prompt="Shape" selected={shape} onChange={onShapeChange} collection={badgeShapes} />
|
|
78
|
+
<StyledPicker prompt="Size" selected={size} onChange={onSizeChange} collection={badgeSizes} />
|
|
79
|
+
{svgIconsEnabled && (
|
|
80
|
+
<>
|
|
81
|
+
<ToggleButton onClick={() => setShowIcon(!showIcon)} checked={showIcon}>
|
|
82
|
+
Set {showIcon ? ' Hide icon' : ' Show icon'}
|
|
83
|
+
</ToggleButton>
|
|
84
|
+
<StyledPicker prompt="Icon position" selected={iconPosition} onChange={onIconPositionChange} collection={badgeIconPositions} />
|
|
85
|
+
</>
|
|
86
|
+
)}
|
|
87
|
+
|
|
88
|
+
{svgIconsEnabled && showIcon ? (
|
|
89
|
+
<Badge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
|
|
90
|
+
Basic badge
|
|
91
|
+
</Badge>
|
|
92
|
+
) : (
|
|
93
|
+
<Badge {...badgeConfig}>Basic badge</Badge>
|
|
94
|
+
)}
|
|
95
|
+
|
|
96
|
+
<Text>Size</Text>
|
|
97
|
+
<Badge size="tiny" shape="circular" />
|
|
98
|
+
<Badge size="extraSmall" shape="circular" />
|
|
99
|
+
<Badge size="small">Small</Badge>
|
|
100
|
+
<Badge size="medium">Medium</Badge>
|
|
101
|
+
<Badge size="large">Large</Badge>
|
|
102
|
+
<Badge size="extraLarge">Extra Large</Badge>
|
|
103
|
+
{svgIconsEnabled && (
|
|
104
|
+
<>
|
|
105
|
+
<Text>Badge with icon</Text>
|
|
106
|
+
<Badge icon={{ svgSource: svgProps }} iconPosition="after">
|
|
107
|
+
Badge with
|
|
108
|
+
<Image source={{ uri: satyaPhotoUrl }} style={{ width: 20, height: 20 }} />
|
|
109
|
+
<Text style={{ backgroundColor: 'yellow' }}>optional content</Text>
|
|
110
|
+
</Badge>
|
|
111
|
+
<Badge appearance="outline" icon={iconProps} />
|
|
112
|
+
<Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }}>Badge with icon</Badge>
|
|
113
|
+
<Text>Customized Badge</Text>
|
|
114
|
+
<BadgeNoBorder appearance="outline" icon={iconProps} />
|
|
115
|
+
</>
|
|
116
|
+
)}
|
|
117
|
+
<StyledBadge appearance="outline">Styled badge</StyledBadge>
|
|
118
|
+
</View>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { View, Platform, Text } from 'react-native';
|
|
4
|
+
import { CounterBadge } from '@fluentui-react-native/badge';
|
|
5
|
+
import { SvgIconProps } from '@fluentui-react-native/icon';
|
|
6
|
+
import TestSvg from '../../FluentTester/test-data/test.svg';
|
|
7
|
+
|
|
8
|
+
export const CounterBadgeTest: React.FunctionComponent = () => {
|
|
9
|
+
const svgProps: SvgIconProps = {
|
|
10
|
+
src: TestSvg,
|
|
11
|
+
viewBox: '0 0 500 500',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<View>
|
|
18
|
+
<Text>Here should be no Badge:</Text>
|
|
19
|
+
<CounterBadge count={0}></CounterBadge>
|
|
20
|
+
<Text>And here is the Badge with showZero = true</Text>
|
|
21
|
+
<CounterBadge count={0} showZero={true}></CounterBadge>
|
|
22
|
+
<CounterBadge color="informative" count={777}></CounterBadge>
|
|
23
|
+
<CounterBadge color="important" overflowCount={1000} count={777}></CounterBadge>
|
|
24
|
+
<CounterBadge color="danger" overflowCount={1000} count={1500}></CounterBadge>
|
|
25
|
+
<CounterBadge count={13}></CounterBadge>
|
|
26
|
+
<CounterBadge count={13}>CounterBadge</CounterBadge>
|
|
27
|
+
{svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}
|
|
28
|
+
</View>
|
|
29
|
+
);
|
|
30
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { View, Platform, Text } from 'react-native';
|
|
4
|
+
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
5
|
+
|
|
6
|
+
export const PresenceBadgeTest: React.FunctionComponent = () => {
|
|
7
|
+
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<View>
|
|
11
|
+
{svgIconsEnabled && (
|
|
12
|
+
<>
|
|
13
|
+
<Text>Presence Badge</Text>
|
|
14
|
+
<PresenceBadge status="available" size="extraLarge" />
|
|
15
|
+
<PresenceBadge status="available" outOfOffice={true} size="large" />
|
|
16
|
+
<PresenceBadge status="doNotDisturb" outOfOffice={true} />
|
|
17
|
+
<PresenceBadge status="away" size="small" />
|
|
18
|
+
<PresenceBadge status="busy" size="tiny" />
|
|
19
|
+
<PresenceBadge status="offline" />
|
|
20
|
+
<PresenceBadge status="outOfOffice" />
|
|
21
|
+
<PresenceBadge status="away" />
|
|
22
|
+
</>
|
|
23
|
+
)}
|
|
24
|
+
</View>
|
|
25
|
+
);
|
|
26
|
+
};
|