@fluentui-react-native/tester 0.82.14 → 0.83.0

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.
Files changed (13) hide show
  1. package/CHANGELOG.json +122 -3
  2. package/CHANGELOG.md +30 -2
  3. package/docs/ios.md +9 -9
  4. package/docs/macos.md +7 -7
  5. package/lib/FluentTesterApp.d.ts.map +1 -1
  6. package/lib/FluentTesterApp.js +34 -3
  7. package/lib/FluentTesterApp.js.map +1 -1
  8. package/lib-commonjs/FluentTesterApp.d.ts.map +1 -1
  9. package/lib-commonjs/FluentTesterApp.js +33 -2
  10. package/lib-commonjs/FluentTesterApp.js.map +1 -1
  11. package/package.json +17 -17
  12. package/src/FluentTesterApp.tsx +36 -3
  13. package/src/TestComponents/Notification/assets/play_button.svg +1 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,126 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 05 Aug 2022 19:59:48 GMT",
5
+ "date": "Fri, 05 Aug 2022 23:21:34 GMT",
6
+ "tag": "@fluentui-react-native/tester_v0.83.0",
7
+ "version": "0.83.0",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "sanajmi@microsoft.com",
12
+ "package": "@fluentui-react-native/tester",
13
+ "commit": "019d6b43385d09d2306918baa39838f522c565a6",
14
+ "comment": "Update out of date documentation"
15
+ }
16
+ ],
17
+ "minor": [
18
+ {
19
+ "author": "joannaquu@gmail.com",
20
+ "package": "@fluentui-react-native/tester",
21
+ "commit": "0d264fca5e03c4412f1d995eee43f3cc85042748",
22
+ "comment": "add support for compact mode"
23
+ },
24
+ {
25
+ "author": "beachball",
26
+ "package": "@fluentui-react-native/tester",
27
+ "comment": "Bump @fluentui-react-native/avatar to v1.1.33",
28
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui-react-native/tester",
33
+ "comment": "Bump @fluentui-react-native/badge to v0.1.18",
34
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui-react-native/tester",
39
+ "comment": "Bump @fluentui-react-native/button to v0.24.14",
40
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui-react-native/tester",
45
+ "comment": "Bump @fluentui-react-native/experimental-button to v0.16.14",
46
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui-react-native/tester",
51
+ "comment": "Bump @fluentui-react-native/experimental-checkbox to v0.12.10",
52
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui-react-native/tester",
57
+ "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.4.17",
58
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
59
+ },
60
+ {
61
+ "author": "beachball",
62
+ "package": "@fluentui-react-native/tester",
63
+ "comment": "Bump @fluentui-react-native/experimental-tabs to v0.5.9",
64
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
65
+ },
66
+ {
67
+ "author": "beachball",
68
+ "package": "@fluentui-react-native/tester",
69
+ "comment": "Bump @fluentui-react-native/experimental-text to v0.11.1",
70
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
71
+ },
72
+ {
73
+ "author": "beachball",
74
+ "package": "@fluentui-react-native/tester",
75
+ "comment": "Bump @fluentui-react-native/icon to v0.13.4",
76
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
77
+ },
78
+ {
79
+ "author": "beachball",
80
+ "package": "@fluentui-react-native/tester",
81
+ "comment": "Bump @fluentui-react-native/interactive-hooks to v0.18.1",
82
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
83
+ },
84
+ {
85
+ "author": "beachball",
86
+ "package": "@fluentui-react-native/tester",
87
+ "comment": "Bump @fluentui-react-native/menu to v1.0.23",
88
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
89
+ },
90
+ {
91
+ "author": "beachball",
92
+ "package": "@fluentui-react-native/tester",
93
+ "comment": "Bump @fluentui-react-native/notification to v0.12.0",
94
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
95
+ },
96
+ {
97
+ "author": "beachball",
98
+ "package": "@fluentui-react-native/tester",
99
+ "comment": "Bump @fluentui-react-native/stack to v0.7.3",
100
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
101
+ },
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui-react-native/tester",
105
+ "comment": "Bump @fluentui-react-native/switch to v0.3.1",
106
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
107
+ },
108
+ {
109
+ "author": "beachball",
110
+ "package": "@fluentui-react-native/tester",
111
+ "comment": "Bump @fluentui-react-native/text to v0.14.0",
112
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
113
+ },
114
+ {
115
+ "author": "beachball",
116
+ "package": "@fluentui-react-native/tester",
117
+ "comment": "Bump @fluentui/react-native to v0.32.5",
118
+ "commit": "b77d041fc8feb1088d2b4f1a1a755a9061148b97"
119
+ }
120
+ ]
121
+ }
122
+ },
123
+ {
124
+ "date": "Fri, 05 Aug 2022 20:00:03 GMT",
6
125
  "tag": "@fluentui-react-native/tester_v0.82.14",
7
126
  "version": "0.82.14",
8
127
  "comments": {
@@ -17,13 +136,13 @@
17
136
  "author": "beachball",
18
137
  "package": "@fluentui-react-native/tester",
19
138
  "comment": "Bump @fluentui-react-native/experimental-avatar to v0.16.1",
20
- "commit": "1e36771980f2e8e3b710949eb86e4233cad14bf1"
139
+ "commit": "162454407cd6e5fbf9c824339457c11d7f94f14c"
21
140
  },
22
141
  {
23
142
  "author": "beachball",
24
143
  "package": "@fluentui-react-native/tester",
25
144
  "comment": "Bump @fluentui-react-native/experimental-native-date-picker to v0.6.1",
26
- "commit": "1e36771980f2e8e3b710949eb86e4233cad14bf1"
145
+ "commit": "162454407cd6e5fbf9c824339457c11d7f94f14c"
27
146
  }
28
147
  ]
