@fluentui-react-native/tester 0.150.2 → 0.150.3
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 +30 -1
- package/CHANGELOG.md +11 -2
- package/lib/fluent-tester/src/TestComponents/Svg/SvgTest.d.ts.map +1 -1
- package/lib/fluent-tester/src/TestComponents/Svg/SvgTest.js +52 -3
- package/lib/fluent-tester/src/TestComponents/Svg/SvgTest.js.map +1 -1
- package/lib-commonjs/fluent-tester/src/TestComponents/Svg/SvgTest.d.ts.map +1 -1
- package/lib-commonjs/fluent-tester/src/TestComponents/Svg/SvgTest.js +51 -2
- package/lib-commonjs/fluent-tester/src/TestComponents/Svg/SvgTest.js.map +1 -1
- package/package.json +3 -3
- package/src/TestComponents/Svg/SvgTest.tsx +109 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,36 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 21 Jun 2023 22:47:06 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/tester_v0.150.3",
|
|
7
|
+
"version": "0.150.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "63264034+warren-ms@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"commit": "4cb0e4687ceae674dc3a03b6ee561e2931bdcbaa",
|
|
14
|
+
"comment": "Add a custom SVG REPL so so you can paste or type in an svg and render it live! Add a test for a very fancy svg using lots of stuff Add a test for radial gradient"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "beachball",
|
|
20
|
+
"package": "@fluentui-react-native/tester",
|
|
21
|
+
"comment": "Bump @fluentui-react-native/experimental-shimmer to v0.10.1",
|
|
22
|
+
"commit": "0cec0e25053c838b99917cce0bc7627ef9f77f24"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui-react-native/tester",
|
|
27
|
+
"comment": "Bump @fluentui-react-native/tablist to v0.1.3",
|
|
28
|
+
"commit": "0cec0e25053c838b99917cce0bc7627ef9f77f24"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Mon, 19 Jun 2023 18:37:35 GMT",
|
|
6
35
|
"tag": "@fluentui-react-native/tester_v0.150.2",
|
|
7
36
|
"version": "0.150.2",
|
|
8
37
|
"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
|
|
3
|
+
This log was last generated on Wed, 21 Jun 2023 22:47:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.150.3
|
|
8
|
+
|
|
9
|
+
Wed, 21 Jun 2023 22:47:06 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/experimental-shimmer to v0.10.1
|
|
14
|
+
- Bump @fluentui-react-native/tablist to v0.1.3
|
|
15
|
+
|
|
7
16
|
## 0.150.2
|
|
8
17
|
|
|
9
|
-
Mon, 19 Jun 2023 18:35
|
|
18
|
+
Mon, 19 Jun 2023 18:37:35 GMT
|
|
10
19
|
|
|
11
20
|
### Patches
|
|
12
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SvgTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SvgTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2S/B,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAY3B,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { StyleSheet, Switch, Text, TextInput, View } from 'react-native';
|
|
4
|
+
import { ButtonV1 as Button, ToggleButton } from '@fluentui/react-native';
|
|
3
5
|
import { Separator } from '@fluentui/react-native';
|
|
4
|
-
import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, Use } from 'react-native-svg';
|
|
6
|
+
import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, SvgXml, Use, parse, } from 'react-native-svg';
|
|
5
7
|
import TestSvg from './Assets/accessible-icon-brands.svg';
|
|
6
8
|
import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts';
|
|
7
9
|
import { Test } from '../Test';
|
|
@@ -57,6 +59,15 @@ var RadialGradientTest = function () {
|
|
|
57
59
|
React.createElement(Stop, { offset: "1", stopColor: "red" }))),
|
|
58
60
|
React.createElement(Line, { x1: "0", y1: "0", x2: "9", y2: "9", stroke: "url(#grad2)", strokeWidth: "5" })));
|
|
59
61
|
};
|
|
62
|
+
var RadialGradientTransformTest = function () {
|
|
63
|
+
return (React.createElement(Svg, { width: 256, height: 256, viewBox: "0 0 48 48", fill: "none" },
|
|
64
|
+
React.createElement(Rect, { width: 48, height: 48, fill: "url(#paint0_radial_1533_187044)" }),
|
|
65
|
+
React.createElement(Rect, { x: 10, y: 10, width: 10, height: 10, fill: "red" }),
|
|
66
|
+
React.createElement(Defs, null,
|
|
67
|
+
React.createElement(RadialGradient, { id: "paint0_radial_1533_187044", cx: 0, cy: 0, r: 20, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(22 11)" },
|
|
68
|
+
React.createElement(Stop, { offset: 0.0598494, stopColor: "#FF0000" }),
|
|
69
|
+
React.createElement(Stop, { offset: 1, stopColor: "#00FF00" })))));
|
|
70
|
+
};
|
|
60
71
|
var RectCircleTest = function () {
|
|
61
72
|
return (React.createElement(Svg, { height: "200", width: "200" },
|
|
62
73
|
React.createElement(Defs, null,
|
|
@@ -77,10 +88,44 @@ var RemoteSvgTest = function () {
|
|
|
77
88
|
React.createElement(SvgUri, { style: styles.svg, viewBox: "0 0 200 200", width: "100", height: "100", uri: "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" }),
|
|
78
89
|
shouldShowLocalNetwork && (React.createElement(SvgUri, { x: "50", y: "50", viewBox: "0 0 500 500", style: styles.svg, width: "100", height: "100", uri: "http://10.122.222.112:8080/accessible-icon-brands.svg" }))));
|
|
79
90
|
};
|
|
91
|
+
var CustomSvgInputTest = function () {
|
|
92
|
+
var defaultxml = "\n <svg width=\"256\" height=\"256\" viewBox=\"0 0 48 48\">\n <rect width=\"48\" height=\"48\" fill=\"red\"/>\n </svg>\n";
|
|
93
|
+
var textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
|
|
94
|
+
var _a = useState(defaultxml), inputText = _a[0], setInputText = _a[1];
|
|
95
|
+
var _b = useState(defaultxml), svgText = _b[0], setSvgText = _b[1];
|
|
96
|
+
var _c = useState('click draw to see parsed data'), dataText = _c[0], setDataText = _c[1];
|
|
97
|
+
var _d = useState(false), showParse = _d[0], setShowParsed = _d[1];
|
|
98
|
+
var handleChangeText = React.useCallback(function (text) {
|
|
99
|
+
setInputText(text);
|
|
100
|
+
}, [setInputText]);
|
|
101
|
+
var handleDrawOnClick = React.useCallback(function () {
|
|
102
|
+
var parsed = parse(inputText);
|
|
103
|
+
if (parsed !== null) {
|
|
104
|
+
setSvgText(inputText);
|
|
105
|
+
setDataText(JSON.stringify(parsed));
|
|
106
|
+
}
|
|
107
|
+
}, [inputText, setSvgText, setDataText]);
|
|
108
|
+
var handleShowParsed = React.useCallback(function () {
|
|
109
|
+
setShowParsed(!showParse);
|
|
110
|
+
}, [showParse, setShowParsed]);
|
|
111
|
+
return (React.createElement(View, null,
|
|
112
|
+
React.createElement(Text, null, "Paste an svg in here and click Draw to try it out. The way it uses rnsvg's parse function to attempt to validate svg may cause asserts and crashes if the svg is invalid. Looking for another solution for this, but this is still useful in its current state."),
|
|
113
|
+
React.createElement(TextInput, { multiline: true, accessibilityLabel: "Custom svg text input", value: inputText, style: textInputStyle, onChangeText: handleChangeText }),
|
|
114
|
+
React.createElement(View, { style: { flexDirection: 'row' } },
|
|
115
|
+
React.createElement(Button, { onClick: handleDrawOnClick }, "Draw"),
|
|
116
|
+
React.createElement(ToggleButton, { onClick: handleShowParsed }, "Toggle Parsed data")),
|
|
117
|
+
React.createElement(Separator, null),
|
|
118
|
+
showParse && React.createElement(Text, null, dataText),
|
|
119
|
+
React.createElement(SvgXml, { width: "256", height: "256", xml: svgText })));
|
|
120
|
+
};
|
|
80
121
|
var svgSections = [
|
|
81
122
|
{
|
|
82
|
-
name: '
|
|
123
|
+
name: 'Custom Svg Input',
|
|
124
|
+
component: CustomSvgInputTest,
|
|
83
125
|
testID: SVG_TESTPAGE,
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
name: 'Rect',
|
|
84
129
|
component: RectTest,
|
|
85
130
|
},
|
|
86
131
|
{
|
|
@@ -107,6 +152,10 @@ var svgSections = [
|
|
|
107
152
|
name: 'Radial Gradient',
|
|
108
153
|
component: RadialGradientTest,
|
|
109
154
|
},
|
|
155
|
+
{
|
|
156
|
+
name: 'Radial GradientTransform',
|
|
157
|
+
component: RadialGradientTransformTest,
|
|
158
|
+
},
|
|
110
159
|
{
|
|
111
160
|
name: 'Rect and Circle via Defs and Use',
|
|
112
161
|
component: RectCircleTest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SvgTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SvgTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SvgTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SvgTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2S/B,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAY3B,CAAC"}
|
|
@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SvgTest = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var React = tslib_1.__importStar(require("react"));
|
|
6
|
+
var react_1 = require("react");
|
|
6
7
|
var react_native_1 = require("react-native");
|
|
7
8
|
var react_native_2 = require("@fluentui/react-native");
|
|
9
|
+
var react_native_3 = require("@fluentui/react-native");
|
|
8
10
|
var react_native_svg_1 = require("react-native-svg");
|
|
9
11
|
var accessible_icon_brands_svg_1 = tslib_1.__importDefault(require("./Assets/accessible-icon-brands.svg"));
|
|
10
12
|
var consts_1 = require("../../../../E2E/src/Svg/consts");
|
|
@@ -25,7 +27,7 @@ var RectTest = function () {
|
|
|
25
27
|
setUseColorA(value);
|
|
26
28
|
} }),
|
|
27
29
|
React.createElement(react_native_1.Text, null, "Change Color")),
|
|
28
|
-
React.createElement(
|
|
30
|
+
React.createElement(react_native_3.Separator, null),
|
|
29
31
|
React.createElement(react_native_svg_1.Svg, { width: "50", height: "50" },
|
|
30
32
|
React.createElement(react_native_svg_1.Rect, { x: "10", y: "10", width: "20", height: "20", fill: useColorA ? colorA : colorB, stroke: "black" }))));
|
|
31
33
|
};
|
|
@@ -61,6 +63,15 @@ var RadialGradientTest = function () {
|
|
|
61
63
|
React.createElement(react_native_svg_1.Stop, { offset: "1", stopColor: "red" }))),
|
|
62
64
|
React.createElement(react_native_svg_1.Line, { x1: "0", y1: "0", x2: "9", y2: "9", stroke: "url(#grad2)", strokeWidth: "5" })));
|
|
63
65
|
};
|
|
66
|
+
var RadialGradientTransformTest = function () {
|
|
67
|
+
return (React.createElement(react_native_svg_1.Svg, { width: 256, height: 256, viewBox: "0 0 48 48", fill: "none" },
|
|
68
|
+
React.createElement(react_native_svg_1.Rect, { width: 48, height: 48, fill: "url(#paint0_radial_1533_187044)" }),
|
|
69
|
+
React.createElement(react_native_svg_1.Rect, { x: 10, y: 10, width: 10, height: 10, fill: "red" }),
|
|
70
|
+
React.createElement(react_native_svg_1.Defs, null,
|
|
71
|
+
React.createElement(react_native_svg_1.RadialGradient, { id: "paint0_radial_1533_187044", cx: 0, cy: 0, r: 20, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(22 11)" },
|
|
72
|
+
React.createElement(react_native_svg_1.Stop, { offset: 0.0598494, stopColor: "#FF0000" }),
|
|
73
|
+
React.createElement(react_native_svg_1.Stop, { offset: 1, stopColor: "#00FF00" })))));
|
|
74
|
+
};
|
|
64
75
|
var RectCircleTest = function () {
|
|
65
76
|
return (React.createElement(react_native_svg_1.Svg, { height: "200", width: "200" },
|
|
66
77
|
React.createElement(react_native_svg_1.Defs, null,
|
|
@@ -81,10 +92,44 @@ var RemoteSvgTest = function () {
|
|
|
81
92
|
React.createElement(react_native_svg_1.SvgUri, { style: styles.svg, viewBox: "0 0 200 200", width: "100", height: "100", uri: "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" }),
|
|
82
93
|
shouldShowLocalNetwork && (React.createElement(react_native_svg_1.SvgUri, { x: "50", y: "50", viewBox: "0 0 500 500", style: styles.svg, width: "100", height: "100", uri: "http://10.122.222.112:8080/accessible-icon-brands.svg" }))));
|
|
83
94
|
};
|
|
95
|
+
var CustomSvgInputTest = function () {
|
|
96
|
+
var defaultxml = "\n <svg width=\"256\" height=\"256\" viewBox=\"0 0 48 48\">\n <rect width=\"48\" height=\"48\" fill=\"red\"/>\n </svg>\n";
|
|
97
|
+
var textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
|
|
98
|
+
var _a = (0, react_1.useState)(defaultxml), inputText = _a[0], setInputText = _a[1];
|
|
99
|
+
var _b = (0, react_1.useState)(defaultxml), svgText = _b[0], setSvgText = _b[1];
|
|
100
|
+
var _c = (0, react_1.useState)('click draw to see parsed data'), dataText = _c[0], setDataText = _c[1];
|
|
101
|
+
var _d = (0, react_1.useState)(false), showParse = _d[0], setShowParsed = _d[1];
|
|
102
|
+
var handleChangeText = React.useCallback(function (text) {
|
|
103
|
+
setInputText(text);
|
|
104
|
+
}, [setInputText]);
|
|
105
|
+
var handleDrawOnClick = React.useCallback(function () {
|
|
106
|
+
var parsed = (0, react_native_svg_1.parse)(inputText);
|
|
107
|
+
if (parsed !== null) {
|
|
108
|
+
setSvgText(inputText);
|
|
109
|
+
setDataText(JSON.stringify(parsed));
|
|
110
|
+
}
|
|
111
|
+
}, [inputText, setSvgText, setDataText]);
|
|
112
|
+
var handleShowParsed = React.useCallback(function () {
|
|
113
|
+
setShowParsed(!showParse);
|
|
114
|
+
}, [showParse, setShowParsed]);
|
|
115
|
+
return (React.createElement(react_native_1.View, null,
|
|
116
|
+
React.createElement(react_native_1.Text, null, "Paste an svg in here and click Draw to try it out. The way it uses rnsvg's parse function to attempt to validate svg may cause asserts and crashes if the svg is invalid. Looking for another solution for this, but this is still useful in its current state."),
|
|
117
|
+
React.createElement(react_native_1.TextInput, { multiline: true, accessibilityLabel: "Custom svg text input", value: inputText, style: textInputStyle, onChangeText: handleChangeText }),
|
|
118
|
+
React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
|
|
119
|
+
React.createElement(react_native_2.ButtonV1, { onClick: handleDrawOnClick }, "Draw"),
|
|
120
|
+
React.createElement(react_native_2.ToggleButton, { onClick: handleShowParsed }, "Toggle Parsed data")),
|
|
121
|
+
React.createElement(react_native_3.Separator, null),
|
|
122
|
+
showParse && React.createElement(react_native_1.Text, null, dataText),
|
|
123
|
+
React.createElement(react_native_svg_1.SvgXml, { width: "256", height: "256", xml: svgText })));
|
|
124
|
+
};
|
|
84
125
|
var svgSections = [
|
|
85
126
|
{
|
|
86
|
-
name: '
|
|
127
|
+
name: 'Custom Svg Input',
|
|
128
|
+
component: CustomSvgInputTest,
|
|
87
129
|
testID: consts_1.SVG_TESTPAGE,
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
name: 'Rect',
|
|
88
133
|
component: RectTest,
|
|
89
134
|
},
|
|
90
135
|
{
|
|
@@ -111,6 +156,10 @@ var svgSections = [
|
|
|
111
156
|
name: 'Radial Gradient',
|
|
112
157
|
component: RadialGradientTest,
|
|
113
158
|
},
|
|
159
|
+
{
|
|
160
|
+
name: 'Radial GradientTransform',
|
|
161
|
+
component: RadialGradientTransformTest,
|
|
162
|
+
},
|
|
114
163
|
{
|
|
115
164
|
name: 'Rect and Circle via Defs and Use',
|
|
116
165
|
component: RectCircleTest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SvgTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"SvgTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Svg/SvgTest.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.150.
|
|
3
|
+
"version": "0.150.3",
|
|
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>",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@fluentui-react-native/experimental-menu-button": ">=0.7.6 <1.0.0",
|
|
51
51
|
"@fluentui-react-native/experimental-native-date-picker": ">=0.8.0 <1.0.0",
|
|
52
52
|
"@fluentui-react-native/experimental-shadow": "0.4.2",
|
|
53
|
-
"@fluentui-react-native/experimental-shimmer": "0.10.
|
|
53
|
+
"@fluentui-react-native/experimental-shimmer": "0.10.1",
|
|
54
54
|
"@fluentui-react-native/experimental-tabs": "0.9.4",
|
|
55
55
|
"@fluentui-react-native/experimental-text": ">=0.13.2 <1.0.0",
|
|
56
56
|
"@fluentui-react-native/framework": ">=0.11.0 <1.0.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@fluentui-react-native/spinner": "^0.7.2",
|
|
67
67
|
"@fluentui-react-native/stack": ">=0.8.4 <1.0.0",
|
|
68
68
|
"@fluentui-react-native/switch": "^0.10.2",
|
|
69
|
-
"@fluentui-react-native/tablist": "0.1.
|
|
69
|
+
"@fluentui-react-native/tablist": "0.1.3",
|
|
70
70
|
"@fluentui-react-native/text": ">=0.21.2 <1.0.0",
|
|
71
71
|
"@fluentui-react-native/theme": ">=0.9.0 <1.0.0",
|
|
72
72
|
"@fluentui-react-native/theme-tokens": "^0.25.0",
|
|
@@ -1,13 +1,32 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { StyleSheet, Switch, Text, TextInput, View } from 'react-native';
|
|
3
4
|
|
|
5
|
+
import { ButtonV1 as Button, ToggleButton } from '@fluentui/react-native';
|
|
4
6
|
import { Separator } from '@fluentui/react-native';
|
|
5
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
Circle,
|
|
9
|
+
Defs,
|
|
10
|
+
G,
|
|
11
|
+
Line,
|
|
12
|
+
Path,
|
|
13
|
+
Polygon,
|
|
14
|
+
LinearGradient,
|
|
15
|
+
RadialGradient,
|
|
16
|
+
Rect,
|
|
17
|
+
Stop,
|
|
18
|
+
Svg,
|
|
19
|
+
SvgUri,
|
|
20
|
+
SvgXml,
|
|
21
|
+
Use,
|
|
22
|
+
parse,
|
|
23
|
+
} from 'react-native-svg';
|
|
6
24
|
|
|
7
25
|
import TestSvg from './Assets/accessible-icon-brands.svg';
|
|
8
26
|
import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts';
|
|
9
|
-
import type { TestSection, PlatformStatus } from '../Test';
|
|
10
27
|
import { Test } from '../Test';
|
|
28
|
+
import type { TestSection, PlatformStatus } from '../Test';
|
|
29
|
+
|
|
11
30
|
const styles = StyleSheet.create({
|
|
12
31
|
svg: {
|
|
13
32
|
backgroundColor: 'green',
|
|
@@ -99,6 +118,28 @@ const RadialGradientTest: React.FunctionComponent = () => {
|
|
|
99
118
|
);
|
|
100
119
|
};
|
|
101
120
|
|
|
121
|
+
const RadialGradientTransformTest: React.FunctionComponent = () => {
|
|
122
|
+
return (
|
|
123
|
+
<Svg width={256} height={256} viewBox="0 0 48 48" fill="none">
|
|
124
|
+
<Rect width={48} height={48} fill="url(#paint0_radial_1533_187044)" />
|
|
125
|
+
<Rect x={10} y={10} width={10} height={10} fill="red" />
|
|
126
|
+
<Defs>
|
|
127
|
+
<RadialGradient
|
|
128
|
+
id="paint0_radial_1533_187044"
|
|
129
|
+
cx={0}
|
|
130
|
+
cy={0}
|
|
131
|
+
r={20}
|
|
132
|
+
gradientUnits="userSpaceOnUse"
|
|
133
|
+
gradientTransform="translate(22 11)"
|
|
134
|
+
>
|
|
135
|
+
<Stop offset={0.0598494} stopColor="#FF0000" />
|
|
136
|
+
<Stop offset={1} stopColor="#00FF00" />
|
|
137
|
+
</RadialGradient>
|
|
138
|
+
</Defs>
|
|
139
|
+
</Svg>
|
|
140
|
+
);
|
|
141
|
+
};
|
|
142
|
+
|
|
102
143
|
const RectCircleTest: React.FunctionComponent = () => {
|
|
103
144
|
return (
|
|
104
145
|
<Svg height="200" width="200">
|
|
@@ -148,10 +189,70 @@ const RemoteSvgTest: React.FunctionComponent = () => {
|
|
|
148
189
|
);
|
|
149
190
|
};
|
|
150
191
|
|
|
192
|
+
const CustomSvgInputTest: React.FunctionComponent = () => {
|
|
193
|
+
const defaultxml = `
|
|
194
|
+
<svg width="256" height="256" viewBox="0 0 48 48">
|
|
195
|
+
<rect width="48" height="48" fill="red"/>
|
|
196
|
+
</svg>
|
|
197
|
+
`;
|
|
198
|
+
|
|
199
|
+
const textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
|
|
200
|
+
const [inputText, setInputText] = useState<string>(defaultxml);
|
|
201
|
+
const [svgText, setSvgText] = useState<string>(defaultxml);
|
|
202
|
+
const [dataText, setDataText] = useState<string>('click draw to see parsed data');
|
|
203
|
+
const [showParse, setShowParsed] = useState<boolean>(false);
|
|
204
|
+
|
|
205
|
+
const handleChangeText = React.useCallback(
|
|
206
|
+
(text: string) => {
|
|
207
|
+
setInputText(text);
|
|
208
|
+
},
|
|
209
|
+
[setInputText],
|
|
210
|
+
);
|
|
211
|
+
|
|
212
|
+
const handleDrawOnClick = React.useCallback(() => {
|
|
213
|
+
const parsed = parse(inputText);
|
|
214
|
+
if (parsed !== null) {
|
|
215
|
+
setSvgText(inputText);
|
|
216
|
+
setDataText(JSON.stringify(parsed));
|
|
217
|
+
}
|
|
218
|
+
}, [inputText, setSvgText, setDataText]);
|
|
219
|
+
|
|
220
|
+
const handleShowParsed = React.useCallback(() => {
|
|
221
|
+
setShowParsed(!showParse);
|
|
222
|
+
}, [showParse, setShowParsed]);
|
|
223
|
+
|
|
224
|
+
return (
|
|
225
|
+
<View>
|
|
226
|
+
<Text>
|
|
227
|
+
Paste an svg in here and click Draw to try it out. The way it uses rnsvg's parse function to attempt to validate svg may cause
|
|
228
|
+
asserts and crashes if the svg is invalid. Looking for another solution for this, but this is still useful in its current state.
|
|
229
|
+
</Text>
|
|
230
|
+
<TextInput
|
|
231
|
+
multiline={true}
|
|
232
|
+
accessibilityLabel="Custom svg text input"
|
|
233
|
+
value={inputText}
|
|
234
|
+
style={textInputStyle}
|
|
235
|
+
onChangeText={handleChangeText}
|
|
236
|
+
/>
|
|
237
|
+
<View style={{ flexDirection: 'row' }}>
|
|
238
|
+
<Button onClick={handleDrawOnClick}>Draw</Button>
|
|
239
|
+
<ToggleButton onClick={handleShowParsed}>Toggle Parsed data</ToggleButton>
|
|
240
|
+
</View>
|
|
241
|
+
<Separator />
|
|
242
|
+
{showParse && <Text>{dataText}</Text>}
|
|
243
|
+
<SvgXml width="256" height="256" xml={svgText} />
|
|
244
|
+
</View>
|
|
245
|
+
);
|
|
246
|
+
};
|
|
247
|
+
|
|
151
248
|
const svgSections: TestSection[] = [
|
|
152
249
|
{
|
|
153
|
-
name: '
|
|
250
|
+
name: 'Custom Svg Input',
|
|
251
|
+
component: CustomSvgInputTest,
|
|
154
252
|
testID: SVG_TESTPAGE,
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
name: 'Rect',
|
|
155
256
|
component: RectTest,
|
|
156
257
|
},
|
|
157
258
|
{
|
|
@@ -178,6 +279,10 @@ const svgSections: TestSection[] = [
|
|
|
178
279
|
name: 'Radial Gradient',
|
|
179
280
|
component: RadialGradientTest,
|
|
180
281
|
},
|
|
282
|
+
{
|
|
283
|
+
name: 'Radial GradientTransform',
|
|
284
|
+
component: RadialGradientTransformTest,
|
|
285
|
+
},
|
|
181
286
|
{
|
|
182
287
|
name: 'Rect and Circle via Defs and Use',
|
|
183
288
|
component: RectCircleTest,
|