@fluentui/react-migration-v8-v9 1.0.31 → 9.1.1
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 +20 -500
- package/CHANGELOG.md +12 -273
- package/lib/components/Button/ActionButtonShim.js.map +1 -1
- package/lib/components/Button/ButtonShim.js.map +1 -1
- package/lib/components/Button/CommandButtonShim.js.map +1 -1
- package/lib/components/Button/CompoundButtonShim.js.map +1 -1
- package/lib/components/Button/DefaultButtonShim.js.map +1 -1
- package/lib/components/Button/MenuButtonShim.js.map +1 -1
- package/lib/components/Button/PrimaryButtonShim.js.map +1 -1
- package/lib/components/Button/ToggleButtonShim.js.map +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/shimButtonProps.js.map +1 -1
- package/lib/components/Menu/MenuShim.js.map +1 -1
- package/lib/components/Menu/index.js.map +1 -1
- package/lib/components/Menu/shimMenuProps.js.map +1 -1
- package/lib/components/Stack/StackItemShim.js.map +1 -1
- package/lib/components/Stack/StackShim.js.map +1 -1
- package/lib/components/Stack/index.js.map +1 -1
- package/lib/components/Stack/stackUtils.js.map +1 -1
- package/lib/components/Theme/index.js.map +1 -1
- package/lib/components/Theme/themeDuplicates.js.map +1 -1
- package/lib/components/Theme/v8ThemeShim.js +2 -0
- package/lib/components/Theme/v8ThemeShim.js.map +1 -1
- package/lib/components/Theme/v9BrandVariantsShim.js.map +1 -1
- package/lib/components/Theme/v9ThemeShim.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/stories/ThemeShim/ThemePreviewV8.js +316 -0
- package/lib/stories/ThemeShim/ThemePreviewV8.js.map +1 -0
- package/lib/stories/ThemeShim/ThemePreviewV9.js +196 -0
- package/lib/stories/ThemeShim/ThemePreviewV9.js.map +1 -0
- package/lib-commonjs/components/Button/ActionButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/ButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/CommandButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/CompoundButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/DefaultButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/MenuButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/PrimaryButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/ToggleButtonShim.js.map +1 -1
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/shimButtonProps.js.map +1 -1
- package/lib-commonjs/components/Menu/MenuShim.js.map +1 -1
- package/lib-commonjs/components/Menu/index.js.map +1 -1
- package/lib-commonjs/components/Menu/shimMenuProps.js.map +1 -1
- package/lib-commonjs/components/Stack/StackItemShim.js.map +1 -1
- package/lib-commonjs/components/Stack/StackShim.js.map +1 -1
- package/lib-commonjs/components/Stack/index.js.map +1 -1
- package/lib-commonjs/components/Stack/stackUtils.js.map +1 -1
- package/lib-commonjs/components/Theme/index.js.map +1 -1
- package/lib-commonjs/components/Theme/themeDuplicates.js.map +1 -1
- package/lib-commonjs/components/Theme/v8ThemeShim.js +2 -0
- package/lib-commonjs/components/Theme/v8ThemeShim.js.map +1 -1
- package/lib-commonjs/components/Theme/v9BrandVariantsShim.js.map +1 -1
- package/lib-commonjs/components/Theme/v9ThemeShim.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/stories/ThemeShim/ThemePreviewV8.js +323 -0
- package/lib-commonjs/stories/ThemeShim/ThemePreviewV8.js.map +1 -0
- package/lib-commonjs/stories/ThemeShim/ThemePreviewV9.js +195 -0
- package/lib-commonjs/stories/ThemeShim/ThemePreviewV9.js.map +1 -0
- package/package.json +9 -6
- package/lib-amd/components/Button/ActionButtonShim.js +0 -14
- package/lib-amd/components/Button/ActionButtonShim.js.map +0 -1
- package/lib-amd/components/Button/ButtonShim.js +0 -17
- package/lib-amd/components/Button/ButtonShim.js.map +0 -1
- package/lib-amd/components/Button/CommandButtonShim.js +0 -7
- package/lib-amd/components/Button/CommandButtonShim.js.map +0 -1
- package/lib-amd/components/Button/CompoundButtonShim.js +0 -15
- package/lib-amd/components/Button/CompoundButtonShim.js.map +0 -1
- package/lib-amd/components/Button/DefaultButtonShim.js +0 -12
- package/lib-amd/components/Button/DefaultButtonShim.js.map +0 -1
- package/lib-amd/components/Button/MenuButtonShim.js +0 -20
- package/lib-amd/components/Button/MenuButtonShim.js.map +0 -1
- package/lib-amd/components/Button/PrimaryButtonShim.js +0 -12
- package/lib-amd/components/Button/PrimaryButtonShim.js.map +0 -1
- package/lib-amd/components/Button/ToggleButtonShim.js +0 -14
- package/lib-amd/components/Button/ToggleButtonShim.js.map +0 -1
- package/lib-amd/components/Button/index.js +0 -14
- package/lib-amd/components/Button/index.js.map +0 -1
- package/lib-amd/components/Button/shimButtonProps.js +0 -19
- package/lib-amd/components/Button/shimButtonProps.js.map +0 -1
- package/lib-amd/components/Menu/MenuShim.js +0 -42
- package/lib-amd/components/Menu/MenuShim.js.map +0 -1
- package/lib-amd/components/Menu/index.js +0 -7
- package/lib-amd/components/Menu/index.js.map +0 -1
- package/lib-amd/components/Menu/shimMenuProps.js +0 -30
- package/lib-amd/components/Menu/shimMenuProps.js.map +0 -1
- package/lib-amd/components/Stack/StackItemShim.js +0 -150
- package/lib-amd/components/Stack/StackItemShim.js.map +0 -1
- package/lib-amd/components/Stack/StackShim.js +0 -242
- package/lib-amd/components/Stack/StackShim.js.map +0 -1
- package/lib-amd/components/Stack/index.js +0 -7
- package/lib-amd/components/Stack/index.js.map +0 -1
- package/lib-amd/components/Stack/stackUtils.js +0 -168
- package/lib-amd/components/Stack/stackUtils.js.map +0 -1
- package/lib-amd/components/Theme/index.js +0 -9
- package/lib-amd/components/Theme/index.js.map +0 -1
- package/lib-amd/components/Theme/themeDuplicates.js +0 -864
- package/lib-amd/components/Theme/themeDuplicates.js.map +0 -1
- package/lib-amd/components/Theme/v8ThemeShim.js +0 -140
- package/lib-amd/components/Theme/v8ThemeShim.js.map +0 -1
- package/lib-amd/components/Theme/v9BrandVariantsShim.js +0 -75
- package/lib-amd/components/Theme/v9BrandVariantsShim.js.map +0 -1
- package/lib-amd/components/Theme/v9ThemeShim.js +0 -190
- package/lib-amd/components/Theme/v9ThemeShim.js.map +0 -1
- package/lib-amd/index.js +0 -38
- package/lib-amd/index.js.map +0 -1
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react"], function (require, exports, tslib_1, React, react_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.shimMenuHeaderProps = exports.shimMenuItemCheckboxProps = exports.shimMenuItemProps = exports.shimMenuProps = void 0;
|
|
5
|
-
var shimMenuProps = function (props) {
|
|
6
|
-
return {
|
|
7
|
-
hasIcons: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.iconProps; }),
|
|
8
|
-
hasCheckmarks: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.canCheck || i.checked; }),
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
exports.shimMenuProps = shimMenuProps;
|
|
12
|
-
var shimMenuItemProps = function (props) {
|
|
13
|
-
//TODO: Handle menuItem.onRenderIcon
|
|
14
|
-
var icon = props.iconProps ? React.createElement(react_1.Icon, tslib_1.__assign({}, props.iconProps)) : undefined;
|
|
15
|
-
return tslib_1.__assign(tslib_1.__assign({}, props), { 'aria-label': props.ariaLabel, children: props.text, icon: icon, secondaryContent: props.secondaryText });
|
|
16
|
-
};
|
|
17
|
-
exports.shimMenuItemProps = shimMenuItemProps;
|
|
18
|
-
var shimMenuItemCheckboxProps = function (props) {
|
|
19
|
-
return tslib_1.__assign(tslib_1.__assign({}, exports.shimMenuItemProps(props)), { name: props.text || 'name', value: props.value || 'value' });
|
|
20
|
-
};
|
|
21
|
-
exports.shimMenuItemCheckboxProps = shimMenuItemCheckboxProps;
|
|
22
|
-
var shimMenuHeaderProps = function (props) {
|
|
23
|
-
var _a;
|
|
24
|
-
return {
|
|
25
|
-
children: (_a = props.sectionProps) === null || _a === void 0 ? void 0 : _a.title,
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
exports.shimMenuHeaderProps = shimMenuHeaderProps;
|
|
29
|
-
});
|
|
30
|
-
//# sourceMappingURL=shimMenuProps.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shimMenuProps.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx"],"names":[],"mappings":";;;;IAMO,IAAM,aAAa,GAAG,UAAC,KAA2B;QACvD,OAAO;YACL,QAAQ,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,EAAX,CAAW,CAAC;YAC7C,aAAa,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,OAAO,EAAvB,CAAuB,CAAC;SAC/D,CAAC;IACJ,CAAC,CAAC;IALW,QAAA,aAAa,iBAKxB;IAEK,IAAM,iBAAiB,GAAG,UAAC,KAA0B;QAC1D,oCAAoC;QACpC,IAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,YAAI,uBAAK,KAAK,CAAC,SAAS,EAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAEzE,OAAO,sCACF,KAAK,KACR,YAAY,EAAE,KAAK,CAAC,SAAS,EAC7B,QAAQ,EAAE,KAAK,CAAC,IAAI,EACpB,IAAI,MAAA,EACJ,gBAAgB,EAAE,KAAK,CAAC,aAAa,GACrB,CAAC;IACrB,CAAC,CAAC;IAXW,QAAA,iBAAiB,qBAW5B;IAEK,IAAM,yBAAyB,GAAG,UAAC,KAA0B;QAClE,6CACK,yBAAiB,CAAC,KAAK,CAAC,KAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,OAAO,IAC7B;IACJ,CAAC,CAAC;IANW,QAAA,yBAAyB,6BAMpC;IAEK,IAAM,mBAAmB,GAAG,UAAC,KAA0B;;QAC5D,OAAO;YACL,QAAQ,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK;SACpC,CAAC;IACJ,CAAC,CAAC;IAJW,QAAA,mBAAmB,uBAI9B","sourcesContent":["import * as React from 'react';\n\nimport { Icon } from '@fluentui/react';\nimport type { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport type { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu';\n\nexport const shimMenuProps = (props: IContextualMenuProps): Partial<MenuProps> => {\n return {\n hasIcons: props?.items.some(i => i.iconProps),\n hasCheckmarks: props?.items.some(i => i.canCheck || i.checked),\n };\n};\n\nexport const shimMenuItemProps = (props: IContextualMenuItem): MenuItemProps => {\n //TODO: Handle menuItem.onRenderIcon\n const icon = props.iconProps ? <Icon {...props.iconProps} /> : undefined;\n\n return {\n ...props,\n 'aria-label': props.ariaLabel,\n children: props.text,\n icon,\n secondaryContent: props.secondaryText,\n } as MenuItemProps;\n};\n\nexport const shimMenuItemCheckboxProps = (props: IContextualMenuItem): MenuItemCheckboxProps => {\n return {\n ...shimMenuItemProps(props),\n name: props.text || 'name',\n value: props.value || 'value',\n };\n};\n\nexport const shimMenuHeaderProps = (props: IContextualMenuItem): MenuGroupHeaderProps => {\n return {\n children: props.sectionProps?.title,\n };\n};\n"]}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@griffel/react"], function (require, exports, tslib_1, React, react_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.StackItemShim = void 0;
|
|
5
|
-
var stackItemClassNames = {
|
|
6
|
-
root: 'ms-StackItem',
|
|
7
|
-
};
|
|
8
|
-
var useStackItemShimStyles = react_1.makeStyles({
|
|
9
|
-
root: {
|
|
10
|
-
height: 'auto',
|
|
11
|
-
width: 'auto',
|
|
12
|
-
},
|
|
13
|
-
disableShrink: {
|
|
14
|
-
flexShrink: 0,
|
|
15
|
-
},
|
|
16
|
-
verticalFill: {
|
|
17
|
-
height: '100%',
|
|
18
|
-
},
|
|
19
|
-
});
|
|
20
|
-
var useFlexAlignSelfStyles = react_1.makeStyles({
|
|
21
|
-
auto: {
|
|
22
|
-
alignSelf: 'auto',
|
|
23
|
-
},
|
|
24
|
-
baseline: {
|
|
25
|
-
alignSelf: 'baseline',
|
|
26
|
-
},
|
|
27
|
-
center: {
|
|
28
|
-
alignSelf: 'center',
|
|
29
|
-
},
|
|
30
|
-
start: {
|
|
31
|
-
alignSelf: 'flex-start',
|
|
32
|
-
},
|
|
33
|
-
end: {
|
|
34
|
-
alignSelf: 'flex-end',
|
|
35
|
-
},
|
|
36
|
-
stretch: {
|
|
37
|
-
alignSelf: 'stretch',
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
|
-
var useFlexGrowStyles = react_1.makeStyles({
|
|
41
|
-
inherit: {
|
|
42
|
-
flexGrow: 'inherit',
|
|
43
|
-
},
|
|
44
|
-
initial: {
|
|
45
|
-
flexGrow: 'initial',
|
|
46
|
-
},
|
|
47
|
-
revert: {
|
|
48
|
-
flexGrow: 'revert',
|
|
49
|
-
},
|
|
50
|
-
unset: {
|
|
51
|
-
flexGrow: 'unset',
|
|
52
|
-
},
|
|
53
|
-
'1': {
|
|
54
|
-
flexGrow: 1,
|
|
55
|
-
},
|
|
56
|
-
'2': {
|
|
57
|
-
flexGrow: 2,
|
|
58
|
-
},
|
|
59
|
-
'3': {
|
|
60
|
-
flexGrow: 3,
|
|
61
|
-
},
|
|
62
|
-
});
|
|
63
|
-
var useFlexShrinkStyles = react_1.makeStyles({
|
|
64
|
-
inherit: {
|
|
65
|
-
flexShrink: 'inherit',
|
|
66
|
-
},
|
|
67
|
-
initial: {
|
|
68
|
-
flexShrink: 'initial',
|
|
69
|
-
},
|
|
70
|
-
revert: {
|
|
71
|
-
flexShrink: 'revert',
|
|
72
|
-
},
|
|
73
|
-
unset: {
|
|
74
|
-
flexShrink: 'unset',
|
|
75
|
-
},
|
|
76
|
-
0: {
|
|
77
|
-
flexShrink: 0,
|
|
78
|
-
},
|
|
79
|
-
1: {
|
|
80
|
-
flexShrink: 1,
|
|
81
|
-
},
|
|
82
|
-
2: {
|
|
83
|
-
flexShrink: 2,
|
|
84
|
-
},
|
|
85
|
-
});
|
|
86
|
-
var useFlexOrderStyles = react_1.makeStyles({
|
|
87
|
-
inherit: {
|
|
88
|
-
order: 'inherit',
|
|
89
|
-
},
|
|
90
|
-
initial: {
|
|
91
|
-
order: 'initial',
|
|
92
|
-
},
|
|
93
|
-
unset: {
|
|
94
|
-
order: 'unset',
|
|
95
|
-
},
|
|
96
|
-
revert: {
|
|
97
|
-
order: 'revert',
|
|
98
|
-
},
|
|
99
|
-
'-3': {
|
|
100
|
-
order: -3,
|
|
101
|
-
},
|
|
102
|
-
'-2': {
|
|
103
|
-
order: -2,
|
|
104
|
-
},
|
|
105
|
-
'-1': {
|
|
106
|
-
order: -1,
|
|
107
|
-
},
|
|
108
|
-
'0': {
|
|
109
|
-
order: 0,
|
|
110
|
-
},
|
|
111
|
-
'1': {
|
|
112
|
-
order: 1,
|
|
113
|
-
},
|
|
114
|
-
'2': {
|
|
115
|
-
order: 2,
|
|
116
|
-
},
|
|
117
|
-
'3': {
|
|
118
|
-
order: 3,
|
|
119
|
-
},
|
|
120
|
-
});
|
|
121
|
-
var StackItemShim = function (props) {
|
|
122
|
-
var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className, children = props.children;
|
|
123
|
-
var styles = useStackItemShimStyles();
|
|
124
|
-
var alignSelfStyles = useFlexAlignSelfStyles();
|
|
125
|
-
var shrinkFlexStyles = useFlexShrinkStyles();
|
|
126
|
-
var growFlexStyles = useFlexGrowStyles();
|
|
127
|
-
var orderFlexStyles = useFlexOrderStyles();
|
|
128
|
-
var stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];
|
|
129
|
-
if (order) {
|
|
130
|
-
stackItemStyles.push(orderFlexStyles[order]);
|
|
131
|
-
}
|
|
132
|
-
if (grow) {
|
|
133
|
-
var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
|
|
134
|
-
stackItemStyles.push(flexGrow);
|
|
135
|
-
}
|
|
136
|
-
if (shrink && !disableShrink) {
|
|
137
|
-
stackItemStyles.push(shrinkFlexStyles[1]);
|
|
138
|
-
}
|
|
139
|
-
else if (disableShrink || (!grow && !shrink)) {
|
|
140
|
-
stackItemStyles.push(shrinkFlexStyles[0]);
|
|
141
|
-
}
|
|
142
|
-
if (disableShrink) {
|
|
143
|
-
stackItemStyles.push(styles.disableShrink);
|
|
144
|
-
}
|
|
145
|
-
var rootStyles = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackItemClassNames.root], stackItemStyles), [className]));
|
|
146
|
-
return React.createElement("div", { className: rootStyles }, children);
|
|
147
|
-
};
|
|
148
|
-
exports.StackItemShim = StackItemShim;
|
|
149
|
-
});
|
|
150
|
-
//# sourceMappingURL=StackItemShim.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemShim.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nconst stackItemClassNames = {\n root: 'ms-StackItem',\n};\n\nconst useStackItemShimStyles = makeStyles({\n root: {\n height: 'auto',\n width: 'auto',\n },\n disableShrink: {\n flexShrink: 0,\n },\n verticalFill: {\n height: '100%',\n },\n});\n\nconst useFlexAlignSelfStyles = makeStyles({\n auto: {\n alignSelf: 'auto',\n },\n baseline: {\n alignSelf: 'baseline',\n },\n center: {\n alignSelf: 'center',\n },\n start: {\n alignSelf: 'flex-start',\n },\n end: {\n alignSelf: 'flex-end',\n },\n stretch: {\n alignSelf: 'stretch',\n },\n});\n\nconst useFlexGrowStyles = makeStyles({\n inherit: {\n flexGrow: 'inherit',\n },\n initial: {\n flexGrow: 'initial',\n },\n revert: {\n flexGrow: 'revert',\n },\n unset: {\n flexGrow: 'unset',\n },\n '1': {\n flexGrow: 1,\n },\n '2': {\n flexGrow: 2,\n },\n '3': {\n flexGrow: 3,\n },\n});\n\nconst useFlexShrinkStyles = makeStyles({\n inherit: {\n flexShrink: 'inherit',\n },\n initial: {\n flexShrink: 'initial',\n },\n revert: {\n flexShrink: 'revert',\n },\n unset: {\n flexShrink: 'unset',\n },\n 0: {\n flexShrink: 0,\n },\n 1: {\n flexShrink: 1,\n },\n 2: {\n flexShrink: 2,\n },\n});\n\nconst useFlexOrderStyles = makeStyles({\n inherit: {\n order: 'inherit',\n },\n initial: {\n order: 'initial',\n },\n unset: {\n order: 'unset',\n },\n revert: {\n order: 'revert',\n },\n '-3': {\n order: -3,\n },\n '-2': {\n order: -2,\n },\n '-1': {\n order: -1,\n },\n '0': {\n order: 0,\n },\n '1': {\n order: 1,\n },\n '2': {\n order: 2,\n },\n '3': {\n order: 3,\n },\n});\n\nexport const StackItemShim = (props: IStackItemProps) => {\n const { grow, shrink, disableShrink, align, verticalFill, order, className, children } = props;\n\n const styles = useStackItemShimStyles();\n const alignSelfStyles = useFlexAlignSelfStyles();\n const shrinkFlexStyles = useFlexShrinkStyles();\n const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n const orderFlexStyles: Record<string, string> = useFlexOrderStyles();\n\n const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];\n\n if (order) {\n stackItemStyles.push(orderFlexStyles[order]);\n }\n\n if (grow) {\n const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n stackItemStyles.push(flexGrow);\n }\n\n if (shrink && !disableShrink) {\n stackItemStyles.push(shrinkFlexStyles[1]);\n } else if (disableShrink || (!grow && !shrink)) {\n stackItemStyles.push(shrinkFlexStyles[0]);\n }\n\n if (disableShrink) {\n stackItemStyles.push(styles.disableShrink);\n }\n\n const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className);\n\n return <div className={rootStyles}>{children}</div>;\n};\n"]}
|
|
@@ -1,242 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react", "@griffel/react", "./stackUtils"], function (require, exports, tslib_1, React, react_1, react_2, stackUtils_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.StackShim = void 0;
|
|
5
|
-
var stackClassNames = {
|
|
6
|
-
root: 'ms-Stack',
|
|
7
|
-
inner: 'ms-Stack-inner',
|
|
8
|
-
};
|
|
9
|
-
var getClassNames = react_1.classNamesFunction();
|
|
10
|
-
var useStackStyles = react_2.makeStyles({
|
|
11
|
-
root: {
|
|
12
|
-
display: 'flex',
|
|
13
|
-
flexDirection: 'column',
|
|
14
|
-
flexWrap: 'nowrap',
|
|
15
|
-
width: 'auto',
|
|
16
|
-
height: 'auto',
|
|
17
|
-
boxSizing: 'border-box',
|
|
18
|
-
'> *': {
|
|
19
|
-
textOverflow: 'ellipsis',
|
|
20
|
-
},
|
|
21
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
22
|
-
// @ts-ignore
|
|
23
|
-
'> *:not(.ms-StackItem)': {
|
|
24
|
-
flexShrink: 1,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
horizontal: {
|
|
28
|
-
flexDirection: 'row',
|
|
29
|
-
},
|
|
30
|
-
verticalFill: {
|
|
31
|
-
height: '100%',
|
|
32
|
-
},
|
|
33
|
-
reversedVertical: {
|
|
34
|
-
flexDirection: 'column-reverse',
|
|
35
|
-
},
|
|
36
|
-
reversedHorizontal: {
|
|
37
|
-
flexDirection: 'row-reverse',
|
|
38
|
-
},
|
|
39
|
-
disableShrink: {
|
|
40
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
'> *:not(.ms-StackItem)': {
|
|
43
|
-
flexShrink: 0,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
wrap: {
|
|
47
|
-
display: 'flex',
|
|
48
|
-
flexWrap: 'wrap',
|
|
49
|
-
height: '100%',
|
|
50
|
-
},
|
|
51
|
-
inner: {
|
|
52
|
-
display: 'flex',
|
|
53
|
-
flexDirection: 'column',
|
|
54
|
-
flexWrap: 'wrap',
|
|
55
|
-
boxSizing: 'border-box',
|
|
56
|
-
maxWidth: '100vw',
|
|
57
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
58
|
-
// @ts-ignore
|
|
59
|
-
'> *:not(.ms-StackItem)': {
|
|
60
|
-
flexShrink: 1,
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
innerWidth: {
|
|
64
|
-
width: '100%',
|
|
65
|
-
},
|
|
66
|
-
});
|
|
67
|
-
var useFlexGrowStyles = react_2.makeStyles({
|
|
68
|
-
inherit: {
|
|
69
|
-
flexGrow: 'inherit',
|
|
70
|
-
},
|
|
71
|
-
initial: {
|
|
72
|
-
flexGrow: 'initial',
|
|
73
|
-
},
|
|
74
|
-
revert: {
|
|
75
|
-
flexGrow: 'revert',
|
|
76
|
-
},
|
|
77
|
-
unset: {
|
|
78
|
-
flexGrow: 'unset',
|
|
79
|
-
},
|
|
80
|
-
'1': {
|
|
81
|
-
flexGrow: 1,
|
|
82
|
-
},
|
|
83
|
-
'2': {
|
|
84
|
-
flexGrow: 2,
|
|
85
|
-
},
|
|
86
|
-
'3': {
|
|
87
|
-
flexGrow: 3,
|
|
88
|
-
},
|
|
89
|
-
});
|
|
90
|
-
var useFlexAlignItemsStyles = react_2.makeStyles({
|
|
91
|
-
baseline: {
|
|
92
|
-
alignItems: 'baseline',
|
|
93
|
-
},
|
|
94
|
-
center: {
|
|
95
|
-
alignItems: 'center',
|
|
96
|
-
},
|
|
97
|
-
start: {
|
|
98
|
-
alignItems: 'flex-start',
|
|
99
|
-
},
|
|
100
|
-
end: {
|
|
101
|
-
alignItems: 'flex-end',
|
|
102
|
-
},
|
|
103
|
-
stretch: {
|
|
104
|
-
alignItems: 'stretch',
|
|
105
|
-
},
|
|
106
|
-
'space-between': {
|
|
107
|
-
alignItems: 'space-between',
|
|
108
|
-
},
|
|
109
|
-
'space-around': {
|
|
110
|
-
alignItems: 'space-around',
|
|
111
|
-
},
|
|
112
|
-
'space-evenly': {
|
|
113
|
-
alignItems: 'space-evenly',
|
|
114
|
-
},
|
|
115
|
-
});
|
|
116
|
-
var useFlexJustifyContentStyles = react_2.makeStyles({
|
|
117
|
-
baseline: {
|
|
118
|
-
justifyContent: 'baseline',
|
|
119
|
-
},
|
|
120
|
-
center: {
|
|
121
|
-
justifyContent: 'center',
|
|
122
|
-
},
|
|
123
|
-
start: {
|
|
124
|
-
justifyContent: 'flex-start',
|
|
125
|
-
},
|
|
126
|
-
end: {
|
|
127
|
-
justifyContent: 'flex-end',
|
|
128
|
-
},
|
|
129
|
-
stretch: {
|
|
130
|
-
justifyContent: 'stretch',
|
|
131
|
-
},
|
|
132
|
-
'space-between': {
|
|
133
|
-
justifyContent: 'space-between',
|
|
134
|
-
},
|
|
135
|
-
'space-around': {
|
|
136
|
-
justifyContent: 'space-around',
|
|
137
|
-
},
|
|
138
|
-
'space-evenly': {
|
|
139
|
-
justifyContent: 'space-evenly',
|
|
140
|
-
},
|
|
141
|
-
});
|
|
142
|
-
var StackShim = function (props) {
|
|
143
|
-
var styles = useStackStyles();
|
|
144
|
-
var alignItemsFlexStyles = useFlexAlignItemsStyles();
|
|
145
|
-
var justifyContentFlexStyles = useFlexJustifyContentStyles();
|
|
146
|
-
var growFlexStyles = useFlexGrowStyles();
|
|
147
|
-
var _a = props.as, RootType = _a === void 0 ? 'div' : _a, verticalFill = props.verticalFill, horizontal = props.horizontal, reversed = props.reversed, grow = props.grow, wrap = props.wrap, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, disableShrink = props.disableShrink, className = props.className;
|
|
148
|
-
var tokens = tslib_1.__assign({}, props.tokens);
|
|
149
|
-
var tokensRootStyles = {};
|
|
150
|
-
var tokensInnerStyles = {};
|
|
151
|
-
var childrenGapClassName;
|
|
152
|
-
if (tokens) {
|
|
153
|
-
tokensRootStyles = {
|
|
154
|
-
padding: !wrap ? tokens.padding : undefined,
|
|
155
|
-
maxHeight: tokens.maxHeight,
|
|
156
|
-
maxWidth: tokens.maxWidth,
|
|
157
|
-
};
|
|
158
|
-
tokensInnerStyles = {
|
|
159
|
-
padding: wrap ? tokens.padding : undefined,
|
|
160
|
-
};
|
|
161
|
-
if (tokens.childrenGap) {
|
|
162
|
-
childrenGapClassName = getClassNames(stackUtils_1.getChildrenGapStyles, {
|
|
163
|
-
horizontal: horizontal,
|
|
164
|
-
reversed: reversed,
|
|
165
|
-
tokens: tokens,
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
var stackStyles = [
|
|
170
|
-
wrap ? styles.wrap : styles.root,
|
|
171
|
-
horizontal && styles.horizontal,
|
|
172
|
-
verticalFill && styles.verticalFill,
|
|
173
|
-
];
|
|
174
|
-
var stackInnerStyles = [
|
|
175
|
-
styles.inner,
|
|
176
|
-
horizontal && styles.horizontal,
|
|
177
|
-
(!tokens || !tokens.childrenGap) && styles.innerWidth,
|
|
178
|
-
];
|
|
179
|
-
var stackChildren = React.Children.toArray(props.children);
|
|
180
|
-
if (stackChildren.length === 1 &&
|
|
181
|
-
React.isValidElement(stackChildren[0]) &&
|
|
182
|
-
stackChildren[0].type === React.Fragment) {
|
|
183
|
-
stackChildren = stackChildren[0].props.children;
|
|
184
|
-
}
|
|
185
|
-
stackChildren = React.Children.map(stackChildren, function (child) {
|
|
186
|
-
if (!child) {
|
|
187
|
-
return null;
|
|
188
|
-
}
|
|
189
|
-
if (child.type && child.type.name === 'StackItemShim') {
|
|
190
|
-
var defaultItemProps = {
|
|
191
|
-
shrink: !disableShrink,
|
|
192
|
-
};
|
|
193
|
-
return React.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, defaultItemProps), child.props));
|
|
194
|
-
}
|
|
195
|
-
return child;
|
|
196
|
-
});
|
|
197
|
-
if (reversed) {
|
|
198
|
-
if (horizontal) {
|
|
199
|
-
stackStyles.push(styles.reversedHorizontal);
|
|
200
|
-
stackInnerStyles.push(styles.reversedHorizontal);
|
|
201
|
-
}
|
|
202
|
-
else {
|
|
203
|
-
stackStyles.push(styles.reversedVertical);
|
|
204
|
-
stackInnerStyles.push(styles.reversedVertical);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
if (grow) {
|
|
208
|
-
var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
|
|
209
|
-
stackStyles.push(flexGrow);
|
|
210
|
-
}
|
|
211
|
-
if (disableShrink) {
|
|
212
|
-
stackStyles.push(styles.disableShrink);
|
|
213
|
-
}
|
|
214
|
-
if (horizontalAlign) {
|
|
215
|
-
if (horizontal) {
|
|
216
|
-
stackStyles.push(justifyContentFlexStyles[horizontalAlign]);
|
|
217
|
-
stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);
|
|
218
|
-
}
|
|
219
|
-
else {
|
|
220
|
-
stackStyles.push(alignItemsFlexStyles[horizontalAlign]);
|
|
221
|
-
stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
if (verticalAlign) {
|
|
225
|
-
if (horizontal) {
|
|
226
|
-
stackStyles.push(alignItemsFlexStyles[verticalAlign]);
|
|
227
|
-
stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);
|
|
228
|
-
}
|
|
229
|
-
else {
|
|
230
|
-
stackStyles.push(justifyContentFlexStyles[verticalAlign]);
|
|
231
|
-
stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
var rootClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.root], stackStyles), [childrenGapClassName && !wrap && childrenGapClassName.root,
|
|
235
|
-
className]));
|
|
236
|
-
var innerClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.inner], stackInnerStyles), [childrenGapClassName && wrap && childrenGapClassName.inner]));
|
|
237
|
-
return wrap ? (React.createElement(RootType, { className: rootClass, style: tokensRootStyles },
|
|
238
|
-
React.createElement("div", { className: innerClass, style: tokensInnerStyles }, stackChildren))) : (React.createElement(RootType, { className: rootClass, style: tokensRootStyles }, stackChildren));
|
|
239
|
-
};
|
|
240
|
-
exports.StackShim = StackShim;
|
|
241
|
-
});
|
|
242
|
-
//# sourceMappingURL=StackShim.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackShim.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { classNamesFunction } from '@fluentui/react';\nimport type { IStackProps, IStackTokens, IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getChildrenGapStyles } from './stackUtils';\nimport type { StackShimStyles } from './stackUtils';\n\nconst stackClassNames = {\n root: 'ms-Stack',\n inner: 'ms-Stack-inner',\n};\n\nconst getClassNames = classNamesFunction<IStackProps, StackShimStyles>();\n\nconst useStackStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'nowrap',\n width: 'auto',\n height: 'auto',\n boxSizing: 'border-box',\n '> *': {\n textOverflow: 'ellipsis',\n },\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 1,\n },\n },\n horizontal: {\n flexDirection: 'row',\n },\n verticalFill: {\n height: '100%',\n },\n reversedVertical: {\n flexDirection: 'column-reverse',\n },\n reversedHorizontal: {\n flexDirection: 'row-reverse',\n },\n disableShrink: {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 0,\n },\n },\n wrap: {\n display: 'flex',\n flexWrap: 'wrap',\n height: '100%',\n },\n inner: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n maxWidth: '100vw',\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 1,\n },\n },\n innerWidth: {\n width: '100%',\n },\n});\n\nconst useFlexGrowStyles = makeStyles({\n inherit: {\n flexGrow: 'inherit',\n },\n initial: {\n flexGrow: 'initial',\n },\n revert: {\n flexGrow: 'revert',\n },\n unset: {\n flexGrow: 'unset',\n },\n '1': {\n flexGrow: 1,\n },\n '2': {\n flexGrow: 2,\n },\n '3': {\n flexGrow: 3,\n },\n});\n\nconst useFlexAlignItemsStyles = makeStyles({\n baseline: {\n alignItems: 'baseline',\n },\n center: {\n alignItems: 'center',\n },\n start: {\n alignItems: 'flex-start',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n 'space-between': {\n alignItems: 'space-between',\n },\n\n 'space-around': {\n alignItems: 'space-around',\n },\n 'space-evenly': {\n alignItems: 'space-evenly',\n },\n});\n\nconst useFlexJustifyContentStyles = makeStyles({\n baseline: {\n justifyContent: 'baseline',\n },\n center: {\n justifyContent: 'center',\n },\n start: {\n justifyContent: 'flex-start',\n },\n end: {\n justifyContent: 'flex-end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n 'space-between': {\n justifyContent: 'space-between',\n },\n\n 'space-around': {\n justifyContent: 'space-around',\n },\n 'space-evenly': {\n justifyContent: 'space-evenly',\n },\n});\n\nexport const StackShim = (props: IStackProps) => {\n const styles = useStackStyles();\n const alignItemsFlexStyles = useFlexAlignItemsStyles();\n const justifyContentFlexStyles = useFlexJustifyContentStyles();\n const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n\n const {\n as: RootType = 'div',\n verticalFill,\n horizontal,\n reversed,\n grow,\n wrap,\n horizontalAlign,\n verticalAlign,\n disableShrink,\n className,\n } = props;\n\n const tokens: IStackTokens = { ...props.tokens };\n\n let tokensRootStyles = {};\n let tokensInnerStyles = {};\n let childrenGapClassName;\n\n if (tokens) {\n tokensRootStyles = {\n padding: !wrap ? tokens.padding : undefined,\n maxHeight: tokens.maxHeight,\n maxWidth: tokens.maxWidth,\n };\n\n tokensInnerStyles = {\n padding: wrap ? tokens.padding : undefined,\n };\n\n if (tokens.childrenGap) {\n childrenGapClassName = getClassNames(getChildrenGapStyles, {\n horizontal,\n reversed,\n tokens,\n });\n }\n }\n\n const stackStyles = [\n wrap ? styles.wrap : styles.root,\n horizontal && styles.horizontal,\n verticalFill && styles.verticalFill,\n ];\n\n const stackInnerStyles = [\n styles.inner,\n horizontal && styles.horizontal,\n (!tokens || !tokens.childrenGap) && styles.innerWidth,\n ];\n\n let stackChildren = React.Children.toArray(props.children);\n if (\n stackChildren.length === 1 &&\n React.isValidElement(stackChildren[0]) &&\n stackChildren[0].type === React.Fragment\n ) {\n stackChildren = stackChildren[0].props.children;\n }\n\n stackChildren = React.Children.map(\n stackChildren as React.ReactElement[],\n (child: React.ReactElement<IStackItemProps>) => {\n if (!child) {\n return null;\n }\n\n if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') {\n const defaultItemProps: IStackItemProps = {\n shrink: !disableShrink,\n };\n\n return React.cloneElement(child, {\n ...defaultItemProps,\n ...child.props,\n });\n }\n\n return child;\n },\n );\n\n if (reversed) {\n if (horizontal) {\n stackStyles.push(styles.reversedHorizontal);\n stackInnerStyles.push(styles.reversedHorizontal);\n } else {\n stackStyles.push(styles.reversedVertical);\n stackInnerStyles.push(styles.reversedVertical);\n }\n }\n\n if (grow) {\n const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n stackStyles.push(flexGrow);\n }\n\n if (disableShrink) {\n stackStyles.push(styles.disableShrink);\n }\n\n if (horizontalAlign) {\n if (horizontal) {\n stackStyles.push(justifyContentFlexStyles[horizontalAlign]);\n stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);\n } else {\n stackStyles.push(alignItemsFlexStyles[horizontalAlign]);\n stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);\n }\n }\n\n if (verticalAlign) {\n if (horizontal) {\n stackStyles.push(alignItemsFlexStyles[verticalAlign]);\n stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);\n } else {\n stackStyles.push(justifyContentFlexStyles[verticalAlign]);\n stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);\n }\n }\n\n const rootClass = mergeClasses(\n stackClassNames.root,\n ...stackStyles,\n childrenGapClassName && !wrap && childrenGapClassName.root,\n className,\n );\n\n const innerClass = mergeClasses(\n stackClassNames.inner,\n ...stackInnerStyles,\n childrenGapClassName && wrap && childrenGapClassName.inner,\n );\n\n return wrap ? (\n <RootType className={rootClass} style={tokensRootStyles}>\n <div className={innerClass} style={tokensInnerStyles}>\n {stackChildren}\n </div>\n </RootType>\n ) : (\n <RootType className={rootClass} style={tokensRootStyles}>\n {stackChildren}\n </RootType>\n );\n};\n"]}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "./StackItemShim", "./StackShim"], function (require, exports, tslib_1, StackItemShim_1, StackShim_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
tslib_1.__exportStar(StackItemShim_1, exports);
|
|
5
|
-
tslib_1.__exportStar(StackShim_1, exports);
|
|
6
|
-
});
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC;IAChC,2CAA4B","sourcesContent":["export * from './StackItemShim';\nexport * from './StackShim';\n"]}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "@fluentui/react"], function (require, exports, tslib_1, react_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.getChildrenGapStyles = exports.parsePadding = exports.parseGap = void 0;
|
|
5
|
-
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
|
|
6
|
-
var getThemedSpacing = function (space, theme) {
|
|
7
|
-
if (theme.spacing.hasOwnProperty(space)) {
|
|
8
|
-
return theme.spacing[space];
|
|
9
|
-
}
|
|
10
|
-
return space;
|
|
11
|
-
};
|
|
12
|
-
// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
|
|
13
|
-
var getValueUnitGap = function (gap) {
|
|
14
|
-
var numericalPart = parseFloat(gap);
|
|
15
|
-
var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
|
|
16
|
-
var numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
|
|
17
|
-
var unitPart = gap.substring(numericalString.toString().length);
|
|
18
|
-
return {
|
|
19
|
-
value: numericalValue,
|
|
20
|
-
unit: unitPart || 'px',
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
|
|
25
|
-
* or a key of a themed spacing value (e.g. "s1").
|
|
26
|
-
* Returns the separate numerical value of the padding (e.g. 10)
|
|
27
|
-
* and the CSS unit (e.g. "px").
|
|
28
|
-
*/
|
|
29
|
-
var parseGap = function (gap, theme) {
|
|
30
|
-
if (gap === undefined || gap === '') {
|
|
31
|
-
return {
|
|
32
|
-
rowGap: {
|
|
33
|
-
value: 0,
|
|
34
|
-
unit: 'px',
|
|
35
|
-
},
|
|
36
|
-
columnGap: {
|
|
37
|
-
value: 0,
|
|
38
|
-
unit: 'px',
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
if (typeof gap === 'number') {
|
|
43
|
-
return {
|
|
44
|
-
rowGap: {
|
|
45
|
-
value: gap,
|
|
46
|
-
unit: 'px',
|
|
47
|
-
},
|
|
48
|
-
columnGap: {
|
|
49
|
-
value: gap,
|
|
50
|
-
unit: 'px',
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
var splitGap = gap.split(' ');
|
|
55
|
-
// If the array has more than two values, then return 0px.
|
|
56
|
-
if (splitGap.length > 2) {
|
|
57
|
-
return {
|
|
58
|
-
rowGap: {
|
|
59
|
-
value: 0,
|
|
60
|
-
unit: 'px',
|
|
61
|
-
},
|
|
62
|
-
columnGap: {
|
|
63
|
-
value: 0,
|
|
64
|
-
unit: 'px',
|
|
65
|
-
},
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
// If the array has two values, then parse each one.
|
|
69
|
-
if (splitGap.length === 2) {
|
|
70
|
-
return {
|
|
71
|
-
rowGap: getValueUnitGap(getThemedSpacing(splitGap[0], theme)),
|
|
72
|
-
columnGap: getValueUnitGap(getThemedSpacing(splitGap[1], theme)),
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
// Else, parse the numerical value and pass it as both the vertical and horizontal gap.
|
|
76
|
-
var calculatedGap = getValueUnitGap(getThemedSpacing(gap, theme));
|
|
77
|
-
return {
|
|
78
|
-
rowGap: calculatedGap,
|
|
79
|
-
columnGap: calculatedGap,
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
exports.parseGap = parseGap;
|
|
83
|
-
/**
|
|
84
|
-
* Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
|
|
85
|
-
* where the separate padding values can also be the key of a themed spacing value
|
|
86
|
-
* (e.g. "s1 m", "10px l1 20px l2", etc.).
|
|
87
|
-
* Returns a CSS-style padding.
|
|
88
|
-
*/
|
|
89
|
-
var parsePadding = function (padding, theme) {
|
|
90
|
-
if (padding === undefined || typeof padding === 'number' || padding === '') {
|
|
91
|
-
return padding;
|
|
92
|
-
}
|
|
93
|
-
var paddingValues = padding.split(' ');
|
|
94
|
-
if (paddingValues.length < 2) {
|
|
95
|
-
return getThemedSpacing(padding, theme);
|
|
96
|
-
}
|
|
97
|
-
return paddingValues.reduce(function (padding1, padding2) {
|
|
98
|
-
return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme);
|
|
99
|
-
});
|
|
100
|
-
};
|
|
101
|
-
exports.parsePadding = parsePadding;
|
|
102
|
-
/**
|
|
103
|
-
*
|
|
104
|
-
* getStyles function for Stack.tokens.childrenGap prop styling
|
|
105
|
-
*/
|
|
106
|
-
var getChildrenGapStyles = function (props) {
|
|
107
|
-
var theme = react_1.getTheme();
|
|
108
|
-
var horizontal = props.horizontal, reversed = props.reversed;
|
|
109
|
-
var tokens = tslib_1.__assign({}, props.tokens);
|
|
110
|
-
var _a = exports.parseGap(tokens.childrenGap, theme), rowGap = _a.rowGap, columnGap = _a.columnGap;
|
|
111
|
-
var horizontalMargin = "" + -0.5 * columnGap.value + columnGap.unit;
|
|
112
|
-
var verticalMargin = "" + -0.5 * rowGap.value + rowGap.unit;
|
|
113
|
-
return {
|
|
114
|
-
root: [
|
|
115
|
-
reversed &&
|
|
116
|
-
horizontal && {
|
|
117
|
-
'> *:not(:last-child)': {
|
|
118
|
-
marginLeft: "" + columnGap.value + columnGap.unit,
|
|
119
|
-
},
|
|
120
|
-
},
|
|
121
|
-
reversed &&
|
|
122
|
-
!horizontal && {
|
|
123
|
-
'> *:not(:last-child)': {
|
|
124
|
-
marginTop: "" + rowGap.value + rowGap.unit,
|
|
125
|
-
},
|
|
126
|
-
},
|
|
127
|
-
!reversed &&
|
|
128
|
-
horizontal && {
|
|
129
|
-
'> *:not(:first-child)': {
|
|
130
|
-
marginLeft: "" + columnGap.value + columnGap.unit,
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
!reversed &&
|
|
134
|
-
!horizontal && {
|
|
135
|
-
'> *:not(:first-child)': {
|
|
136
|
-
marginTop: "" + rowGap.value + rowGap.unit,
|
|
137
|
-
},
|
|
138
|
-
},
|
|
139
|
-
],
|
|
140
|
-
inner: [
|
|
141
|
-
{
|
|
142
|
-
marginLeft: horizontalMargin,
|
|
143
|
-
marginRight: horizontalMargin,
|
|
144
|
-
marginTop: verticalMargin,
|
|
145
|
-
marginBottom: verticalMargin,
|
|
146
|
-
width: columnGap.value === 0 ? '100%' : "calc(100% + " + columnGap.value + columnGap.unit + ")",
|
|
147
|
-
'> *': {
|
|
148
|
-
margin: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
|
|
149
|
-
},
|
|
150
|
-
},
|
|
151
|
-
horizontal && {
|
|
152
|
-
height: rowGap.value === 0 ? '100%' : "calc(100% + " + rowGap.value + rowGap.unit + ")",
|
|
153
|
-
'> *': {
|
|
154
|
-
maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - " + columnGap.value + columnGap.unit + ")",
|
|
155
|
-
},
|
|
156
|
-
},
|
|
157
|
-
!horizontal && {
|
|
158
|
-
height: "calc(100% + " + rowGap.value + rowGap.unit + ")",
|
|
159
|
-
'> *': {
|
|
160
|
-
maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - " + rowGap.value + rowGap.unit + ")",
|
|
161
|
-
},
|
|
162
|
-
},
|
|
163
|
-
],
|
|
164
|
-
};
|
|
165
|
-
};
|
|
166
|
-
exports.getChildrenGapStyles = getChildrenGapStyles;
|
|
167
|
-
});
|
|
168
|
-
//# sourceMappingURL=stackUtils.js.map
|