@fluentui-react-native/stack 0.10.7 → 0.10.9
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/Stack.js +16 -39
- package/lib/Stack.js.map +1 -1
- package/lib/Stack.settings.js +1 -1
- package/lib/Stack.settings.js.map +1 -1
- package/lib/Stack.tokens.js +15 -15
- package/lib/Stack.tokens.js.map +1 -1
- package/lib/Stack.types.js +1 -1
- package/lib/Stack.types.js.map +1 -1
- package/lib/StackItem/StackItem.js +1 -1
- package/lib/StackItem/StackItem.js.map +1 -1
- package/lib/StackItem/StackItem.settings.js +1 -1
- package/lib/StackItem/StackItem.settings.js.map +1 -1
- package/lib/StackItem/StackItem.tokens.js +5 -5
- package/lib/StackItem/StackItem.tokens.js.map +1 -1
- package/lib/StackItem/StackItem.types.js +1 -1
- package/lib/StackItem/StackItem.types.js.map +1 -1
- package/lib/StackUtils.js +8 -8
- package/lib/StackUtils.js.map +1 -1
- package/lib/StackUtils.test.win32.js +16 -16
- package/lib/StackUtils.test.win32.js.map +1 -1
- package/lib/__tests__/Stack.test.js +2 -2
- package/lib/__tests__/Stack.test.js.map +1 -1
- package/lib-commonjs/Stack.js +25 -48
- package/lib-commonjs/Stack.js.map +1 -1
- package/lib-commonjs/Stack.settings.js +1 -1
- package/lib-commonjs/Stack.settings.js.map +1 -1
- package/lib-commonjs/Stack.tokens.js +15 -15
- package/lib-commonjs/Stack.tokens.js.map +1 -1
- package/lib-commonjs/StackItem/StackItem.js +6 -6
- package/lib-commonjs/StackItem/StackItem.js.map +1 -1
- package/lib-commonjs/StackItem/StackItem.settings.js +1 -1
- package/lib-commonjs/StackItem/StackItem.settings.js.map +1 -1
- package/lib-commonjs/StackItem/StackItem.tokens.js +5 -5
- package/lib-commonjs/StackItem/StackItem.tokens.js.map +1 -1
- package/lib-commonjs/StackUtils.js +8 -8
- package/lib-commonjs/StackUtils.js.map +1 -1
- package/lib-commonjs/StackUtils.test.win32.js +17 -17
- package/lib-commonjs/StackUtils.test.win32.js.map +1 -1
- package/lib-commonjs/__tests__/Stack.test.js +6 -6
- package/lib-commonjs/__tests__/Stack.test.js.map +1 -1
- package/package.json +38 -19
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,72 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/stack",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 10 Jul 2025 20:30:31 GMT",
|
|
6
|
+
"version": "0.10.9",
|
|
7
|
+
"tag": "@fluentui-react-native/stack_v0.10.9",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jasonmo@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/stack",
|
|
13
|
+
"commit": "54087dca787180bbf34630470cd0d06e88366b30",
|
|
14
|
+
"comment": "update eslint to 9.x and use new flat config format with security rules"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "ruaraki@microsoft.com",
|
|
18
|
+
"package": "@fluentui-react-native/stack",
|
|
19
|
+
"commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
|
|
20
|
+
"comment": "Run bump-versions"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
24
|
+
"package": "@fluentui-react-native/stack",
|
|
25
|
+
"commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
|
|
26
|
+
"comment": "Fixed `align-deps` warnings"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"patch": [
|
|
30
|
+
{
|
|
31
|
+
"author": "jasonmo@microsoft.com",
|
|
32
|
+
"package": "@fluentui-react-native/stack",
|
|
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:17 GMT",
|
|
41
|
+
"version": "0.10.8",
|
|
42
|
+
"tag": "@fluentui-react-native/stack_v0.10.8",
|
|
43
|
+
"comments": {
|
|
44
|
+
"patch": [
|
|
45
|
+
{
|
|
46
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
47
|
+
"package": "@fluentui-react-native/stack",
|
|
48
|
+
"commit": "24b9abab3370f008afd2dbb304751fc9af6bec4a",
|
|
49
|
+
"comment": "Add support for React Native 0.74"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Wed, 11 Jun 2025 19:34:50 GMT",
|
|
56
|
+
"version": "0.10.7",
|
|
57
|
+
"tag": "@fluentui-react-native/stack_v0.10.7",
|
|
58
|
+
"comments": {
|
|
59
|
+
"none": [
|
|
60
|
+
{
|
|
61
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
62
|
+
"package": "@fluentui-react-native/stack",
|
|
63
|
+
"commit": "2342b87a20e5a584bd2073c8c5a266f0aa48c8bb",
|
|
64
|
+
"comment": "Added missing dev dependencies"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"date": "Wed, 29 Jan 2025 23:43:53 GMT",
|
|
6
71
|
"version": "0.10.7",
|
|
7
72
|
"tag": "@fluentui-react-native/stack_v0.10.7",
|
|
8
73
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/stack
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Thu, 10 Jul 2025 20:30:31 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.10.9
|
|
8
|
+
|
|
9
|
+
Thu, 10 Jul 2025 20:30:31 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
|
|
14
|
+
|
|
15
|
+
## 0.10.8
|
|
16
|
+
|
|
17
|
+
Thu, 10 Jul 2025 19:20:17 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- Add support for React Native 0.74 (4123478+tido64@users.noreply.github.com)
|
|
22
|
+
|
|
7
23
|
## 0.10.7
|
|
8
24
|
|
|
9
|
-
Wed, 29 Jan 2025 23:
|
|
25
|
+
Wed, 29 Jan 2025 23:43:53 GMT
|
|
10
26
|
|
|
11
27
|
### Patches
|
|
12
28
|
|
package/eslint.config.js
ADDED
package/lib/Stack.js
CHANGED
|
@@ -1,25 +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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
/** @jsxRuntime classic */
|
|
24
2
|
/** @jsx withSlots */
|
|
25
3
|
import * as React from 'react';
|
|
@@ -37,22 +15,21 @@ import StackItem from './StackItem/StackItem';
|
|
|
37
15
|
function _mixinStyle(style, mixin) {
|
|
38
16
|
return style ? [style, mixin] : mixin;
|
|
39
17
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
for (var _i = 2; _i < arguments.length; _i++) {
|
|
44
|
-
children[_i - 2] = arguments[_i];
|
|
45
|
-
}
|
|
46
|
-
var _a = renderData.state, gap = _a.gap, horizontal = _a.horizontal, wrap = _a.wrap;
|
|
18
|
+
const _styleKey = 'style';
|
|
19
|
+
const render = (Slots, renderData, ...children) => {
|
|
20
|
+
const { gap, horizontal, wrap } = renderData.state;
|
|
47
21
|
if (gap && gap > 0 && children && global.__jsiExecutorDescription !== 'ChakraRuntime') {
|
|
48
|
-
|
|
22
|
+
const extraStyle = horizontal ? { marginLeft: gap } : { marginTop: gap };
|
|
49
23
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
50
24
|
// @ts-ignore - TODO, fix typing error
|
|
51
|
-
children = React.Children.map(children,
|
|
25
|
+
children = React.Children.map(children, (child, index) => {
|
|
52
26
|
if (React.isValidElement(child) && index > 0) {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return React.cloneElement(child,
|
|
27
|
+
const childProps = child.props;
|
|
28
|
+
const extraProps = { style: _mixinStyle(childProps[_styleKey], extraStyle) };
|
|
29
|
+
return React.cloneElement(child, {
|
|
30
|
+
...childProps,
|
|
31
|
+
...extraProps,
|
|
32
|
+
});
|
|
56
33
|
}
|
|
57
34
|
return child;
|
|
58
35
|
});
|
|
@@ -63,17 +40,17 @@ var render = function (Slots, renderData) {
|
|
|
63
40
|
}
|
|
64
41
|
return withSlots(Slots.root, null, children);
|
|
65
42
|
};
|
|
66
|
-
export
|
|
43
|
+
export const Stack = compose({
|
|
67
44
|
displayName: stackName,
|
|
68
|
-
settings
|
|
45
|
+
settings,
|
|
69
46
|
statics: {
|
|
70
47
|
Item: StackItem,
|
|
71
48
|
},
|
|
72
|
-
usePrepareProps:
|
|
73
|
-
|
|
49
|
+
usePrepareProps: (props, useStyling) => {
|
|
50
|
+
const { gap, horizontal, wrap, ...rest } = props;
|
|
74
51
|
return {
|
|
75
52
|
slotProps: mergeSettings(useStyling(props), { root: rest }),
|
|
76
|
-
state: { gap
|
|
53
|
+
state: { gap, horizontal, wrap },
|
|
77
54
|
};
|
|
78
55
|
},
|
|
79
56
|
render: render,
|
package/lib/Stack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAY9C,wDAAwD;AACxD,SAAS,WAAW,CAAC,KAAoC,EAAE,KAAa;IACtE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AACxC,CAAC;AAED,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B,MAAM,MAAM,GAAG,CAAC,KAA8B,EAAE,UAA4B,EAAE,GAAG,QAA2B,EAAe,EAAE;IAC3H,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,KAAM,CAAC;IAEpD,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,IAAI,MAAM,CAAC,wBAAwB,KAAK,eAAe,EAAE;QACrF,MAAM,UAAU,GAAc,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;QACpF,6DAA6D;QAC7D,sCAAsC;QACtC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAuB,EAAE,KAAa,EAAE,EAAE;YACjF,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;gBAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAe,CAAC;gBACzC,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC;gBAC7E,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,GAAG,UAAU;oBACb,GAAG,UAAU;iBACd,CAAC,CAAC;aACJ;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,IAAI,EAAE;QACR,OAAO,CACL,UAAC,KAAK,CAAC,IAAI;YACT,UAAC,KAAK,CAAC,KAAK,QAAE,QAAQ,CAAe,CAC1B,CACd,CAAC;KACH;IACD,OAAO,UAAC,KAAK,CAAC,IAAI,QAAE,QAAQ,CAAc,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAa;IACvC,WAAW,EAAE,SAAS;IACtB,QAAQ;IACR,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;KAChB;IACD,eAAe,EAAE,CAAC,KAAkB,EAAE,UAA0C,EAAE,EAAE;QAClF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACjD,OAAO;YACL,SAAS,EAAE,aAAa,CAA0B,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACpF,KAAK,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;SACjC,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE;QACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE;KACnD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,CAAC,qBAAqB,CAAC;KAC/B;CACF,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
package/lib/Stack.settings.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.settings.js","sourceRoot":"","sources":["../src/Stack.settings.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Stack.settings.js","sourceRoot":"","sources":["../src/Stack.settings.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAiC;IACpD;QACE,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;aAChB;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,UAAU,EAAE;YACV,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,aAAa,EAAE,KAAK;qBACrB;iBACF;gBACD,UAAU,EAAE;oBACV,QAAQ,EAAE;wBACR,IAAI,EAAE;4BACJ,KAAK,EAAE;gCACL,aAAa,EAAE,gBAAgB;6BAChC;yBACF;qBACF;iBACF;aACF;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,aAAa,EAAE,aAAa;qBAC7B;iBACF;aACF;YACD,YAAY,EAAE;gBACZ,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,MAAM,EAAE,MAAM;qBACf;iBACF;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,SAAS;qBACpB;iBACF;aACF;SACF;KACF;IACD,SAAS;CACV,CAAC"}
|
package/lib/Stack.tokens.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { styleFunction } from '@uifabricshared/foundation-tokens';
|
|
2
2
|
import { parseGap, parsePadding } from './StackUtils';
|
|
3
|
-
|
|
3
|
+
const nameMap = {
|
|
4
4
|
start: 'flex-start',
|
|
5
5
|
end: 'flex-end',
|
|
6
6
|
};
|
|
7
7
|
function _mapAlignment(horizontal, horizontalAlign, verticalAlign, style) {
|
|
8
|
-
|
|
8
|
+
const alignValue = horizontal ? verticalAlign : horizontalAlign;
|
|
9
9
|
if (alignValue) {
|
|
10
10
|
style.alignItems = (nameMap[alignValue] || alignValue);
|
|
11
11
|
}
|
|
12
|
-
|
|
12
|
+
const justifyValue = horizontal ? horizontalAlign : verticalAlign;
|
|
13
13
|
if (justifyValue) {
|
|
14
14
|
style.justifyContent = (nameMap[justifyValue] || justifyValue);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
const _innerKeyProps = [
|
|
18
18
|
'horizontal',
|
|
19
19
|
// 'reversed',
|
|
20
20
|
'gap',
|
|
@@ -25,10 +25,10 @@ var _innerKeyProps = [
|
|
|
25
25
|
'padding',
|
|
26
26
|
];
|
|
27
27
|
function _buildInnerStyles(tokenProps, theme) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
const { horizontal, wrap, horizontalAlign, verticalAlign, padding } = tokenProps;
|
|
29
|
+
let innerStyle = undefined;
|
|
30
|
+
const childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
31
|
+
const { rowGap, columnGap } = parseGap(childrenGap, theme);
|
|
32
32
|
if (wrap) {
|
|
33
33
|
innerStyle = {
|
|
34
34
|
rowGap: rowGap,
|
|
@@ -47,14 +47,14 @@ function _buildInnerStyles(tokenProps, theme) {
|
|
|
47
47
|
}
|
|
48
48
|
return { style: innerStyle };
|
|
49
49
|
}
|
|
50
|
-
export
|
|
50
|
+
export const buildStackInnerStyles = styleFunction(_buildInnerStyles, _innerKeyProps);
|
|
51
51
|
function _buildRootStyles(tokenProps, theme) {
|
|
52
|
-
|
|
52
|
+
const { grow, horizontal, horizontalAlign, verticalAlign, maxHeight, maxWidth, padding, wrap } = tokenProps;
|
|
53
53
|
// const childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
54
54
|
// const { rowGap, columnGap } = parseGap(childrenGap, theme);
|
|
55
|
-
|
|
56
|
-
maxHeight
|
|
57
|
-
maxWidth
|
|
55
|
+
const rootStyle = {
|
|
56
|
+
maxHeight,
|
|
57
|
+
maxWidth,
|
|
58
58
|
};
|
|
59
59
|
_mapAlignment(!!horizontal, horizontalAlign, verticalAlign, rootStyle);
|
|
60
60
|
if (grow && !wrap) {
|
|
@@ -69,7 +69,7 @@ function _buildRootStyles(tokenProps, theme) {
|
|
|
69
69
|
// reversed,
|
|
70
70
|
// disableShrink,
|
|
71
71
|
}
|
|
72
|
-
|
|
72
|
+
const _keyProps = [
|
|
73
73
|
// 'verticalFill',
|
|
74
74
|
'horizontal',
|
|
75
75
|
// 'reversed',
|
|
@@ -84,5 +84,5 @@ var _keyProps = [
|
|
|
84
84
|
'maxWidth',
|
|
85
85
|
'padding',
|
|
86
86
|
];
|
|
87
|
-
export
|
|
87
|
+
export const buildStackRootStyles = styleFunction(_buildRootStyles, _keyProps);
|
|
88
88
|
//# sourceMappingURL=Stack.tokens.js.map
|
package/lib/Stack.tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEtD,
|
|
1
|
+
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,OAAO,GAAiC;IAC5C,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,SAAS,aAAa,CAAC,UAAmB,EAAE,eAA0B,EAAE,aAAwB,EAAE,KAAgB;IAChH,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;IAChE,IAAI,UAAU,EAAE;QACd,KAAK,CAAC,UAAU,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,UAAU,CAA4B,CAAC;KACnF;IAED,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;IAClE,IAAI,YAAY,EAAE;QAChB,KAAK,CAAC,cAAc,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAgC,CAAC;KAC/F;AACH,CAAC;AAED,MAAM,cAAc,GAA2B;IAC7C,YAAY;IACZ,cAAc;IACd,KAAK;IACL,iBAAiB;IACjB,eAAe;IACf,mBAAmB;IACnB,aAAa;IACb,SAAS;CACV,CAAC;AAEF,SAAS,iBAAiB,CAAC,UAAwB,EAAE,KAAY;IAC/D,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;IAEjF,IAAI,UAAU,GAA0B,SAAS,CAAC;IAClD,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,IAAI,UAAU,CAAC,GAAG,CAAC;IAC7D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAE3D,IAAI,IAAI,EAAE;QACR,UAAU,GAAG;YACX,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC;YACrC,KAAK,EAAE,MAAM;SACd,CAAC;QACF,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;QACxE,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;SAC5B;aAAM;YACL,UAAU,CAAC,SAAS,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;SAC5B;KACF;IACD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AAC/B,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAiC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAEtH,SAAS,gBAAgB,CAAC,UAAwB,EAAE,KAAY;IAC9D,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC;IAC5G,gEAAgE;IAChE,8DAA8D;IAE9D,MAAM,SAAS,GAAc;QAC3B,SAAS;QACT,QAAQ;KACT,CAAC;IACF,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC;IACvE,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;QACjB,SAAS,CAAC,QAAQ,GAAG,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC/B;IAED,IAAI,CAAC,IAAI,EAAE;QACT,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;KAClD;IACD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAC5B,gBAAgB;IAChB,YAAY;IACZ,iBAAiB;AACnB,CAAC;AACD,MAAM,SAAS,GAA2B;IACxC,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,SAAS;IACT,MAAM;IACN,MAAM;IACN,iBAAiB;IACjB,eAAe;IACf,mBAAmB;IACnB,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAiC,gBAAgB,EAAE,SAAS,CAAC,CAAC"}
|
package/lib/Stack.types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const stackName = 'RNFStack';
|
|
2
2
|
//# sourceMappingURL=Stack.types.js.map
|
package/lib/Stack.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { compose } from '@uifabricshared/foundation-compose';
|
|
|
4
4
|
import { settings } from './StackItem.settings';
|
|
5
5
|
import { stackItemTokenProcessor } from './StackItem.tokens';
|
|
6
6
|
import { stackItemName } from './StackItem.types';
|
|
7
|
-
export
|
|
7
|
+
export const StackItem = compose({
|
|
8
8
|
displayName: stackItemName,
|
|
9
9
|
settings: settings,
|
|
10
10
|
slots: { root: { slotType: View, filter: filterViewProps } },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"StackItem.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,CAAC,MAAM,SAAS,GAA6C,OAAO,CAAiB;IACzF,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE;IAC5D,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,uBAAuB,CAAC,EAAE;CAC5C,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.settings.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.settings.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"StackItem.settings.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.settings.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,QAAQ,GAAqC;IACxD;QACE,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;aACd;SACF;KACF;IACD,aAAa;CACd,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { styleFunction } from '@uifabricshared/foundation-tokens';
|
|
2
|
-
|
|
2
|
+
const alignMap = {
|
|
3
3
|
start: 'flex-start',
|
|
4
4
|
end: 'flex-end',
|
|
5
5
|
};
|
|
6
|
-
|
|
6
|
+
const _keyProps = ['align', 'disableShrink', 'grow', 'margin', 'shrink', 'verticalFill'];
|
|
7
7
|
export function _processor(tokenProps) {
|
|
8
|
-
|
|
8
|
+
const { grow, shrink, disableShrink, align, verticalFill, margin } = tokenProps;
|
|
9
9
|
return {
|
|
10
10
|
style: {
|
|
11
|
-
margin
|
|
11
|
+
margin,
|
|
12
12
|
height: verticalFill ? '100%' : 'auto',
|
|
13
13
|
flexShrink: disableShrink || (!grow && !shrink) ? 0 : 1,
|
|
14
14
|
flexGrow: typeof grow === 'number' ? grow : grow ? 1 : undefined,
|
|
@@ -16,5 +16,5 @@ export function _processor(tokenProps) {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
export
|
|
19
|
+
export const stackItemTokenProcessor = styleFunction(_processor, _keyProps);
|
|
20
20
|
//# sourceMappingURL=StackItem.tokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.tokens.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAIlE,
|
|
1
|
+
{"version":3,"file":"StackItem.tokens.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAIlE,MAAM,QAAQ,GAA8C;IAC1D,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,MAAM,SAAS,GAA+B,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC;AAErH,MAAM,UAAU,UAAU,CAAC,UAA4B;IACrD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAEhF,OAAO;QACL,KAAK,EAAE;YACL,MAAM;YACN,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACtC,UAAU,EAAE,aAAa,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvD,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAChE,SAAS,EAAE,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS;SACnD;KACF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAqC,UAAU,EAAE,SAAS,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const stackItemName = 'RNFStackItem';
|
|
2
2
|
//# sourceMappingURL=StackItem.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.types.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"StackItem.types.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,cAAc,CAAC"}
|
package/lib/StackUtils.js
CHANGED
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
* Functions used by Stack components to simplify style-related computations
|
|
3
3
|
*/
|
|
4
4
|
// temporary hack to unblock this code while theme spacing types are agreed upon
|
|
5
|
-
|
|
5
|
+
const _spacingKey = 'spacing';
|
|
6
6
|
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const _getThemedSpacing = (space, theme) => {
|
|
8
|
+
const spacing = theme[_spacingKey];
|
|
9
9
|
if (spacing && typeof spacing === 'object' && typeof space === 'string') {
|
|
10
10
|
if (spacing.hasOwnProperty(space)) {
|
|
11
11
|
space = spacing[space];
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const numericalPart = parseFloat(space);
|
|
15
|
+
const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
16
16
|
return numericalValue;
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
@@ -22,7 +22,7 @@ var _getThemedSpacing = function (space, theme) {
|
|
|
22
22
|
* and the CSS unit (e.g. "px").
|
|
23
23
|
*/
|
|
24
24
|
export function parseGap(gap, theme) {
|
|
25
|
-
|
|
25
|
+
const result = {
|
|
26
26
|
rowGap: 0,
|
|
27
27
|
columnGap: 0,
|
|
28
28
|
};
|
|
@@ -32,13 +32,13 @@ export function parseGap(gap, theme) {
|
|
|
32
32
|
result.columnGap = gap;
|
|
33
33
|
}
|
|
34
34
|
else {
|
|
35
|
-
|
|
35
|
+
const splitGap = gap.split(' ');
|
|
36
36
|
if (splitGap.length === 2) {
|
|
37
37
|
result.rowGap = _getThemedSpacing(splitGap[0], theme);
|
|
38
38
|
result.columnGap = _getThemedSpacing(splitGap[1], theme);
|
|
39
39
|
}
|
|
40
40
|
else {
|
|
41
|
-
|
|
41
|
+
const calculatedGap = _getThemedSpacing(gap, theme);
|
|
42
42
|
result.rowGap = calculatedGap;
|
|
43
43
|
result.columnGap = calculatedGap;
|
|
44
44
|
}
|
package/lib/StackUtils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,gFAAgF;AAChF,
|
|
1
|
+
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,gFAAgF;AAChF,MAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,MAAM,iBAAiB,GAAG,CAAC,KAAkD,EAAE,KAAY,EAAU,EAAE;IACrG,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACnC,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACvE,IAAI,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YACjC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;SACxB;KACF;IAED,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAChE,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AASF;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,GAAmF,EACnF,KAAY;IAEZ,MAAM,MAAM,GAAoB;QAC9B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACb,CAAC;IACF,IAAI,GAAG,EAAE;QACP,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;YACpB,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC;SACxB;aAAM;YACL,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;gBACzB,MAAM,CAAC,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAoB,EAAE,KAAK,CAAC,CAAC;gBACzE,MAAM,CAAC,SAAS,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAoB,EAAE,KAAK,CAAC,CAAC;aAC7E;iBAAM;gBACL,MAAM,aAAa,GAAG,iBAAiB,CAAC,GAAsB,EAAE,KAAK,CAAC,CAAC;gBACvE,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC;gBAC9B,MAAM,CAAC,SAAS,GAAG,aAAa,CAAC;aAClC;SACF;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,OAA2D,EAAE,KAAY;IACpG,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QACxD,OAAO,OAA6B,CAAC;KACtC;IAED,OAAO,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC"}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
import { parseGap, parsePadding } from './StackUtils';
|
|
2
|
-
describe('StackUtils',
|
|
3
|
-
describe('parseGap',
|
|
4
|
-
|
|
2
|
+
describe('StackUtils', () => {
|
|
3
|
+
describe('parseGap', () => {
|
|
4
|
+
const theme = {
|
|
5
5
|
spacing: { m: '16em' },
|
|
6
6
|
};
|
|
7
|
-
it('returns a default value when given undefined',
|
|
7
|
+
it('returns a default value when given undefined', () => {
|
|
8
8
|
expect(parseGap(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
9
9
|
});
|
|
10
|
-
it('returns a value with px when given a number',
|
|
10
|
+
it('returns a value with px when given a number', () => {
|
|
11
11
|
expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
12
12
|
});
|
|
13
|
-
it('can parse a string with px',
|
|
13
|
+
it('can parse a string with px', () => {
|
|
14
14
|
expect(parseGap('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
|
|
15
15
|
});
|
|
16
|
-
it('can parse a string with a float',
|
|
16
|
+
it('can parse a string with a float', () => {
|
|
17
17
|
expect(parseGap('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
|
|
18
18
|
});
|
|
19
|
-
it('parses the value from the theme when given a spacing key',
|
|
19
|
+
it('parses the value from the theme when given a spacing key', () => {
|
|
20
20
|
expect(parseGap('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
|
|
21
21
|
});
|
|
22
|
-
it('can parse a string with both horizontal and vertical gap',
|
|
22
|
+
it('can parse a string with both horizontal and vertical gap', () => {
|
|
23
23
|
expect(parseGap('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
24
24
|
});
|
|
25
|
-
it('defaults to px with a string with horizontal and vertical gap with no units',
|
|
25
|
+
it('defaults to px with a string with horizontal and vertical gap with no units', () => {
|
|
26
26
|
expect(parseGap('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
|
|
27
27
|
});
|
|
28
|
-
it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key',
|
|
28
|
+
it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
|
|
29
29
|
expect(parseGap('50px m', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 16, unit: 'em' } });
|
|
30
30
|
});
|
|
31
31
|
});
|
|
32
|
-
describe('parsePadding',
|
|
33
|
-
|
|
32
|
+
describe('parsePadding', () => {
|
|
33
|
+
const theme = {
|
|
34
34
|
spacing: {
|
|
35
35
|
s2: '5px',
|
|
36
36
|
s1: '10px',
|
|
@@ -39,14 +39,14 @@ describe('StackUtils', function () {
|
|
|
39
39
|
l2: '25px',
|
|
40
40
|
},
|
|
41
41
|
};
|
|
42
|
-
it('returns its argument when given undefined, a number, or an empty string',
|
|
42
|
+
it('returns its argument when given undefined, a number, or an empty string', () => {
|
|
43
43
|
expect(parsePadding(undefined, theme)).toEqual(undefined);
|
|
44
44
|
expect(parsePadding(0, theme)).toEqual(0);
|
|
45
45
|
});
|
|
46
|
-
it('returns its argument when given a CSS-style padding',
|
|
46
|
+
it('returns its argument when given a CSS-style padding', () => {
|
|
47
47
|
expect(parsePadding('10px', theme)).toEqual('10px');
|
|
48
48
|
});
|
|
49
|
-
it('converts themed spacing keys to CSS-style paddings',
|
|
49
|
+
it('converts themed spacing keys to CSS-style paddings', () => {
|
|
50
50
|
expect(parsePadding('s2', theme)).toEqual('5px');
|
|
51
51
|
});
|
|
52
52
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEtD,QAAQ,CAAC,YAAY,EAAE;
|
|
1
|
+
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { Text } from '@fluentui-react-native/text';
|
|
3
3
|
import * as renderer from 'react-test-renderer';
|
|
4
4
|
import { Stack } from '..';
|
|
5
|
-
it('Stack with tokens',
|
|
6
|
-
|
|
5
|
+
it('Stack with tokens', () => {
|
|
6
|
+
const tree = renderer
|
|
7
7
|
.create(React.createElement(Stack, { maxWidth: 400, gap: 8, padding: 16 },
|
|
8
8
|
React.createElement(Text, null, "Hello"),
|
|
9
9
|
React.createElement(Text, null, "Hello"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.test.js","sourceRoot":"","sources":["../../src/__tests__/Stack.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAE3B,EAAE,CAAC,mBAAmB,EAAE;
|
|
1
|
+
{"version":3,"file":"Stack.test.js","sourceRoot":"","sources":["../../src/__tests__/Stack.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAE3B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,QAAQ;SAClB,MAAM,CACL,oBAAC,KAAK,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE;QACvC,oBAAC,IAAI,gBAAa;QAClB,oBAAC,IAAI,gBAAa;QAClB,oBAAC,IAAI,gBAAa,CACZ,CACT;SACA,MAAM,EAAE,CAAC;IACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}
|
package/lib-commonjs/Stack.js
CHANGED
|
@@ -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);
|
|
@@ -33,17 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
22
|
__setModuleDefault(result, mod);
|
|
34
23
|
return result;
|
|
35
24
|
};
|
|
36
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
-
var t = {};
|
|
38
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
-
t[p] = s[p];
|
|
40
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
-
t[p[i]] = s[p[i]];
|
|
44
|
-
}
|
|
45
|
-
return t;
|
|
46
|
-
};
|
|
47
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
27
|
};
|
|
@@ -51,37 +29,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
51
29
|
exports.Stack = void 0;
|
|
52
30
|
/** @jsxRuntime classic */
|
|
53
31
|
/** @jsx withSlots */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
32
|
+
const React = __importStar(require("react"));
|
|
33
|
+
const react_native_1 = require("react-native");
|
|
34
|
+
const adapters_1 = require("@fluentui-react-native/adapters");
|
|
35
|
+
const tokens_1 = require("@fluentui-react-native/tokens");
|
|
36
|
+
const foundation_composable_1 = require("@uifabricshared/foundation-composable");
|
|
37
|
+
const foundation_compose_1 = require("@uifabricshared/foundation-compose");
|
|
38
|
+
const foundation_settings_1 = require("@uifabricshared/foundation-settings");
|
|
39
|
+
const Stack_settings_1 = require("./Stack.settings");
|
|
40
|
+
const Stack_tokens_1 = require("./Stack.tokens");
|
|
41
|
+
const Stack_types_1 = require("./Stack.types");
|
|
42
|
+
const StackItem_1 = __importDefault(require("./StackItem/StackItem"));
|
|
65
43
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
66
44
|
function _mixinStyle(style, mixin) {
|
|
67
45
|
return style ? [style, mixin] : mixin;
|
|
68
46
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
for (var _i = 2; _i < arguments.length; _i++) {
|
|
73
|
-
children[_i - 2] = arguments[_i];
|
|
74
|
-
}
|
|
75
|
-
var _a = renderData.state, gap = _a.gap, horizontal = _a.horizontal, wrap = _a.wrap;
|
|
47
|
+
const _styleKey = 'style';
|
|
48
|
+
const render = (Slots, renderData, ...children) => {
|
|
49
|
+
const { gap, horizontal, wrap } = renderData.state;
|
|
76
50
|
if (gap && gap > 0 && children && global.__jsiExecutorDescription !== 'ChakraRuntime') {
|
|
77
|
-
|
|
51
|
+
const extraStyle = horizontal ? { marginLeft: gap } : { marginTop: gap };
|
|
78
52
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
79
53
|
// @ts-ignore - TODO, fix typing error
|
|
80
|
-
children = React.Children.map(children,
|
|
54
|
+
children = React.Children.map(children, (child, index) => {
|
|
81
55
|
if (React.isValidElement(child) && index > 0) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
return React.cloneElement(child,
|
|
56
|
+
const childProps = child.props;
|
|
57
|
+
const extraProps = { style: _mixinStyle(childProps[_styleKey], extraStyle) };
|
|
58
|
+
return React.cloneElement(child, {
|
|
59
|
+
...childProps,
|
|
60
|
+
...extraProps,
|
|
61
|
+
});
|
|
85
62
|
}
|
|
86
63
|
return child;
|
|
87
64
|
});
|
|
@@ -98,11 +75,11 @@ exports.Stack = (0, foundation_compose_1.compose)({
|
|
|
98
75
|
statics: {
|
|
99
76
|
Item: StackItem_1.default,
|
|
100
77
|
},
|
|
101
|
-
usePrepareProps:
|
|
102
|
-
|
|
78
|
+
usePrepareProps: (props, useStyling) => {
|
|
79
|
+
const { gap, horizontal, wrap, ...rest } = props;
|
|
103
80
|
return {
|
|
104
81
|
slotProps: (0, foundation_settings_1.mergeSettings)(useStyling(props), { root: rest }),
|
|
105
|
-
state: { gap
|
|
82
|
+
state: { gap, horizontal, wrap },
|
|
106
83
|
};
|
|
107
84
|
},
|
|
108
85
|
render: render,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../src/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,6CAA+B;AAC/B,+CAAoC;AAGpC,8DAAkE;AAClE,0DAAoF;AAEpF,iFAAkE;AAElE,2EAA6D;AAC7D,6EAAoE;AAEpE,qDAA4C;AAC5C,iDAA6E;AAC7E,+CAA0C;AAE1C,sEAA8C;AAY9C,wDAAwD;AACxD,SAAS,WAAW,CAAC,KAAoC,EAAE,KAAa;IACtE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AACxC,CAAC;AAED,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B,MAAM,MAAM,GAAG,CAAC,KAA8B,EAAE,UAA4B,EAAE,GAAG,QAA2B,EAAe,EAAE;IAC3H,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,KAAM,CAAC;IAEpD,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,IAAI,MAAM,CAAC,wBAAwB,KAAK,eAAe,EAAE;QACrF,MAAM,UAAU,GAAc,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;QACpF,6DAA6D;QAC7D,sCAAsC;QACtC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAuB,EAAE,KAAa,EAAE,EAAE;YACjF,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;gBAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAe,CAAC;gBACzC,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC;gBAC7E,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,GAAG,UAAU;oBACb,GAAG,UAAU;iBACd,CAAC,CAAC;aACJ;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,IAAI,EAAE;QACR,OAAO,CACL,uCAAC,KAAK,CAAC,IAAI;YACT,uCAAC,KAAK,CAAC,KAAK,QAAE,QAAQ,CAAe,CAC1B,CACd,CAAC;KACH;IACD,OAAO,uCAAC,KAAK,CAAC,IAAI,QAAE,QAAQ,CAAc,CAAC;AAC7C,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,4BAAO,EAAa;IACvC,WAAW,EAAE,uBAAS;IACtB,QAAQ,EAAR,yBAAQ;IACR,OAAO,EAAE;QACP,IAAI,EAAE,mBAAS;KAChB;IACD,eAAe,EAAE,CAAC,KAAkB,EAAE,UAA0C,EAAE,EAAE;QAClF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACjD,OAAO;YACL,SAAS,EAAE,IAAA,mCAAa,EAA0B,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACpF,KAAK,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;SACjC,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,QAAQ,EAAE,mBAAI,EAAE,MAAM,EAAE,0BAAe,EAAE;QACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,mBAAI,EAAE,MAAM,EAAE,0BAAe,EAAE;KACnD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,mCAAoB,EAAE,8BAAqB,EAAE,qBAAY,CAAC;QACjE,KAAK,EAAE,CAAC,oCAAqB,CAAC;KAC/B;CACF,CAAC,CAAC;AAEH,kBAAe,aAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.settings.js","sourceRoot":"","sources":["../src/Stack.settings.ts"],"names":[],"mappings":";;;AAGA
|
|
1
|
+
{"version":3,"file":"Stack.settings.js","sourceRoot":"","sources":["../src/Stack.settings.ts"],"names":[],"mappings":";;;AAGA,+CAA0C;AAE7B,QAAA,QAAQ,GAAiC;IACpD;QACE,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;aAChB;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,UAAU,EAAE;YACV,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,aAAa,EAAE,KAAK;qBACrB;iBACF;gBACD,UAAU,EAAE;oBACV,QAAQ,EAAE;wBACR,IAAI,EAAE;4BACJ,KAAK,EAAE;gCACL,aAAa,EAAE,gBAAgB;6BAChC;yBACF;qBACF;iBACF;aACF;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,aAAa,EAAE,aAAa;qBAC7B;iBACF;aACF;YACD,YAAY,EAAE;gBACZ,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,MAAM,EAAE,MAAM;qBACf;iBACF;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,SAAS;qBACpB;iBACF;aACF;SACF;KACF;IACD,uBAAS;CACV,CAAC"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildStackRootStyles = exports.buildStackInnerStyles = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const foundation_tokens_1 = require("@uifabricshared/foundation-tokens");
|
|
5
|
+
const StackUtils_1 = require("./StackUtils");
|
|
6
|
+
const nameMap = {
|
|
7
7
|
start: 'flex-start',
|
|
8
8
|
end: 'flex-end',
|
|
9
9
|
};
|
|
10
10
|
function _mapAlignment(horizontal, horizontalAlign, verticalAlign, style) {
|
|
11
|
-
|
|
11
|
+
const alignValue = horizontal ? verticalAlign : horizontalAlign;
|
|
12
12
|
if (alignValue) {
|
|
13
13
|
style.alignItems = (nameMap[alignValue] || alignValue);
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
const justifyValue = horizontal ? horizontalAlign : verticalAlign;
|
|
16
16
|
if (justifyValue) {
|
|
17
17
|
style.justifyContent = (nameMap[justifyValue] || justifyValue);
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
const _innerKeyProps = [
|
|
21
21
|
'horizontal',
|
|
22
22
|
// 'reversed',
|
|
23
23
|
'gap',
|
|
@@ -28,10 +28,10 @@ var _innerKeyProps = [
|
|
|
28
28
|
'padding',
|
|
29
29
|
];
|
|
30
30
|
function _buildInnerStyles(tokenProps, theme) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
const { horizontal, wrap, horizontalAlign, verticalAlign, padding } = tokenProps;
|
|
32
|
+
let innerStyle = undefined;
|
|
33
|
+
const childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
34
|
+
const { rowGap, columnGap } = (0, StackUtils_1.parseGap)(childrenGap, theme);
|
|
35
35
|
if (wrap) {
|
|
36
36
|
innerStyle = {
|
|
37
37
|
rowGap: rowGap,
|
|
@@ -52,12 +52,12 @@ function _buildInnerStyles(tokenProps, theme) {
|
|
|
52
52
|
}
|
|
53
53
|
exports.buildStackInnerStyles = (0, foundation_tokens_1.styleFunction)(_buildInnerStyles, _innerKeyProps);
|
|
54
54
|
function _buildRootStyles(tokenProps, theme) {
|
|
55
|
-
|
|
55
|
+
const { grow, horizontal, horizontalAlign, verticalAlign, maxHeight, maxWidth, padding, wrap } = tokenProps;
|
|
56
56
|
// const childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
57
57
|
// const { rowGap, columnGap } = parseGap(childrenGap, theme);
|
|
58
|
-
|
|
59
|
-
maxHeight
|
|
60
|
-
maxWidth
|
|
58
|
+
const rootStyle = {
|
|
59
|
+
maxHeight,
|
|
60
|
+
maxWidth,
|
|
61
61
|
};
|
|
62
62
|
_mapAlignment(!!horizontal, horizontalAlign, verticalAlign, rootStyle);
|
|
63
63
|
if (grow && !wrap) {
|
|
@@ -72,7 +72,7 @@ function _buildRootStyles(tokenProps, theme) {
|
|
|
72
72
|
// reversed,
|
|
73
73
|
// disableShrink,
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
const _keyProps = [
|
|
76
76
|
// 'verticalFill',
|
|
77
77
|
'horizontal',
|
|
78
78
|
// 'reversed',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.StackItem = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
const react_native_1 = require("react-native");
|
|
5
|
+
const adapters_1 = require("@fluentui-react-native/adapters");
|
|
6
|
+
const foundation_compose_1 = require("@uifabricshared/foundation-compose");
|
|
7
|
+
const StackItem_settings_1 = require("./StackItem.settings");
|
|
8
|
+
const StackItem_tokens_1 = require("./StackItem.tokens");
|
|
9
|
+
const StackItem_types_1 = require("./StackItem.types");
|
|
10
10
|
exports.StackItem = (0, foundation_compose_1.compose)({
|
|
11
11
|
displayName: StackItem_types_1.stackItemName,
|
|
12
12
|
settings: StackItem_settings_1.settings,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tsx"],"names":[],"mappings":";;;AACA
|
|
1
|
+
{"version":3,"file":"StackItem.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tsx"],"names":[],"mappings":";;;AACA,+CAAoC;AAEpC,8DAAkE;AAClE,2EAA6D;AAE7D,6DAAgD;AAChD,yDAA6D;AAC7D,uDAAkD;AAGrC,QAAA,SAAS,GAA6C,IAAA,4BAAO,EAAiB;IACzF,WAAW,EAAE,+BAAa;IAC1B,QAAQ,EAAE,6BAAQ;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,mBAAI,EAAE,MAAM,EAAE,0BAAe,EAAE,EAAE;IAC5D,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,0CAAuB,CAAC,EAAE;CAC5C,CAAC,CAAC;AAEH,kBAAe,iBAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.settings.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.settings.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"StackItem.settings.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.settings.ts"],"names":[],"mappings":";;;AAGA,uDAAkD;AAErC,QAAA,QAAQ,GAAqC;IACxD;QACE,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;aACd;SACF;KACF;IACD,+BAAa;CACd,CAAC"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.stackItemTokenProcessor = exports._processor = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const foundation_tokens_1 = require("@uifabricshared/foundation-tokens");
|
|
5
|
+
const alignMap = {
|
|
6
6
|
start: 'flex-start',
|
|
7
7
|
end: 'flex-end',
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
const _keyProps = ['align', 'disableShrink', 'grow', 'margin', 'shrink', 'verticalFill'];
|
|
10
10
|
function _processor(tokenProps) {
|
|
11
|
-
|
|
11
|
+
const { grow, shrink, disableShrink, align, verticalFill, margin } = tokenProps;
|
|
12
12
|
return {
|
|
13
13
|
style: {
|
|
14
|
-
margin
|
|
14
|
+
margin,
|
|
15
15
|
height: verticalFill ? '100%' : 'auto',
|
|
16
16
|
flexShrink: disableShrink || (!grow && !shrink) ? 0 : 1,
|
|
17
17
|
flexGrow: typeof grow === 'number' ? grow : grow ? 1 : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.tokens.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tokens.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"StackItem.tokens.js","sourceRoot":"","sources":["../../src/StackItem/StackItem.tokens.ts"],"names":[],"mappings":";;;AAGA,yEAAkE;AAIlE,MAAM,QAAQ,GAA8C;IAC1D,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,MAAM,SAAS,GAA+B,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC;AAErH,SAAgB,UAAU,CAAC,UAA4B;IACrD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAEhF,OAAO;QACL,KAAK,EAAE;YACL,MAAM;YACN,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACtC,UAAU,EAAE,aAAa,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvD,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAChE,SAAS,EAAE,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS;SACnD;KACF,CAAC;AACJ,CAAC;AAZD,gCAYC;AAEY,QAAA,uBAAuB,GAAG,IAAA,iCAAa,EAAqC,UAAU,EAAE,SAAS,CAAC,CAAC"}
|
|
@@ -5,17 +5,17 @@ exports.parsePadding = exports.parseGap = void 0;
|
|
|
5
5
|
* Functions used by Stack components to simplify style-related computations
|
|
6
6
|
*/
|
|
7
7
|
// temporary hack to unblock this code while theme spacing types are agreed upon
|
|
8
|
-
|
|
8
|
+
const _spacingKey = 'spacing';
|
|
9
9
|
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const _getThemedSpacing = (space, theme) => {
|
|
11
|
+
const spacing = theme[_spacingKey];
|
|
12
12
|
if (spacing && typeof spacing === 'object' && typeof space === 'string') {
|
|
13
13
|
if (spacing.hasOwnProperty(space)) {
|
|
14
14
|
space = spacing[space];
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const numericalPart = parseFloat(space);
|
|
18
|
+
const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
19
19
|
return numericalValue;
|
|
20
20
|
};
|
|
21
21
|
/**
|
|
@@ -25,7 +25,7 @@ var _getThemedSpacing = function (space, theme) {
|
|
|
25
25
|
* and the CSS unit (e.g. "px").
|
|
26
26
|
*/
|
|
27
27
|
function parseGap(gap, theme) {
|
|
28
|
-
|
|
28
|
+
const result = {
|
|
29
29
|
rowGap: 0,
|
|
30
30
|
columnGap: 0,
|
|
31
31
|
};
|
|
@@ -35,13 +35,13 @@ function parseGap(gap, theme) {
|
|
|
35
35
|
result.columnGap = gap;
|
|
36
36
|
}
|
|
37
37
|
else {
|
|
38
|
-
|
|
38
|
+
const splitGap = gap.split(' ');
|
|
39
39
|
if (splitGap.length === 2) {
|
|
40
40
|
result.rowGap = _getThemedSpacing(splitGap[0], theme);
|
|
41
41
|
result.columnGap = _getThemedSpacing(splitGap[1], theme);
|
|
42
42
|
}
|
|
43
43
|
else {
|
|
44
|
-
|
|
44
|
+
const calculatedGap = _getThemedSpacing(gap, theme);
|
|
45
45
|
result.rowGap = calculatedGap;
|
|
46
46
|
result.columnGap = calculatedGap;
|
|
47
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AAEH,gFAAgF;AAChF,
|
|
1
|
+
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AAEH,gFAAgF;AAChF,MAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,MAAM,iBAAiB,GAAG,CAAC,KAAkD,EAAE,KAAY,EAAU,EAAE;IACrG,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACnC,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACvE,IAAI,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YACjC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;SACxB;KACF;IAED,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAChE,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AASF;;;;;GAKG;AACH,SAAgB,QAAQ,CACtB,GAAmF,EACnF,KAAY;IAEZ,MAAM,MAAM,GAAoB;QAC9B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACb,CAAC;IACF,IAAI,GAAG,EAAE;QACP,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;YACpB,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC;SACxB;aAAM;YACL,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;gBACzB,MAAM,CAAC,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAoB,EAAE,KAAK,CAAC,CAAC;gBACzE,MAAM,CAAC,SAAS,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAoB,EAAE,KAAK,CAAC,CAAC;aAC7E;iBAAM;gBACL,MAAM,aAAa,GAAG,iBAAiB,CAAC,GAAsB,EAAE,KAAK,CAAC,CAAC;gBACvE,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC;gBAC9B,MAAM,CAAC,SAAS,GAAG,aAAa,CAAC;aAClC;SACF;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAzBD,4BAyBC;AAED;;;GAGG;AACH,SAAgB,YAAY,CAAC,OAA2D,EAAE,KAAY;IACpG,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QACxD,OAAO,OAA6B,CAAC;KACtC;IAED,OAAO,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC;AAND,oCAMC"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
describe('StackUtils',
|
|
5
|
-
describe('parseGap',
|
|
6
|
-
|
|
3
|
+
const StackUtils_1 = require("./StackUtils");
|
|
4
|
+
describe('StackUtils', () => {
|
|
5
|
+
describe('parseGap', () => {
|
|
6
|
+
const theme = {
|
|
7
7
|
spacing: { m: '16em' },
|
|
8
8
|
};
|
|
9
|
-
it('returns a default value when given undefined',
|
|
9
|
+
it('returns a default value when given undefined', () => {
|
|
10
10
|
expect((0, StackUtils_1.parseGap)(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
11
11
|
});
|
|
12
|
-
it('returns a value with px when given a number',
|
|
12
|
+
it('returns a value with px when given a number', () => {
|
|
13
13
|
expect((0, StackUtils_1.parseGap)(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
14
14
|
});
|
|
15
|
-
it('can parse a string with px',
|
|
15
|
+
it('can parse a string with px', () => {
|
|
16
16
|
expect((0, StackUtils_1.parseGap)('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
|
|
17
17
|
});
|
|
18
|
-
it('can parse a string with a float',
|
|
18
|
+
it('can parse a string with a float', () => {
|
|
19
19
|
expect((0, StackUtils_1.parseGap)('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
|
|
20
20
|
});
|
|
21
|
-
it('parses the value from the theme when given a spacing key',
|
|
21
|
+
it('parses the value from the theme when given a spacing key', () => {
|
|
22
22
|
expect((0, StackUtils_1.parseGap)('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
|
|
23
23
|
});
|
|
24
|
-
it('can parse a string with both horizontal and vertical gap',
|
|
24
|
+
it('can parse a string with both horizontal and vertical gap', () => {
|
|
25
25
|
expect((0, StackUtils_1.parseGap)('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
26
26
|
});
|
|
27
|
-
it('defaults to px with a string with horizontal and vertical gap with no units',
|
|
27
|
+
it('defaults to px with a string with horizontal and vertical gap with no units', () => {
|
|
28
28
|
expect((0, StackUtils_1.parseGap)('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
|
|
29
29
|
});
|
|
30
|
-
it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key',
|
|
30
|
+
it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
|
|
31
31
|
expect((0, StackUtils_1.parseGap)('50px m', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 16, unit: 'em' } });
|
|
32
32
|
});
|
|
33
33
|
});
|
|
34
|
-
describe('parsePadding',
|
|
35
|
-
|
|
34
|
+
describe('parsePadding', () => {
|
|
35
|
+
const theme = {
|
|
36
36
|
spacing: {
|
|
37
37
|
s2: '5px',
|
|
38
38
|
s1: '10px',
|
|
@@ -41,14 +41,14 @@ describe('StackUtils', function () {
|
|
|
41
41
|
l2: '25px',
|
|
42
42
|
},
|
|
43
43
|
};
|
|
44
|
-
it('returns its argument when given undefined, a number, or an empty string',
|
|
44
|
+
it('returns its argument when given undefined, a number, or an empty string', () => {
|
|
45
45
|
expect((0, StackUtils_1.parsePadding)(undefined, theme)).toEqual(undefined);
|
|
46
46
|
expect((0, StackUtils_1.parsePadding)(0, theme)).toEqual(0);
|
|
47
47
|
});
|
|
48
|
-
it('returns its argument when given a CSS-style padding',
|
|
48
|
+
it('returns its argument when given a CSS-style padding', () => {
|
|
49
49
|
expect((0, StackUtils_1.parsePadding)('10px', theme)).toEqual('10px');
|
|
50
50
|
});
|
|
51
|
-
it('converts themed spacing keys to CSS-style paddings',
|
|
51
|
+
it('converts themed spacing keys to CSS-style paddings', () => {
|
|
52
52
|
expect((0, StackUtils_1.parsePadding)('s2', theme)).toEqual('5px');
|
|
53
53
|
});
|
|
54
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":";;AAEA,
|
|
1
|
+
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":"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"}
|
|
@@ -23,12 +23,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
it('Stack with tokens',
|
|
31
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const text_1 = require("@fluentui-react-native/text");
|
|
28
|
+
const renderer = __importStar(require("react-test-renderer"));
|
|
29
|
+
const __1 = require("..");
|
|
30
|
+
it('Stack with tokens', () => {
|
|
31
|
+
const tree = renderer
|
|
32
32
|
.create(React.createElement(__1.Stack, { maxWidth: 400, gap: 8, padding: 16 },
|
|
33
33
|
React.createElement(text_1.Text, null, "Hello"),
|
|
34
34
|
React.createElement(text_1.Text, null, "Hello"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.test.js","sourceRoot":"","sources":["../../src/__tests__/Stack.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Stack.test.js","sourceRoot":"","sources":["../../src/__tests__/Stack.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,sDAAmD;AACnD,8DAAgD;AAEhD,0BAA2B;AAE3B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,QAAQ;SAClB,MAAM,CACL,oBAAC,SAAK,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE;QACvC,oBAAC,WAAI,gBAAa;QAClB,oBAAC,WAAI,gBAAa;QAClB,oBAAC,WAAI,gBAAa,CACZ,CACT;SACA,MAAM,EAAE,CAAC;IACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/stack",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.9",
|
|
4
4
|
"description": "A cross-platform opinionated Fluent Text component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./lib/index.js",
|
|
10
|
+
"require": "./lib-commonjs/index.js",
|
|
11
|
+
"types": "./lib/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
7
14
|
"typings": "lib/index.d.ts",
|
|
8
15
|
"scripts": {
|
|
9
16
|
"build": "fluentui-scripts build",
|
|
@@ -22,29 +29,33 @@
|
|
|
22
29
|
"directory": "packages/components/Stack"
|
|
23
30
|
},
|
|
24
31
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/adapters": "0.13.
|
|
26
|
-
"@fluentui-react-native/framework": "0.14.
|
|
27
|
-
"@fluentui-react-native/tokens": "0.23.
|
|
28
|
-
"@uifabricshared/foundation-composable": "0.13.
|
|
29
|
-
"@uifabricshared/foundation-compose": "1.15.
|
|
30
|
-
"@uifabricshared/foundation-settings": "0.15.
|
|
31
|
-
"@uifabricshared/foundation-tokens": "0.15.
|
|
32
|
+
"@fluentui-react-native/adapters": "0.13.2",
|
|
33
|
+
"@fluentui-react-native/framework": "0.14.4",
|
|
34
|
+
"@fluentui-react-native/tokens": "0.23.3",
|
|
35
|
+
"@uifabricshared/foundation-composable": "0.13.3",
|
|
36
|
+
"@uifabricshared/foundation-compose": "1.15.4",
|
|
37
|
+
"@uifabricshared/foundation-settings": "0.15.3",
|
|
38
|
+
"@uifabricshared/foundation-tokens": "0.15.4"
|
|
32
39
|
},
|
|
33
40
|
"devDependencies": {
|
|
41
|
+
"@babel/core": "^7.20.0",
|
|
34
42
|
"@fluentui-react-native/eslint-config-rules": "0.1.1",
|
|
35
43
|
"@fluentui-react-native/scripts": "0.1.1",
|
|
36
|
-
"@fluentui-react-native/text": "0.24.
|
|
37
|
-
"@react-native/babel-preset": "^0.
|
|
38
|
-
"@react-native/metro-config": "^0.
|
|
44
|
+
"@fluentui-react-native/text": "0.24.8",
|
|
45
|
+
"@react-native/babel-preset": "^0.74.0",
|
|
46
|
+
"@react-native/metro-config": "^0.74.0",
|
|
47
|
+
"@types/react": "~18.2.0",
|
|
39
48
|
"react": "18.2.0",
|
|
40
|
-
"react-native": "^0.
|
|
49
|
+
"react-native": "^0.74.0",
|
|
50
|
+
"react-native-macos": "^0.74.0",
|
|
51
|
+
"react-native-windows": "^0.74.0"
|
|
41
52
|
},
|
|
42
53
|
"peerDependencies": {
|
|
43
|
-
"@office-iss/react-native-win32": "^0.
|
|
54
|
+
"@office-iss/react-native-win32": "^0.74.0",
|
|
44
55
|
"react": "18.2.0",
|
|
45
|
-
"react-native": "^0.73.0",
|
|
46
|
-
"react-native-macos": "^0.73.0",
|
|
47
|
-
"react-native-windows": "^0.73.0"
|
|
56
|
+
"react-native": "^0.73.0 || ^0.74.0",
|
|
57
|
+
"react-native-macos": "^0.73.0 || ^0.74.0",
|
|
58
|
+
"react-native-windows": "^0.73.0 || ^0.74.0"
|
|
48
59
|
},
|
|
49
60
|
"author": "",
|
|
50
61
|
"license": "MIT",
|
|
@@ -54,13 +65,21 @@
|
|
|
54
65
|
"presets": [
|
|
55
66
|
"microsoft/react-native"
|
|
56
67
|
],
|
|
57
|
-
"requirements":
|
|
58
|
-
"
|
|
59
|
-
|
|
68
|
+
"requirements": {
|
|
69
|
+
"development": [
|
|
70
|
+
"react-native@0.74"
|
|
71
|
+
],
|
|
72
|
+
"production": [
|
|
73
|
+
"react-native@0.73 || 0.74"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
60
76
|
"capabilities": [
|
|
77
|
+
"babel-preset-react-native",
|
|
61
78
|
"core",
|
|
62
79
|
"core-android",
|
|
63
80
|
"core-ios",
|
|
81
|
+
"core-macos",
|
|
82
|
+
"core-windows",
|
|
64
83
|
"react"
|
|
65
84
|
]
|
|
66
85
|
}
|
package/.eslintrc.js
DELETED