@draftbit/core 46.10.3-0bad1e.2 → 46.10.3-6f5759.2
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/lib/commonjs/components/FAB.js +4 -18
- package/lib/commonjs/components/TabView/TabView.js +13 -7
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/mappings/NativeBase/Layout.js +13 -3
- package/lib/module/mappings/NativeBase/Layout.js +14 -4
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +10 -0
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/mappings/NativeBase/Layout.js +12 -1
- package/src/mappings/NativeBase/Layout.ts +17 -0
|
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _theming = require("../theming");
|
|
10
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
12
13
|
const FAB = _ref => {
|
|
13
14
|
let {
|
|
14
15
|
onPress,
|
|
@@ -32,7 +33,7 @@ const FAB = _ref => {
|
|
|
32
33
|
borderRadius: size / 2,
|
|
33
34
|
overflow: "hidden"
|
|
34
35
|
}, style]
|
|
35
|
-
}, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
36
|
+
}, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
|
|
36
37
|
onPress: onPress,
|
|
37
38
|
disabled: loading || disabled,
|
|
38
39
|
android_ripple: {
|
|
@@ -50,9 +51,8 @@ const FAB = _ref => {
|
|
|
50
51
|
borderRadius: size / 2,
|
|
51
52
|
backgroundColor
|
|
52
53
|
}];
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
|
|
54
|
+
}
|
|
55
|
+
}, props), /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
|
|
56
56
|
style: size > 50 ? {
|
|
57
57
|
marginTop: 2,
|
|
58
58
|
marginLeft: 2
|
|
@@ -79,18 +79,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
79
79
|
}
|
|
80
80
|
});
|
|
81
81
|
var _default = (0, _theming.withTheme)(FAB);
|
|
82
|
-
exports.default = _default; styles = _reactNative.StyleSheet.create({
|
|
83
|
-
button: {
|
|
84
|
-
backgroundColor: "#5a45ff",
|
|
85
|
-
justifyContent: "center",
|
|
86
|
-
alignItems: "center",
|
|
87
|
-
..._reactNative.Platform.select({
|
|
88
|
-
web: {
|
|
89
|
-
cursor: "pointer",
|
|
90
|
-
userSelect: "none"
|
|
91
|
-
}
|
|
92
|
-
})
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
var _default = (0, _theming.withTheme)(FAB);
|
|
96
82
|
exports.default = _default;
|
|
@@ -10,7 +10,6 @@ var _theming = require("../../theming");
|
|
|
10
10
|
var _utilities = require("../../utilities");
|
|
11
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
14
13
|
const TabViewComponent = _ref => {
|
|
15
14
|
let {
|
|
16
15
|
Icon,
|
|
@@ -36,13 +35,11 @@ const TabViewComponent = _ref => {
|
|
|
36
35
|
textStyles,
|
|
37
36
|
viewStyles
|
|
38
37
|
} = (0, _utilities.extractStyles)(style);
|
|
39
|
-
|
|
40
38
|
//Check type of child using props
|
|
41
39
|
//Regular '.type' cannot work because Draftbit strips the type in Draft view
|
|
42
40
|
const instanceOfTabViewItemProps = object => {
|
|
43
41
|
return "title" in object;
|
|
44
42
|
};
|
|
45
|
-
|
|
46
43
|
//Populate routes and scenes based on children
|
|
47
44
|
React.useEffect(() => {
|
|
48
45
|
const newRoutes = [];
|
|
@@ -68,7 +65,8 @@ const TabViewComponent = _ref => {
|
|
|
68
65
|
}
|
|
69
66
|
};
|
|
70
67
|
const renderTabBar = props => {
|
|
71
|
-
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar,
|
|
68
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, {
|
|
69
|
+
...props,
|
|
72
70
|
activeColor: activeColor || theme.colors.primary,
|
|
73
71
|
inactiveColor: inactiveColor || theme.colors.divider,
|
|
74
72
|
pressColor: pressColor || theme.colors.primary,
|
|
@@ -82,7 +80,7 @@ const TabViewComponent = _ref => {
|
|
|
82
80
|
route,
|
|
83
81
|
color
|
|
84
82
|
} = _ref2;
|
|
85
|
-
return route
|
|
83
|
+
return (route === null || route === void 0 ? void 0 : route.icon) ? /*#__PURE__*/React.createElement(Icon, {
|
|
86
84
|
name: route.icon,
|
|
87
85
|
color: color,
|
|
88
86
|
size: 16
|
|
@@ -91,9 +89,8 @@ const TabViewComponent = _ref => {
|
|
|
91
89
|
style: {
|
|
92
90
|
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
93
91
|
}
|
|
94
|
-
})
|
|
92
|
+
});
|
|
95
93
|
};
|
|
96
|
-
|
|
97
94
|
//Cannot render TabView without at least one tab
|
|
98
95
|
if (!routes.length) {
|
|
99
96
|
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
@@ -113,4 +110,13 @@ const TabViewComponent = _ref => {
|
|
|
113
110
|
});
|
|
114
111
|
};
|
|
115
112
|
var _default = (0, _theming.withTheme)(TabViewComponent);
|
|
113
|
+
exports.default = _default; renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
114
|
+
renderTabBar: renderTabBar,
|
|
115
|
+
onIndexChange: indexChangeHandler,
|
|
116
|
+
tabBarPosition: tabBarPosition,
|
|
117
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
118
|
+
swipeEnabled: swipeEnabled
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
var _default = (0, _theming.withTheme)(TabViewComponent);
|
|
116
122
|
exports.default = _default;
|
|
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
|
|
|
12
12
|
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
|
|
13
13
|
ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
|
|
14
14
|
});
|
|
15
|
-
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
15
|
+
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
@@ -10,6 +10,7 @@ const SHARED_SEED_DATA = {
|
|
|
10
10
|
packageName: "native-base",
|
|
11
11
|
stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
|
|
12
12
|
};
|
|
13
|
+
const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = _types.CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== _types.StylesPanelSections.LayoutFlexItems && item !== _types.StylesPanelSections.LayoutContent);
|
|
13
14
|
const SEED_DATA = [{
|
|
14
15
|
name: "Aspect Ratio",
|
|
15
16
|
tag: "AspectRatio",
|
|
@@ -31,12 +32,14 @@ const SEED_DATA = [{
|
|
|
31
32
|
name: "Center",
|
|
32
33
|
tag: "Center",
|
|
33
34
|
description: "Center aligns its contents to the center within itself",
|
|
34
|
-
...SHARED_SEED_DATA
|
|
35
|
+
...SHARED_SEED_DATA,
|
|
36
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
35
37
|
}, {
|
|
36
38
|
name: "Circle",
|
|
37
39
|
tag: "Circle",
|
|
38
40
|
description: "Center aligns its contents to the center within itself with a round border radius",
|
|
39
|
-
...SHARED_SEED_DATA
|
|
41
|
+
...SHARED_SEED_DATA,
|
|
42
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
40
43
|
}, {
|
|
41
44
|
name: "Container",
|
|
42
45
|
tag: "Container",
|
|
@@ -46,17 +49,24 @@ const SEED_DATA = [{
|
|
|
46
49
|
name: "Column",
|
|
47
50
|
tag: "Column",
|
|
48
51
|
description: "Column aligns items vertically",
|
|
52
|
+
layout: {
|
|
53
|
+
flexDirection: "column"
|
|
54
|
+
},
|
|
49
55
|
...SHARED_SEED_DATA
|
|
50
56
|
}, {
|
|
51
57
|
name: "Row",
|
|
52
58
|
tag: "Row",
|
|
53
59
|
description: "Column aligns items horizontally",
|
|
60
|
+
layout: {
|
|
61
|
+
flexDirection: "row"
|
|
62
|
+
},
|
|
54
63
|
...SHARED_SEED_DATA
|
|
55
64
|
}, {
|
|
56
65
|
name: "Spacer",
|
|
57
66
|
tag: "Spacer",
|
|
58
67
|
description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
|
|
59
|
-
...SHARED_SEED_DATA
|
|
68
|
+
...SHARED_SEED_DATA,
|
|
69
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
60
70
|
}, {
|
|
61
71
|
name: "Stack",
|
|
62
72
|
tag: "Stack",
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections } from "@draftbit/types";
|
|
2
2
|
const SHARED_SEED_DATA = {
|
|
3
3
|
category: COMPONENT_TYPES.layout,
|
|
4
4
|
packageName: "native-base",
|
|
5
5
|
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS
|
|
6
6
|
};
|
|
7
|
+
const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== StylesPanelSections.LayoutFlexItems && item !== StylesPanelSections.LayoutContent);
|
|
7
8
|
export const SEED_DATA = [{
|
|
8
9
|
name: "Aspect Ratio",
|
|
9
10
|
tag: "AspectRatio",
|
|
@@ -25,12 +26,14 @@ export const SEED_DATA = [{
|
|
|
25
26
|
name: "Center",
|
|
26
27
|
tag: "Center",
|
|
27
28
|
description: "Center aligns its contents to the center within itself",
|
|
28
|
-
...SHARED_SEED_DATA
|
|
29
|
+
...SHARED_SEED_DATA,
|
|
30
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
29
31
|
}, {
|
|
30
32
|
name: "Circle",
|
|
31
33
|
tag: "Circle",
|
|
32
34
|
description: "Center aligns its contents to the center within itself with a round border radius",
|
|
33
|
-
...SHARED_SEED_DATA
|
|
35
|
+
...SHARED_SEED_DATA,
|
|
36
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
34
37
|
}, {
|
|
35
38
|
name: "Container",
|
|
36
39
|
tag: "Container",
|
|
@@ -40,17 +43,24 @@ export const SEED_DATA = [{
|
|
|
40
43
|
name: "Column",
|
|
41
44
|
tag: "Column",
|
|
42
45
|
description: "Column aligns items vertically",
|
|
46
|
+
layout: {
|
|
47
|
+
flexDirection: "column"
|
|
48
|
+
},
|
|
43
49
|
...SHARED_SEED_DATA
|
|
44
50
|
}, {
|
|
45
51
|
name: "Row",
|
|
46
52
|
tag: "Row",
|
|
47
53
|
description: "Column aligns items horizontally",
|
|
54
|
+
layout: {
|
|
55
|
+
flexDirection: "row"
|
|
56
|
+
},
|
|
48
57
|
...SHARED_SEED_DATA
|
|
49
58
|
}, {
|
|
50
59
|
name: "Spacer",
|
|
51
60
|
tag: "Spacer",
|
|
52
61
|
description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
|
|
53
|
-
...SHARED_SEED_DATA
|
|
62
|
+
...SHARED_SEED_DATA,
|
|
63
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
54
64
|
}, {
|
|
55
65
|
name: "Stack",
|
|
56
66
|
tag: "Stack",
|
|
@@ -29,6 +29,16 @@ export declare const SEED_DATA: ({
|
|
|
29
29
|
name: string;
|
|
30
30
|
tag: string;
|
|
31
31
|
description: string;
|
|
32
|
+
} | {
|
|
33
|
+
category: string;
|
|
34
|
+
packageName: string;
|
|
35
|
+
stylesPanelSections: string[];
|
|
36
|
+
name: string;
|
|
37
|
+
tag: string;
|
|
38
|
+
description: string;
|
|
39
|
+
layout: {
|
|
40
|
+
flexDirection: string;
|
|
41
|
+
};
|
|
32
42
|
} | {
|
|
33
43
|
props: {
|
|
34
44
|
direction: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/NativeBase/Layout.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/NativeBase/Layout.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8GrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.10.3-
|
|
3
|
+
"version": "46.10.3-6f5759.2+6f57590",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^46.10.3-
|
|
44
|
+
"@draftbit/types": "^46.10.3-6f5759.2+6f57590",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
]
|
|
101
101
|
]
|
|
102
102
|
},
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "6f575904eb16220ca3a10cc789d403e95184f81b"
|
|
104
104
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
|
|
2
2
|
const SHARED_SEED_DATA = {
|
|
3
3
|
category: COMPONENT_TYPES.layout,
|
|
4
4
|
packageName: "native-base",
|
|
5
5
|
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
6
6
|
};
|
|
7
|
+
const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = CONTAINER_COMPONENT_STYLES_SECTIONS.filter((item) => item !== StylesPanelSections.LayoutFlexItems &&
|
|
8
|
+
item !== StylesPanelSections.LayoutContent);
|
|
7
9
|
export const SEED_DATA = [
|
|
8
10
|
{
|
|
9
11
|
name: "Aspect Ratio",
|
|
@@ -29,12 +31,14 @@ export const SEED_DATA = [
|
|
|
29
31
|
tag: "Center",
|
|
30
32
|
description: "Center aligns its contents to the center within itself",
|
|
31
33
|
...SHARED_SEED_DATA,
|
|
34
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
32
35
|
},
|
|
33
36
|
{
|
|
34
37
|
name: "Circle",
|
|
35
38
|
tag: "Circle",
|
|
36
39
|
description: "Center aligns its contents to the center within itself with a round border radius",
|
|
37
40
|
...SHARED_SEED_DATA,
|
|
41
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
38
42
|
},
|
|
39
43
|
{
|
|
40
44
|
name: "Container",
|
|
@@ -46,12 +50,18 @@ export const SEED_DATA = [
|
|
|
46
50
|
name: "Column",
|
|
47
51
|
tag: "Column",
|
|
48
52
|
description: "Column aligns items vertically",
|
|
53
|
+
layout: {
|
|
54
|
+
flexDirection: "column",
|
|
55
|
+
},
|
|
49
56
|
...SHARED_SEED_DATA,
|
|
50
57
|
},
|
|
51
58
|
{
|
|
52
59
|
name: "Row",
|
|
53
60
|
tag: "Row",
|
|
54
61
|
description: "Column aligns items horizontally",
|
|
62
|
+
layout: {
|
|
63
|
+
flexDirection: "row",
|
|
64
|
+
},
|
|
55
65
|
...SHARED_SEED_DATA,
|
|
56
66
|
},
|
|
57
67
|
{
|
|
@@ -59,6 +69,7 @@ export const SEED_DATA = [
|
|
|
59
69
|
tag: "Spacer",
|
|
60
70
|
description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
|
|
61
71
|
...SHARED_SEED_DATA,
|
|
72
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
62
73
|
},
|
|
63
74
|
{
|
|
64
75
|
name: "Stack",
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
createBoolProp,
|
|
5
5
|
CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
6
6
|
createStaticNumberProp,
|
|
7
|
+
StylesPanelSections,
|
|
7
8
|
} from "@draftbit/types";
|
|
8
9
|
|
|
9
10
|
const SHARED_SEED_DATA = {
|
|
@@ -12,6 +13,13 @@ const SHARED_SEED_DATA = {
|
|
|
12
13
|
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
13
14
|
};
|
|
14
15
|
|
|
16
|
+
const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX =
|
|
17
|
+
CONTAINER_COMPONENT_STYLES_SECTIONS.filter(
|
|
18
|
+
(item) =>
|
|
19
|
+
item !== StylesPanelSections.LayoutFlexItems &&
|
|
20
|
+
item !== StylesPanelSections.LayoutContent
|
|
21
|
+
);
|
|
22
|
+
|
|
15
23
|
export const SEED_DATA = [
|
|
16
24
|
{
|
|
17
25
|
name: "Aspect Ratio",
|
|
@@ -40,6 +48,7 @@ export const SEED_DATA = [
|
|
|
40
48
|
tag: "Center",
|
|
41
49
|
description: "Center aligns its contents to the center within itself",
|
|
42
50
|
...SHARED_SEED_DATA,
|
|
51
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
43
52
|
},
|
|
44
53
|
{
|
|
45
54
|
name: "Circle",
|
|
@@ -47,6 +56,7 @@ export const SEED_DATA = [
|
|
|
47
56
|
description:
|
|
48
57
|
"Center aligns its contents to the center within itself with a round border radius",
|
|
49
58
|
...SHARED_SEED_DATA,
|
|
59
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
50
60
|
},
|
|
51
61
|
{
|
|
52
62
|
name: "Container",
|
|
@@ -59,12 +69,18 @@ export const SEED_DATA = [
|
|
|
59
69
|
name: "Column",
|
|
60
70
|
tag: "Column",
|
|
61
71
|
description: "Column aligns items vertically",
|
|
72
|
+
layout: {
|
|
73
|
+
flexDirection: "column",
|
|
74
|
+
},
|
|
62
75
|
...SHARED_SEED_DATA,
|
|
63
76
|
},
|
|
64
77
|
{
|
|
65
78
|
name: "Row",
|
|
66
79
|
tag: "Row",
|
|
67
80
|
description: "Column aligns items horizontally",
|
|
81
|
+
layout: {
|
|
82
|
+
flexDirection: "row",
|
|
83
|
+
},
|
|
68
84
|
...SHARED_SEED_DATA,
|
|
69
85
|
},
|
|
70
86
|
{
|
|
@@ -73,6 +89,7 @@ export const SEED_DATA = [
|
|
|
73
89
|
description:
|
|
74
90
|
"An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
|
|
75
91
|
...SHARED_SEED_DATA,
|
|
92
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
|
|
76
93
|
},
|
|
77
94
|
{
|
|
78
95
|
name: "Stack",
|