@fluentui-react-native/tester 0.59.1 → 0.59.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 +16 -1
- package/CHANGELOG.md +10 -2
- package/lib/FluentTester/TestComponents/FocusZone/FocusZoneTest.d.ts.map +1 -1
- package/lib/FluentTester/TestComponents/FocusZone/FocusZoneTest.js +80 -121
- package/lib/FluentTester/TestComponents/FocusZone/FocusZoneTest.js.map +1 -1
- package/lib/FluentTester/TestComponents/FocusZone/styles.d.ts +4 -6
- package/lib/FluentTester/TestComponents/FocusZone/styles.d.ts.map +1 -1
- package/lib/FluentTester/TestComponents/FocusZone/styles.js +19 -6
- package/lib/FluentTester/TestComponents/FocusZone/styles.js.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/FocusZoneTest.d.ts.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/FocusZoneTest.js +76 -118
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/FocusZoneTest.js.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/styles.d.ts +4 -6
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/styles.d.ts.map +1 -1
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/styles.js +19 -6
- package/lib-commonjs/FluentTester/TestComponents/FocusZone/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/FluentTester/TestComponents/FocusZone/FocusZoneTest.tsx +141 -162
- package/src/FluentTester/TestComponents/FocusZone/styles.ts +21 -6
|
@@ -5,99 +5,85 @@ var tslib_1 = require("tslib");
|
|
|
5
5
|
var React = (0, tslib_1.__importStar)(require("react"));
|
|
6
6
|
var react_native_1 = require("react-native");
|
|
7
7
|
var react_native_2 = require("@fluentui/react-native");
|
|
8
|
+
var button_1 = require("@fluentui-react-native/button");
|
|
8
9
|
var Test_1 = require("../Test");
|
|
9
10
|
var consts_1 = require("./consts");
|
|
10
11
|
var styles_1 = require("./styles");
|
|
11
12
|
var styles_2 = require("../Common/styles");
|
|
12
13
|
var stack_1 = require("@fluentui-react-native/stack");
|
|
14
|
+
var experimental_menu_button_1 = require("@fluentui-react-native/experimental-menu-button");
|
|
15
|
+
var ListOfCheckboxes = function () {
|
|
16
|
+
return (React.createElement(React.Fragment, null,
|
|
17
|
+
React.createElement(react_native_2.Checkbox, { label: "Option A" }),
|
|
18
|
+
React.createElement(react_native_2.Checkbox, { label: "Option B" }),
|
|
19
|
+
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
20
|
+
React.createElement(react_native_2.Checkbox, { label: "Option D" })));
|
|
21
|
+
};
|
|
22
|
+
var FocusZoneListWrapper = function (props) {
|
|
23
|
+
var buttonProps = { children: 'Click to Focus', style: { marginVertical: 10 } };
|
|
24
|
+
return (React.createElement(React.Fragment, null,
|
|
25
|
+
React.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps)),
|
|
26
|
+
React.Children.map(props.children, function (child) {
|
|
27
|
+
return (React.createElement(React.Fragment, null,
|
|
28
|
+
child,
|
|
29
|
+
React.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps))));
|
|
30
|
+
})));
|
|
31
|
+
};
|
|
32
|
+
var FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
|
|
13
33
|
var DirectionalFocusZone = function () {
|
|
14
|
-
return (React.createElement(
|
|
15
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
16
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with Bidirectional arrow key navigation"),
|
|
17
|
-
React.createElement(react_native_2.FocusZone, { focusZoneDirection: "bidirectional" },
|
|
18
|
-
React.createElement(react_native_2.Checkbox, { label: "Option A" }),
|
|
19
|
-
React.createElement(react_native_2.Checkbox, { label: "Option B" }),
|
|
20
|
-
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
21
|
-
React.createElement(react_native_2.Checkbox, { label: "Option D" })),
|
|
22
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
23
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with Vertical arrow key navigation"),
|
|
24
|
-
React.createElement(react_native_2.FocusZone, { focusZoneDirection: "vertical" },
|
|
25
|
-
React.createElement(react_native_2.Checkbox, { label: "Option A" }),
|
|
26
|
-
React.createElement(react_native_2.Checkbox, { label: "Option B" }),
|
|
27
|
-
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
28
|
-
React.createElement(react_native_2.Checkbox, { label: "Option D" })),
|
|
29
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
30
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with Horizontal arrow key navigation"),
|
|
31
|
-
React.createElement(react_native_2.FocusZone, { focusZoneDirection: "horizontal" },
|
|
32
|
-
React.createElement(react_native_2.Checkbox, { label: "Option A" }),
|
|
33
|
-
React.createElement(react_native_2.Checkbox, { label: "Option B" }),
|
|
34
|
-
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
35
|
-
React.createElement(react_native_2.Checkbox, { label: "Option D" })),
|
|
36
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
37
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with No arrow key navigation"),
|
|
38
|
-
React.createElement(react_native_2.FocusZone, { focusZoneDirection: "none" },
|
|
39
|
-
React.createElement(react_native_2.Checkbox, { label: "Option A" }),
|
|
40
|
-
React.createElement(react_native_2.Checkbox, { label: "Option B" }),
|
|
41
|
-
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
42
|
-
React.createElement(react_native_2.Checkbox, { label: "Option D" })),
|
|
43
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
44
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with no props set"),
|
|
34
|
+
return (React.createElement(FocusZoneListWrapper, null,
|
|
45
35
|
React.createElement(react_native_2.FocusZone, null,
|
|
46
|
-
React.createElement(
|
|
47
|
-
React.createElement(
|
|
48
|
-
|
|
49
|
-
React.createElement(
|
|
50
|
-
|
|
36
|
+
React.createElement(styles_1.SubheaderText, null, "FocusZone with no props set"),
|
|
37
|
+
React.createElement(ListOfCheckboxes, null)),
|
|
38
|
+
FocusZoneDirections.map(function (direction, index) { return (React.createElement(react_native_2.FocusZone, { key: index, focusZoneDirection: direction },
|
|
39
|
+
React.createElement(styles_1.SubheaderText, null,
|
|
40
|
+
"FocusZone with arrow key navigation: ",
|
|
41
|
+
direction),
|
|
42
|
+
React.createElement(ListOfCheckboxes, null))); })));
|
|
51
43
|
};
|
|
52
44
|
var CommonUsageFocusZone = function () {
|
|
53
|
-
return (React.createElement(
|
|
54
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
55
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "FocusZone with Circular Navigation"),
|
|
45
|
+
return (React.createElement(FocusZoneListWrapper, null,
|
|
56
46
|
React.createElement(react_native_2.FocusZone, { isCircularNavigation: true },
|
|
57
|
-
React.createElement(
|
|
58
|
-
React.createElement(
|
|
59
|
-
React.createElement(react_native_2.Checkbox, { label: "Option C" }),
|
|
60
|
-
React.createElement(react_native_2.Checkbox, { label: "Option D" })),
|
|
61
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }),
|
|
62
|
-
React.createElement(react_native_2.Text, { variant: "headerSemibold" }, "Disabled FocusZone"),
|
|
47
|
+
React.createElement(styles_1.SubheaderText, null, "FocusZone with Circular Navigation"),
|
|
48
|
+
React.createElement(ListOfCheckboxes, null)),
|
|
63
49
|
React.createElement(react_native_2.FocusZone, { disabled: true },
|
|
64
|
-
React.createElement(
|
|
65
|
-
React.createElement(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
50
|
+
React.createElement(styles_1.SubheaderText, null, "Disabled FocusZone"),
|
|
51
|
+
React.createElement(ListOfCheckboxes, null))));
|
|
52
|
+
};
|
|
53
|
+
var GridOfButtons = function (props) {
|
|
54
|
+
return (React.createElement(React.Fragment, null, (0, tslib_1.__spreadArray)([], Array(props.gridHeight), true).map(function (_value, heightIndex) {
|
|
55
|
+
return (React.createElement(react_native_1.View, { key: heightIndex, style: styles_1.focusZoneTestStyles.focusZoneViewStyle }, (0, tslib_1.__spreadArray)([], Array(props.gridWidth), true).map(function (_value, widthIndex) {
|
|
56
|
+
var _a;
|
|
57
|
+
var gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
|
|
58
|
+
return (React.createElement(styles_1.GridButton, { key: widthIndex, style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: (_a = props === null || props === void 0 ? void 0 : props.buttonRefs) === null || _a === void 0 ? void 0 : _a[gridIndex], onClick: function () {
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, gridIndex);
|
|
61
|
+
} },
|
|
62
|
+
React.createElement(react_native_2.Text, null, gridIndex)));
|
|
63
|
+
})));
|
|
64
|
+
})));
|
|
69
65
|
};
|
|
70
66
|
var Navigation2DFocusZone = function () {
|
|
71
|
-
var buttonRefs = [];
|
|
72
67
|
var _a = React.useState(5), defaultTabbableElementIndex = _a[0], setDefaultTabbableElementIndex = _a[1];
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
return (React.createElement(
|
|
82
|
-
React.createElement(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
React.createElement(react_native_2.Button, { content: "#4", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[4], onClick: function () { return onClick(4); } }),
|
|
93
|
-
React.createElement(react_native_2.Button, { content: "#5", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[5], onClick: function () { return onClick(5); } }),
|
|
94
|
-
React.createElement(react_native_2.Button, { content: "#6", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[6], onClick: function () { return onClick(6); } })),
|
|
95
|
-
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneViewStyle },
|
|
96
|
-
React.createElement(react_native_2.Button, { content: "#7", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[7], onClick: function () { return onClick(7); } }),
|
|
97
|
-
React.createElement(react_native_2.Button, { content: "#8", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[8], onClick: function () { return onClick(8); } }),
|
|
98
|
-
React.createElement(react_native_2.Button, { content: "#9", style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: buttonRefs[9], onClick: function () { return onClick(9); } })))),
|
|
99
|
-
React.createElement(react_native_1.View, null,
|
|
100
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" }))));
|
|
68
|
+
var gridWidth = 3, gridHeight = 4;
|
|
69
|
+
var refMemo = React.useMemo(function () {
|
|
70
|
+
return Array(gridWidth * gridHeight)
|
|
71
|
+
.fill(null)
|
|
72
|
+
.map(function () { return React.createRef(); });
|
|
73
|
+
}, [gridWidth, gridHeight]);
|
|
74
|
+
var buttonRefs = React.useRef(refMemo);
|
|
75
|
+
var defaultTextNote = 'The defaultTabbableElement is ' + defaultTabbableElementIndex;
|
|
76
|
+
return (React.createElement(React.Fragment, null,
|
|
77
|
+
React.createElement(react_native_2.Text, null, defaultTextNote),
|
|
78
|
+
React.createElement(button_1.ButtonV1, { onClick: function () { return setDefaultTabbableElementIndex(null); }, style: { marginTop: 10 } }, "Clear defaultTabbableElement"),
|
|
79
|
+
React.createElement(FocusZoneListWrapper, null,
|
|
80
|
+
React.createElement(react_native_2.FocusZone, { use2DNavigation: true, defaultTabbableElement: defaultTabbableElementIndex ? buttonRefs.current[defaultTabbableElementIndex] : undefined, isCircularNavigation: true },
|
|
81
|
+
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneContainer }, GridOfButtons({
|
|
82
|
+
gridWidth: 3,
|
|
83
|
+
gridHeight: 4,
|
|
84
|
+
buttonRefs: buttonRefs.current,
|
|
85
|
+
onClick: function (index) { return setDefaultTabbableElementIndex(index); },
|
|
86
|
+
}))))));
|
|
101
87
|
};
|
|
102
88
|
function SwitchWithLabel(props) {
|
|
103
89
|
var label = props.label, value = props.value, onValueChange = props.onValueChange;
|
|
@@ -105,52 +91,25 @@ function SwitchWithLabel(props) {
|
|
|
105
91
|
React.createElement(react_native_2.Text, null, label),
|
|
106
92
|
React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange })));
|
|
107
93
|
}
|
|
108
|
-
var focusZoneDirectionStrings = ['Bidirectional', 'Horizontal', 'Vertical', 'None'];
|
|
109
94
|
var CustomizableFocusZone = function () {
|
|
110
95
|
var _a = React.useState(false), is2DNav = _a[0], set2dNav = _a[1];
|
|
111
96
|
var _b = React.useState(false), isDisabled = _b[0], setDisabled = _b[1];
|
|
112
97
|
var _c = React.useState(false), isCircularNav = _c[0], setIsCircularNav = _c[1];
|
|
113
|
-
var _d = React.useState('bidirectional'),
|
|
98
|
+
var _d = React.useState('bidirectional'), focusZoneDirection = _d[0], setFocusZoneDirection = _d[1];
|
|
99
|
+
var menuItems = FocusZoneDirections.map(function (direction) { return ({ itemKey: direction, text: direction }); });
|
|
114
100
|
return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
|
|
115
101
|
React.createElement(stack_1.Stack, { style: styles_1.stackStyleFocusZone },
|
|
116
102
|
React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
|
|
117
103
|
React.createElement(SwitchWithLabel, { label: "2D Navigation", value: is2DNav, onValueChange: set2dNav }),
|
|
118
104
|
React.createElement(SwitchWithLabel, { label: "Disabled", value: isDisabled, onValueChange: setDisabled }),
|
|
119
105
|
React.createElement(SwitchWithLabel, { label: "Circular Navigation", value: isCircularNav, onValueChange: setIsCircularNav }),
|
|
120
|
-
React.createElement(
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
break;
|
|
128
|
-
case 'Vertical':
|
|
129
|
-
setFocusZoneDirection('vertical');
|
|
130
|
-
break;
|
|
131
|
-
case 'None':
|
|
132
|
-
setFocusZoneDirection('none');
|
|
133
|
-
break;
|
|
134
|
-
}
|
|
135
|
-
} }, focusZoneDirectionStrings.map(function (direction, index) { return (React.createElement(react_native_1.Picker.Item, { label: direction, key: index, value: direction })); }))),
|
|
136
|
-
React.createElement(react_native_1.View, null,
|
|
137
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" })),
|
|
138
|
-
React.createElement(react_native_2.FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: isFocusZoneDirection, isCircularNavigation: isCircularNav },
|
|
139
|
-
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneContainer },
|
|
140
|
-
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneViewStyle },
|
|
141
|
-
React.createElement(react_native_2.Button, { content: "#1", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
142
|
-
React.createElement(react_native_2.Button, { content: "#2", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
143
|
-
React.createElement(react_native_2.Button, { content: "#3", style: styles_1.focusZoneTestStyles.focusZoneButton })),
|
|
144
|
-
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneViewStyle },
|
|
145
|
-
React.createElement(react_native_2.Button, { content: "#4", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
146
|
-
React.createElement(react_native_2.Button, { content: "#5", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
147
|
-
React.createElement(react_native_2.Button, { content: "#6", style: styles_1.focusZoneTestStyles.focusZoneButton })),
|
|
148
|
-
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneViewStyle },
|
|
149
|
-
React.createElement(react_native_2.Button, { content: "#7", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
150
|
-
React.createElement(react_native_2.Button, { content: "#8", style: styles_1.focusZoneTestStyles.focusZoneButton }),
|
|
151
|
-
React.createElement(react_native_2.Button, { content: "#9", style: styles_1.focusZoneTestStyles.focusZoneButton })))),
|
|
152
|
-
React.createElement(react_native_1.View, null,
|
|
153
|
-
React.createElement(react_native_2.Button, { content: "Outside FocusZone" })))));
|
|
106
|
+
React.createElement(experimental_menu_button_1.MenuButton, { content: focusZoneDirection, menuItems: menuItems, onItemClick: function (direction) { return setFocusZoneDirection(direction); }, contextualMenu: {
|
|
107
|
+
shouldFocusOnMount: true,
|
|
108
|
+
shouldFocusOnContainer: true,
|
|
109
|
+
} })),
|
|
110
|
+
React.createElement(FocusZoneListWrapper, null,
|
|
111
|
+
React.createElement(react_native_2.FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: focusZoneDirection, isCircularNavigation: isCircularNav },
|
|
112
|
+
React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.focusZoneContainer }, GridOfButtons({ gridWidth: 3, gridHeight: 3 })))))));
|
|
154
113
|
};
|
|
155
114
|
var focusZoneSections = [
|
|
156
115
|
{
|
|
@@ -163,7 +122,7 @@ var focusZoneSections = [
|
|
|
163
122
|
component: CommonUsageFocusZone,
|
|
164
123
|
},
|
|
165
124
|
{
|
|
166
|
-
name: '2D Navigation
|
|
125
|
+
name: '2D Navigation',
|
|
167
126
|
component: Navigation2DFocusZone,
|
|
168
127
|
},
|
|
169
128
|
{
|
|
@@ -179,8 +138,7 @@ var FocusZoneTest = function () {
|
|
|
179
138
|
macosStatus: 'Experimental',
|
|
180
139
|
androidStatus: 'Backlog',
|
|
181
140
|
};
|
|
182
|
-
|
|
183
|
-
return React.createElement(Test_1.Test, { name: "FocusZone Test", description: description, sections: focusZoneSections, status: status });
|
|
141
|
+
return React.createElement(Test_1.Test, { name: "FocusZone Test", description: 'No description.', sections: focusZoneSections, status: status });
|
|
184
142
|
};
|
|
185
143
|
exports.FocusZoneTest = FocusZoneTest;
|
|
186
144
|
//# sourceMappingURL=FocusZoneTest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusZoneTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"FocusZoneTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,6 @@ export declare const focusZoneTestStyles: {
|
|
|
4
4
|
flexDirection: "row";
|
|
5
5
|
alignContent: "flex-start";
|
|
6
6
|
alignItems: "flex-start";
|
|
7
|
-
marginTop: number;
|
|
8
7
|
};
|
|
9
8
|
focusZoneContainer: {
|
|
10
9
|
flexDirection: "column";
|
|
@@ -12,14 +11,13 @@ export declare const focusZoneTestStyles: {
|
|
|
12
11
|
padding: number;
|
|
13
12
|
};
|
|
14
13
|
focusZoneButton: {
|
|
15
|
-
marginRight: number;
|
|
16
|
-
height: number;
|
|
17
|
-
width: number;
|
|
18
|
-
};
|
|
19
|
-
focusZoneButton0: {
|
|
20
14
|
height: number;
|
|
21
15
|
width: number;
|
|
22
16
|
};
|
|
23
17
|
};
|
|
18
|
+
export declare const GridButton: import("@fluentui-react-native/composition").ComposeFactoryComponent<import("@fluentui/react-native").ButtonProps, import("@fluentui/react-native").ButtonSlotProps, import("@fluentui/react-native").ButtonTokens, import("@fluentui-react-native/theme-types").Theme, object>;
|
|
19
|
+
export declare const SubheaderText: import("@uifabricshared/foundation-compose").IComposeReturnType<import("@fluentui/react-native").ITextProps<import("@fluentui-react-native/adapters").ITextProps>, {
|
|
20
|
+
root: import("@fluentui-react-native/adapters").ITextProps;
|
|
21
|
+
}, import("@fluentui-react-native/tokens").FontStyleTokens & import("@fluentui-react-native/tokens").FontVariantTokens & import("@fluentui-react-native/tokens").IForegroundColorTokens & import("@fluentui-react-native/tokens").IBackgroundColorTokens, object, object>;
|
|
24
22
|
export declare const stackStyleFocusZone: IStackProps['style'];
|
|
25
23
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAe9B,CAAC;AAEH,eAAO,MAAM,UAAU,iRAWrB,CAAC;AAEH,eAAO,MAAM,aAAa;;yQAGxB,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,OAAO,CAGpD,CAAC"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.stackStyleFocusZone = exports.focusZoneTestStyles = void 0;
|
|
3
|
+
exports.stackStyleFocusZone = exports.SubheaderText = exports.GridButton = exports.focusZoneTestStyles = void 0;
|
|
4
4
|
var react_native_1 = require("react-native");
|
|
5
|
+
var react_native_2 = require("@fluentui/react-native");
|
|
6
|
+
var button_1 = require("@fluentui-react-native/button");
|
|
7
|
+
var icon_1 = require("@fluentui-react-native/icon");
|
|
5
8
|
exports.focusZoneTestStyles = react_native_1.StyleSheet.create({
|
|
6
9
|
focusZoneViewStyle: {
|
|
7
10
|
flexDirection: 'row',
|
|
8
11
|
alignContent: 'flex-start',
|
|
9
12
|
alignItems: 'flex-start',
|
|
10
|
-
marginTop: 10,
|
|
11
13
|
},
|
|
12
14
|
focusZoneContainer: {
|
|
13
15
|
flexDirection: 'column',
|
|
@@ -15,14 +17,25 @@ exports.focusZoneTestStyles = react_native_1.StyleSheet.create({
|
|
|
15
17
|
padding: 4,
|
|
16
18
|
},
|
|
17
19
|
focusZoneButton: {
|
|
18
|
-
marginRight: 60,
|
|
19
20
|
height: 50,
|
|
20
21
|
width: 50,
|
|
21
22
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
});
|
|
24
|
+
exports.GridButton = button_1.ButtonV1.compose({
|
|
25
|
+
slots: {
|
|
26
|
+
root: react_native_1.View,
|
|
27
|
+
icon: icon_1.Icon,
|
|
28
|
+
content: react_native_2.Text,
|
|
25
29
|
},
|
|
30
|
+
slotProps: {
|
|
31
|
+
content: {
|
|
32
|
+
style: { aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
exports.SubheaderText = react_native_2.Text.customize({
|
|
37
|
+
tokens: { variant: 'subheaderSemibold' },
|
|
38
|
+
root: { style: { textDecorationLine: 'underline' } },
|
|
26
39
|
});
|
|
27
40
|
exports.stackStyleFocusZone = {
|
|
28
41
|
flexDirection: 'column',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":";;;AAAA,6CAAgD;AAEhD,uDAA8C;AAC9C,wDAAmE;AACnE,oDAAmD;AAEtC,QAAA,mBAAmB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACnD,kBAAkB,EAAE;QAClB,aAAa,EAAE,KAAK;QACpB,YAAY,EAAE,YAAY;QAC1B,UAAU,EAAE,YAAY;KACzB;IACD,kBAAkB,EAAE;QAClB,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,cAAc;QAC9B,OAAO,EAAE,CAAC;KACX;IACD,eAAe,EAAE;QACf,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAC;AAEU,QAAA,UAAU,GAAG,iBAAM,CAAC,OAAO,CAAC;IACvC,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,WAAI;QACV,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE;QACT,OAAO,EAAE;YACP,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;SAC1E;KACF;CACF,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,mBAAI,CAAC,SAAS,CAAC;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;IACxC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,WAAW,EAAE,EAAE;CACrD,CAAC,CAAC;AAEU,QAAA,mBAAmB,GAAyB;IACvD,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,EAAE;CACjB,CAAC"}
|
package/package.json
CHANGED