@fluentui-react-native/composition 0.11.2 → 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 +66 -1
- package/CHANGELOG.md +18 -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 +26 -12
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,72 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/composition",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
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",
|
|
41
|
+
"version": "0.11.3",
|
|
42
|
+
"tag": "@fluentui-react-native/composition_v0.11.3",
|
|
43
|
+
"comments": {
|
|
44
|
+
"patch": [
|
|
45
|
+
{
|
|
46
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
47
|
+
"package": "@fluentui-react-native/composition",
|
|
48
|
+
"commit": "24b9abab3370f008afd2dbb304751fc9af6bec4a",
|
|
49
|
+
"comment": "Add support for React Native 0.74"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Wed, 11 Jun 2025 19:35:00 GMT",
|
|
56
|
+
"version": "0.11.2",
|
|
57
|
+
"tag": "@fluentui-react-native/composition_v0.11.2",
|
|
58
|
+
"comments": {
|
|
59
|
+
"none": [
|
|
60
|
+
{
|
|
61
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
62
|
+
"package": "@fluentui-react-native/composition",
|
|
63
|
+
"commit": "2342b87a20e5a584bd2073c8c5a266f0aa48c8bb",
|
|
64
|
+
"comment": "Added missing dev dependencies"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"date": "Wed, 29 Jan 2025 23:43:54 GMT",
|
|
6
71
|
"version": "0.11.2",
|
|
7
72
|
"tag": "@fluentui-react-native/composition_v0.11.2",
|
|
8
73
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/composition
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
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
|
+
|
|
15
|
+
## 0.11.3
|
|
16
|
+
|
|
17
|
+
Thu, 10 Jul 2025 19:20:26 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- Add support for React Native 0.74 (4123478+tido64@users.noreply.github.com)
|
|
22
|
+
|
|
7
23
|
## 0.11.2
|
|
8
24
|
|
|
9
|
-
Wed, 29 Jan 2025 23:
|
|
25
|
+
Wed, 29 Jan 2025 23:43:54 GMT
|
|
10
26
|
|
|
11
27
|
### Patches
|
|
12
28
|
|
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,21 +34,22 @@
|
|
|
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": {
|
|
43
|
+
"@babel/core": "^7.20.0",
|
|
36
44
|
"@fluentui-react-native/scripts": "0.1.1",
|
|
37
|
-
"@react-native/babel-preset": "^0.
|
|
38
|
-
"@react-native/metro-config": "^0.
|
|
45
|
+
"@react-native/babel-preset": "^0.74.0",
|
|
46
|
+
"@react-native/metro-config": "^0.74.0",
|
|
39
47
|
"react": "18.2.0",
|
|
40
|
-
"react-native": "^0.
|
|
48
|
+
"react-native": "^0.74.0"
|
|
41
49
|
},
|
|
42
50
|
"peerDependencies": {
|
|
43
51
|
"react": "18.2.0",
|
|
44
|
-
"react-native": "^0.73.0"
|
|
52
|
+
"react-native": "^0.73.0 || ^0.74.0"
|
|
45
53
|
},
|
|
46
54
|
"rnx-kit": {
|
|
47
55
|
"kitType": "library",
|
|
@@ -49,10 +57,16 @@
|
|
|
49
57
|
"presets": [
|
|
50
58
|
"microsoft/react-native"
|
|
51
59
|
],
|
|
52
|
-
"requirements":
|
|
53
|
-
"
|
|
54
|
-
|
|
60
|
+
"requirements": {
|
|
61
|
+
"development": [
|
|
62
|
+
"react-native@0.74"
|
|
63
|
+
],
|
|
64
|
+
"production": [
|
|
65
|
+
"react-native@0.73 || 0.74"
|
|
66
|
+
]
|
|
67
|
+
},
|
|
55
68
|
"capabilities": [
|
|
69
|
+
"babel-preset-react-native",
|
|
56
70
|
"core",
|
|
57
71
|
"core-android",
|
|
58
72
|
"core-ios"
|
package/.eslintrc.js
DELETED