29
148
  }
package/CHANGELOG.md CHANGED
@@ -1,12 +1,40 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Fri, 05 Aug 2022 19:59:48 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 05 Aug 2022 23:21:34 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.83.0
8
+
9
+ Fri, 05 Aug 2022 23:21:34 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - add support for compact mode (joannaquu@gmail.com)
14
+ - Bump @fluentui-react-native/avatar to v1.1.33
15
+ - Bump @fluentui-react-native/badge to v0.1.18
16
+ - Bump @fluentui-react-native/button to v0.24.14
17
+ - Bump @fluentui-react-native/experimental-button to v0.16.14
18
+ - Bump @fluentui-react-native/experimental-checkbox to v0.12.10
19
+ - Bump @fluentui-react-native/experimental-menu-button to v0.4.17
20
+ - Bump @fluentui-react-native/experimental-tabs to v0.5.9
21
+ - Bump @fluentui-react-native/experimental-text to v0.11.1
22
+ - Bump @fluentui-react-native/icon to v0.13.4
23
+ - Bump @fluentui-react-native/interactive-hooks to v0.18.1
24
+ - Bump @fluentui-react-native/menu to v1.0.23
25
+ - Bump @fluentui-react-native/notification to v0.12.0
26
+ - Bump @fluentui-react-native/stack to v0.7.3
27
+ - Bump @fluentui-react-native/switch to v0.3.1
28
+ - Bump @fluentui-react-native/text to v0.14.0
29
+ - Bump @fluentui/react-native to v0.32.5
30
+
31
+ ### Patches
32
+
33
+ - Update out of date documentation (sanajmi@microsoft.com)
34
+
7
35
  ## 0.82.14
8
36
 
9
- Fri, 05 Aug 2022 19:59:48 GMT
37
+ Fri, 05 Aug 2022 20:00:03 GMT
10
38
 
11
39
  ### Patches
12
40
 
package/docs/ios.md CHANGED
@@ -13,10 +13,10 @@ yarn
13
13
  yarn build
14
14
  ```
15
15
 
16
- 2. Then go into `apps/ios/src` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
16
+ 2. Then go into `apps/fluent-tester/ios` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
17
17
 
18
18
  ```sh
19
- cd apps/ios/src
19
+ apps/fluent-tester/ios
20
20
  pod install
21
21
  ```
22
22
 
@@ -34,7 +34,7 @@ yarn ios
34
34
  Dependencies are managed by
35
35
  [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
36
36
  If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
37
- `/apps/ios/package.json`:
37
+ `/apps/fluent-tester/package.json`:
38
38
 
39
39
  ```json
