@fluentui-react-native/use-slots 0.10.1 → 0.10.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 +45 -0
- package/CHANGELOG.md +17 -1
- package/lib/useSlots.samples.test.js +16 -18
- package/lib/useSlots.samples.test.js.map +1 -1
- package/lib-commonjs/useSlots.samples.test.js +39 -21
- package/lib-commonjs/useSlots.samples.test.js.map +1 -1
- package/package.json +16 -10
- package/src/__snapshots__/useSlots.samples.test.tsx.snap +109 -265
- package/src/useSlots.samples.test.tsx +43 -45
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/use-slots",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Thu, 12 Jun 2025 03:17:16 GMT",
|
|
6
|
+
"version": "0.10.3",
|
|
7
|
+
"tag": "@fluentui-react-native/use-slots_v0.10.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/use-slots",
|
|
13
|
+
"commit": "24b9abab3370f008afd2dbb304751fc9af6bec4a",
|
|
14
|
+
"comment": "Add support for React Native 0.74"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 11 Jun 2025 19:34:46 GMT",
|
|
21
|
+
"version": "0.10.2",
|
|
22
|
+
"tag": "@fluentui-react-native/use-slots_v0.10.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"none": [
|
|
25
|
+
{
|
|
26
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
27
|
+
"package": "@fluentui-react-native/use-slots",
|
|
28
|
+
"commit": "2342b87a20e5a584bd2073c8c5a266f0aa48c8bb",
|
|
29
|
+
"comment": "Added missing dev dependencies"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"date": "Wed, 29 Jan 2025 23:43:52 GMT",
|
|
36
|
+
"version": "0.10.2",
|
|
37
|
+
"tag": "@fluentui-react-native/use-slots_v0.10.2",
|
|
38
|
+
"comments": {
|
|
39
|
+
"patch": [
|
|
40
|
+
{
|
|
41
|
+
"author": "sanajmi@microsoft.com",
|
|
42
|
+
"package": "@fluentui-react-native/use-slots",
|
|
43
|
+
"commit": "5ca24ac45054439768404d117213a2ae4767235d",
|
|
44
|
+
"comment": "remove enzyme tests"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
4
49
|
{
|
|
5
50
|
"date": "Thu, 11 Apr 2024 18:08:40 GMT",
|
|
6
51
|
"version": "0.10.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/use-slots
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
<!-- This log was last generated on Thu, 12 Jun 2025 03:17:16 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.10.3
|
|
8
|
+
|
|
9
|
+
Thu, 12 Jun 2025 03:17:16 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Add support for React Native 0.74 (4123478+tido64@users.noreply.github.com)
|
|
14
|
+
|
|
15
|
+
## 0.10.2
|
|
16
|
+
|
|
17
|
+
Wed, 29 Jan 2025 23:43:52 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- remove enzyme tests (sanajmi@microsoft.com)
|
|
22
|
+
|
|
7
23
|
## 0.10.0
|
|
8
24
|
|
|
9
25
|
Thu, 11 Apr 2024 18:08:40 GMT
|
|
@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { mergeProps } from '@fluentui-react-native/merge-props';
|
|
24
24
|
import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
|
|
25
|
-
import
|
|
26
|
-
import toJson from 'enzyme-to-json';
|
|
25
|
+
import * as renderer from 'react-test-renderer';
|
|
27
26
|
import { buildUseSlots } from './buildUseSlots';
|
|
28
27
|
/**
|
|
29
28
|
* This file contains samples and description to help explain what the useSlots hook does and why it is useful
|
|
@@ -76,19 +75,17 @@ describe('useSlots sample code test suite', function () {
|
|
|
76
75
|
};
|
|
77
76
|
});
|
|
78
77
|
BoldTextStaged.displayName = 'BoldTextStaged';
|
|
79
|
-
/**
|
|
80
|
-
* The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
|
|
81
|
-
* JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
|
|
82
|
-
*/
|
|
83
78
|
it('renders sample 1 - the two types of basic bold text components', function () {
|
|
84
79
|
var styleToMerge = { color: 'black' };
|
|
85
80
|
/**
|
|
86
81
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
87
82
|
*/
|
|
88
|
-
var wrapper =
|
|
83
|
+
var wrapper = renderer
|
|
84
|
+
.create(withSlots("div", null,
|
|
89
85
|
withSlots(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
|
|
90
|
-
withSlots(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
|
|
91
|
-
|
|
86
|
+
withSlots(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
|
|
87
|
+
.toJSON();
|
|
88
|
+
expect(wrapper).toMatchSnapshot();
|
|
92
89
|
});
|
|
93
90
|
/**
|
|
94
91
|
* Example #2 - Simple component containing another simple component -------------------------------------
|
|
@@ -151,10 +148,12 @@ describe('useSlots sample code test suite', function () {
|
|
|
151
148
|
/**
|
|
152
149
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
153
150
|
*/
|
|
154
|
-
var wrapper =
|
|
151
|
+
var wrapper = renderer
|
|
152
|
+
.create(withSlots("div", null,
|
|
155
153
|
withSlots(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
|
|
156
|
-
withSlots(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
|
|
157
|
-
|
|
154
|
+
withSlots(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
|
|
155
|
+
.toJSON();
|
|
156
|
+
expect(wrapper).toMatchSnapshot();
|
|
158
157
|
});
|
|
159
158
|
/** standard props for the container */
|
|
160
159
|
var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
|
|
@@ -217,16 +216,14 @@ describe('useSlots sample code test suite', function () {
|
|
|
217
216
|
};
|
|
218
217
|
});
|
|
219
218
|
CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
|
|
220
|
-
/**
|
|
221
|
-
* Render to enzyme snapshots
|
|
222
|
-
*/
|
|
223
219
|
it('renders sample 3 - the two types of higher order header components', function () {
|
|
224
220
|
var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
|
|
225
221
|
/**
|
|
226
222
|
* Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
|
|
227
223
|
* to add up.
|
|
228
224
|
*/
|
|
229
|
-
var wrapper =
|
|
225
|
+
var wrapper = renderer
|
|
226
|
+
.create(withSlots("div", null,
|
|
230
227
|
withSlots("span", null, "--- SIMPLE USAGE COMPARISON ---"),
|
|
231
228
|
withSlots(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
|
|
232
229
|
withSlots(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
|
|
@@ -235,8 +232,9 @@ describe('useSlots sample code test suite', function () {
|
|
|
235
232
|
withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
|
|
236
233
|
withSlots("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
|
|
237
234
|
withSlots(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
|
|
238
|
-
withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
|
|
239
|
-
|
|
235
|
+
withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
|
|
236
|
+
.toJSON();
|
|
237
|
+
expect(wrapper).toMatchSnapshot();
|
|
240
238
|
});
|
|
241
239
|
});
|
|
242
240
|
//# sourceMappingURL=useSlots.samples.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,
|
|
1
|
+
{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
13
36
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
37
|
var t = {};
|
|
15
38
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -21,14 +44,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
44
|
}
|
|
22
45
|
return t;
|
|
23
46
|
};
|
|
24
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
-
};
|
|
27
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
48
|
var merge_props_1 = require("@fluentui-react-native/merge-props");
|
|
29
49
|
var use_slot_1 = require("@fluentui-react-native/use-slot");
|
|
30
|
-
var
|
|
31
|
-
var enzyme_to_json_1 = __importDefault(require("enzyme-to-json"));
|
|
50
|
+
var renderer = __importStar(require("react-test-renderer"));
|
|
32
51
|
var buildUseSlots_1 = require("./buildUseSlots");
|
|
33
52
|
/**
|
|
34
53
|
* This file contains samples and description to help explain what the useSlots hook does and why it is useful
|
|
@@ -81,19 +100,17 @@ describe('useSlots sample code test suite', function () {
|
|
|
81
100
|
};
|
|
82
101
|
});
|
|
83
102
|
BoldTextStaged.displayName = 'BoldTextStaged';
|
|
84
|
-
/**
|
|
85
|
-
* The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
|
|
86
|
-
* JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
|
|
87
|
-
*/
|
|
88
103
|
it('renders sample 1 - the two types of basic bold text components', function () {
|
|
89
104
|
var styleToMerge = { color: 'black' };
|
|
90
105
|
/**
|
|
91
106
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
92
107
|
*/
|
|
93
|
-
var wrapper =
|
|
108
|
+
var wrapper = renderer
|
|
109
|
+
.create((0, use_slot_1.withSlots)("div", null,
|
|
94
110
|
(0, use_slot_1.withSlots)(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
|
|
95
|
-
(0, use_slot_1.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
|
|
96
|
-
|
|
111
|
+
(0, use_slot_1.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
|
|
112
|
+
.toJSON();
|
|
113
|
+
expect(wrapper).toMatchSnapshot();
|
|
97
114
|
});
|
|
98
115
|
/**
|
|
99
116
|
* Example #2 - Simple component containing another simple component -------------------------------------
|
|
@@ -156,10 +173,12 @@ describe('useSlots sample code test suite', function () {
|
|
|
156
173
|
/**
|
|
157
174
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
158
175
|
*/
|
|
159
|
-
var wrapper =
|
|
176
|
+
var wrapper = renderer
|
|
177
|
+
.create((0, use_slot_1.withSlots)("div", null,
|
|
160
178
|
(0, use_slot_1.withSlots)(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
|
|
161
|
-
(0, use_slot_1.withSlots)(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
|
|
162
|
-
|
|
179
|
+
(0, use_slot_1.withSlots)(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
|
|
180
|
+
.toJSON();
|
|
181
|
+
expect(wrapper).toMatchSnapshot();
|
|
163
182
|
});
|
|
164
183
|
/** standard props for the container */
|
|
165
184
|
var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
|
|
@@ -222,16 +241,14 @@ describe('useSlots sample code test suite', function () {
|
|
|
222
241
|
};
|
|
223
242
|
});
|
|
224
243
|
CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
|
|
225
|
-
/**
|
|
226
|
-
* Render to enzyme snapshots
|
|
227
|
-
*/
|
|
228
244
|
it('renders sample 3 - the two types of higher order header components', function () {
|
|
229
245
|
var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
|
|
230
246
|
/**
|
|
231
247
|
* Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
|
|
232
248
|
* to add up.
|
|
233
249
|
*/
|
|
234
|
-
var wrapper =
|
|
250
|
+
var wrapper = renderer
|
|
251
|
+
.create((0, use_slot_1.withSlots)("div", null,
|
|
235
252
|
(0, use_slot_1.withSlots)("span", null, "--- SIMPLE USAGE COMPARISON ---"),
|
|
236
253
|
(0, use_slot_1.withSlots)(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
|
|
237
254
|
(0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
|
|
@@ -240,8 +257,9 @@ describe('useSlots sample code test suite', function () {
|
|
|
240
257
|
(0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
|
|
241
258
|
(0, use_slot_1.withSlots)("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
|
|
242
259
|
(0, use_slot_1.withSlots)(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
|
|
243
|
-
(0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
|
|
244
|
-
|
|
260
|
+
(0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
|
|
261
|
+
.toJSON();
|
|
262
|
+
expect(wrapper).toMatchSnapshot();
|
|
245
263
|
});
|
|
246
264
|
});
|
|
247
265
|
//# sourceMappingURL=useSlots.samples.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/use-slots",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3",
|
|
4
4
|
"description": "Hook function to return styled slots",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,19 +27,20 @@
|
|
|
27
27
|
"author": "",
|
|
28
28
|
"license": "MIT",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@fluentui-react-native/use-slot": "0.6.
|
|
30
|
+
"@fluentui-react-native/use-slot": "0.6.3"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@
|
|
33
|
+
"@babel/core": "^7.20.0",
|
|
34
|
+
"@fluentui-react-native/merge-props": "0.9.2",
|
|
34
35
|
"@fluentui-react-native/scripts": "0.1.1",
|
|
35
|
-
"@react-native/babel-preset": "^0.
|
|
36
|
-
"@react-native/metro-config": "^0.
|
|
36
|
+
"@react-native/babel-preset": "^0.74.0",
|
|
37
|
+
"@react-native/metro-config": "^0.74.0",
|
|
37
38
|
"react": "18.2.0",
|
|
38
|
-
"react-native": "^0.
|
|
39
|
+
"react-native": "^0.74.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": "18.2.0",
|
|
42
|
-
"react-native": "^0.73.0"
|
|
43
|
+
"react-native": "^0.73.0 || ^0.74.0"
|
|
43
44
|
},
|
|
44
45
|
"rnx-kit": {
|
|
45
46
|
"kitType": "library",
|
|
@@ -47,9 +48,14 @@
|
|
|
47
48
|
"presets": [
|
|
48
49
|
"microsoft/react-native"
|
|
49
50
|
],
|
|
50
|
-
"requirements":
|
|
51
|
-
"
|
|
52
|
-
|
|
51
|
+
"requirements": {
|
|
52
|
+
"development": [
|
|
53
|
+
"react-native@0.74"
|
|
54
|
+
],
|
|
55
|
+
"production": [
|
|
56
|
+
"react-native@0.73 || 0.74"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
53
59
|
"capabilities": [
|
|
54
60
|
"core",
|
|
55
61
|
"core-android",
|
|
@@ -2,94 +2,53 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`useSlots sample code test suite renders sample 1 - the two types of basic bold text components 1`] = `
|
|
4
4
|
<div>
|
|
5
|
-
<
|
|
5
|
+
<span
|
|
6
6
|
style={
|
|
7
7
|
{
|
|
8
8
|
"color": "black",
|
|
9
|
+
"fontWeight": 900,
|
|
9
10
|
}
|
|
10
11
|
}
|
|
11
12
|
>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"color": "black",
|
|
16
|
-
"fontWeight": 900,
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
>
|
|
20
|
-
Staged component at one level
|
|
21
|
-
</span>
|
|
22
|
-
</BoldTextStaged>
|
|
23
|
-
<BoldTextStandard
|
|
13
|
+
Staged component at one level
|
|
14
|
+
</span>
|
|
15
|
+
<span
|
|
24
16
|
style={
|
|
25
17
|
{
|
|
26
18
|
"color": "black",
|
|
19
|
+
"fontWeight": 900,
|
|
27
20
|
}
|
|
28
21
|
}
|
|
29
22
|
>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
{
|
|
33
|
-
"color": "black",
|
|
34
|
-
"fontWeight": 900,
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
>
|
|
38
|
-
Standard component of a single level
|
|
39
|
-
</span>
|
|
40
|
-
</BoldTextStandard>
|
|
23
|
+
Standard component of a single level
|
|
24
|
+
</span>
|
|
41
25
|
</div>
|
|
42
26
|
`;
|
|
43
27
|
|
|
44
28
|
exports[`useSlots sample code test suite renders sample 2 = the two types of two level header components 1`] = `
|
|
45
29
|
<div>
|
|
46
|
-
<
|
|
30
|
+
<span
|
|
47
31
|
style={
|
|
48
32
|
{
|
|
49
33
|
"color": "black",
|
|
34
|
+
"fontSize": 20,
|
|
35
|
+
"fontWeight": 900,
|
|
50
36
|
}
|
|
51
37
|
}
|
|
52
38
|
>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"color": "black",
|
|
57
|
-
"fontSize": 20,
|
|
58
|
-
"fontWeight": 900,
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
>
|
|
62
|
-
Staged component with two levels
|
|
63
|
-
</span>
|
|
64
|
-
</HeaderStaged>
|
|
65
|
-
<HeaderStandard
|
|
39
|
+
Staged component with two levels
|
|
40
|
+
</span>
|
|
41
|
+
<span
|
|
66
42
|
style={
|
|
67
43
|
{
|
|
68
44
|
"color": "black",
|
|
45
|
+
"fontSize": 20,
|
|
46
|
+
"fontWeight": 900,
|
|
69
47
|
}
|
|
70
48
|
}
|
|
71
49
|
>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
{
|
|
75
|
-
"color": "black",
|
|
76
|
-
"fontSize": 20,
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
>
|
|
80
|
-
<span
|
|
81
|
-
style={
|
|
82
|
-
{
|
|
83
|
-
"color": "black",
|
|
84
|
-
"fontSize": 20,
|
|
85
|
-
"fontWeight": 900,
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
>
|
|
89
|
-
Standard component with two levels
|
|
90
|
-
</span>
|
|
91
|
-
</BoldTextStandard>
|
|
92
|
-
</HeaderStandard>
|
|
50
|
+
Standard component with two levels
|
|
51
|
+
</span>
|
|
93
52
|
</div>
|
|
94
53
|
`;
|
|
95
54
|
|
|
@@ -98,298 +57,183 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
|
|
|
98
57
|
<span>
|
|
99
58
|
--- SIMPLE USAGE COMPARISON ---
|
|
100
59
|
</span>
|
|
101
|
-
<
|
|
60
|
+
<div
|
|
102
61
|
style={
|
|
103
62
|
{
|
|
104
63
|
"backgroundColor": "gray",
|
|
105
64
|
"borderColor": "purple",
|
|
106
65
|
"borderWidth": 1,
|
|
66
|
+
"display": "flex",
|
|
67
|
+
"flexDirection": "column",
|
|
107
68
|
}
|
|
108
69
|
}
|
|
109
70
|
>
|
|
110
|
-
<
|
|
71
|
+
<span
|
|
111
72
|
style={
|
|
112
73
|
{
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"borderWidth": 1,
|
|
116
|
-
"display": "flex",
|
|
117
|
-
"flexDirection": "column",
|
|
74
|
+
"fontSize": 20,
|
|
75
|
+
"fontWeight": 900,
|
|
118
76
|
}
|
|
119
77
|
}
|
|
120
78
|
>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"fontSize": 20,
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
>
|
|
129
|
-
<span
|
|
130
|
-
style={
|
|
131
|
-
{
|
|
132
|
-
"fontSize": 20,
|
|
133
|
-
"fontWeight": 900,
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
>
|
|
137
|
-
Standard HOC
|
|
138
|
-
</span>
|
|
139
|
-
</BoldTextStandard>
|
|
140
|
-
</HeaderStandard>
|
|
141
|
-
</div>
|
|
142
|
-
</CaptionedHeaderStandard';>
|
|
143
|
-
<CaptionedHeaderStaged
|
|
79
|
+
Standard HOC
|
|
80
|
+
</span>
|
|
81
|
+
</div>
|
|
82
|
+
<div
|
|
144
83
|
style={
|
|
145
84
|
{
|
|
146
85
|
"backgroundColor": "gray",
|
|
147
86
|
"borderColor": "purple",
|
|
148
87
|
"borderWidth": 1,
|
|
88
|
+
"display": "flex",
|
|
89
|
+
"flexDirection": "column",
|
|
149
90
|
}
|
|
150
91
|
}
|
|
151
92
|
>
|
|
152
|
-
<
|
|
93
|
+
<span
|
|
153
94
|
style={
|
|
154
95
|
{
|
|
155
|
-
"
|
|
156
|
-
"
|
|
157
|
-
"borderWidth": 1,
|
|
158
|
-
"display": "flex",
|
|
159
|
-
"flexDirection": "column",
|
|
96
|
+
"fontSize": 20,
|
|
97
|
+
"fontWeight": 900,
|
|
160
98
|
}
|
|
161
99
|
}
|
|
162
100
|
>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
"fontSize": 20,
|
|
167
|
-
"fontWeight": 900,
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
>
|
|
171
|
-
Staged HOC
|
|
172
|
-
</span>
|
|
173
|
-
</div>
|
|
174
|
-
</CaptionedHeaderStaged>
|
|
101
|
+
Staged HOC
|
|
102
|
+
</span>
|
|
103
|
+
</div>
|
|
175
104
|
<span>
|
|
176
105
|
--- COMPARISON WITH CAPTIONS ---
|
|
177
106
|
</span>
|
|
178
|
-
<
|
|
179
|
-
captionText="Caption text"
|
|
107
|
+
<div
|
|
180
108
|
style={
|
|
181
109
|
{
|
|
182
110
|
"backgroundColor": "gray",
|
|
183
111
|
"borderColor": "purple",
|
|
184
112
|
"borderWidth": 1,
|
|
113
|
+
"display": "flex",
|
|
114
|
+
"flexDirection": "column",
|
|
185
115
|
}
|
|
186
116
|
}
|
|
187
117
|
>
|
|
188
|
-
<
|
|
118
|
+
<span
|
|
189
119
|
style={
|
|
190
120
|
{
|
|
191
|
-
"
|
|
192
|
-
"
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
121
|
+
"fontSize": 20,
|
|
122
|
+
"fontWeight": 900,
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
>
|
|
126
|
+
Standard HOC with Caption
|
|
127
|
+
</span>
|
|
128
|
+
<span
|
|
129
|
+
style={
|
|
130
|
+
{
|
|
131
|
+
"fontWeight": 900,
|
|
196
132
|
}
|
|
197
133
|
}
|
|
198
134
|
>
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
"fontSize": 20,
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
>
|
|
207
|
-
<span
|
|
208
|
-
style={
|
|
209
|
-
{
|
|
210
|
-
"fontSize": 20,
|
|
211
|
-
"fontWeight": 900,
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
>
|
|
215
|
-
Standard HOC with Caption
|
|
216
|
-
</span>
|
|
217
|
-
</BoldTextStandard>
|
|
218
|
-
</HeaderStandard>
|
|
219
|
-
<BoldTextStandard>
|
|
220
|
-
<span
|
|
221
|
-
style={
|
|
222
|
-
{
|
|
223
|
-
"fontWeight": 900,
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
>
|
|
227
|
-
Caption text
|
|
228
|
-
</span>
|
|
229
|
-
</BoldTextStandard>
|
|
230
|
-
</div>
|
|
231
|
-
</CaptionedHeaderStandard';>
|
|
232
|
-
<CaptionedHeaderStaged
|
|
233
|
-
captionText="Caption text"
|
|
135
|
+
Caption text
|
|
136
|
+
</span>
|
|
137
|
+
</div>
|
|
138
|
+
<div
|
|
234
139
|
style={
|
|
235
140
|
{
|
|
236
141
|
"backgroundColor": "gray",
|
|
237
142
|
"borderColor": "purple",
|
|
238
143
|
"borderWidth": 1,
|
|
144
|
+
"display": "flex",
|
|
145
|
+
"flexDirection": "column",
|
|
239
146
|
}
|
|
240
147
|
}
|
|
241
148
|
>
|
|
242
|
-
<
|
|
149
|
+
<span
|
|
243
150
|
style={
|
|
244
151
|
{
|
|
245
|
-
"
|
|
246
|
-
"
|
|
247
|
-
"borderWidth": 1,
|
|
248
|
-
"display": "flex",
|
|
249
|
-
"flexDirection": "column",
|
|
152
|
+
"fontSize": 20,
|
|
153
|
+
"fontWeight": 900,
|
|
250
154
|
}
|
|
251
155
|
}
|
|
252
156
|
>
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
260
|
-
>
|
|
261
|
-
Staged HOC with Caption
|
|
262
|
-
</span>
|
|
263
|
-
<span
|
|
264
|
-
style={
|
|
265
|
-
{
|
|
266
|
-
"fontWeight": 900,
|
|
267
|
-
}
|
|
157
|
+
Staged HOC with Caption
|
|
158
|
+
</span>
|
|
159
|
+
<span
|
|
160
|
+
style={
|
|
161
|
+
{
|
|
162
|
+
"fontWeight": 900,
|
|
268
163
|
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
</
|
|
273
|
-
</
|
|
164
|
+
}
|
|
165
|
+
>
|
|
166
|
+
Caption text
|
|
167
|
+
</span>
|
|
168
|
+
</div>
|
|
274
169
|
<span>
|
|
275
170
|
--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---
|
|
276
171
|
</span>
|
|
277
|
-
<
|
|
278
|
-
captionColor="yellow"
|
|
279
|
-
captionText="Caption text"
|
|
280
|
-
headerColor="red"
|
|
172
|
+
<div
|
|
281
173
|
style={
|
|
282
174
|
{
|
|
283
175
|
"backgroundColor": "gray",
|
|
284
176
|
"borderColor": "purple",
|
|
285
177
|
"borderWidth": 1,
|
|
178
|
+
"display": "flex",
|
|
179
|
+
"flexDirection": "column",
|
|
286
180
|
}
|
|
287
181
|
}
|
|
288
182
|
>
|
|
289
|
-
<
|
|
183
|
+
<span
|
|
290
184
|
style={
|
|
291
185
|
{
|
|
292
|
-
"
|
|
293
|
-
"
|
|
294
|
-
"
|
|
295
|
-
"display": "flex",
|
|
296
|
-
"flexDirection": "column",
|
|
186
|
+
"color": "red",
|
|
187
|
+
"fontSize": 20,
|
|
188
|
+
"fontWeight": 900,
|
|
297
189
|
}
|
|
298
190
|
}
|
|
299
191
|
>
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<BoldTextStandard
|
|
308
|
-
style={
|
|
309
|
-
{
|
|
310
|
-
"color": "red",
|
|
311
|
-
"fontSize": 20,
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
>
|
|
315
|
-
<span
|
|
316
|
-
style={
|
|
317
|
-
{
|
|
318
|
-
"color": "red",
|
|
319
|
-
"fontSize": 20,
|
|
320
|
-
"fontWeight": 900,
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
>
|
|
324
|
-
Standard HOC with caption and customizations
|
|
325
|
-
</span>
|
|
326
|
-
</BoldTextStandard>
|
|
327
|
-
</HeaderStandard>
|
|
328
|
-
<BoldTextStandard
|
|
329
|
-
style={
|
|
330
|
-
{
|
|
331
|
-
"color": "yellow",
|
|
332
|
-
}
|
|
192
|
+
Standard HOC with caption and customizations
|
|
193
|
+
</span>
|
|
194
|
+
<span
|
|
195
|
+
style={
|
|
196
|
+
{
|
|
197
|
+
"color": "yellow",
|
|
198
|
+
"fontWeight": 900,
|
|
333
199
|
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
>
|
|
343
|
-
Caption text
|
|
344
|
-
</span>
|
|
345
|
-
</BoldTextStandard>
|
|
346
|
-
</div>
|
|
347
|
-
</CaptionedHeaderStandard';>
|
|
348
|
-
<CaptionedHeaderStaged
|
|
349
|
-
captionColor="yellow"
|
|
350
|
-
captionText="Caption text"
|
|
351
|
-
headerColor="red"
|
|
200
|
+
}
|
|
201
|
+
>
|
|
202
|
+
Caption text
|
|
203
|
+
</span>
|
|
204
|
+
</div>
|
|
205
|
+
<div
|
|
352
206
|
style={
|
|
353
207
|
{
|
|
354
208
|
"backgroundColor": "gray",
|
|
355
209
|
"borderColor": "purple",
|
|
356
210
|
"borderWidth": 1,
|
|
211
|
+
"display": "flex",
|
|
212
|
+
"flexDirection": "column",
|
|
357
213
|
}
|
|
358
214
|
}
|
|
359
215
|
>
|
|
360
|
-
<
|
|
216
|
+
<span
|
|
361
217
|
style={
|
|
362
218
|
{
|
|
363
|
-
"
|
|
364
|
-
"
|
|
365
|
-
"
|
|
366
|
-
"display": "flex",
|
|
367
|
-
"flexDirection": "column",
|
|
219
|
+
"color": "red",
|
|
220
|
+
"fontSize": 20,
|
|
221
|
+
"fontWeight": 900,
|
|
368
222
|
}
|
|
369
223
|
}
|
|
370
224
|
>
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
}
|
|
379
|
-
>
|
|
380
|
-
Staged HOC with caption and customizations
|
|
381
|
-
</span>
|
|
382
|
-
<span
|
|
383
|
-
style={
|
|
384
|
-
{
|
|
385
|
-
"color": "yellow",
|
|
386
|
-
"fontWeight": 900,
|
|
387
|
-
}
|
|
225
|
+
Staged HOC with caption and customizations
|
|
226
|
+
</span>
|
|
227
|
+
<span
|
|
228
|
+
style={
|
|
229
|
+
{
|
|
230
|
+
"color": "yellow",
|
|
231
|
+
"fontWeight": 900,
|
|
388
232
|
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
</
|
|
393
|
-
</
|
|
233
|
+
}
|
|
234
|
+
>
|
|
235
|
+
Caption text
|
|
236
|
+
</span>
|
|
237
|
+
</div>
|
|
394
238
|
</div>
|
|
395
239
|
`;
|
|
@@ -4,8 +4,7 @@ import type { CSSProperties } from 'react';
|
|
|
4
4
|
|
|
5
5
|
import { mergeProps } from '@fluentui-react-native/merge-props';
|
|
6
6
|
import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
|
|
7
|
-
import
|
|
8
|
-
import toJson from 'enzyme-to-json';
|
|
7
|
+
import * as renderer from 'react-test-renderer';
|
|
9
8
|
|
|
10
9
|
import { buildUseSlots } from './buildUseSlots';
|
|
11
10
|
|
|
@@ -73,23 +72,21 @@ describe('useSlots sample code test suite', () => {
|
|
|
73
72
|
});
|
|
74
73
|
BoldTextStaged.displayName = 'BoldTextStaged';
|
|
75
74
|
|
|
76
|
-
/**
|
|
77
|
-
* The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
|
|
78
|
-
* JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
|
|
79
|
-
*/
|
|
80
75
|
it('renders sample 1 - the two types of basic bold text components', () => {
|
|
81
76
|
const styleToMerge: TextStyle = { color: 'black' };
|
|
82
77
|
|
|
83
78
|
/**
|
|
84
79
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
85
80
|
*/
|
|
86
|
-
const wrapper =
|
|
87
|
-
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
81
|
+
const wrapper = renderer
|
|
82
|
+
.create(
|
|
83
|
+
<div>
|
|
84
|
+
<BoldTextStaged style={styleToMerge}>Staged component at one level</BoldTextStaged>
|
|
85
|
+
<BoldTextStandard style={styleToMerge}>Standard component of a single level</BoldTextStandard>
|
|
86
|
+
</div>,
|
|
87
|
+
)
|
|
88
|
+
.toJSON();
|
|
89
|
+
expect(wrapper).toMatchSnapshot();
|
|
93
90
|
});
|
|
94
91
|
|
|
95
92
|
/**
|
|
@@ -159,13 +156,15 @@ describe('useSlots sample code test suite', () => {
|
|
|
159
156
|
/**
|
|
160
157
|
* First render the staged component. This invokes the wrapper that was built by the stagedComponent function
|
|
161
158
|
*/
|
|
162
|
-
const wrapper =
|
|
163
|
-
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
159
|
+
const wrapper = renderer
|
|
160
|
+
.create(
|
|
161
|
+
<div>
|
|
162
|
+
<HeaderStaged style={styleToMerge}>Staged component with two levels</HeaderStaged>
|
|
163
|
+
<HeaderStandard style={styleToMerge}>Standard component with two levels</HeaderStandard>
|
|
164
|
+
</div>,
|
|
165
|
+
)
|
|
166
|
+
.toJSON();
|
|
167
|
+
expect(wrapper).toMatchSnapshot();
|
|
169
168
|
});
|
|
170
169
|
|
|
171
170
|
/**
|
|
@@ -250,9 +249,6 @@ describe('useSlots sample code test suite', () => {
|
|
|
250
249
|
});
|
|
251
250
|
CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
|
|
252
251
|
|
|
253
|
-
/**
|
|
254
|
-
* Render to enzyme snapshots
|
|
255
|
-
*/
|
|
256
252
|
it('renders sample 3 - the two types of higher order header components', () => {
|
|
257
253
|
const styleToMerge: ViewStyle = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
|
|
258
254
|
|
|
@@ -260,27 +256,29 @@ describe('useSlots sample code test suite', () => {
|
|
|
260
256
|
* Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
|
|
261
257
|
* to add up.
|
|
262
258
|
*/
|
|
263
|
-
const wrapper =
|
|
264
|
-
|
|
265
|
-
<
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
259
|
+
const wrapper = renderer
|
|
260
|
+
.create(
|
|
261
|
+
<div>
|
|
262
|
+
<span>--- SIMPLE USAGE COMPARISON ---</span>
|
|
263
|
+
<CaptionedHeaderStandard style={styleToMerge}>Standard HOC</CaptionedHeaderStandard>
|
|
264
|
+
<CaptionedHeaderStaged style={styleToMerge}>Staged HOC</CaptionedHeaderStaged>
|
|
265
|
+
<span>--- COMPARISON WITH CAPTIONS ---</span>
|
|
266
|
+
<CaptionedHeaderStandard style={styleToMerge} captionText="Caption text">
|
|
267
|
+
Standard HOC with Caption
|
|
268
|
+
</CaptionedHeaderStandard>
|
|
269
|
+
<CaptionedHeaderStaged style={styleToMerge} captionText="Caption text">
|
|
270
|
+
Staged HOC with Caption
|
|
271
|
+
</CaptionedHeaderStaged>
|
|
272
|
+
<span>--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---</span>
|
|
273
|
+
<CaptionedHeaderStandard style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
|
|
274
|
+
Standard HOC with caption and customizations
|
|
275
|
+
</CaptionedHeaderStandard>
|
|
276
|
+
<CaptionedHeaderStaged style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
|
|
277
|
+
Staged HOC with caption and customizations
|
|
278
|
+
</CaptionedHeaderStaged>
|
|
279
|
+
</div>,
|
|
280
|
+
)
|
|
281
|
+
.toJSON();
|
|
282
|
+
expect(wrapper).toMatchSnapshot();
|
|
285
283
|
});
|
|
286
284
|
});
|