@fluentui-react-native/tester 0.167.30 → 0.167.31
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/fluent-tester/src/TestComponents/Overflow/OverflowTest.d.ts.map +1 -1
- package/lib/fluent-tester/src/TestComponents/Overflow/OverflowTest.js +38 -1
- package/lib/fluent-tester/src/TestComponents/Overflow/OverflowTest.js.map +1 -1
- package/lib-commonjs/fluent-tester/src/TestComponents/Overflow/OverflowTest.d.ts.map +1 -1
- package/lib-commonjs/fluent-tester/src/TestComponents/Overflow/OverflowTest.js +37 -1
- package/lib-commonjs/fluent-tester/src/TestComponents/Overflow/OverflowTest.js.map +1 -1
- package/package.json +2 -2
- package/src/TestComponents/Overflow/OverflowTest.tsx +43 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 29 Mar 2024 00:56:38 GMT",
|
|
6
|
+
"version": "0.167.31",
|
|
7
|
+
"tag": "@fluentui-react-native/tester_v0.167.31",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "winlarry@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"commit": "c5596acb22cd132870d924fc39dae18f71807aab",
|
|
14
|
+
"comment": "Add new Overflow example for dynamic addition / removal of items."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 27 Mar 2024 00:51:04 GMT",
|
|
6
21
|
"version": "0.167.30",
|
|
7
22
|
"tag": "@fluentui-react-native/tester_v0.167.30",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/tester
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 29 Mar 2024 00:56:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.167.31
|
|
8
|
+
|
|
9
|
+
Fri, 29 Mar 2024 00:56:38 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Add new Overflow example for dynamic addition / removal of items. (winlarry@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.167.30
|
|
8
16
|
|
|
9
|
-
Wed, 27 Mar 2024 00:
|
|
17
|
+
Wed, 27 Mar 2024 00:51:04 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuL/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA2ChC,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __spreadArray } from "tslib";
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { View, StyleSheet } from 'react-native';
|
|
3
4
|
import { ButtonV1 as Button } from '@fluentui-react-native/button';
|
|
@@ -34,6 +35,12 @@ var overflowTestPageStyles = StyleSheet.create({
|
|
|
34
35
|
menuTrigger: {
|
|
35
36
|
alignSelf: 'center',
|
|
36
37
|
},
|
|
38
|
+
dynamicAddRemoval: {
|
|
39
|
+
width: 400,
|
|
40
|
+
borderWidth: 1,
|
|
41
|
+
borderStyle: 'solid',
|
|
42
|
+
borderColor: 'black',
|
|
43
|
+
},
|
|
37
44
|
});
|
|
38
45
|
function OverflowMenu(props) {
|
|
39
46
|
var _a = useOverflowMenu(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, menuTriggerRef = _a.menuTriggerRef, onMenuTriggerLayout = _a.onMenuTriggerLayout;
|
|
@@ -42,7 +49,10 @@ function OverflowMenu(props) {
|
|
|
42
49
|
React.createElement(MenuTrigger, null,
|
|
43
50
|
React.createElement(Button, { accessibilityLabel: "More options", onLayout: onMenuTriggerLayout, style: overflowTestPageStyles.menuTrigger, appearance: "subtle", iconOnly: true, icon: { svgSource: { src: MoreHorizontalIcon, viewBox: '0 0 20 20' } }, componentRef: menuTriggerRef })),
|
|
44
51
|
React.createElement(MenuPopover, null,
|
|
45
|
-
React.createElement(MenuList, null, visibleMenuItems.map(function (id) {
|
|
52
|
+
React.createElement(MenuList, null, visibleMenuItems.map(function (id) {
|
|
53
|
+
var _a;
|
|
54
|
+
return (React.createElement(MenuItem, { onClick: function () { return props.onItemPress(id); }, key: id }, (_a = itemLabels[id]) !== null && _a !== void 0 ? _a : 'Item ' + id));
|
|
55
|
+
})))));
|
|
46
56
|
}
|
|
47
57
|
else {
|
|
48
58
|
return null;
|
|
@@ -87,6 +97,29 @@ function OverflowDifferentWidthTest() {
|
|
|
87
97
|
React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 250 }),
|
|
88
98
|
React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 400 })));
|
|
89
99
|
}
|
|
100
|
+
function OverflowDynamicAddRemovalTest() {
|
|
101
|
+
var _a = React.useState(['1', '2', '3']), ids = _a[0], setIDs = _a[1];
|
|
102
|
+
var addItem = React.useCallback(function () {
|
|
103
|
+
return setIDs(function (prev) {
|
|
104
|
+
var newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
|
|
105
|
+
return __spreadArray(__spreadArray([], prev, true), [newItem], false);
|
|
106
|
+
});
|
|
107
|
+
}, []);
|
|
108
|
+
var removeItem = React.useCallback(function (item) { return setIDs(function (prev) { return prev.filter(function (x) { return x !== item; }); }); }, []);
|
|
109
|
+
return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
|
|
110
|
+
React.createElement(Text, null, "Add buttons using the button below. Remove by clicking on individual items in the Overflow container."),
|
|
111
|
+
React.createElement(Button, { onClick: addItem }, "Add item"),
|
|
112
|
+
React.createElement(Text, null,
|
|
113
|
+
"Overflow Items (raw): ",
|
|
114
|
+
ids.reduce(function (prev, curr) { return prev + ', ' + curr; })),
|
|
115
|
+
React.createElement(Divider, null),
|
|
116
|
+
React.createElement(Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
|
|
117
|
+
ids.map(function (id) {
|
|
118
|
+
return (React.createElement(OverflowItem, { key: id, overflowID: id },
|
|
119
|
+
React.createElement(Button, { onClick: function () { return removeItem(id); } }, 'Item ' + id)));
|
|
120
|
+
}),
|
|
121
|
+
React.createElement(OverflowMenu, { onItemPress: removeItem }))));
|
|
122
|
+
}
|
|
90
123
|
export var OverflowTest = function () {
|
|
91
124
|
var description = 'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
|
|
92
125
|
return (React.createElement(Test, { name: "Overflow Test", description: description, sections: [
|
|
@@ -99,6 +132,10 @@ export var OverflowTest = function () {
|
|
|
99
132
|
name: 'Overflow TabList',
|
|
100
133
|
component: OverflowTabTest,
|
|
101
134
|
},
|
|
135
|
+
{
|
|
136
|
+
name: 'Overflow Dynamic Add/Removal of Items',
|
|
137
|
+
component: OverflowDynamicAddRemovalTest,
|
|
138
|
+
},
|
|
102
139
|
{
|
|
103
140
|
name: 'Overflow Variable Width',
|
|
104
141
|
component: OverflowDifferentWidthTest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,IAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACxC,IAAM,UAAU,GAAG;IACjB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,sBAAsB;IACzB,CAAC,EAAE,eAAe;IAClB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,6BAA6B;CACjC,CAAC;AAEF,IAAM,sBAAsB,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/C,cAAc,EAAE;QACd,eAAe,EAAE,CAAC;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,WAAW,EAAE;QACX,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAMH,SAAS,YAAY,CAAC,KAAwB;IACtC,IAAA,KAAsE,eAAe,EAAE,EAArF,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,cAAc,oBAAA,EAAE,mBAAmB,yBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,IAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACxC,IAAM,UAAU,GAAG;IACjB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,sBAAsB;IACzB,CAAC,EAAE,eAAe;IAClB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,6BAA6B;CACjC,CAAC;AAEF,IAAM,sBAAsB,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/C,cAAc,EAAE;QACd,eAAe,EAAE,CAAC;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,WAAW,EAAE;QACX,SAAS,EAAE,QAAQ;KACpB;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,GAAG;QACV,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,OAAO;KACrB;CACF,CAAC,CAAC;AAMH,SAAS,YAAY,CAAC,KAAwB;IACtC,IAAA,KAAsE,eAAe,EAAE,EAArF,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,cAAc,oBAAA,EAAE,mBAAmB,yBAAsB,CAAC;IAE9F,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,IAAI;YACH,oBAAC,WAAW;gBACV,oBAAC,MAAM,IACL,kBAAkB,EAAC,cAAc,EACjC,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,sBAAsB,CAAC,WAAW,EACzC,UAAU,EAAC,QAAQ,EACnB,QAAQ,QACR,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,kBAAkB,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EACtE,YAAY,EAAE,cAAc,GAC5B,CACU;YACd,oBAAC,WAAW;gBACV,oBAAC,QAAQ,QACN,gBAAgB,CAAC,GAAG,CAAC,UAAC,EAAE;;oBAAK,OAAA,CAC5B,oBAAC,QAAQ,IAAC,OAAO,EAAE,cAAM,OAAA,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAArB,CAAqB,EAAE,GAAG,EAAE,EAAE,IACpD,MAAA,UAAU,CAAC,EAAE,CAAC,mCAAI,OAAO,GAAG,EAAE,CACtB,CACZ,CAAA;iBAAA,CAAC,CACO,CACC,CACT,CACR,CAAC;KACH;SAAM;QACL,OAAO,IAAI,CAAC;KACb;AACH,CAAC;AAED,SAAS,gBAAgB;IACvB,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc;QAChD,oBAAC,QAAQ,IAAC,OAAO,EAAE,KAAK;YACrB,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACnB,oBAAC,YAAY,IAAC,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;gBACvC,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAjB,CAAiB,IAAG,UAAU,CAAC,IAAI,CAAC,CAAU,CACxD,CAChB,EAJoB,CAIpB,CAAC;YACF,oBAAC,YAAY,IAAC,WAAW,EAAE,OAAO,CAAC,GAAG,GAAI,CACjC,CACN,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IAChB,IAAA,KAAgB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAlC,GAAG,QAAA,EAAE,MAAM,QAAuB,CAAC;IAC1C,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc;QAChD,oBAAC,QAAQ,IAAC,mBAAmB,QAAC,OAAO,EAAE,KAAK;YAC1C,oBAAC,OAAO,IAAC,WAAW,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM;gBAC3C,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACnB,oBAAC,YAAY,IAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;oBACvE,oBAAC,GAAG,IAAC,MAAM,EAAE,IAAI,IAAG,UAAU,CAAC,IAAI,CAAC,CAAO,CAC9B,CAChB,EAJoB,CAIpB,CAAC;gBACF,oBAAC,YAAY,IAAC,WAAW,EAAE,MAAM,GAAI,CAC7B,CACD,CACN,CACR,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAuD;IACnF,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAY,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,EAAxB,CAAwB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc;QAChD,oBAAC,IAAI,IAAC,OAAO,EAAC,aAAa,IAAE,iBAAU,KAAK,CAAC,KAAK,CAAE,CAAQ;QAC5D,oBAAC,QAAQ,IAAC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK;YACnF,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACnB,oBAAC,YAAY,IAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI;gBACvC,oBAAC,MAAM;;oBAAO,GAAG,GAAG,IAAI,CAAU,CACrB,CAChB,EAJoB,CAIpB,CAAC;YACF,oBAAC,YAAY,IAAC,WAAW,EAAE,OAAO,CAAC,GAAG,GAAI,CACjC,CACN,CACR,CAAC;AACJ,CAAC;AAED,SAAS,0BAA0B;IACjC,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,IAAC,OAAO,EAAC,cAAc,2BAA4B;QACxD,oBAAC,oBAAoB,IAAC,KAAK,EAAE,GAAG,GAAI;QACpC,oBAAC,oBAAoB,IAAC,KAAK,EAAE,GAAG,GAAI;QACpC,oBAAC,oBAAoB,IAAC,KAAK,EAAE,GAAG,GAAI;QACpC,oBAAC,OAAO,OAAG;QACX,oBAAC,IAAI,IAAC,OAAO,EAAC,cAAc,4BAA6B;QACzD,oBAAC,oBAAoB,IAAC,mBAAmB,QAAC,KAAK,EAAE,GAAG,GAAI;QACxD,oBAAC,oBAAoB,IAAC,mBAAmB,QAAC,KAAK,EAAE,GAAG,GAAI;QACxD,oBAAC,oBAAoB,IAAC,mBAAmB,QAAC,KAAK,EAAE,GAAG,GAAI,CACnD,CACR,CAAC;AACJ,CAAC;AAED,SAAS,6BAA6B;IAC9B,IAAA,KAAgB,KAAK,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,EAA9C,GAAG,QAAA,EAAE,MAAM,QAAmC,CAAC;IACtD,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B;QACE,OAAA,MAAM,CAAC,UAAC,IAAI;YACV,IAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjE,uCAAW,IAAI,UAAE,OAAO,UAAE;QAC5B,CAAC,CAAC;IAHF,CAGE,EACJ,EAAE,CACH,CAAC;IACF,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,IAAY,IAAK,OAAA,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,KAAK,IAAI,EAAV,CAAU,CAAC,EAA9B,CAA8B,CAAC,EAAhD,CAAgD,EAAE,EAAE,CAAC,CAAC;IAC7G,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc;QAChD,oBAAC,IAAI,gHAA6G;QAClH,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,eAAmB;QAC3C,oBAAC,IAAI;;YAAwB,GAAG,CAAC,MAAM,CAAC,UAAC,IAAI,EAAE,IAAI,IAAK,OAAA,IAAI,GAAG,IAAI,GAAG,IAAI,EAAlB,CAAkB,CAAC,CAAQ;QACnF,oBAAC,OAAO,OAAG;QACX,oBAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG;YAChF,GAAG,CAAC,GAAG,CAAC,UAAC,EAAE;gBACV,OAAO,CACL,oBAAC,YAAY,IAAC,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE;oBACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,CAAC,EAAd,CAAc,IAAG,OAAO,GAAG,EAAE,CAAU,CACjD,CAChB,CAAC;YACJ,CAAC,CAAC;YACF,oBAAC,YAAY,IAAC,WAAW,EAAE,UAAU,GAAI,CAChC,CACN,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,YAAY,GAA4B;IACnD,IAAM,WAAW,GACf,8SAA8S,CAAC;IAEjT,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,gBAAgB;gBAC3B,MAAM,EAAE,iBAAiB;aAC1B;YACD;gBACE,IAAI,EAAE,kBAAkB;gBACxB,SAAS,EAAE,eAAe;aAC3B;YACD;gBACE,IAAI,EAAE,uCAAuC;gBAC7C,SAAS,EAAE,6BAA6B;aACzC;YACD;gBACE,IAAI,EAAE,yBAAyB;gBAC/B,SAAS,EAAE,0BAA0B;aACtC;SACF,EACD,WAAW,EAAE;YACX;gBACE,IAAI,EAAE,sBAAsB;gBAC5B,SAAS,EAAE,eAAe;aAC3B;SACF,EACD,IAAI,EAAC,qGAAqG,EAC1G,MAAM,EAAE;YACN,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,SAAS;YACpB,WAAW,EAAE,cAAc;YAC3B,aAAa,EAAE,SAAS;SACzB,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuL/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA2ChC,CAAC"}
|
|
@@ -38,6 +38,12 @@ var overflowTestPageStyles = react_native_1.StyleSheet.create({
|
|
|
38
38
|
menuTrigger: {
|
|
39
39
|
alignSelf: 'center',
|
|
40
40
|
},
|
|
41
|
+
dynamicAddRemoval: {
|
|
42
|
+
width: 400,
|
|
43
|
+
borderWidth: 1,
|
|
44
|
+
borderStyle: 'solid',
|
|
45
|
+
borderColor: 'black',
|
|
46
|
+
},
|
|
41
47
|
});
|
|
42
48
|
function OverflowMenu(props) {
|
|
43
49
|
var _a = (0, overflow_1.useOverflowMenu)(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, menuTriggerRef = _a.menuTriggerRef, onMenuTriggerLayout = _a.onMenuTriggerLayout;
|
|
@@ -46,7 +52,10 @@ function OverflowMenu(props) {
|
|
|
46
52
|
React.createElement(menu_1.MenuTrigger, null,
|
|
47
53
|
React.createElement(button_1.ButtonV1, { accessibilityLabel: "More options", onLayout: onMenuTriggerLayout, style: overflowTestPageStyles.menuTrigger, appearance: "subtle", iconOnly: true, icon: { svgSource: { src: MoreHorizontalFilled_svg_1.default, viewBox: '0 0 20 20' } }, componentRef: menuTriggerRef })),
|
|
48
54
|
React.createElement(menu_1.MenuPopover, null,
|
|
49
|
-
React.createElement(menu_1.MenuList, null, visibleMenuItems.map(function (id) {
|
|
55
|
+
React.createElement(menu_1.MenuList, null, visibleMenuItems.map(function (id) {
|
|
56
|
+
var _a;
|
|
57
|
+
return (React.createElement(menu_1.MenuItem, { onClick: function () { return props.onItemPress(id); }, key: id }, (_a = itemLabels[id]) !== null && _a !== void 0 ? _a : 'Item ' + id));
|
|
58
|
+
})))));
|
|
50
59
|
}
|
|
51
60
|
else {
|
|
52
61
|
return null;
|
|
@@ -91,6 +100,29 @@ function OverflowDifferentWidthTest() {
|
|
|
91
100
|
React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 250 }),
|
|
92
101
|
React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 400 })));
|
|
93
102
|
}
|
|
103
|
+
function OverflowDynamicAddRemovalTest() {
|
|
104
|
+
var _a = React.useState(['1', '2', '3']), ids = _a[0], setIDs = _a[1];
|
|
105
|
+
var addItem = React.useCallback(function () {
|
|
106
|
+
return setIDs(function (prev) {
|
|
107
|
+
var newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
|
|
108
|
+
return tslib_1.__spreadArray(tslib_1.__spreadArray([], prev, true), [newItem], false);
|
|
109
|
+
});
|
|
110
|
+
}, []);
|
|
111
|
+
var removeItem = React.useCallback(function (item) { return setIDs(function (prev) { return prev.filter(function (x) { return x !== item; }); }); }, []);
|
|
112
|
+
return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
|
|
113
|
+
React.createElement(text_1.TextV1, null, "Add buttons using the button below. Remove by clicking on individual items in the Overflow container."),
|
|
114
|
+
React.createElement(button_1.ButtonV1, { onClick: addItem }, "Add item"),
|
|
115
|
+
React.createElement(text_1.TextV1, null,
|
|
116
|
+
"Overflow Items (raw): ",
|
|
117
|
+
ids.reduce(function (prev, curr) { return prev + ', ' + curr; })),
|
|
118
|
+
React.createElement(divider_1.Divider, null),
|
|
119
|
+
React.createElement(overflow_1.Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
|
|
120
|
+
ids.map(function (id) {
|
|
121
|
+
return (React.createElement(overflow_1.OverflowItem, { key: id, overflowID: id },
|
|
122
|
+
React.createElement(button_1.ButtonV1, { onClick: function () { return removeItem(id); } }, 'Item ' + id)));
|
|
123
|
+
}),
|
|
124
|
+
React.createElement(OverflowMenu, { onItemPress: removeItem }))));
|
|
125
|
+
}
|
|
94
126
|
var OverflowTest = function () {
|
|
95
127
|
var description = 'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
|
|
96
128
|
return (React.createElement(Test_1.Test, { name: "Overflow Test", description: description, sections: [
|
|
@@ -103,6 +135,10 @@ var OverflowTest = function () {
|
|
|
103
135
|
name: 'Overflow TabList',
|
|
104
136
|
component: OverflowTabTest,
|
|
105
137
|
},
|
|
138
|
+
{
|
|
139
|
+
name: 'Overflow Dynamic Add/Removal of Items',
|
|
140
|
+
component: OverflowDynamicAddRemovalTest,
|
|
141
|
+
},
|
|
106
142
|
{
|
|
107
143
|
name: 'Overflow Variable Width',
|
|
108
144
|
component: OverflowDifferentWidthTest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,6CAAgD;AAGhD,wDAAmE;AACnE,0DAAyD;AACzD,oDAAiG;AACjG,4DAA0F;AAC1F,0DAA8D;AAC9D,oDAA6D;AAE7D,gGAA4D;AAC5D,qDAAoD;AACpD,iEAAqE;AACrE,gCAA+B;AAE/B,IAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACxC,IAAM,UAAU,GAAG;IACjB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,sBAAsB;IACzB,CAAC,EAAE,eAAe;IAClB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,6BAA6B;CACjC,CAAC;AAEF,IAAM,sBAAsB,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/C,cAAc,EAAE;QACd,eAAe,EAAE,CAAC;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;KACX;IACD,WAAW,EAAE;QACX,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAMH,SAAS,YAAY,CAAC,KAAwB;IACtC,IAAA,KAAsE,IAAA,0BAAe,GAAE,EAArF,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,cAAc,oBAAA,EAAE,mBAAmB,yBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Overflow/OverflowTest.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.167.
|
|
3
|
+
"version": "0.167.31",
|
|
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>",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@fluentui-react-native/menu": "1.13.1",
|
|
60
60
|
"@fluentui-react-native/merge-props": "0.8.1",
|
|
61
61
|
"@fluentui-react-native/notification": "0.24.18",
|
|
62
|
-
"@fluentui-react-native/overflow": "0.2.
|
|
62
|
+
"@fluentui-react-native/overflow": "0.2.9",
|
|
63
63
|
"@fluentui-react-native/radio-group": "0.20.16",
|
|
64
64
|
"@fluentui-react-native/separator": "0.17.11",
|
|
65
65
|
"@fluentui-react-native/spinner": "0.8.14",
|
|
@@ -39,6 +39,12 @@ const overflowTestPageStyles = StyleSheet.create({
|
|
|
39
39
|
menuTrigger: {
|
|
40
40
|
alignSelf: 'center',
|
|
41
41
|
},
|
|
42
|
+
dynamicAddRemoval: {
|
|
43
|
+
width: 400,
|
|
44
|
+
borderWidth: 1,
|
|
45
|
+
borderStyle: 'solid',
|
|
46
|
+
borderColor: 'black',
|
|
47
|
+
},
|
|
42
48
|
});
|
|
43
49
|
|
|
44
50
|
interface OverflowMenuProps {
|
|
@@ -47,6 +53,7 @@ interface OverflowMenuProps {
|
|
|
47
53
|
|
|
48
54
|
function OverflowMenu(props: OverflowMenuProps) {
|
|
49
55
|
const { showMenu, visibleMenuItems, menuTriggerRef, onMenuTriggerLayout } = useOverflowMenu();
|
|
56
|
+
|
|
50
57
|
if (showMenu) {
|
|
51
58
|
return (
|
|
52
59
|
<Menu>
|
|
@@ -65,7 +72,7 @@ function OverflowMenu(props: OverflowMenuProps) {
|
|
|
65
72
|
<MenuList>
|
|
66
73
|
{visibleMenuItems.map((id) => (
|
|
67
74
|
<MenuItem onClick={() => props.onItemPress(id)} key={id}>
|
|
68
|
-
{itemLabels[id]}
|
|
75
|
+
{itemLabels[id] ?? 'Item ' + id}
|
|
69
76
|
</MenuItem>
|
|
70
77
|
))}
|
|
71
78
|
</MenuList>
|
|
@@ -143,6 +150,37 @@ function OverflowDifferentWidthTest() {
|
|
|
143
150
|
);
|
|
144
151
|
}
|
|
145
152
|
|
|
153
|
+
function OverflowDynamicAddRemovalTest() {
|
|
154
|
+
const [ids, setIDs] = React.useState(['1', '2', '3']);
|
|
155
|
+
const addItem = React.useCallback(
|
|
156
|
+
() =>
|
|
157
|
+
setIDs((prev) => {
|
|
158
|
+
const newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
|
|
159
|
+
return [...prev, newItem];
|
|
160
|
+
}),
|
|
161
|
+
[],
|
|
162
|
+
);
|
|
163
|
+
const removeItem = React.useCallback((item: string) => setIDs((prev) => prev.filter((x) => x !== item)), []);
|
|
164
|
+
return (
|
|
165
|
+
<View style={overflowTestPageStyles.containerStyle}>
|
|
166
|
+
<Text>Add buttons using the button below. Remove by clicking on individual items in the Overflow container.</Text>
|
|
167
|
+
<Button onClick={addItem}>Add item</Button>
|
|
168
|
+
<Text>Overflow Items (raw): {ids.reduce((prev, curr) => prev + ', ' + curr)}</Text>
|
|
169
|
+
<Divider />
|
|
170
|
+
<Overflow padding={4} style={overflowTestPageStyles.dynamicAddRemoval} itemIDs={ids}>
|
|
171
|
+
{ids.map((id) => {
|
|
172
|
+
return (
|
|
173
|
+
<OverflowItem key={id} overflowID={id}>
|
|
174
|
+
<Button onClick={() => removeItem(id)}>{'Item ' + id}</Button>
|
|
175
|
+
</OverflowItem>
|
|
176
|
+
);
|
|
177
|
+
})}
|
|
178
|
+
<OverflowMenu onItemPress={removeItem} />
|
|
179
|
+
</Overflow>
|
|
180
|
+
</View>
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
|
|
146
184
|
export const OverflowTest: React.FunctionComponent = () => {
|
|
147
185
|
const description =
|
|
148
186
|
'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
|
|
@@ -161,6 +199,10 @@ export const OverflowTest: React.FunctionComponent = () => {
|
|
|
161
199
|
name: 'Overflow TabList',
|
|
162
200
|
component: OverflowTabTest,
|
|
163
201
|
},
|
|
202
|
+
{
|
|
203
|
+
name: 'Overflow Dynamic Add/Removal of Items',
|
|
204
|
+
component: OverflowDynamicAddRemovalTest,
|
|
205
|
+
},
|
|
164
206
|
{
|
|
165
207
|
name: 'Overflow Variable Width',
|
|
166
208
|
component: OverflowDifferentWidthTest,
|