40
40
  {
@@ -64,15 +64,15 @@ You can debug native code in Xcode. To debug javascript code, you can either use
64
64
 
65
65
  ## Troubleshooting
66
66
 
67
- - The first time you yarn ios, you receive an error and have to run "FluentTester.xcworkspace" directly from Xcode. The workspace can be found in the apps/ios/src folder. After running the workspace the first time from Xcode, you will be able to `yarn ios` from the CLI.
68
- - If the packager didn't launch in a separate terminal and your iOS simulator just shows a white screen for your app, you can run `yarn start` from apps/ios to launch it separately
67
+ - The first time you yarn ios, you receive an error and have to run "FluentTester.xcworkspace" directly from Xcode. The workspace can be found in the apps/fluent-tester/ios folder. After running the workspace the first time from Xcode, you will be able to `yarn ios` from the CLI.
68
+ - If the packager didn't launch in a separate terminal and your iOS simulator just shows a white screen for your app, you can run `yarn start` from apps/fluent-tester to launch it separately
69
69
  - If you get the error: "Unable to resolve module... None of these files exist:...", close the packager and restart it by running `yarn start`. Note: you need to restart the packager when you switch to a different platform (e.g. from macOS or Android to iOS), but once it restarts you can reload the tester apps on all running platforms at once.
70
70
  - If you want to do direct debugging via xcode, after the pod install, you can launch src/FluentTester.xcworkspace and build/run the scheme "ReactTestApp"
71
71
  - If you want to have a clean rebuild of the generated iOS project, you can do the following:
72
72
 
73
73
  ```sh
74
- cd apps/ios/
75
- rm src/FluentTester.xcworkspace
76
- rm -r src/Pods/
77
- pod install --project-directory=src.
74
+ cd apps/fluent-tester/ios
75
+ rm FluentTester.xcworkspace
76
+ rm -rf Pods/
77
+ pod install
78
78
  ```
package/docs/macos.md CHANGED
@@ -13,10 +13,10 @@ yarn
13
13
  yarn build
14
14
  ```
15
15
 
16
- 2. Then go into `apps/macos/src` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
16
+ 2. Then go into `apps/fluent-tester/macos` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
17
17
 
18
18
  ```sh
19
- cd apps/macos/src
19
+ cd apps/fluent-tester/macos
20
20
  pod install
21
21
  ```
22
22
 
@@ -43,7 +43,7 @@ You can debug native code in Xcode. To debug javascript code, you can either use
43
43
  Dependencies are managed by
44
44
  [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
45
45
  If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
46
- `/apps/macos/package.json`:
46
+ `/apps/fluent-tester/package.json`:
47
47
 
48
48
  ```json
49
49
  {
@@ -69,8 +69,8 @@ You can read more about this tool here:
69
69
  - If you want to have a clean rebuild of the generated macOS project, you can do the following:
70
70
 
71
71
  ```sh
72
- cd apps/macos/
73
- rm src/FluentTester.xcworkspace
74
- rm -r src/Pods/
75
- pod install --project-directory=src.
72
+ cd apps/fluent-tester/macos
73
+ rm FluentTester.xcworkspace
74
+ rm -r Pods/
75
+ pod install
76
76
  ```
package/lib/FluentTesterApp.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMjE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAMtE,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiCjE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAYtE,CAAC"}
package/lib/FluentTesterApp.js CHANGED
@@ -2,13 +2,44 @@
2
2
  import { __assign } from "tslib";
3
3
  import { ThemeProvider } from '@fluentui-react-native/theme';
4
4
  import * as React from 'react';
5
- import { Platform } from 'react-native';
5
+ import { Platform, useWindowDimensions } from 'react-native';
6
6
  import { FluentTester } from './FluentTester';
7
7
  import { tests } from './testPages';
8
8
  import { testerTheme } from './theme/index';
9
- var isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
9
+ /**
10
+ * Hook that "guesses" our Size Class on iOS based on our window width.
11
+ * Note: this is hacky and should not be used.
12
+ *
13
+ * For more information about Size Classes, see the following:
14
+ * https://developer.apple.com/documentation/uikit/uitraitcollection
15
+ * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
16
+ * @returns SizeClassIOS: enum determining our size class
17
+ */
18
+ var useSizeClassIOS_DO_NOT_USE = function () {
19
+ if (Platform.OS === 'ios') {
20
+ /**
21
+ * Technically this violates the rules of hooks (calling hooks inside conditions) but Platform.OS checks are pretty non-conditional.
22
+ * This is necessary because useWindowDimensions() does not work in win32.
23
+ */
24
+ // eslint-disable-next-line react-hooks/rules-of-hooks
25
+ var width = useWindowDimensions().width;
26
+ if (Platform.isPad && width > 375) {
27
+ return 'regular';
28
+ }
29
+ else {
30
+ return 'compact';
31
+ }
32
+ }
33
+ else {
34
+ return undefined;
35
+ }
36
+ };
10
37
  export var FluentTesterApp = function (props) {
38
+ var sizeClass = useSizeClassIOS_DO_NOT_USE();
39
+ var isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
40
+ // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
41
+ var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
11
42
  return (React.createElement(ThemeProvider, { theme: testerTheme },
12
- React.createElement(FluentTester, __assign({ enabledTests: tests, enableSinglePaneView: isMobile }, props))));
43
+ React.createElement(FluentTester, __assign({ enabledTests: tests, enableSinglePaneView: shouldShowSinglePane }, props))));
13
44
  };
