@fluentui-react-native/tester 0.59.39 → 0.59.40
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 +22 -1
- package/CHANGELOG.md +11 -2
- package/lib/FluentTester/TestComponents/Avatar/CustomizedAvatar.d.ts.map +1 -1
- package/lib/FluentTester/TestComponents/Avatar/CustomizedAvatar.js +8 -13
- package/lib/FluentTester/TestComponents/Avatar/CustomizedAvatar.js.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.d.ts.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js +8 -13
- package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js.map +1 -1
- package/package.json +2 -2
- package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx +9 -15
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue, 10 May 2022
|
|
5
|
+
"date": "Tue, 10 May 2022 18:33:09 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/tester_v0.59.40",
|
|
7
|
+
"version": "0.59.40",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "v.kozova13@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"commit": "4e9f60254753ef5f7d297b197b10f35e638308cf",
|
|
14
|
+
"comment": "Added font and color tokens"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/tester",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/experimental-avatar to v0.14.26",
|
|
20
|
+
"commit": "4e9f60254753ef5f7d297b197b10f35e638308cf"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 10 May 2022 17:20:22 GMT",
|
|
6
27
|
"tag": "@fluentui-react-native/tester_v0.59.39",
|
|
7
28
|
"version": "0.59.39",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/tester
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue, 10 May 2022
|
|
3
|
+
This log was last generated on Tue, 10 May 2022 18:33:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.59.40
|
|
8
|
+
|
|
9
|
+
Tue, 10 May 2022 18:33:09 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Added font and color tokens (v.kozova13@gmail.com)
|
|
14
|
+
- Bump @fluentui-react-native/experimental-avatar to v0.14.26
|
|
15
|
+
|
|
7
16
|
## 0.59.39
|
|
8
17
|
|
|
9
|
-
Tue, 10 May 2022 17:20:
|
|
18
|
+
Tue, 10 May 2022 17:20:22 GMT
|
|
10
19
|
|
|
11
20
|
### Patches
|
|
12
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomizedAvatar.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomizedAvatar.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAqHlC,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
|
|
|
3
3
|
import { Switch, View, Text, TextInput } from 'react-native';
|
|
4
4
|
import { Slider } from '../Common/Slider';
|
|
5
5
|
import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
|
|
6
|
-
import { useTheme } from '@fluentui-react-native/theme-types';
|
|
7
6
|
import { AlignmentPicker } from '../Common/AlignmentPicker';
|
|
8
7
|
import { commonTestStyles as commonStyles } from '../Common/styles';
|
|
9
8
|
export var CustomizeUsage = function () {
|
|
@@ -15,14 +14,10 @@ export var CustomizeUsage = function () {
|
|
|
15
14
|
var _f = React.useState(14), initialsSize = _f[0], setInitialsSize = _f[1];
|
|
16
15
|
var _g = React.useState(), horizontalAlignment = _g[0], setHorizontalAlignment = _g[1];
|
|
17
16
|
var _h = React.useState(), verticalAlignment = _h[0], setVerticalAlignment = _h[1];
|
|
18
|
-
var _j = React.useState('red'),
|
|
17
|
+
var _j = React.useState('red'), borderColor = _j[0], setBorderColor = _j[1];
|
|
19
18
|
var _k = React.useState(undefined), ringBackgroundColor = _k[0], setRingBackgroundColor = _k[1];
|
|
20
19
|
var _l = React.useState(true), showRing = _l[0], setShowRing = _l[1];
|
|
21
20
|
var _m = React.useState(false), transparent = _m[0], setTransparent = _m[1];
|
|
22
|
-
var theme = useTheme();
|
|
23
|
-
var textBoxBorderStyle = {
|
|
24
|
-
borderColor: theme.colors.inputBorder,
|
|
25
|
-
};
|
|
26
21
|
var CustomizedAvatar = React.useMemo(function () {
|
|
27
22
|
var tokens = {
|
|
28
23
|
backgroundColor: coinColor,
|
|
@@ -33,9 +28,10 @@ export var CustomizeUsage = function () {
|
|
|
33
28
|
initialsSize: initialsSize,
|
|
34
29
|
width: size,
|
|
35
30
|
height: size,
|
|
31
|
+
borderColor: borderColor,
|
|
36
32
|
};
|
|
37
33
|
return JSAvatar.customize(tokens);
|
|
38
|
-
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size]);
|
|
34
|
+
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size, borderColor]);
|
|
39
35
|
return (React.createElement(View, { style: commonStyles.root },
|
|
40
36
|
React.createElement(View, { style: commonStyles.settings },
|
|
41
37
|
React.createElement(View, { style: commonStyles.switch },
|
|
@@ -47,16 +43,16 @@ export var CustomizeUsage = function () {
|
|
|
47
43
|
React.createElement(View, { style: commonStyles.switch },
|
|
48
44
|
React.createElement(Text, null, "Transparent Ring"),
|
|
49
45
|
React.createElement(Switch, { value: transparent, onValueChange: setTransparent })),
|
|
50
|
-
React.createElement(TextInput, { style: [commonStyles.textBox
|
|
46
|
+
React.createElement(TextInput, { style: [commonStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
51
47
|
setCoinColor(e.nativeEvent.text);
|
|
52
48
|
} }),
|
|
53
|
-
React.createElement(TextInput, { style: [commonStyles.textBox
|
|
49
|
+
React.createElement(TextInput, { style: [commonStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
54
50
|
setTextColor(e.nativeEvent.text);
|
|
55
51
|
} }),
|
|
56
|
-
React.createElement(TextInput, { style: [commonStyles.textBox
|
|
57
|
-
|
|
52
|
+
React.createElement(TextInput, { style: [commonStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
53
|
+
setBorderColor(e.nativeEvent.text);
|
|
58
54
|
} }),
|
|
59
|
-
React.createElement(TextInput, { style: [commonStyles.textBox
|
|
55
|
+
React.createElement(TextInput, { style: [commonStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
60
56
|
setRingBackgroundColor(e.nativeEvent.text);
|
|
61
57
|
} }),
|
|
62
58
|
React.createElement(AlignmentPicker, { style: commonStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
|
|
@@ -69,7 +65,6 @@ export var CustomizeUsage = function () {
|
|
|
69
65
|
React.createElement(Slider, { minimum: 5, maximum: 50, initialValue: 14, style: commonStyles.vmargin, onChange: setInitialsSize })),
|
|
70
66
|
React.createElement(CustomizedAvatar, { active: "active", activeAppearance: "ring", initials: "SB", accessibilityLabel: "Former CEO of Microsoft", badge: { status: 'blocked' }, src: showImage ? steveBallmerPhotoUrl : undefined, size: 56, ring: showRing
|
|
71
67
|
? {
|
|
72
|
-
ringColor: ringColor,
|
|
73
68
|
ringBackgroundColor: ringBackgroundColor,
|
|
74
69
|
ringThickness: 4,
|
|
75
70
|
innerGap: 4,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,4CAA4C,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomizedAvatar.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomizedAvatar.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAqHlC,CAAC"}
|
|
@@ -7,7 +7,6 @@ var experimental_avatar_1 = require("@fluentui-react-native/experimental-avatar"
|
|
|
7
7
|
var react_native_1 = require("react-native");
|
|
8
8
|
var Slider_1 = require("../Common/Slider");
|
|
9
9
|
var styles_1 = require("./../PersonaCoin/styles");
|
|
10
|
-
var theme_types_1 = require("@fluentui-react-native/theme-types");
|
|
11
10
|
var AlignmentPicker_1 = require("../Common/AlignmentPicker");
|
|
12
11
|
var styles_2 = require("../Common/styles");
|
|
13
12
|
var CustomizeUsage = function () {
|
|
@@ -19,14 +18,10 @@ var CustomizeUsage = function () {
|
|
|
19
18
|
var _f = React.useState(14), initialsSize = _f[0], setInitialsSize = _f[1];
|
|
20
19
|
var _g = React.useState(), horizontalAlignment = _g[0], setHorizontalAlignment = _g[1];
|
|
21
20
|
var _h = React.useState(), verticalAlignment = _h[0], setVerticalAlignment = _h[1];
|
|
22
|
-
var _j = React.useState('red'),
|
|
21
|
+
var _j = React.useState('red'), borderColor = _j[0], setBorderColor = _j[1];
|
|
23
22
|
var _k = React.useState(undefined), ringBackgroundColor = _k[0], setRingBackgroundColor = _k[1];
|
|
24
23
|
var _l = React.useState(true), showRing = _l[0], setShowRing = _l[1];
|
|
25
24
|
var _m = React.useState(false), transparent = _m[0], setTransparent = _m[1];
|
|
26
|
-
var theme = (0, theme_types_1.useTheme)();
|
|
27
|
-
var textBoxBorderStyle = {
|
|
28
|
-
borderColor: theme.colors.inputBorder,
|
|
29
|
-
};
|
|
30
25
|
var CustomizedAvatar = React.useMemo(function () {
|
|
31
26
|
var tokens = {
|
|
32
27
|
backgroundColor: coinColor,
|
|
@@ -37,9 +32,10 @@ var CustomizeUsage = function () {
|
|
|
37
32
|
initialsSize: initialsSize,
|
|
38
33
|
width: size,
|
|
39
34
|
height: size,
|
|
35
|
+
borderColor: borderColor,
|
|
40
36
|
};
|
|
41
37
|
return experimental_avatar_1.JSAvatar.customize(tokens);
|
|
42
|
-
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size]);
|
|
38
|
+
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size, borderColor]);
|
|
43
39
|
return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
|
|
44
40
|
React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
|
|
45
41
|
React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
|
|
@@ -51,16 +47,16 @@ var CustomizeUsage = function () {
|
|
|
51
47
|
React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
|
|
52
48
|
React.createElement(react_native_1.Text, null, "Transparent Ring"),
|
|
53
49
|
React.createElement(react_native_1.Switch, { value: transparent, onValueChange: setTransparent })),
|
|
54
|
-
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox
|
|
50
|
+
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
55
51
|
setCoinColor(e.nativeEvent.text);
|
|
56
52
|
} }),
|
|
57
|
-
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox
|
|
53
|
+
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
58
54
|
setTextColor(e.nativeEvent.text);
|
|
59
55
|
} }),
|
|
60
|
-
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox
|
|
61
|
-
|
|
56
|
+
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
57
|
+
setBorderColor(e.nativeEvent.text);
|
|
62
58
|
} }),
|
|
63
|
-
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox
|
|
59
|
+
React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
|
|
64
60
|
setRingBackgroundColor(e.nativeEvent.text);
|
|
65
61
|
} }),
|
|
66
62
|
React.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
|
|
@@ -73,7 +69,6 @@ var CustomizeUsage = function () {
|
|
|
73
69
|
React.createElement(Slider_1.Slider, { minimum: 5, maximum: 50, initialValue: 14, style: styles_2.commonTestStyles.vmargin, onChange: setInitialsSize })),
|
|
74
70
|
React.createElement(CustomizedAvatar, { active: "active", activeAppearance: "ring", initials: "SB", accessibilityLabel: "Former CEO of Microsoft", badge: { status: 'blocked' }, src: showImage ? styles_1.steveBallmerPhotoUrl : undefined, size: 56, ring: showRing
|
|
75
71
|
? {
|
|
76
|
-
ringColor: ringColor,
|
|
77
72
|
ringBackgroundColor: ringBackgroundColor,
|
|
78
73
|
ringThickness: 4,
|
|
79
74
|
innerGap: 4,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,kFAAqF;AACrF,
|
|
1
|
+
{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
|
-
"version": "0.59.
|
|
3
|
+
"version": "0.59.40",
|
|
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>",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@fluentui-react-native/button": ">=0.22.21 <1.0.0",
|
|
32
32
|
"@fluentui-react-native/default-theme": ">=0.10.3 <1.0.0",
|
|
33
33
|
"@fluentui-react-native/experimental-activity-indicator": ">=0.5.25 <1.0.0",
|
|
34
|
-
"@fluentui-react-native/experimental-avatar": ">=0.14.
|
|
34
|
+
"@fluentui-react-native/experimental-avatar": ">=0.14.26 <1.0.0",
|
|
35
35
|
"@fluentui-react-native/experimental-button": "0.15.22",
|
|
36
36
|
"@fluentui-react-native/experimental-checkbox": "0.11.4",
|
|
37
37
|
"@fluentui-react-native/experimental-drawer": ">=0.1.9 <1.0.0",
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { JSAvatar, IconAlignment } from '@fluentui-react-native/experimental-avatar';
|
|
3
|
-
import { Switch, View, Text, TextInput
|
|
3
|
+
import { Switch, View, Text, TextInput } from 'react-native';
|
|
4
4
|
import { Slider } from '../Common/Slider';
|
|
5
5
|
import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
|
|
6
|
-
import { useTheme } from '@fluentui-react-native/theme-types';
|
|
7
6
|
import { AlignmentPicker } from '../Common/AlignmentPicker';
|
|
8
7
|
import { commonTestStyles as commonStyles } from '../Common/styles';
|
|
9
8
|
|
|
@@ -17,16 +16,11 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
17
16
|
const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
|
|
18
17
|
const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
|
|
19
18
|
|
|
20
|
-
const [
|
|
19
|
+
const [borderColor, setBorderColor] = React.useState<string>('red');
|
|
21
20
|
const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
|
|
22
21
|
const [showRing, setShowRing] = React.useState<boolean>(true);
|
|
23
22
|
const [transparent, setTransparent] = React.useState<boolean>(false);
|
|
24
23
|
|
|
25
|
-
const theme = useTheme();
|
|
26
|
-
const textBoxBorderStyle: TextStyle = {
|
|
27
|
-
borderColor: theme.colors.inputBorder,
|
|
28
|
-
};
|
|
29
|
-
|
|
30
24
|
const CustomizedAvatar = React.useMemo(() => {
|
|
31
25
|
const tokens = {
|
|
32
26
|
backgroundColor: coinColor,
|
|
@@ -37,9 +31,10 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
37
31
|
initialsSize: initialsSize,
|
|
38
32
|
width: size,
|
|
39
33
|
height: size,
|
|
34
|
+
borderColor,
|
|
40
35
|
};
|
|
41
36
|
return JSAvatar.customize(tokens);
|
|
42
|
-
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size]);
|
|
37
|
+
}, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size, borderColor]);
|
|
43
38
|
|
|
44
39
|
return (
|
|
45
40
|
<View style={commonStyles.root}>
|
|
@@ -60,7 +55,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
60
55
|
</View>
|
|
61
56
|
|
|
62
57
|
<TextInput
|
|
63
|
-
style={[commonStyles.textBox
|
|
58
|
+
style={[commonStyles.textBox]}
|
|
64
59
|
placeholder="Background color"
|
|
65
60
|
blurOnSubmit={true}
|
|
66
61
|
onSubmitEditing={(e) => {
|
|
@@ -68,7 +63,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
68
63
|
}}
|
|
69
64
|
/>
|
|
70
65
|
<TextInput
|
|
71
|
-
style={[commonStyles.textBox
|
|
66
|
+
style={[commonStyles.textBox]}
|
|
72
67
|
placeholder="Initials text color"
|
|
73
68
|
blurOnSubmit={true}
|
|
74
69
|
onSubmitEditing={(e) => {
|
|
@@ -77,16 +72,16 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
77
72
|
/>
|
|
78
73
|
|
|
79
74
|
<TextInput
|
|
80
|
-
style={[commonStyles.textBox
|
|
75
|
+
style={[commonStyles.textBox]}
|
|
81
76
|
placeholder="Ring color"
|
|
82
77
|
blurOnSubmit={true}
|
|
83
78
|
onSubmitEditing={(e) => {
|
|
84
|
-
|
|
79
|
+
setBorderColor(e.nativeEvent.text);
|
|
85
80
|
}}
|
|
86
81
|
/>
|
|
87
82
|
|
|
88
83
|
<TextInput
|
|
89
|
-
style={[commonStyles.textBox
|
|
84
|
+
style={[commonStyles.textBox]}
|
|
90
85
|
placeholder="Ring background color"
|
|
91
86
|
blurOnSubmit={true}
|
|
92
87
|
onSubmitEditing={(e) => {
|
|
@@ -118,7 +113,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
|
|
|
118
113
|
ring={
|
|
119
114
|
showRing
|
|
120
115
|
? {
|
|
121
|
-
ringColor,
|
|
122
116
|
ringBackgroundColor,
|
|
123
117
|
ringThickness: 4,
|
|
124
118
|
innerGap: 4,
|