@fluentui-react-native/stack 0.8.16 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +64 -1
- package/CHANGELOG.md +18 -2
- package/lib/Stack.tokens.d.ts.map +1 -1
- package/lib/Stack.tokens.js +6 -11
- package/lib/Stack.tokens.js.map +1 -1
- package/lib/Stack.types.d.ts +8 -5
- package/lib/Stack.types.d.ts.map +1 -1
- package/lib/Stack.types.js.map +1 -1
- package/lib/StackItem/StackItem.types.d.ts +3 -3
- package/lib/StackItem/StackItem.types.d.ts.map +1 -1
- package/lib/StackUtils.d.ts +9 -15
- package/lib/StackUtils.d.ts.map +1 -1
- package/lib/StackUtils.js +15 -32
- package/lib/StackUtils.js.map +1 -1
- package/lib/StackUtils.test.win32.js +0 -34
- package/lib/StackUtils.test.win32.js.map +1 -1
- package/lib-commonjs/Stack.tokens.d.ts.map +1 -1
- package/lib-commonjs/Stack.tokens.js +6 -11
- package/lib-commonjs/Stack.tokens.js.map +1 -1
- package/lib-commonjs/Stack.types.d.ts +8 -5
- package/lib-commonjs/Stack.types.d.ts.map +1 -1
- package/lib-commonjs/Stack.types.js.map +1 -1
- package/lib-commonjs/StackItem/StackItem.types.d.ts +3 -3
- package/lib-commonjs/StackItem/StackItem.types.d.ts.map +1 -1
- package/lib-commonjs/StackUtils.d.ts +9 -15
- package/lib-commonjs/StackUtils.d.ts.map +1 -1
- package/lib-commonjs/StackUtils.js +15 -32
- package/lib-commonjs/StackUtils.js.map +1 -1
- package/lib-commonjs/StackUtils.test.win32.js +0 -34
- package/lib-commonjs/StackUtils.test.win32.js.map +1 -1
- package/package.json +13 -12
- package/src/Stack.tokens.ts +6 -11
- package/src/Stack.types.ts +8 -5
- package/src/StackItem/StackItem.types.ts +3 -3
- package/src/StackUtils.test.win32.ts +0 -40
- package/src/StackUtils.ts +27 -42
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,70 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/stack",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 09 Nov 2023 02:32:41 GMT",
|
|
6
|
+
"version": "0.9.0",
|
|
7
|
+
"tag": "@fluentui-react-native/stack_v0.9.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "30809111+acoates-ms@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/stack",
|
|
13
|
+
"commit": "4a6a9cd63396c6e8fc6ffbfec7137652928e40ef",
|
|
14
|
+
"comment": "Update to react-native 0.72"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/stack",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/adapters to v0.12.0",
|
|
20
|
+
"commit": "not available"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/stack",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/framework to v0.12.0",
|
|
26
|
+
"commit": "not available"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui-react-native/stack",
|
|
31
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.22.0",
|
|
32
|
+
"commit": "not available"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui-react-native/stack",
|
|
37
|
+
"comment": "Bump @uifabricshared/foundation-composable to v0.12.3",
|
|
38
|
+
"commit": "not available"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui-react-native/stack",
|
|
43
|
+
"comment": "Bump @uifabricshared/foundation-compose to v1.14.13",
|
|
44
|
+
"commit": "not available"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui-react-native/stack",
|
|
49
|
+
"comment": "Bump @uifabricshared/foundation-settings to v0.14.0",
|
|
50
|
+
"commit": "not available"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui-react-native/stack",
|
|
55
|
+
"comment": "Bump @uifabricshared/foundation-tokens to v0.14.0",
|
|
56
|
+
"commit": "not available"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui-react-native/stack",
|
|
61
|
+
"comment": "Bump @fluentui-react-native/text to v0.22.0",
|
|
62
|
+
"commit": "not available"
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"date": "Tue, 07 Nov 2023 20:20:35 GMT",
|
|
6
69
|
"version": "0.8.16",
|
|
7
70
|
"tag": "@fluentui-react-native/stack_v0.8.16",
|
|
8
71
|
"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, 09 Nov 2023 02:32:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.9.0
|
|
8
|
+
|
|
9
|
+
Thu, 09 Nov 2023 02:32:41 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- Update to react-native 0.72 (30809111+acoates-ms@users.noreply.github.com)
|
|
14
|
+
- Bump @fluentui-react-native/adapters to v0.12.0
|
|
15
|
+
- Bump @fluentui-react-native/framework to v0.12.0
|
|
16
|
+
- Bump @fluentui-react-native/tokens to v0.22.0
|
|
17
|
+
- Bump @uifabricshared/foundation-composable to v0.12.3
|
|
18
|
+
- Bump @uifabricshared/foundation-compose to v1.14.13
|
|
19
|
+
- Bump @uifabricshared/foundation-settings to v0.14.0
|
|
20
|
+
- Bump @uifabricshared/foundation-tokens to v0.14.0
|
|
21
|
+
- Bump @fluentui-react-native/text to v0.22.0
|
|
22
|
+
|
|
7
23
|
## 0.8.16
|
|
8
24
|
|
|
9
|
-
Tue, 07 Nov 2023 20:
|
|
25
|
+
Tue, 07 Nov 2023 20:20:35 GMT
|
|
10
26
|
|
|
11
27
|
### Patches
|
|
12
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.tokens.d.ts","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.tokens.d.ts","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,eAAe,CAAC;AAwD7D,eAAO,MAAM,qBAAqB,8FAAmF,CAAC;AAyCtH,eAAO,MAAM,oBAAoB,8FAA6E,CAAC"}
|
package/lib/Stack.tokens.js
CHANGED
|
@@ -29,25 +29,20 @@ function _buildInnerStyles(tokenProps, theme) {
|
|
|
29
29
|
var innerStyle = undefined;
|
|
30
30
|
var childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
31
31
|
var _a = parseGap(childrenGap, theme), rowGap = _a.rowGap, columnGap = _a.columnGap;
|
|
32
|
-
var horizontalMargin = "".concat(-0.5 * columnGap.value).concat(columnGap.unit);
|
|
33
|
-
var verticalMargin = "".concat(-0.5 * rowGap.value).concat(rowGap.unit);
|
|
34
32
|
if (wrap) {
|
|
35
33
|
innerStyle = {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
marginTop: verticalMargin,
|
|
39
|
-
marginBottom: verticalMargin,
|
|
34
|
+
rowGap: rowGap,
|
|
35
|
+
columnGap: columnGap,
|
|
40
36
|
padding: parsePadding(padding, theme),
|
|
41
|
-
width:
|
|
37
|
+
width: '100%',
|
|
42
38
|
};
|
|
43
39
|
_mapAlignment(!!horizontal, horizontalAlign, verticalAlign, innerStyle);
|
|
44
|
-
var heightToSet = rowGap.value === 0 ? '100%' : "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")");
|
|
45
40
|
if (horizontal) {
|
|
46
|
-
innerStyle.height =
|
|
41
|
+
innerStyle.height = '100%';
|
|
47
42
|
}
|
|
48
43
|
else {
|
|
49
|
-
innerStyle.maxHeight =
|
|
50
|
-
innerStyle.height =
|
|
44
|
+
innerStyle.maxHeight = '100%';
|
|
45
|
+
innerStyle.height = '100%';
|
|
51
46
|
}
|
|
52
47
|
}
|
|
53
48
|
return { style: innerStyle };
|
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,IAAM,OAAO,GAAiC;IAC5C,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,SAAS,aAAa,CAAC,UAAmB,EAAE,eAA0B,EAAE,aAAwB,EAAE,KAAgB;IAChH,IAAM,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,IAAM,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,IAAM,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;IACvD,IAAA,UAAU,GAAoD,UAAU,WAA9D,EAAE,IAAI,GAA8C,UAAU,KAAxD,EAAE,eAAe,GAA6B,UAAU,gBAAvC,EAAE,aAAa,GAAc,UAAU,cAAxB,EAAE,OAAO,GAAK,UAAU,QAAf,CAAgB;IAEjF,IAAI,UAAU,GAA0B,SAAS,CAAC;IAClD,IAAM,WAAW,GAAG,UAAU,CAAC,WAAW,IAAI,UAAU,CAAC,GAAG,CAAC;IACvD,IAAA,KAAwB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,EAAlD,MAAM,YAAA,EAAE,SAAS,eAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"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"}
|
package/lib/Stack.types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { ViewStyle, ViewProps } from 'react-native';
|
|
1
|
+
import type { ViewStyle, ViewProps, DimensionValue } from 'react-native';
|
|
2
|
+
import type { Spacing } from '@fluentui-react-native/framework';
|
|
2
3
|
import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
|
|
3
4
|
import type { IRenderData } from '@uifabricshared/foundation-composable';
|
|
4
5
|
import type { IStackItemProps } from './StackItem/StackItem.types';
|
|
@@ -11,6 +12,7 @@ export type Alignment = ViewStyle['justifyContent'] | 'start' | 'end';
|
|
|
11
12
|
export interface IStackStatics {
|
|
12
13
|
Item: React.FunctionComponent<IStackItemProps>;
|
|
13
14
|
}
|
|
15
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
14
16
|
/**
|
|
15
17
|
* Tokens from fabric. Right now they are embedded in the props pending discussions of whether tokens: {} is
|
|
16
18
|
* the right approach
|
|
@@ -21,19 +23,19 @@ export interface IStackTokens extends FontTokens, IBackgroundColorTokens, IBorde
|
|
|
21
23
|
* The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
|
|
22
24
|
* If 'column gap' is omitted, it's set to the same value as 'row gap'.
|
|
23
25
|
*/
|
|
24
|
-
childrenGap?: number |
|
|
26
|
+
childrenGap?: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}`;
|
|
25
27
|
/**
|
|
26
28
|
* Defines a maximum height for the Stack.
|
|
27
29
|
*/
|
|
28
|
-
maxHeight?:
|
|
30
|
+
maxHeight?: DimensionValue;
|
|
29
31
|
/**
|
|
30
32
|
* Defines a maximum width for the Stack.
|
|
31
33
|
*/
|
|
32
|
-
maxWidth?:
|
|
34
|
+
maxWidth?: DimensionValue;
|
|
33
35
|
/**
|
|
34
36
|
* Defines the padding to be applied to the Stack contents relative to its border.
|
|
35
37
|
*/
|
|
36
|
-
padding?: number |
|
|
38
|
+
padding?: number | `${number}px` | keyof Spacing;
|
|
37
39
|
/**
|
|
38
40
|
* Defines whether to render Stack children horizontally.
|
|
39
41
|
* @defaultvalue false
|
|
@@ -102,4 +104,5 @@ export interface IStackType {
|
|
|
102
104
|
};
|
|
103
105
|
}
|
|
104
106
|
export type IStackRenderData = IRenderData<IStackSlotProps, IStackType['state']>;
|
|
107
|
+
export {};
|
|
105
108
|
//# sourceMappingURL=Stack.types.d.ts.map
|
package/lib/Stack.types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEnE,eAAO,MAAM,SAAS,aAAa,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG,OAAO,GAAG,KAAK,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;CAChD;AAED,KAAK,eAAe,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,UAAU,EAAE,sBAAsB,EAAE,aAAa;IACrF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG,eAAe,IAAI,eAAe,EAAE,CAAC;IAEjF;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;IAEjD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,YAAY,EAAE,SAAS;CAAG;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE;QACL,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC3B,CAAC;CACH;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,eAAe,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC"}
|
package/lib/Stack.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewProps } from 'react-native';
|
|
1
|
+
import type { DimensionValue, ViewProps } from 'react-native';
|
|
2
2
|
export declare const stackItemName = "RNFStackItem";
|
|
3
3
|
/**
|
|
4
4
|
* Stack item props
|
|
@@ -7,11 +7,11 @@ export interface IStackItemTokens extends ViewProps {
|
|
|
7
7
|
/**
|
|
8
8
|
* Defines the margin to be applied to the StackItem relative to its container.
|
|
9
9
|
*/
|
|
10
|
-
margin?:
|
|
10
|
+
margin?: DimensionValue;
|
|
11
11
|
/**
|
|
12
12
|
* Defines the padding to be applied to the StackItem contents relative to its border.
|
|
13
13
|
*/
|
|
14
|
-
padding?:
|
|
14
|
+
padding?: DimensionValue;
|
|
15
15
|
/**
|
|
16
16
|
* Defines how much to grow the StackItem in proportion to its siblings.
|
|
17
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.types.d.ts","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"StackItem.types.d.ts","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE5D;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAErE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE;QACT,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,MAAM,EAAE,gBAAgB,CAAC;CAC1B"}
|
package/lib/StackUtils.d.ts
CHANGED
|
@@ -1,26 +1,20 @@
|
|
|
1
|
-
import type { Theme } from '@fluentui-react-native/framework';
|
|
1
|
+
import type { Spacing, Theme } from '@fluentui-react-native/framework';
|
|
2
2
|
export interface IParseGapResult {
|
|
3
|
-
rowGap:
|
|
4
|
-
|
|
5
|
-
unit: string;
|
|
6
|
-
};
|
|
7
|
-
columnGap: {
|
|
8
|
-
value: number;
|
|
9
|
-
unit: string;
|
|
10
|
-
};
|
|
3
|
+
rowGap: number;
|
|
4
|
+
columnGap: number;
|
|
11
5
|
}
|
|
6
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
12
7
|
/**
|
|
13
8
|
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
14
9
|
* or a key of a themed spacing value (e.g. "s1").
|
|
15
10
|
* Returns the separate numerical value of the padding (e.g. 10)
|
|
16
11
|
* and the CSS unit (e.g. "px").
|
|
17
12
|
*/
|
|
18
|
-
export declare function parseGap(gap: number |
|
|
13
|
+
export declare function parseGap(gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined, theme: Theme): IParseGapResult;
|
|
19
14
|
/**
|
|
20
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px",
|
|
21
|
-
*
|
|
22
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
23
|
-
* Returns a CSS-style padding.
|
|
15
|
+
* Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
|
|
16
|
+
* (e.g. "s1")
|
|
24
17
|
*/
|
|
25
|
-
export declare function parsePadding(padding: number |
|
|
18
|
+
export declare function parsePadding(padding: keyof Spacing | number | `${number}px` | undefined, theme: Theme): number | undefined;
|
|
19
|
+
export {};
|
|
26
20
|
//# sourceMappingURL=StackUtils.d.ts.map
|
package/lib/StackUtils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.d.ts","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"StackUtils.d.ts","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAuBvE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,eAAe,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;AAEnE;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG,eAAe,IAAI,eAAe,EAAE,GAAG,SAAS,EACnF,KAAK,EAAE,KAAK,GACX,eAAe,CAsBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,OAAO,GAAG,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAM1H"}
|
package/lib/StackUtils.js
CHANGED
|
@@ -6,23 +6,14 @@ var _spacingKey = 'spacing';
|
|
|
6
6
|
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
7
7
|
var _getThemedSpacing = function (space, theme) {
|
|
8
8
|
var spacing = theme[_spacingKey];
|
|
9
|
-
if (spacing && typeof spacing === 'object') {
|
|
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
|
-
};
|
|
16
|
-
// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
|
|
17
|
-
var _getValueUnitGap = function (gap) {
|
|
18
|
-
var numericalPart = parseFloat(gap);
|
|
14
|
+
var numericalPart = parseFloat(space);
|
|
19
15
|
var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
20
|
-
|
|
21
|
-
var unitPart = gap.substring(numericalString.toString().length);
|
|
22
|
-
return {
|
|
23
|
-
value: numericalValue,
|
|
24
|
-
unit: unitPart || 'px',
|
|
25
|
-
};
|
|
16
|
+
return numericalValue;
|
|
26
17
|
};
|
|
27
18
|
/**
|
|
28
19
|
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
@@ -32,22 +23,22 @@ var _getValueUnitGap = function (gap) {
|
|
|
32
23
|
*/
|
|
33
24
|
export function parseGap(gap, theme) {
|
|
34
25
|
var result = {
|
|
35
|
-
rowGap:
|
|
36
|
-
columnGap:
|
|
26
|
+
rowGap: 0,
|
|
27
|
+
columnGap: 0,
|
|
37
28
|
};
|
|
38
29
|
if (gap) {
|
|
39
30
|
if (typeof gap === 'number') {
|
|
40
|
-
result.rowGap
|
|
41
|
-
result.columnGap
|
|
31
|
+
result.rowGap = gap;
|
|
32
|
+
result.columnGap = gap;
|
|
42
33
|
}
|
|
43
34
|
else {
|
|
44
35
|
var splitGap = gap.split(' ');
|
|
45
36
|
if (splitGap.length === 2) {
|
|
46
|
-
result.rowGap =
|
|
47
|
-
result.columnGap =
|
|
37
|
+
result.rowGap = _getThemedSpacing(splitGap[0], theme);
|
|
38
|
+
result.columnGap = _getThemedSpacing(splitGap[1], theme);
|
|
48
39
|
}
|
|
49
40
|
else {
|
|
50
|
-
var calculatedGap =
|
|
41
|
+
var calculatedGap = _getThemedSpacing(gap, theme);
|
|
51
42
|
result.rowGap = calculatedGap;
|
|
52
43
|
result.columnGap = calculatedGap;
|
|
53
44
|
}
|
|
@@ -56,21 +47,13 @@ export function parseGap(gap, theme) {
|
|
|
56
47
|
return result;
|
|
57
48
|
}
|
|
58
49
|
/**
|
|
59
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px",
|
|
60
|
-
*
|
|
61
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
62
|
-
* Returns a CSS-style padding.
|
|
50
|
+
* Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
|
|
51
|
+
* (e.g. "s1")
|
|
63
52
|
*/
|
|
64
53
|
export function parsePadding(padding, theme) {
|
|
65
|
-
if (padding === undefined || typeof padding === 'number'
|
|
54
|
+
if (padding === undefined || typeof padding === 'number') {
|
|
66
55
|
return padding;
|
|
67
56
|
}
|
|
68
|
-
|
|
69
|
-
if (paddingValues.length < 2) {
|
|
70
|
-
return _getThemedSpacing(padding, theme);
|
|
71
|
-
}
|
|
72
|
-
return paddingValues.reduce(function (padding1, padding2) {
|
|
73
|
-
return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);
|
|
74
|
-
});
|
|
57
|
+
return _getThemedSpacing(padding, theme);
|
|
75
58
|
}
|
|
76
59
|
//# sourceMappingURL=StackUtils.js.map
|
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,IAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,IAAM,iBAAiB,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,gFAAgF;AAChF,IAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,IAAM,iBAAiB,GAAG,UAAC,KAAkD,EAAE,KAAY;IACzF,IAAM,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,IAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACxC,IAAM,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,IAAM,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,IAAM,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,IAAM,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"}
|
|
@@ -7,9 +7,6 @@ describe('StackUtils', function () {
|
|
|
7
7
|
it('returns a default value when given undefined', function () {
|
|
8
8
|
expect(parseGap(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
9
9
|
});
|
|
10
|
-
it('returns a default value when given an empty string', function () {
|
|
11
|
-
expect(parseGap('', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
12
|
-
});
|
|
13
10
|
it('returns a value with px when given a number', function () {
|
|
14
11
|
expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
15
12
|
});
|
|
@@ -19,27 +16,12 @@ describe('StackUtils', function () {
|
|
|
19
16
|
it('can parse a string with a float', function () {
|
|
20
17
|
expect(parseGap('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
|
|
21
18
|
});
|
|
22
|
-
it('can parse a string with em', function () {
|
|
23
|
-
expect(parseGap('5em', theme)).toEqual({ rowGap: { value: 5, unit: 'em' }, columnGap: { value: 5, unit: 'em' } });
|
|
24
|
-
});
|
|
25
|
-
it('can parse a string with percentage', function () {
|
|
26
|
-
expect(parseGap('100%', theme)).toEqual({ rowGap: { value: 100, unit: '%' }, columnGap: { value: 100, unit: '%' } });
|
|
27
|
-
});
|
|
28
|
-
it('can parse a string with no numerical part', function () {
|
|
29
|
-
expect(parseGap('px', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
30
|
-
});
|
|
31
|
-
it('defaults to px with given a string with no units', function () {
|
|
32
|
-
expect(parseGap('16', theme)).toEqual({ rowGap: { value: 16, unit: 'px' }, columnGap: { value: 16, unit: 'px' } });
|
|
33
|
-
});
|
|
34
19
|
it('parses the value from the theme when given a spacing key', function () {
|
|
35
20
|
expect(parseGap('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
|
|
36
21
|
});
|
|
37
22
|
it('can parse a string with both horizontal and vertical gap', function () {
|
|
38
23
|
expect(parseGap('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
39
24
|
});
|
|
40
|
-
it('can parse a string with horizontal and vertical gap with different units', function () {
|
|
41
|
-
expect(parseGap('50px 15%', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 15, unit: '%' } });
|
|
42
|
-
});
|
|
43
25
|
it('defaults to px with a string with horizontal and vertical gap with no units', function () {
|
|
44
26
|
expect(parseGap('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
|
|
45
27
|
});
|
|
@@ -60,28 +42,12 @@ describe('StackUtils', function () {
|
|
|
60
42
|
it('returns its argument when given undefined, a number, or an empty string', function () {
|
|
61
43
|
expect(parsePadding(undefined, theme)).toEqual(undefined);
|
|
62
44
|
expect(parsePadding(0, theme)).toEqual(0);
|
|
63
|
-
expect(parsePadding('', theme)).toEqual('');
|
|
64
45
|
});
|
|
65
46
|
it('returns its argument when given a CSS-style padding', function () {
|
|
66
47
|
expect(parsePadding('10px', theme)).toEqual('10px');
|
|
67
|
-
expect(parsePadding('10px 20px', theme)).toEqual('10px 20px');
|
|
68
|
-
expect(parsePadding('10px 20px 30px', theme)).toEqual('10px 20px 30px');
|
|
69
|
-
expect(parsePadding('10px 20px 30px 40px', theme)).toEqual('10px 20px 30px 40px');
|
|
70
48
|
});
|
|
71
49
|
it('converts themed spacing keys to CSS-style paddings', function () {
|
|
72
50
|
expect(parsePadding('s2', theme)).toEqual('5px');
|
|
73
|
-
expect(parsePadding('s1 m', theme)).toEqual('10px 15px');
|
|
74
|
-
expect(parsePadding('m l1 l2', theme)).toEqual('15px 20px 25px');
|
|
75
|
-
expect(parsePadding('s2 s1 m l1', theme)).toEqual('5px 10px 15px 20px');
|
|
76
|
-
});
|
|
77
|
-
it('can mix and match themed and CSS-style paddings', function () {
|
|
78
|
-
expect(parsePadding('s2 10em', theme)).toEqual('5px 10em');
|
|
79
|
-
expect(parsePadding('20% s1', theme)).toEqual('20% 10px');
|
|
80
|
-
expect(parsePadding('m 5vw', theme)).toEqual('15px 5vw');
|
|
81
|
-
expect(parsePadding('l1 10vh l2', theme)).toEqual('20px 10vh 25px');
|
|
82
|
-
expect(parsePadding('20vmin s2 20vmax', theme)).toEqual('20vmin 5px 20vmax');
|
|
83
|
-
expect(parsePadding('m 5em l1 10em', theme)).toEqual('15px 5em 20px 10em');
|
|
84
|
-
expect(parsePadding('1px l2 0px s2', theme)).toEqual('1px 25px 0px 5px');
|
|
85
51
|
});
|
|
86
52
|
});
|
|
87
53
|
});
|
|
@@ -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;IACrB,QAAQ,CAAC,UAAU,EAAE;QACnB,IAAM,KAAK,GAAG;YACZ,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE;SACH,CAAC;QAEtB,EAAE,CAAC,8CAA8C,EAAE;YACjD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QACxH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.tokens.d.ts","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.tokens.d.ts","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,eAAe,CAAC;AAwD7D,eAAO,MAAM,qBAAqB,8FAAmF,CAAC;AAyCtH,eAAO,MAAM,oBAAoB,8FAA6E,CAAC"}
|
|
@@ -32,25 +32,20 @@ function _buildInnerStyles(tokenProps, theme) {
|
|
|
32
32
|
var innerStyle = undefined;
|
|
33
33
|
var childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
34
34
|
var _a = (0, StackUtils_1.parseGap)(childrenGap, theme), rowGap = _a.rowGap, columnGap = _a.columnGap;
|
|
35
|
-
var horizontalMargin = "".concat(-0.5 * columnGap.value).concat(columnGap.unit);
|
|
36
|
-
var verticalMargin = "".concat(-0.5 * rowGap.value).concat(rowGap.unit);
|
|
37
35
|
if (wrap) {
|
|
38
36
|
innerStyle = {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
marginTop: verticalMargin,
|
|
42
|
-
marginBottom: verticalMargin,
|
|
37
|
+
rowGap: rowGap,
|
|
38
|
+
columnGap: columnGap,
|
|
43
39
|
padding: (0, StackUtils_1.parsePadding)(padding, theme),
|
|
44
|
-
width:
|
|
40
|
+
width: '100%',
|
|
45
41
|
};
|
|
46
42
|
_mapAlignment(!!horizontal, horizontalAlign, verticalAlign, innerStyle);
|
|
47
|
-
var heightToSet = rowGap.value === 0 ? '100%' : "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")");
|
|
48
43
|
if (horizontal) {
|
|
49
|
-
innerStyle.height =
|
|
44
|
+
innerStyle.height = '100%';
|
|
50
45
|
}
|
|
51
46
|
else {
|
|
52
|
-
innerStyle.maxHeight =
|
|
53
|
-
innerStyle.height =
|
|
47
|
+
innerStyle.maxHeight = '100%';
|
|
48
|
+
innerStyle.height = '100%';
|
|
54
49
|
}
|
|
55
50
|
}
|
|
56
51
|
return { style: innerStyle };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":";;;AAGA,uEAAkE;AAGlE,2CAAsD;AAEtD,IAAM,OAAO,GAAiC;IAC5C,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,SAAS,aAAa,CAAC,UAAmB,EAAE,eAA0B,EAAE,aAAwB,EAAE,KAAgB;IAChH,IAAM,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,IAAM,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,IAAM,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;IACvD,IAAA,UAAU,GAAoD,UAAU,WAA9D,EAAE,IAAI,GAA8C,UAAU,KAAxD,EAAE,eAAe,GAA6B,UAAU,gBAAvC,EAAE,aAAa,GAAc,UAAU,cAAxB,EAAE,OAAO,GAAK,UAAU,QAAf,CAAgB;IAEjF,IAAI,UAAU,GAA0B,SAAS,CAAC;IAClD,IAAM,WAAW,GAAG,UAAU,CAAC,WAAW,IAAI,UAAU,CAAC,GAAG,CAAC;IACvD,IAAA,KAAwB,IAAA,qBAAQ,EAAC,WAAW,EAAE,KAAK,CAAC,EAAlD,MAAM,YAAA,EAAE,SAAS,eAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.tokens.js","sourceRoot":"","sources":["../src/Stack.tokens.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { ViewStyle, ViewProps } from 'react-native';
|
|
1
|
+
import type { ViewStyle, ViewProps, DimensionValue } from 'react-native';
|
|
2
|
+
import type { Spacing } from '@fluentui-react-native/framework';
|
|
2
3
|
import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
|
|
3
4
|
import type { IRenderData } from '@uifabricshared/foundation-composable';
|
|
4
5
|
import type { IStackItemProps } from './StackItem/StackItem.types';
|
|
@@ -11,6 +12,7 @@ export type Alignment = ViewStyle['justifyContent'] | 'start' | 'end';
|
|
|
11
12
|
export interface IStackStatics {
|
|
12
13
|
Item: React.FunctionComponent<IStackItemProps>;
|
|
13
14
|
}
|
|
15
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
14
16
|
/**
|
|
15
17
|
* Tokens from fabric. Right now they are embedded in the props pending discussions of whether tokens: {} is
|
|
16
18
|
* the right approach
|
|
@@ -21,19 +23,19 @@ export interface IStackTokens extends FontTokens, IBackgroundColorTokens, IBorde
|
|
|
21
23
|
* The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
|
|
22
24
|
* If 'column gap' is omitted, it's set to the same value as 'row gap'.
|
|
23
25
|
*/
|
|
24
|
-
childrenGap?: number |
|
|
26
|
+
childrenGap?: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}`;
|
|
25
27
|
/**
|
|
26
28
|
* Defines a maximum height for the Stack.
|
|
27
29
|
*/
|
|
28
|
-
maxHeight?:
|
|
30
|
+
maxHeight?: DimensionValue;
|
|
29
31
|
/**
|
|
30
32
|
* Defines a maximum width for the Stack.
|
|
31
33
|
*/
|
|
32
|
-
maxWidth?:
|
|
34
|
+
maxWidth?: DimensionValue;
|
|
33
35
|
/**
|
|
34
36
|
* Defines the padding to be applied to the Stack contents relative to its border.
|
|
35
37
|
*/
|
|
36
|
-
padding?: number |
|
|
38
|
+
padding?: number | `${number}px` | keyof Spacing;
|
|
37
39
|
/**
|
|
38
40
|
* Defines whether to render Stack children horizontally.
|
|
39
41
|
* @defaultvalue false
|
|
@@ -102,4 +104,5 @@ export interface IStackType {
|
|
|
102
104
|
};
|
|
103
105
|
}
|
|
104
106
|
export type IStackRenderData = IRenderData<IStackSlotProps, IStackType['state']>;
|
|
107
|
+
export {};
|
|
105
108
|
//# sourceMappingURL=Stack.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEnE,eAAO,MAAM,SAAS,aAAa,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG,OAAO,GAAG,KAAK,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;CAChD;AAED,KAAK,eAAe,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,UAAU,EAAE,sBAAsB,EAAE,aAAa;IACrF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG,eAAe,IAAI,eAAe,EAAE,CAAC;IAEjF;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;IAEjD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,YAAY,EAAE,SAAS;CAAG;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE;QACL,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC3B,CAAC;CACH;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,eAAe,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"Stack.types.js","sourceRoot":"","sources":["../src/Stack.types.ts"],"names":[],"mappings":";;;AAQa,QAAA,SAAS,GAAG,UAAU,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewProps } from 'react-native';
|
|
1
|
+
import type { DimensionValue, ViewProps } from 'react-native';
|
|
2
2
|
export declare const stackItemName = "RNFStackItem";
|
|
3
3
|
/**
|
|
4
4
|
* Stack item props
|
|
@@ -7,11 +7,11 @@ export interface IStackItemTokens extends ViewProps {
|
|
|
7
7
|
/**
|
|
8
8
|
* Defines the margin to be applied to the StackItem relative to its container.
|
|
9
9
|
*/
|
|
10
|
-
margin?:
|
|
10
|
+
margin?: DimensionValue;
|
|
11
11
|
/**
|
|
12
12
|
* Defines the padding to be applied to the StackItem contents relative to its border.
|
|
13
13
|
*/
|
|
14
|
-
padding?:
|
|
14
|
+
padding?: DimensionValue;
|
|
15
15
|
/**
|
|
16
16
|
* Defines how much to grow the StackItem in proportion to its siblings.
|
|
17
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.types.d.ts","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"StackItem.types.d.ts","sourceRoot":"","sources":["../../src/StackItem/StackItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE5D;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAErE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE;QACT,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,MAAM,EAAE,gBAAgB,CAAC;CAC1B"}
|
|
@@ -1,26 +1,20 @@
|
|
|
1
|
-
import type { Theme } from '@fluentui-react-native/framework';
|
|
1
|
+
import type { Spacing, Theme } from '@fluentui-react-native/framework';
|
|
2
2
|
export interface IParseGapResult {
|
|
3
|
-
rowGap:
|
|
4
|
-
|
|
5
|
-
unit: string;
|
|
6
|
-
};
|
|
7
|
-
columnGap: {
|
|
8
|
-
value: number;
|
|
9
|
-
unit: string;
|
|
10
|
-
};
|
|
3
|
+
rowGap: number;
|
|
4
|
+
columnGap: number;
|
|
11
5
|
}
|
|
6
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
12
7
|
/**
|
|
13
8
|
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
14
9
|
* or a key of a themed spacing value (e.g. "s1").
|
|
15
10
|
* Returns the separate numerical value of the padding (e.g. 10)
|
|
16
11
|
* and the CSS unit (e.g. "px").
|
|
17
12
|
*/
|
|
18
|
-
export declare function parseGap(gap: number |
|
|
13
|
+
export declare function parseGap(gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined, theme: Theme): IParseGapResult;
|
|
19
14
|
/**
|
|
20
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px",
|
|
21
|
-
*
|
|
22
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
23
|
-
* Returns a CSS-style padding.
|
|
15
|
+
* Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
|
|
16
|
+
* (e.g. "s1")
|
|
24
17
|
*/
|
|
25
|
-
export declare function parsePadding(padding: number |
|
|
18
|
+
export declare function parsePadding(padding: keyof Spacing | number | `${number}px` | undefined, theme: Theme): number | undefined;
|
|
19
|
+
export {};
|
|
26
20
|
//# sourceMappingURL=StackUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.d.ts","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"StackUtils.d.ts","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAuBvE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,eAAe,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;AAEnE;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG,eAAe,IAAI,eAAe,EAAE,GAAG,SAAS,EACnF,KAAK,EAAE,KAAK,GACX,eAAe,CAsBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,OAAO,GAAG,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAM1H"}
|
|
@@ -9,23 +9,14 @@ var _spacingKey = 'spacing';
|
|
|
9
9
|
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
10
10
|
var _getThemedSpacing = function (space, theme) {
|
|
11
11
|
var spacing = theme[_spacingKey];
|
|
12
|
-
if (spacing && typeof spacing === 'object') {
|
|
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
|
-
};
|
|
19
|
-
// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
|
|
20
|
-
var _getValueUnitGap = function (gap) {
|
|
21
|
-
var numericalPart = parseFloat(gap);
|
|
17
|
+
var numericalPart = parseFloat(space);
|
|
22
18
|
var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
23
|
-
|
|
24
|
-
var unitPart = gap.substring(numericalString.toString().length);
|
|
25
|
-
return {
|
|
26
|
-
value: numericalValue,
|
|
27
|
-
unit: unitPart || 'px',
|
|
28
|
-
};
|
|
19
|
+
return numericalValue;
|
|
29
20
|
};
|
|
30
21
|
/**
|
|
31
22
|
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
@@ -35,22 +26,22 @@ var _getValueUnitGap = function (gap) {
|
|
|
35
26
|
*/
|
|
36
27
|
function parseGap(gap, theme) {
|
|
37
28
|
var result = {
|
|
38
|
-
rowGap:
|
|
39
|
-
columnGap:
|
|
29
|
+
rowGap: 0,
|
|
30
|
+
columnGap: 0,
|
|
40
31
|
};
|
|
41
32
|
if (gap) {
|
|
42
33
|
if (typeof gap === 'number') {
|
|
43
|
-
result.rowGap
|
|
44
|
-
result.columnGap
|
|
34
|
+
result.rowGap = gap;
|
|
35
|
+
result.columnGap = gap;
|
|
45
36
|
}
|
|
46
37
|
else {
|
|
47
38
|
var splitGap = gap.split(' ');
|
|
48
39
|
if (splitGap.length === 2) {
|
|
49
|
-
result.rowGap =
|
|
50
|
-
result.columnGap =
|
|
40
|
+
result.rowGap = _getThemedSpacing(splitGap[0], theme);
|
|
41
|
+
result.columnGap = _getThemedSpacing(splitGap[1], theme);
|
|
51
42
|
}
|
|
52
43
|
else {
|
|
53
|
-
var calculatedGap =
|
|
44
|
+
var calculatedGap = _getThemedSpacing(gap, theme);
|
|
54
45
|
result.rowGap = calculatedGap;
|
|
55
46
|
result.columnGap = calculatedGap;
|
|
56
47
|
}
|
|
@@ -60,22 +51,14 @@ function parseGap(gap, theme) {
|
|
|
60
51
|
}
|
|
61
52
|
exports.parseGap = parseGap;
|
|
62
53
|
/**
|
|
63
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px",
|
|
64
|
-
*
|
|
65
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
66
|
-
* Returns a CSS-style padding.
|
|
54
|
+
* Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
|
|
55
|
+
* (e.g. "s1")
|
|
67
56
|
*/
|
|
68
57
|
function parsePadding(padding, theme) {
|
|
69
|
-
if (padding === undefined || typeof padding === 'number'
|
|
58
|
+
if (padding === undefined || typeof padding === 'number') {
|
|
70
59
|
return padding;
|
|
71
60
|
}
|
|
72
|
-
|
|
73
|
-
if (paddingValues.length < 2) {
|
|
74
|
-
return _getThemedSpacing(padding, theme);
|
|
75
|
-
}
|
|
76
|
-
return paddingValues.reduce(function (padding1, padding2) {
|
|
77
|
-
return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);
|
|
78
|
-
});
|
|
61
|
+
return _getThemedSpacing(padding, theme);
|
|
79
62
|
}
|
|
80
63
|
exports.parsePadding = parsePadding;
|
|
81
64
|
//# sourceMappingURL=StackUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AAEH,gFAAgF;AAChF,IAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,IAAM,iBAAiB,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"StackUtils.js","sourceRoot":"","sources":["../src/StackUtils.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AAEH,gFAAgF;AAChF,IAAM,WAAW,GAAG,SAAS,CAAC;AAE9B,2GAA2G;AAC3G,IAAM,iBAAiB,GAAG,UAAC,KAAkD,EAAE,KAAY;IACzF,IAAM,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,IAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACxC,IAAM,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,IAAM,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,IAAM,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,IAAM,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"}
|
|
@@ -9,9 +9,6 @@ describe('StackUtils', function () {
|
|
|
9
9
|
it('returns a default value when given undefined', function () {
|
|
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 default value when given an empty string', function () {
|
|
13
|
-
expect((0, StackUtils_1.parseGap)('', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
14
|
-
});
|
|
15
12
|
it('returns a value with px when given a number', function () {
|
|
16
13
|
expect((0, StackUtils_1.parseGap)(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
17
14
|
});
|
|
@@ -21,27 +18,12 @@ describe('StackUtils', function () {
|
|
|
21
18
|
it('can parse a string with a float', function () {
|
|
22
19
|
expect((0, StackUtils_1.parseGap)('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
|
|
23
20
|
});
|
|
24
|
-
it('can parse a string with em', function () {
|
|
25
|
-
expect((0, StackUtils_1.parseGap)('5em', theme)).toEqual({ rowGap: { value: 5, unit: 'em' }, columnGap: { value: 5, unit: 'em' } });
|
|
26
|
-
});
|
|
27
|
-
it('can parse a string with percentage', function () {
|
|
28
|
-
expect((0, StackUtils_1.parseGap)('100%', theme)).toEqual({ rowGap: { value: 100, unit: '%' }, columnGap: { value: 100, unit: '%' } });
|
|
29
|
-
});
|
|
30
|
-
it('can parse a string with no numerical part', function () {
|
|
31
|
-
expect((0, StackUtils_1.parseGap)('px', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
32
|
-
});
|
|
33
|
-
it('defaults to px with given a string with no units', function () {
|
|
34
|
-
expect((0, StackUtils_1.parseGap)('16', theme)).toEqual({ rowGap: { value: 16, unit: 'px' }, columnGap: { value: 16, unit: 'px' } });
|
|
35
|
-
});
|
|
36
21
|
it('parses the value from the theme when given a spacing key', function () {
|
|
37
22
|
expect((0, StackUtils_1.parseGap)('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
|
|
38
23
|
});
|
|
39
24
|
it('can parse a string with both horizontal and vertical gap', function () {
|
|
40
25
|
expect((0, StackUtils_1.parseGap)('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
41
26
|
});
|
|
42
|
-
it('can parse a string with horizontal and vertical gap with different units', function () {
|
|
43
|
-
expect((0, StackUtils_1.parseGap)('50px 15%', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 15, unit: '%' } });
|
|
44
|
-
});
|
|
45
27
|
it('defaults to px with a string with horizontal and vertical gap with no units', function () {
|
|
46
28
|
expect((0, StackUtils_1.parseGap)('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
|
|
47
29
|
});
|
|
@@ -62,28 +44,12 @@ describe('StackUtils', function () {
|
|
|
62
44
|
it('returns its argument when given undefined, a number, or an empty string', function () {
|
|
63
45
|
expect((0, StackUtils_1.parsePadding)(undefined, theme)).toEqual(undefined);
|
|
64
46
|
expect((0, StackUtils_1.parsePadding)(0, theme)).toEqual(0);
|
|
65
|
-
expect((0, StackUtils_1.parsePadding)('', theme)).toEqual('');
|
|
66
47
|
});
|
|
67
48
|
it('returns its argument when given a CSS-style padding', function () {
|
|
68
49
|
expect((0, StackUtils_1.parsePadding)('10px', theme)).toEqual('10px');
|
|
69
|
-
expect((0, StackUtils_1.parsePadding)('10px 20px', theme)).toEqual('10px 20px');
|
|
70
|
-
expect((0, StackUtils_1.parsePadding)('10px 20px 30px', theme)).toEqual('10px 20px 30px');
|
|
71
|
-
expect((0, StackUtils_1.parsePadding)('10px 20px 30px 40px', theme)).toEqual('10px 20px 30px 40px');
|
|
72
50
|
});
|
|
73
51
|
it('converts themed spacing keys to CSS-style paddings', function () {
|
|
74
52
|
expect((0, StackUtils_1.parsePadding)('s2', theme)).toEqual('5px');
|
|
75
|
-
expect((0, StackUtils_1.parsePadding)('s1 m', theme)).toEqual('10px 15px');
|
|
76
|
-
expect((0, StackUtils_1.parsePadding)('m l1 l2', theme)).toEqual('15px 20px 25px');
|
|
77
|
-
expect((0, StackUtils_1.parsePadding)('s2 s1 m l1', theme)).toEqual('5px 10px 15px 20px');
|
|
78
|
-
});
|
|
79
|
-
it('can mix and match themed and CSS-style paddings', function () {
|
|
80
|
-
expect((0, StackUtils_1.parsePadding)('s2 10em', theme)).toEqual('5px 10em');
|
|
81
|
-
expect((0, StackUtils_1.parsePadding)('20% s1', theme)).toEqual('20% 10px');
|
|
82
|
-
expect((0, StackUtils_1.parsePadding)('m 5vw', theme)).toEqual('15px 5vw');
|
|
83
|
-
expect((0, StackUtils_1.parsePadding)('l1 10vh l2', theme)).toEqual('20px 10vh 25px');
|
|
84
|
-
expect((0, StackUtils_1.parsePadding)('20vmin s2 20vmax', theme)).toEqual('20vmin 5px 20vmax');
|
|
85
|
-
expect((0, StackUtils_1.parsePadding)('m 5em l1 10em', theme)).toEqual('15px 5em 20px 10em');
|
|
86
|
-
expect((0, StackUtils_1.parsePadding)('1px l2 0px s2', theme)).toEqual('1px 25px 0px 5px');
|
|
87
53
|
});
|
|
88
54
|
});
|
|
89
55
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":";;AAEA,2CAAsD;AAEtD,QAAQ,CAAC,YAAY,EAAE;IACrB,QAAQ,CAAC,UAAU,EAAE;QACnB,IAAM,KAAK,GAAG;YACZ,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE;SACH,CAAC;QAEtB,EAAE,CAAC,8CAA8C,EAAE;YACjD,MAAM,CAAC,IAAA,qBAAQ,EAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QACxH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"StackUtils.test.win32.js","sourceRoot":"","sources":["../src/StackUtils.test.win32.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/stack",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "A cross-platform opinionated Fluent Text component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,24 +22,25 @@
|
|
|
22
22
|
"directory": "packages/components/Stack"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/adapters": ">=0.
|
|
26
|
-
"@fluentui-react-native/framework": ">=0.
|
|
27
|
-
"@fluentui-react-native/tokens": ">=0.
|
|
28
|
-
"@uifabricshared/foundation-composable": ">=0.12.
|
|
29
|
-
"@uifabricshared/foundation-compose": "^1.14.
|
|
30
|
-
"@uifabricshared/foundation-settings": ">=0.
|
|
31
|
-
"@uifabricshared/foundation-tokens": ">=0.
|
|
25
|
+
"@fluentui-react-native/adapters": ">=0.12.0 <1.0.0",
|
|
26
|
+
"@fluentui-react-native/framework": ">=0.12.0 <1.0.0",
|
|
27
|
+
"@fluentui-react-native/tokens": ">=0.22.0 <1.0.0",
|
|
28
|
+
"@uifabricshared/foundation-composable": ">=0.12.3 <1.0.0",
|
|
29
|
+
"@uifabricshared/foundation-compose": "^1.14.13",
|
|
30
|
+
"@uifabricshared/foundation-settings": ">=0.14.0 <1.0.0",
|
|
31
|
+
"@uifabricshared/foundation-tokens": ">=0.14.0 <1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
|
35
35
|
"@fluentui-react-native/scripts": "^0.1.1",
|
|
36
|
-
"@fluentui-react-native/text": ">=0.
|
|
36
|
+
"@fluentui-react-native/text": ">=0.22.0 <1.0.0",
|
|
37
|
+
"@react-native/metro-config": "^0.72.0",
|
|
37
38
|
"react": "18.2.0",
|
|
38
|
-
"react-native": "^0.
|
|
39
|
+
"react-native": "^0.72.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": "18.2.0",
|
|
42
|
-
"react-native": "^0.
|
|
43
|
+
"react-native": "^0.72.0"
|
|
43
44
|
},
|
|
44
45
|
"author": "",
|
|
45
46
|
"license": "MIT",
|
|
@@ -50,7 +51,7 @@
|
|
|
50
51
|
"microsoft/react-native"
|
|
51
52
|
],
|
|
52
53
|
"requirements": [
|
|
53
|
-
"react-native@0.
|
|
54
|
+
"react-native@0.72"
|
|
54
55
|
],
|
|
55
56
|
"capabilities": [
|
|
56
57
|
"core",
|
package/src/Stack.tokens.ts
CHANGED
|
@@ -40,25 +40,20 @@ function _buildInnerStyles(tokenProps: IStackTokens, theme: Theme): ViewProps {
|
|
|
40
40
|
let innerStyle: ViewStyle | undefined = undefined;
|
|
41
41
|
const childrenGap = tokenProps.childrenGap || tokenProps.gap;
|
|
42
42
|
const { rowGap, columnGap } = parseGap(childrenGap, theme);
|
|
43
|
-
const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;
|
|
44
|
-
const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;
|
|
45
43
|
|
|
46
44
|
if (wrap) {
|
|
47
45
|
innerStyle = {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
marginTop: verticalMargin,
|
|
51
|
-
marginBottom: verticalMargin,
|
|
46
|
+
rowGap: rowGap,
|
|
47
|
+
columnGap: columnGap,
|
|
52
48
|
padding: parsePadding(padding, theme),
|
|
53
|
-
width:
|
|
49
|
+
width: '100%',
|
|
54
50
|
};
|
|
55
51
|
_mapAlignment(!!horizontal, horizontalAlign, verticalAlign, innerStyle);
|
|
56
|
-
const heightToSet = rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`;
|
|
57
52
|
if (horizontal) {
|
|
58
|
-
innerStyle.height =
|
|
53
|
+
innerStyle.height = '100%';
|
|
59
54
|
} else {
|
|
60
|
-
innerStyle.maxHeight =
|
|
61
|
-
innerStyle.height =
|
|
55
|
+
innerStyle.maxHeight = '100%';
|
|
56
|
+
innerStyle.height = '100%';
|
|
62
57
|
}
|
|
63
58
|
}
|
|
64
59
|
return { style: innerStyle };
|
package/src/Stack.types.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { ViewStyle, ViewProps } from 'react-native';
|
|
1
|
+
import type { ViewStyle, ViewProps, DimensionValue } from 'react-native';
|
|
2
2
|
|
|
3
|
+
import type { Spacing } from '@fluentui-react-native/framework';
|
|
3
4
|
import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
|
|
4
5
|
import type { IRenderData } from '@uifabricshared/foundation-composable';
|
|
5
6
|
|
|
@@ -17,6 +18,8 @@ export interface IStackStatics {
|
|
|
17
18
|
Item: React.FunctionComponent<IStackItemProps>;
|
|
18
19
|
}
|
|
19
20
|
|
|
21
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
22
|
+
|
|
20
23
|
/**
|
|
21
24
|
* Tokens from fabric. Right now they are embedded in the props pending discussions of whether tokens: {} is
|
|
22
25
|
* the right approach
|
|
@@ -27,22 +30,22 @@ export interface IStackTokens extends FontTokens, IBackgroundColorTokens, IBorde
|
|
|
27
30
|
* The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
|
|
28
31
|
* If 'column gap' is omitted, it's set to the same value as 'row gap'.
|
|
29
32
|
*/
|
|
30
|
-
childrenGap?: number |
|
|
33
|
+
childrenGap?: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}`;
|
|
31
34
|
|
|
32
35
|
/**
|
|
33
36
|
* Defines a maximum height for the Stack.
|
|
34
37
|
*/
|
|
35
|
-
maxHeight?:
|
|
38
|
+
maxHeight?: DimensionValue;
|
|
36
39
|
|
|
37
40
|
/**
|
|
38
41
|
* Defines a maximum width for the Stack.
|
|
39
42
|
*/
|
|
40
|
-
maxWidth?:
|
|
43
|
+
maxWidth?: DimensionValue;
|
|
41
44
|
|
|
42
45
|
/**
|
|
43
46
|
* Defines the padding to be applied to the Stack contents relative to its border.
|
|
44
47
|
*/
|
|
45
|
-
padding?: number |
|
|
48
|
+
padding?: number | `${number}px` | keyof Spacing;
|
|
46
49
|
|
|
47
50
|
/**
|
|
48
51
|
* Defines whether to render Stack children horizontally.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewProps } from 'react-native';
|
|
1
|
+
import type { DimensionValue, ViewProps } from 'react-native';
|
|
2
2
|
|
|
3
3
|
export const stackItemName = 'RNFStackItem';
|
|
4
4
|
|
|
@@ -9,12 +9,12 @@ export interface IStackItemTokens extends ViewProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* Defines the margin to be applied to the StackItem relative to its container.
|
|
11
11
|
*/
|
|
12
|
-
margin?:
|
|
12
|
+
margin?: DimensionValue;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Defines the padding to be applied to the StackItem contents relative to its border.
|
|
16
16
|
*/
|
|
17
|
-
padding?:
|
|
17
|
+
padding?: DimensionValue;
|
|
18
18
|
/**
|
|
19
19
|
* Defines how much to grow the StackItem in proportion to its siblings.
|
|
20
20
|
*/
|
|
@@ -12,10 +12,6 @@ describe('StackUtils', () => {
|
|
|
12
12
|
expect(parseGap(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
13
13
|
});
|
|
14
14
|
|
|
15
|
-
it('returns a default value when given an empty string', () => {
|
|
16
|
-
expect(parseGap('', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
17
|
-
});
|
|
18
|
-
|
|
19
15
|
it('returns a value with px when given a number', () => {
|
|
20
16
|
expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
21
17
|
});
|
|
@@ -28,22 +24,6 @@ describe('StackUtils', () => {
|
|
|
28
24
|
expect(parseGap('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
|
|
29
25
|
});
|
|
30
26
|
|
|
31
|
-
it('can parse a string with em', () => {
|
|
32
|
-
expect(parseGap('5em', theme)).toEqual({ rowGap: { value: 5, unit: 'em' }, columnGap: { value: 5, unit: 'em' } });
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
it('can parse a string with percentage', () => {
|
|
36
|
-
expect(parseGap('100%', theme)).toEqual({ rowGap: { value: 100, unit: '%' }, columnGap: { value: 100, unit: '%' } });
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it('can parse a string with no numerical part', () => {
|
|
40
|
-
expect(parseGap('px', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
it('defaults to px with given a string with no units', () => {
|
|
44
|
-
expect(parseGap('16', theme)).toEqual({ rowGap: { value: 16, unit: 'px' }, columnGap: { value: 16, unit: 'px' } });
|
|
45
|
-
});
|
|
46
|
-
|
|
47
27
|
it('parses the value from the theme when given a spacing key', () => {
|
|
48
28
|
expect(parseGap('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
|
|
49
29
|
});
|
|
@@ -52,9 +32,6 @@ describe('StackUtils', () => {
|
|
|
52
32
|
expect(parseGap('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
|
|
53
33
|
});
|
|
54
34
|
|
|
55
|
-
it('can parse a string with horizontal and vertical gap with different units', () => {
|
|
56
|
-
expect(parseGap('50px 15%', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 15, unit: '%' } });
|
|
57
|
-
});
|
|
58
35
|
it('defaults to px with a string with horizontal and vertical gap with no units', () => {
|
|
59
36
|
expect(parseGap('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
|
|
60
37
|
});
|
|
@@ -78,31 +55,14 @@ describe('StackUtils', () => {
|
|
|
78
55
|
it('returns its argument when given undefined, a number, or an empty string', () => {
|
|
79
56
|
expect(parsePadding(undefined, theme)).toEqual(undefined);
|
|
80
57
|
expect(parsePadding(0, theme)).toEqual(0);
|
|
81
|
-
expect(parsePadding('', theme)).toEqual('');
|
|
82
58
|
});
|
|
83
59
|
|
|
84
60
|
it('returns its argument when given a CSS-style padding', () => {
|
|
85
61
|
expect(parsePadding('10px', theme)).toEqual('10px');
|
|
86
|
-
expect(parsePadding('10px 20px', theme)).toEqual('10px 20px');
|
|
87
|
-
expect(parsePadding('10px 20px 30px', theme)).toEqual('10px 20px 30px');
|
|
88
|
-
expect(parsePadding('10px 20px 30px 40px', theme)).toEqual('10px 20px 30px 40px');
|
|
89
62
|
});
|
|
90
63
|
|
|
91
64
|
it('converts themed spacing keys to CSS-style paddings', () => {
|
|
92
65
|
expect(parsePadding('s2', theme)).toEqual('5px');
|
|
93
|
-
expect(parsePadding('s1 m', theme)).toEqual('10px 15px');
|
|
94
|
-
expect(parsePadding('m l1 l2', theme)).toEqual('15px 20px 25px');
|
|
95
|
-
expect(parsePadding('s2 s1 m l1', theme)).toEqual('5px 10px 15px 20px');
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
it('can mix and match themed and CSS-style paddings', () => {
|
|
99
|
-
expect(parsePadding('s2 10em', theme)).toEqual('5px 10em');
|
|
100
|
-
expect(parsePadding('20% s1', theme)).toEqual('20% 10px');
|
|
101
|
-
expect(parsePadding('m 5vw', theme)).toEqual('15px 5vw');
|
|
102
|
-
expect(parsePadding('l1 10vh l2', theme)).toEqual('20px 10vh 25px');
|
|
103
|
-
expect(parsePadding('20vmin s2 20vmax', theme)).toEqual('20vmin 5px 20vmax');
|
|
104
|
-
expect(parsePadding('m 5em l1 10em', theme)).toEqual('15px 5em 20px 10em');
|
|
105
|
-
expect(parsePadding('1px l2 0px s2', theme)).toEqual('1px 25px 0px 5px');
|
|
106
66
|
});
|
|
107
67
|
});
|
|
108
68
|
});
|
package/src/StackUtils.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Theme } from '@fluentui-react-native/framework';
|
|
1
|
+
import type { Spacing, Theme } from '@fluentui-react-native/framework';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Functions used by Stack components to simplify style-related computations
|
|
@@ -8,57 +8,51 @@ import type { Theme } from '@fluentui-react-native/framework';
|
|
|
8
8
|
const _spacingKey = 'spacing';
|
|
9
9
|
|
|
10
10
|
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
11
|
-
const _getThemedSpacing = (space:
|
|
11
|
+
const _getThemedSpacing = (space: `${number}` | `${number}px` | keyof Spacing, theme: Theme): number => {
|
|
12
12
|
const spacing = theme[_spacingKey];
|
|
13
|
-
if (spacing && typeof spacing === 'object') {
|
|
13
|
+
if (spacing && typeof spacing === 'object' && typeof space === 'string') {
|
|
14
14
|
if (spacing.hasOwnProperty(space)) {
|
|
15
|
-
|
|
15
|
+
space = spacing[space];
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
return space;
|
|
19
|
-
};
|
|
20
18
|
|
|
21
|
-
|
|
22
|
-
const _getValueUnitGap = (gap: string): { value: number; unit: string } => {
|
|
23
|
-
const numericalPart = parseFloat(gap);
|
|
19
|
+
const numericalPart = parseFloat(space);
|
|
24
20
|
const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const unitPart = gap.substring(numericalString.toString().length);
|
|
28
|
-
|
|
29
|
-
return {
|
|
30
|
-
value: numericalValue,
|
|
31
|
-
unit: unitPart || 'px',
|
|
32
|
-
};
|
|
21
|
+
return numericalValue;
|
|
33
22
|
};
|
|
34
23
|
|
|
35
24
|
export interface IParseGapResult {
|
|
36
|
-
rowGap:
|
|
37
|
-
columnGap:
|
|
25
|
+
rowGap: number;
|
|
26
|
+
columnGap: number;
|
|
38
27
|
}
|
|
39
28
|
|
|
29
|
+
type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
|
|
30
|
+
|
|
40
31
|
/**
|
|
41
32
|
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
42
33
|
* or a key of a themed spacing value (e.g. "s1").
|
|
43
34
|
* Returns the separate numerical value of the padding (e.g. 10)
|
|
44
35
|
* and the CSS unit (e.g. "px").
|
|
45
36
|
*/
|
|
46
|
-
export function parseGap(
|
|
37
|
+
export function parseGap(
|
|
38
|
+
gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined,
|
|
39
|
+
theme: Theme,
|
|
40
|
+
): IParseGapResult {
|
|
47
41
|
const result: IParseGapResult = {
|
|
48
|
-
rowGap:
|
|
49
|
-
columnGap:
|
|
42
|
+
rowGap: 0,
|
|
43
|
+
columnGap: 0,
|
|
50
44
|
};
|
|
51
45
|
if (gap) {
|
|
52
46
|
if (typeof gap === 'number') {
|
|
53
|
-
result.rowGap
|
|
54
|
-
result.columnGap
|
|
47
|
+
result.rowGap = gap;
|
|
48
|
+
result.columnGap = gap;
|
|
55
49
|
} else {
|
|
56
50
|
const splitGap = gap.split(' ');
|
|
57
51
|
if (splitGap.length === 2) {
|
|
58
|
-
result.rowGap =
|
|
59
|
-
result.columnGap =
|
|
52
|
+
result.rowGap = _getThemedSpacing(splitGap[0] as SpacingGapValue, theme);
|
|
53
|
+
result.columnGap = _getThemedSpacing(splitGap[1] as SpacingGapValue, theme);
|
|
60
54
|
} else {
|
|
61
|
-
const calculatedGap =
|
|
55
|
+
const calculatedGap = _getThemedSpacing(gap as SpacingGapValue, theme);
|
|
62
56
|
result.rowGap = calculatedGap;
|
|
63
57
|
result.columnGap = calculatedGap;
|
|
64
58
|
}
|
|
@@ -68,22 +62,13 @@ export function parseGap(gap: number | string | undefined, theme: Theme): IParse
|
|
|
68
62
|
}
|
|
69
63
|
|
|
70
64
|
/**
|
|
71
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px",
|
|
72
|
-
*
|
|
73
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
74
|
-
* Returns a CSS-style padding.
|
|
65
|
+
* Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
|
|
66
|
+
* (e.g. "s1")
|
|
75
67
|
*/
|
|
76
|
-
export function parsePadding(padding: number |
|
|
77
|
-
if (padding === undefined || typeof padding === 'number'
|
|
78
|
-
return padding;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
const paddingValues = padding.split(' ');
|
|
82
|
-
if (paddingValues.length < 2) {
|
|
83
|
-
return _getThemedSpacing(padding, theme);
|
|
68
|
+
export function parsePadding(padding: keyof Spacing | number | `${number}px` | undefined, theme: Theme): number | undefined {
|
|
69
|
+
if (padding === undefined || typeof padding === 'number') {
|
|
70
|
+
return padding as undefined | number;
|
|
84
71
|
}
|
|
85
72
|
|
|
86
|
-
return
|
|
87
|
-
return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);
|
|
88
|
-
});
|
|
73
|
+
return _getThemedSpacing(padding, theme);
|
|
89
74
|
}
|