14
45
  //# sourceMappingURL=FluentTesterApp.js.map
package/lib/FluentTesterApp.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,IAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AAEjG,MAAM,CAAC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,WAAW;QAC/B,oBAAC,YAAY,aAAC,YAAY,EAAE,KAAK,EAAE,oBAAoB,EAAE,QAAQ,IAAM,KAAK,EAAI,CAClE,CACjB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C;;;;;;;;GAQG;AACH,IAAM,0BAA0B,GAAuB;IACrD,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB;;;WAGG;QACH,sDAAsD;QACtD,IAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC,KAAK,CAAC;QAC1C,IAAI,QAAQ,CAAC,KAAK,IAAI,KAAK,GAAG,GAAG,EAAE;YACjC,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;KACF;SAAM;QACL,OAAO,SAAS,CAAC;KAClB;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,IAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEjG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,WAAW;QAC/B,oBAAC,YAAY,aAAC,YAAY,EAAE,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CAC9E,CACjB,CAAC;AACJ,CAAC,CAAC"}
package/lib-commonjs/FluentTesterApp.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMjE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAMtE,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiCjE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAYtE,CAAC"}
package/lib-commonjs/FluentTesterApp.js CHANGED
@@ -8,10 +8,41 @@ var react_native_1 = require("react-native");
8
8
  var FluentTester_1 = require("./FluentTester");
9
9
  var testPages_1 = require("./testPages");
10
10
  var index_1 = require("./theme/index");
11
- var isMobile = react_native_1.Platform.OS == 'android' || (react_native_1.Platform.OS === 'ios' && react_native_1.Platform.isPad === false);
11
+ /**
12
+ * Hook that "guesses" our Size Class on iOS based on our window width.
13
+ * Note: this is hacky and should not be used.
14
+ *
15
+ * For more information about Size Classes, see the following:
16
+ * https://developer.apple.com/documentation/uikit/uitraitcollection
17
+ * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
18
+ * @returns SizeClassIOS: enum determining our size class
19
+ */
20
+ var useSizeClassIOS_DO_NOT_USE = function () {
21
+ if (react_native_1.Platform.OS === 'ios') {
22
+ /**
23
+ * Technically this violates the rules of hooks (calling hooks inside conditions) but Platform.OS checks are pretty non-conditional.
24
+ * This is necessary because useWindowDimensions() does not work in win32.
25
+ */
26
+ // eslint-disable-next-line react-hooks/rules-of-hooks
27
+ var width = (0, react_native_1.useWindowDimensions)().width;
28
+ if (react_native_1.Platform.isPad && width > 375) {
29
+ return 'regular';
30
+ }
31
+ else {
32
+ return 'compact';
33
+ }
34
+ }
35
+ else {
36
+ return undefined;
37
+ }
38
+ };
12
39
  var FluentTesterApp = function (props) {
40
+ var sizeClass = useSizeClassIOS_DO_NOT_USE();
41
+ var isMobile = react_native_1.Platform.OS == 'android' || (react_native_1.Platform.OS === 'ios' && react_native_1.Platform.isPad === false);
42
+ // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
43
+ var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
13
44
  return (React.createElement(theme_1.ThemeProvider, { theme: index_1.testerTheme },
14
- React.createElement(FluentTester_1.FluentTester, (0, tslib_1.__assign)({ enabledTests: testPages_1.tests, enableSinglePaneView: isMobile }, props))));
45
+ React.createElement(FluentTester_1.FluentTester, (0, tslib_1.__assign)({ enabledTests: testPages_1.tests, enableSinglePaneView: shouldShowSinglePane }, props))));
15
46
  };
