@fluentui-react-native/composition 0.11.3 → 0.11.4
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 +36 -1
- package/CHANGELOG.md +10 -2
- package/eslint.config.js +3 -0
- package/lib/composeFactory.js +8 -27
- package/lib/composeFactory.js.map +1 -1
- package/lib/composeFactory.test.js +22 -34
- package/lib/composeFactory.test.js.map +1 -1
- package/lib-commonjs/composeFactory.js +12 -31
- package/lib-commonjs/composeFactory.js.map +1 -1
- package/lib-commonjs/composeFactory.test.js +26 -38
- package/lib-commonjs/composeFactory.test.js.map +1 -1
- package/package.json +13 -5
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,42 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/composition",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 10 Jul 2025 20:30:44 GMT",
|
|
6
|
+
"version": "0.11.4",
|
|
7
|
+
"tag": "@fluentui-react-native/composition_v0.11.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/composition",
|
|
13
|
+
"commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
|
|
14
|
+
"comment": "Fixed `align-deps` warnings"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "jasonmo@microsoft.com",
|
|
18
|
+
"package": "@fluentui-react-native/composition",
|
|
19
|
+
"commit": "54087dca787180bbf34630470cd0d06e88366b30",
|
|
20
|
+
"comment": "update eslint to 9.x and use new flat config format with security rules"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "ruaraki@microsoft.com",
|
|
24
|
+
"package": "@fluentui-react-native/composition",
|
|
25
|
+
"commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
|
|
26
|
+
"comment": "Run bump-versions"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"patch": [
|
|
30
|
+
{
|
|
31
|
+
"author": "jasonmo@microsoft.com",
|
|
32
|
+
"package": "@fluentui-react-native/composition",
|
|
33
|
+
"commit": "479b93cea460a26df70c55b5d3335927ed374713",
|
|
34
|
+
"comment": "update builds to use node16 settings and modern export maps"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"date": "Thu, 10 Jul 2025 19:20:26 GMT",
|
|
6
41
|
"version": "0.11.3",
|
|
7
42
|
"tag": "@fluentui-react-native/composition_v0.11.3",
|
|
8
43
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/composition
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on Thu,
|
|
3
|
+
<!-- This log was last generated on Thu, 10 Jul 2025 20:30:44 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.11.4
|
|
8
|
+
|
|
9
|
+
Thu, 10 Jul 2025 20:30:44 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.11.3
|
|
8
16
|
|
|
9
|
-
Thu,
|
|
17
|
+
Thu, 10 Jul 2025 19:20:26 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/eslint.config.js
ADDED
package/lib/composeFactory.js
CHANGED
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import { immutableMergeCore } from '@fluentui-react-native/immutable-merge';
|
|
13
2
|
import { stagedComponent } from '@fluentui-react-native/use-slot';
|
|
14
3
|
import { buildUseSlots } from '@fluentui-react-native/use-slots';
|
|
@@ -16,33 +5,25 @@ import { buildUseStyling } from '@fluentui-react-native/use-styling';
|
|
|
16
5
|
/**
|
|
17
6
|
* options get deep merged except the tokens array gets appended
|
|
18
7
|
*/
|
|
19
|
-
|
|
8
|
+
const mergeOptions = {
|
|
20
9
|
tokens: 'appendArray',
|
|
21
10
|
object: true,
|
|
22
11
|
};
|
|
23
12
|
export function composeFactory(options, themeHelper, base) {
|
|
24
13
|
// merge options together if a base is specified
|
|
25
|
-
|
|
26
|
-
options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) :
|
|
14
|
+
const baseOptions = base?.__options;
|
|
15
|
+
options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : { ...options };
|
|
27
16
|
// build styling if styling options are specified
|
|
28
|
-
options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) :
|
|
17
|
+
options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({});
|
|
29
18
|
// build the slots hook, which will use the styling hook if it has been built
|
|
30
|
-
|
|
19
|
+
const useSlots = buildUseSlots(options);
|
|
31
20
|
// build the staged component
|
|
32
|
-
|
|
21
|
+
const component = stagedComponent((props) => options.useRender(props, useSlots));
|
|
33
22
|
// attach additional props to the returned component
|
|
34
23
|
component.displayName = options.displayName;
|
|
35
24
|
component.__options = options;
|
|
36
|
-
component.customize =
|
|
37
|
-
|
|
38
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
39
|
-
tokens[_i] = arguments[_i];
|
|
40
|
-
}
|
|
41
|
-
return composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
|
|
42
|
-
};
|
|
43
|
-
component.compose = function (customOptions) {
|
|
44
|
-
return composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
|
|
45
|
-
};
|
|
25
|
+
component.customize = (...tokens) => composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
|
|
26
|
+
component.compose = (customOptions) => composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
|
|
46
27
|
// attach statics if specified
|
|
47
28
|
if (options.statics) {
|
|
48
29
|
Object.assign(component, options.statics);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,UAAU,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,eAAe,CAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
|
@@ -1,70 +1,58 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import { View, Text } from 'react-native';
|
|
13
2
|
import { withSlots } from '@fluentui-react-native/use-slot';
|
|
14
3
|
import * as renderer from 'react-test-renderer';
|
|
15
4
|
import { composeFactory } from './composeFactory';
|
|
16
|
-
|
|
5
|
+
const theme = {
|
|
17
6
|
values: {
|
|
18
7
|
backgroundColor: 'black',
|
|
19
8
|
color: 'white',
|
|
20
9
|
},
|
|
21
10
|
components: {},
|
|
22
11
|
};
|
|
23
|
-
|
|
24
|
-
useTheme:
|
|
25
|
-
getComponentInfo:
|
|
26
|
-
|
|
27
|
-
return (_a = theme === null || theme === void 0 ? void 0 : theme.components) !== null && _a !== void 0 ? _a : theme.components[name];
|
|
12
|
+
const themeHelper = {
|
|
13
|
+
useTheme: () => theme,
|
|
14
|
+
getComponentInfo: (theme, name) => {
|
|
15
|
+
return theme?.components ?? theme.components[name];
|
|
28
16
|
},
|
|
29
17
|
};
|
|
30
18
|
function mergeProps(p1, p2) {
|
|
31
|
-
return
|
|
19
|
+
return { ...p1, ...p2 };
|
|
32
20
|
}
|
|
33
|
-
|
|
21
|
+
const Base = composeFactory({
|
|
34
22
|
tokens: [
|
|
35
|
-
|
|
23
|
+
(t) => ({
|
|
36
24
|
backgroundColor: t.values.backgroundColor,
|
|
37
25
|
color: t.values.color,
|
|
38
|
-
})
|
|
26
|
+
}),
|
|
39
27
|
],
|
|
40
28
|
slotProps: {
|
|
41
|
-
outer:
|
|
42
|
-
content:
|
|
29
|
+
outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
|
|
30
|
+
content: (tokens) => ({ style: { color: tokens.color } }),
|
|
43
31
|
},
|
|
44
32
|
slots: {
|
|
45
33
|
outer: View,
|
|
46
34
|
content: Text,
|
|
47
35
|
},
|
|
48
|
-
useRender:
|
|
49
|
-
|
|
50
|
-
return
|
|
51
|
-
withSlots(Slots.content, null, "Hello")));
|
|
36
|
+
useRender: (props, useSlots) => {
|
|
37
|
+
const Slots = useSlots(props);
|
|
38
|
+
return (extra) => (withSlots(Slots.outer, { ...mergeProps(props, extra) },
|
|
39
|
+
withSlots(Slots.content, null, "Hello")));
|
|
52
40
|
},
|
|
53
41
|
}, themeHelper);
|
|
54
|
-
|
|
55
|
-
|
|
42
|
+
const Customized = Base.customize({ backgroundColor: 'pink' });
|
|
43
|
+
const mixinStyle = {
|
|
56
44
|
width: 30,
|
|
57
45
|
height: 20,
|
|
58
46
|
borderColor: 'green',
|
|
59
47
|
borderWidth: 1,
|
|
60
48
|
};
|
|
61
|
-
describe('composeFactory test suite',
|
|
62
|
-
it('Base component render',
|
|
63
|
-
|
|
49
|
+
describe('composeFactory test suite', () => {
|
|
50
|
+
it('Base component render', () => {
|
|
51
|
+
const tree = renderer.create(withSlots(Base, { style: mixinStyle })).toJSON();
|
|
64
52
|
expect(tree).toMatchSnapshot();
|
|
65
53
|
});
|
|
66
|
-
it('Base component render',
|
|
67
|
-
|
|
54
|
+
it('Base component render', () => {
|
|
55
|
+
const tree = renderer.create(withSlots(Customized, { style: mixinStyle })).toJSON();
|
|
68
56
|
expect(tree).toMatchSnapshot();
|
|
69
57
|
});
|
|
70
58
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,cAAc,CACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,UAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,51 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.composeFactory = void 0;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
const immutable_merge_1 = require("@fluentui-react-native/immutable-merge");
|
|
5
|
+
const use_slot_1 = require("@fluentui-react-native/use-slot");
|
|
6
|
+
const use_slots_1 = require("@fluentui-react-native/use-slots");
|
|
7
|
+
const use_styling_1 = require("@fluentui-react-native/use-styling");
|
|
19
8
|
/**
|
|
20
9
|
* options get deep merged except the tokens array gets appended
|
|
21
10
|
*/
|
|
22
|
-
|
|
11
|
+
const mergeOptions = {
|
|
23
12
|
tokens: 'appendArray',
|
|
24
13
|
object: true,
|
|
25
14
|
};
|
|
26
15
|
function composeFactory(options, themeHelper, base) {
|
|
27
16
|
// merge options together if a base is specified
|
|
28
|
-
|
|
29
|
-
options = baseOptions ? (0, immutable_merge_1.immutableMergeCore)(mergeOptions, baseOptions, options) :
|
|
17
|
+
const baseOptions = base?.__options;
|
|
18
|
+
options = baseOptions ? (0, immutable_merge_1.immutableMergeCore)(mergeOptions, baseOptions, options) : { ...options };
|
|
30
19
|
// build styling if styling options are specified
|
|
31
|
-
options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) :
|
|
20
|
+
options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) : () => ({});
|
|
32
21
|
// build the slots hook, which will use the styling hook if it has been built
|
|
33
|
-
|
|
22
|
+
const useSlots = (0, use_slots_1.buildUseSlots)(options);
|
|
34
23
|
// build the staged component
|
|
35
|
-
|
|
24
|
+
const component = (0, use_slot_1.stagedComponent)((props) => options.useRender(props, useSlots));
|
|
36
25
|
// attach additional props to the returned component
|
|
37
26
|
component.displayName = options.displayName;
|
|
38
27
|
component.__options = options;
|
|
39
|
-
component.customize =
|
|
40
|
-
|
|
41
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
42
|
-
tokens[_i] = arguments[_i];
|
|
43
|
-
}
|
|
44
|
-
return composeFactory((0, immutable_merge_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
|
|
45
|
-
};
|
|
46
|
-
component.compose = function (customOptions) {
|
|
47
|
-
return composeFactory((0, immutable_merge_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
|
|
48
|
-
};
|
|
28
|
+
component.customize = (...tokens) => composeFactory((0, immutable_merge_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
|
|
29
|
+
component.compose = (customOptions) => composeFactory((0, immutable_merge_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
|
|
49
30
|
// attach statics if specified
|
|
50
31
|
if (options.statics) {
|
|
51
32
|
Object.assign(component, options.statics);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;AACA,4EAA4E;AAE5E,8DAAkE;AAElE,gEAAiE;AACjE,oEAAqE;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,SAAgB,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,oCAAkB,EAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,6BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,IAAA,yBAAa,EAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAA,0BAAe,EAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,IAAA,oCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,IAAA,oCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AA1CD,wCA0CC"}
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -34,62 +23,61 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
34
23
|
return result;
|
|
35
24
|
};
|
|
36
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
26
|
+
const react_native_1 = require("react-native");
|
|
27
|
+
const use_slot_1 = require("@fluentui-react-native/use-slot");
|
|
28
|
+
const renderer = __importStar(require("react-test-renderer"));
|
|
29
|
+
const composeFactory_1 = require("./composeFactory");
|
|
30
|
+
const theme = {
|
|
42
31
|
values: {
|
|
43
32
|
backgroundColor: 'black',
|
|
44
33
|
color: 'white',
|
|
45
34
|
},
|
|
46
35
|
components: {},
|
|
47
36
|
};
|
|
48
|
-
|
|
49
|
-
useTheme:
|
|
50
|
-
getComponentInfo:
|
|
51
|
-
|
|
52
|
-
return (_a = theme === null || theme === void 0 ? void 0 : theme.components) !== null && _a !== void 0 ? _a : theme.components[name];
|
|
37
|
+
const themeHelper = {
|
|
38
|
+
useTheme: () => theme,
|
|
39
|
+
getComponentInfo: (theme, name) => {
|
|
40
|
+
return theme?.components ?? theme.components[name];
|
|
53
41
|
},
|
|
54
42
|
};
|
|
55
43
|
function mergeProps(p1, p2) {
|
|
56
|
-
return
|
|
44
|
+
return { ...p1, ...p2 };
|
|
57
45
|
}
|
|
58
|
-
|
|
46
|
+
const Base = (0, composeFactory_1.composeFactory)({
|
|
59
47
|
tokens: [
|
|
60
|
-
|
|
48
|
+
(t) => ({
|
|
61
49
|
backgroundColor: t.values.backgroundColor,
|
|
62
50
|
color: t.values.color,
|
|
63
|
-
})
|
|
51
|
+
}),
|
|
64
52
|
],
|
|
65
53
|
slotProps: {
|
|
66
|
-
outer:
|
|
67
|
-
content:
|
|
54
|
+
outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
|
|
55
|
+
content: (tokens) => ({ style: { color: tokens.color } }),
|
|
68
56
|
},
|
|
69
57
|
slots: {
|
|
70
58
|
outer: react_native_1.View,
|
|
71
59
|
content: react_native_1.Text,
|
|
72
60
|
},
|
|
73
|
-
useRender:
|
|
74
|
-
|
|
75
|
-
return
|
|
76
|
-
(0, use_slot_1.withSlots)(Slots.content, null, "Hello")));
|
|
61
|
+
useRender: (props, useSlots) => {
|
|
62
|
+
const Slots = useSlots(props);
|
|
63
|
+
return (extra) => ((0, use_slot_1.withSlots)(Slots.outer, { ...mergeProps(props, extra) },
|
|
64
|
+
(0, use_slot_1.withSlots)(Slots.content, null, "Hello")));
|
|
77
65
|
},
|
|
78
66
|
}, themeHelper);
|
|
79
|
-
|
|
80
|
-
|
|
67
|
+
const Customized = Base.customize({ backgroundColor: 'pink' });
|
|
68
|
+
const mixinStyle = {
|
|
81
69
|
width: 30,
|
|
82
70
|
height: 20,
|
|
83
71
|
borderColor: 'green',
|
|
84
72
|
borderWidth: 1,
|
|
85
73
|
};
|
|
86
|
-
describe('composeFactory test suite',
|
|
87
|
-
it('Base component render',
|
|
88
|
-
|
|
74
|
+
describe('composeFactory test suite', () => {
|
|
75
|
+
it('Base component render', () => {
|
|
76
|
+
const tree = renderer.create((0, use_slot_1.withSlots)(Base, { style: mixinStyle })).toJSON();
|
|
89
77
|
expect(tree).toMatchSnapshot();
|
|
90
78
|
});
|
|
91
|
-
it('Base component render',
|
|
92
|
-
|
|
79
|
+
it('Base component render', () => {
|
|
80
|
+
const tree = renderer.create((0, use_slot_1.withSlots)(Customized, { style: mixinStyle })).toJSON();
|
|
93
81
|
expect(tree).toMatchSnapshot();
|
|
94
82
|
});
|
|
95
83
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,+CAA0C;AAE1C,8DAA4D;AAE5D,8DAAgD;AAGhD,qDAAkD;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,IAAA,+BAAc,EACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,0BAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,0BAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/composition",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.4",
|
|
4
4
|
"description": "Composition factories for building HOCs",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
},
|
|
10
10
|
"main": "lib-commonjs/index.js",
|
|
11
11
|
"module": "lib/index.js",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./lib/index.js",
|
|
15
|
+
"require": "./lib-commonjs/index.js",
|
|
16
|
+
"types": "./lib/index.d.ts"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
12
19
|
"typings": "lib/index.d.ts",
|
|
13
20
|
"scripts": {
|
|
14
21
|
"build": "fluentui-scripts build",
|
|
@@ -27,10 +34,10 @@
|
|
|
27
34
|
"author": "",
|
|
28
35
|
"license": "MIT",
|
|
29
36
|
"dependencies": {
|
|
30
|
-
"@fluentui-react-native/immutable-merge": "1.2.
|
|
31
|
-
"@fluentui-react-native/use-slot": "0.6.
|
|
32
|
-
"@fluentui-react-native/use-slots": "0.10.
|
|
33
|
-
"@fluentui-react-native/use-styling": "0.13.
|
|
37
|
+
"@fluentui-react-native/immutable-merge": "1.2.3",
|
|
38
|
+
"@fluentui-react-native/use-slot": "0.6.4",
|
|
39
|
+
"@fluentui-react-native/use-slots": "0.10.4",
|
|
40
|
+
"@fluentui-react-native/use-styling": "0.13.4"
|
|
34
41
|
},
|
|
35
42
|
"devDependencies": {
|
|
36
43
|
"@babel/core": "^7.20.0",
|
|
@@ -59,6 +66,7 @@
|
|
|
59
66
|
]
|
|
60
67
|
},
|
|
61
68
|
"capabilities": [
|
|
69
|
+
"babel-preset-react-native",
|
|
62
70
|
"core",
|
|
63
71
|
"core-android",
|
|
64
72
|
"core-ios"
|
package/.eslintrc.js
DELETED