16
47
  exports.FluentTesterApp = FluentTesterApp;
17
48
  //# sourceMappingURL=FluentTesterApp.js.map
package/lib-commonjs/FluentTesterApp.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;AAEb,sDAA6D;AAC7D,wDAA+B;AAC/B,6CAAwC;AACxC,+CAAiE;AACjE,yCAAoC;AACpC,uCAA4C;AAE5C,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,uBAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AAE1F,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,OAAO,CACL,oBAAC,qBAAa,IAAC,KAAK,EAAE,mBAAW;QAC/B,oBAAC,2BAAY,0BAAC,YAAY,EAAE,iBAAK,EAAE,oBAAoB,EAAE,QAAQ,IAAM,KAAK,EAAI,CAClE,CACjB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,eAAe,mBAM1B"}
1
+ {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;AAEb,sDAA6D;AAC7D,wDAA+B;AAC/B,6CAA6D;AAC7D,+CAAiE;AACjE,yCAAoC;AACpC,uCAA4C;AAI5C;;;;;;;;GAQG;AACH,IAAM,0BAA0B,GAAuB;IACrD,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB;;;WAGG;QACH,sDAAsD;QACtD,IAAM,KAAK,GAAG,IAAA,kCAAmB,GAAE,CAAC,KAAK,CAAC;QAC1C,IAAI,uBAAQ,CAAC,KAAK,IAAI,KAAK,GAAG,GAAG,EAAE;YACjC,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;KACF;SAAM;QACL,OAAO,SAAS,CAAC;KAClB;AACH,CAAC,CAAC;AAEK,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,uBAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEjG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,oBAAC,qBAAa,IAAC,KAAK,EAAE,mBAAW;QAC/B,oBAAC,2BAAY,0BAAC,YAAY,EAAE,iBAAK,EAAE,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CAC9E,CACjB,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,eAAe,mBAY1B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/tester",
3
- "version": "0.82.14",
3
+ "version": "0.83.0",
4
4
  "description": "A test app to test FluentUI React Native Components during development",
5
5
  "license": "MIT",
6
6
  "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,35 +37,35 @@
37
37
  "dependencies": {
38
38
  "@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
39
39
  "@fluentui-react-native/apple-theme": ">=0.13.2 <1.0.0",
40
- "@fluentui-react-native/avatar": "^1.1.32",
41
- "@fluentui-react-native/badge": ">=0.1.17 <1.0.0",
42
- "@fluentui-react-native/button": ">=0.24.13 <1.0.0",
40
+ "@fluentui-react-native/avatar": "^1.1.33",
41
+ "@fluentui-react-native/badge": ">=0.1.18 <1.0.0",
42
+ "@fluentui-react-native/button": ">=0.24.14 <1.0.0",
43
43
  "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
44
44
  "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
45
45
  "@fluentui-react-native/experimental-avatar": ">=0.16.1 <1.0.0",
46
- "@fluentui-react-native/experimental-button": "0.16.13",
47
- "@fluentui-react-native/experimental-checkbox": "0.12.9",
46
+ "@fluentui-react-native/experimental-button": "0.16.14",
47
+ "@fluentui-react-native/experimental-checkbox": "0.12.10",
48
48
  "@fluentui-react-native/experimental-expander": "0.4.0",
49
- "@fluentui-react-native/experimental-menu-button": ">=0.4.16 <1.0.0",
49
+ "@fluentui-react-native/experimental-menu-button": ">=0.4.17 <1.0.0",
50
50
  "@fluentui-react-native/experimental-native-date-picker": ">=0.6.1 <1.0.0",
51
51
  "@fluentui-react-native/experimental-shadow": "0.2.10",
52
52
  "@fluentui-react-native/experimental-shimmer": "0.7.0",
53
- "@fluentui-react-native/experimental-tabs": "0.5.8",
54
- "@fluentui-react-native/experimental-text": ">=0.11.0 <1.0.0",
53
+ "@fluentui-react-native/experimental-tabs": "0.5.9",
54
+ "@fluentui-react-native/experimental-text": ">=0.11.1 <1.0.0",
55
55
  "@fluentui-react-native/framework": ">=0.8.0 <1.0.0",
56
- "@fluentui-react-native/icon": "0.13.3",
57
- "@fluentui-react-native/interactive-hooks": ">=0.18.0 <1.0.0",
58
- "@fluentui-react-native/menu": "^1.0.22",
59
- "@fluentui-react-native/notification": "0.11.4",
60
- "@fluentui-react-native/stack": ">=0.7.2 <1.0.0",
61
- "@fluentui-react-native/switch": "^0.3.0",
62
- "@fluentui-react-native/text": ">=0.13.0 <1.0.0",
56
+ "@fluentui-react-native/icon": "0.13.4",
57
+ "@fluentui-react-native/interactive-hooks": ">=0.18.1 <1.0.0",
58
+ "@fluentui-react-native/menu": "^1.0.23",
59
+ "@fluentui-react-native/notification": "0.12.0",
60
+ "@fluentui-react-native/stack": ">=0.7.3 <1.0.0",
61
+ "@fluentui-react-native/switch": "^0.3.1",
62
+ "@fluentui-react-native/text": ">=0.14.0 <1.0.0",
63
63
  "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
64
64
  "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
65
65
  "@fluentui-react-native/themed-stylesheet": "^1.4.0",
66
66
  "@fluentui-react-native/theming-utils": ">=0.14.0 <1.0.0",
67
67
  "@fluentui-react-native/win32-theme": ">=0.20.1 <1.0.0",
68
- "@fluentui/react-native": ">=0.32.4 <1.0.0",
68
+ "@fluentui/react-native": ">=0.32.5 <1.0.0",
69
69
  "@react-native-community/slider": "^4.2.0",
70
70
  "@react-native-menu/menu": "^0.1.2",
71
71
  "@react-native-picker/picker": "^2.2.1",
package/src/FluentTesterApp.tsx CHANGED
@@ -2,17 +2,50 @@
2
2
 
3
3
  import { ThemeProvider } from '@fluentui-react-native/theme';
4
4
  import * as React from 'react';
5
- import { Platform } from 'react-native';
5
+ import { Platform, useWindowDimensions } from 'react-native';
6
6
  import { FluentTester, FluentTesterProps } from './FluentTester';
7
7
  import { tests } from './testPages';
8
8
  import { testerTheme } from './theme/index';
9
9
 
10
- const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
10
+ type SizeClassIOS = 'regular' | 'compact' | undefined;
11
+
12
+ /**
13
+ * Hook that "guesses" our Size Class on iOS based on our window width.
14
+ * Note: this is hacky and should not be used.
15
+ *
16
+ * For more information about Size Classes, see the following:
17
+ * https://developer.apple.com/documentation/uikit/uitraitcollection
18
+ * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
19
+ * @returns SizeClassIOS: enum determining our size class
20
+ */
21
+ const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
22
+ if (Platform.OS === 'ios') {
23
+ /**
24
+ * Technically this violates the rules of hooks (calling hooks inside conditions) but Platform.OS checks are pretty non-conditional.
25
+ * This is necessary because useWindowDimensions() does not work in win32.
26
+ */
27
+ // eslint-disable-next-line react-hooks/rules-of-hooks
28
+ const width = useWindowDimensions().width;
29
+ if (Platform.isPad && width > 375) {
30
+ return 'regular';
31
+ } else {
32
+ return 'compact';
33
+ }
34
+ } else {
35
+ return undefined;
36
+ }
37
+ };
11
38
 
12
39
  export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
40
+ const sizeClass = useSizeClassIOS_DO_NOT_USE();
41
+ const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
42
+
43
+ // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
44
+ const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
45
+
13
46
  return (
14
47
  <ThemeProvider theme={testerTheme}>
15
- <FluentTester enabledTests={tests} enableSinglePaneView={isMobile} {...props} />
48
+ <FluentTester enabledTests={tests} enableSinglePaneView={shouldShowSinglePane} {...props} />
16
49
  </ThemeProvider>
17
50
  );
18
51
  };
package/src/TestComponents/Notification/assets/play_button.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M10.8556 8.15498C10.0225 7.69354 9 8.29608 9 9.24847V14.7516C9 15.704 10.0225 16.3065 10.8556 15.8451L16.6134 12.6561C16.852 12.524 17 12.2727 17 12C17 11.7273 16.852 11.4761 16.6134 11.3439L10.8556 8.15498ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12Z"/></svg>