@draftbit/core 46.10.3-0bad1e.2 → 46.10.3-31b3e0.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.
Files changed (17) hide show
  1. package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
  2. package/lib/commonjs/components/Checkbox/context.js +1 -1
  3. package/lib/commonjs/components/FAB.js +4 -18
  4. package/lib/commonjs/constants.js +1 -1
  5. package/lib/commonjs/mappings/NativeBase/Layout.js +20 -3
  6. package/lib/module/mappings/NativeBase/Layout.js +21 -4
  7. package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +37 -0
  8. package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/src/mappings/NativeBase/Layout.js +19 -1
  11. package/src/mappings/NativeBase/Layout.ts +25 -0
  12. package/lib/commonjs/mappings/Container.js +0 -37
  13. package/lib/module/mappings/Container.js +0 -30
  14. package/lib/typescript/src/mappings/Container.d.ts +0 -55
  15. package/lib/typescript/src/mappings/Container.d.ts.map +0 -1
  16. package/src/mappings/Container.js +0 -30
  17. package/src/mappings/Container.ts +0 -41
package/lib/commonjs/components/Checkbox/CheckboxRow.js CHANGED
@@ -14,7 +14,8 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
  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); }
16
16
  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; }
17
- var Direction;
17
+ 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); }
18
+ let Direction;
18
19
  exports.Direction = Direction;
19
20
  (function (Direction) {
20
21
  Direction["Row"] = "row";
@@ -57,6 +58,7 @@ const CheckboxRow = _ref => {
57
58
  setInternalValue(status);
58
59
  }
59
60
  }, [status]);
61
+
60
62
  // This special logic is to handle weird APIs like Airtable that return
61
63
  // true or undefined for a boolean
62
64
  const previousDefaultValue = (0, _hooks.usePrevious)(defaultValue);
@@ -80,14 +82,13 @@ const CheckboxRow = _ref => {
80
82
  textStyles,
81
83
  viewStyles
82
84
  } = (0, _utilities.extractStyles)(style);
83
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
85
+ return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
84
86
  onPress: handlePress,
85
87
  style: [viewStyles, styles.mainParent, {
86
88
  flexDirection: direction
87
89
  }],
88
- disabled: disabled,
89
- ...rest
90
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
90
+ disabled: disabled
91
+ }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
91
92
  style: [styles.label, {
92
93
  alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
93
94
  }, labelContainerStyle]
@@ -124,22 +125,4 @@ const styles = _reactNative.StyleSheet.create({
124
125
  }
125
126
  });
126
127
  var _default = CheckboxRow;
127
- exports.default = _default;ems: "center",
128
- justifyContent: "space-around",
129
- paddingStart: 20,
130
- minHeight: 50,
131
- paddingEnd: 20,
132
- display: "flex",
133
- ..._reactNative.Platform.select({
134
- web: {
135
- cursor: "pointer",
136
- userSelect: "none"
137
- }
138
- })
139
- },
140
- label: {
141
- flex: 3
142
- }
143
- });
144
- var _default = CheckboxRow;
145
128
  exports.default = _default;
package/lib/commonjs/components/Checkbox/context.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.checkboxGroupContext = exports.Direction = void 0;
7
7
  exports.useCheckboxGroupContext = useCheckboxGroupContext;
8
8
  var _react = require("react");
9
- let Direction;
9
+ var Direction;
10
10
  exports.Direction = Direction;
11
11
  (function (Direction) {
12
12
  Direction["Horizontal"] = "horizontal";
package/lib/commonjs/components/FAB.js CHANGED
@@ -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
- ...props
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;
package/lib/commonjs/constants.js CHANGED
@@ -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;AR_HEIGHT;
15
+ exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
package/lib/commonjs/mappings/NativeBase/Layout.js CHANGED
@@ -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,32 +32,48 @@ 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",
43
46
  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
47
+ props: {
48
+ centerContent: (0, _types.createStaticBoolProp)({
49
+ label: "Center content",
50
+ description: "Center child elements based on their content width",
51
+ defaultValue: true
52
+ })
53
+ },
44
54
  ...SHARED_SEED_DATA
45
55
  }, {
46
56
  name: "Column",
47
57
  tag: "Column",
48
58
  description: "Column aligns items vertically",
59
+ layout: {
60
+ flexDirection: "column"
61
+ },
49
62
  ...SHARED_SEED_DATA
50
63
  }, {
51
64
  name: "Row",
52
65
  tag: "Row",
53
66
  description: "Column aligns items horizontally",
67
+ layout: {
68
+ flexDirection: "row"
69
+ },
54
70
  ...SHARED_SEED_DATA
55
71
  }, {
56
72
  name: "Spacer",
57
73
  tag: "Spacer",
58
74
  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
59
- ...SHARED_SEED_DATA
75
+ ...SHARED_SEED_DATA,
76
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
60
77
  }, {
61
78
  name: "Stack",
62
79
  tag: "Stack",
package/lib/module/mappings/NativeBase/Layout.js CHANGED
@@ -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, createStaticBoolProp } 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,32 +26,48 @@ 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",
37
40
  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
41
+ props: {
42
+ centerContent: createStaticBoolProp({
43
+ label: "Center content",
44
+ description: "Center child elements based on their content width",
45
+ defaultValue: true
46
+ })
47
+ },
38
48
  ...SHARED_SEED_DATA
39
49
  }, {
40
50
  name: "Column",
41
51
  tag: "Column",
42
52
  description: "Column aligns items vertically",
53
+ layout: {
54
+ flexDirection: "column"
55
+ },
43
56
  ...SHARED_SEED_DATA
44
57
  }, {
45
58
  name: "Row",
46
59
  tag: "Row",
47
60
  description: "Column aligns items horizontally",
61
+ layout: {
62
+ flexDirection: "row"
63
+ },
48
64
  ...SHARED_SEED_DATA
49
65
  }, {
50
66
  name: "Spacer",
51
67
  tag: "Spacer",
52
68
  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
53
- ...SHARED_SEED_DATA
69
+ ...SHARED_SEED_DATA,
70
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
54
71
  }, {
55
72
  name: "Stack",
56
73
  tag: "Stack",
package/lib/typescript/src/mappings/NativeBase/Layout.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const SEED_DATA: ({
11
11
  required: boolean;
12
12
  step: number;
13
13
  };
14
+ centerContent?: undefined;
14
15
  direction?: undefined;
15
16
  reversed?: undefined;
16
17
  isDisabled?: undefined;
@@ -29,6 +30,40 @@ export declare const SEED_DATA: ({
29
30
  name: string;
30
31
  tag: string;
31
32
  description: string;
33
+ } | {
34
+ category: string;
35
+ packageName: string;
36
+ stylesPanelSections: string[];
37
+ name: string;
38
+ tag: string;
39
+ description: string;
40
+ props: {
41
+ centerContent: {
42
+ label: string;
43
+ description: string;
44
+ formType: string;
45
+ propType: string;
46
+ defaultValue: boolean;
47
+ editable: boolean;
48
+ required: boolean;
49
+ group: string;
50
+ };
51
+ ratio?: undefined;
52
+ direction?: undefined;
53
+ reversed?: undefined;
54
+ isDisabled?: undefined;
55
+ isInvalid?: undefined;
56
+ };
57
+ } | {
58
+ category: string;
59
+ packageName: string;
60
+ stylesPanelSections: string[];
61
+ name: string;
62
+ tag: string;
63
+ description: string;
64
+ layout: {
65
+ flexDirection: string;
66
+ };
32
67
  } | {
33
68
  props: {
34
69
  direction: {
@@ -73,6 +108,7 @@ export declare const SEED_DATA: ({
73
108
  group: string;
74
109
  };
75
110
  ratio?: undefined;
111
+ centerContent?: undefined;
76
112
  };
77
113
  category: string;
78
114
  packageName: string;
@@ -93,6 +129,7 @@ export declare const SEED_DATA: ({
93
129
  group: string;
94
130
  };
95
131
  ratio?: undefined;
132
+ centerContent?: undefined;
96
133
  direction?: undefined;
97
134
  isDisabled?: undefined;
98
135
  isInvalid?: undefined;
package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/NativeBase/Layout.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqGrB,CAAC"}
1
+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/NativeBase/Layout.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqHrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.10.3-0bad1e.2+0bad1e7",
3
+ "version": "46.10.3-31b3e0.2+31b3e04",
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-0bad1e.2+0bad1e7",
44
+ "@draftbit/types": "^46.10.3-31b3e0.2+31b3e04",
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": "0bad1e7880e3d41548dddba76cb7c463466b70bf"
103
+ "gitHead": "31b3e0421f6f1f60a30b3e6d5283959b40bfc119"
104
104
  }
package/src/mappings/NativeBase/Layout.js CHANGED
@@ -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, createStaticBoolProp, } 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,29 +31,44 @@ 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",
41
45
  tag: "Container",
42
46
  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
47
+ props: {
48
+ centerContent: createStaticBoolProp({
49
+ label: "Center content",
50
+ description: "Center child elements based on their content width",
51
+ defaultValue: true,
52
+ }),
53
+ },
43
54
  ...SHARED_SEED_DATA,
44
55
  },
45
56
  {
46
57
  name: "Column",
47
58
  tag: "Column",
48
59
  description: "Column aligns items vertically",
60
+ layout: {
61
+ flexDirection: "column",
62
+ },
49
63
  ...SHARED_SEED_DATA,
50
64
  },
51
65
  {
52
66
  name: "Row",
53
67
  tag: "Row",
54
68
  description: "Column aligns items horizontally",
69
+ layout: {
70
+ flexDirection: "row",
71
+ },
55
72
  ...SHARED_SEED_DATA,
56
73
  },
57
74
  {
@@ -59,6 +76,7 @@ export const SEED_DATA = [
59
76
  tag: "Spacer",
60
77
  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
61
78
  ...SHARED_SEED_DATA,
79
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
62
80
  },
63
81
  {
64
82
  name: "Stack",
package/src/mappings/NativeBase/Layout.ts CHANGED
@@ -4,6 +4,8 @@ import {
4
4
  createBoolProp,
5
5
  CONTAINER_COMPONENT_STYLES_SECTIONS,
6
6
  createStaticNumberProp,
7
+ StylesPanelSections,
8
+ createStaticBoolProp,
7
9
  } from "@draftbit/types";
8
10
 
9
11
  const SHARED_SEED_DATA = {
@@ -12,6 +14,13 @@ const SHARED_SEED_DATA = {
12
14
  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
13
15
  };
14
16
 
17
+ const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX =
18
+ CONTAINER_COMPONENT_STYLES_SECTIONS.filter(
19
+ (item) =>
20
+ item !== StylesPanelSections.LayoutFlexItems &&
21
+ item !== StylesPanelSections.LayoutContent
22
+ );
23
+
15
24
  export const SEED_DATA = [
16
25
  {
17
26
  name: "Aspect Ratio",
@@ -40,6 +49,7 @@ export const SEED_DATA = [
40
49
  tag: "Center",
41
50
  description: "Center aligns its contents to the center within itself",
42
51
  ...SHARED_SEED_DATA,
52
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
43
53
  },
44
54
  {
45
55
  name: "Circle",
@@ -47,24 +57,38 @@ export const SEED_DATA = [
47
57
  description:
48
58
  "Center aligns its contents to the center within itself with a round border radius",
49
59
  ...SHARED_SEED_DATA,
60
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
50
61
  },
51
62
  {
52
63
  name: "Container",
53
64
  tag: "Container",
54
65
  description:
55
66
  "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
67
+ props: {
68
+ centerContent: createStaticBoolProp({
69
+ label: "Center content",
70
+ description: "Center child elements based on their content width",
71
+ defaultValue: true,
72
+ }),
73
+ },
56
74
  ...SHARED_SEED_DATA,
57
75
  },
58
76
  {
59
77
  name: "Column",
60
78
  tag: "Column",
61
79
  description: "Column aligns items vertically",
80
+ layout: {
81
+ flexDirection: "column",
82
+ },
62
83
  ...SHARED_SEED_DATA,
63
84
  },
64
85
  {
65
86
  name: "Row",
66
87
  tag: "Row",
67
88
  description: "Column aligns items horizontally",
89
+ layout: {
90
+ flexDirection: "row",
91
+ },
68
92
  ...SHARED_SEED_DATA,
69
93
  },
70
94
  {
@@ -73,6 +97,7 @@ export const SEED_DATA = [
73
97
  description:
74
98
  "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
75
99
  ...SHARED_SEED_DATA,
100
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
76
101
  },
77
102
  {
78
103
  name: "Stack",
package/lib/commonjs/mappings/Container.js DELETED
@@ -1,37 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SEED_DATA = void 0;
7
- var _types = require("@draftbit/types");
8
- const SEED_DATA = {
9
- name: "Container",
10
- tag: "Container",
11
- description: "A container component with gutter padding",
12
- category: _types.COMPONENT_TYPES.deprecated,
13
- stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
14
- layout: {
15
- height: 250
16
- },
17
- props: {
18
- useThemeGutterPadding: {
19
- group: _types.GROUPS.basic,
20
- label: "Use gutter padding",
21
- description: "When true, uses the theme gutter spacing as the container's horizontal padding",
22
- formType: _types.FORM_TYPES.boolean,
23
- propType: _types.PROP_TYPES.BOOLEAN,
24
- defaultValue: false,
25
- editable: false,
26
- required: true
27
- },
28
- backgroundImage: (0, _types.createImageProp)({
29
- label: "Background Image",
30
- description: "Apply a custom background image",
31
- defaultValue: null
32
- }),
33
- backgroundImageResizeMode: (0, _types.createResizeModeProp)(),
34
- elevation: (0, _types.createElevationType)(0)
35
- }
36
- };
37
- exports.SEED_DATA = SEED_DATA;
package/lib/module/mappings/Container.js DELETED
@@ -1,30 +0,0 @@
1
- import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Container",
4
- tag: "Container",
5
- description: "A container component with gutter padding",
6
- category: COMPONENT_TYPES.deprecated,
7
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
- layout: {
9
- height: 250
10
- },
11
- props: {
12
- useThemeGutterPadding: {
13
- group: GROUPS.basic,
14
- label: "Use gutter padding",
15
- description: "When true, uses the theme gutter spacing as the container's horizontal padding",
16
- formType: FORM_TYPES.boolean,
17
- propType: PROP_TYPES.BOOLEAN,
18
- defaultValue: false,
19
- editable: false,
20
- required: true
21
- },
22
- backgroundImage: createImageProp({
23
- label: "Background Image",
24
- description: "Apply a custom background image",
25
- defaultValue: null
26
- }),
27
- backgroundImageResizeMode: createResizeModeProp(),
28
- elevation: createElevationType(0)
29
- }
30
- };
package/lib/typescript/src/mappings/Container.d.ts DELETED
@@ -1,55 +0,0 @@
1
- export declare const SEED_DATA: {
2
- name: string;
3
- tag: string;
4
- description: string;
5
- category: string;
6
- stylesPanelSections: string[];
7
- layout: {
8
- height: number;
9
- };
10
- props: {
11
- useThemeGutterPadding: {
12
- group: string;
13
- label: string;
14
- description: string;
15
- formType: string;
16
- propType: string;
17
- defaultValue: boolean;
18
- editable: boolean;
19
- required: boolean;
20
- };
21
- backgroundImage: {
22
- label: string;
23
- description: string;
24
- group: string;
25
- formType: string;
26
- propType: string;
27
- defaultValue: string;
28
- editable: boolean;
29
- required: boolean;
30
- };
31
- backgroundImageResizeMode: {
32
- group: string;
33
- label: string;
34
- description: string;
35
- editable: boolean;
36
- required: boolean;
37
- defaultValue: string;
38
- formType: string;
39
- propType: string;
40
- options: string[];
41
- };
42
- elevation: {
43
- defaultValue: any;
44
- label: string;
45
- description: string;
46
- formType: string;
47
- propType: string;
48
- options: number[];
49
- editable: boolean;
50
- required: boolean;
51
- group: string;
52
- };
53
- };
54
- };
55
- //# sourceMappingURL=Container.d.ts.map
package/lib/typescript/src/mappings/Container.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Container.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrB,CAAC"}
package/src/mappings/Container.js DELETED
@@ -1,30 +0,0 @@
1
- import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Container",
4
- tag: "Container",
5
- description: "A container component with gutter padding",
6
- category: COMPONENT_TYPES.deprecated,
7
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
- layout: {
9
- height: 250,
10
- },
11
- props: {
12
- useThemeGutterPadding: {
13
- group: GROUPS.basic,
14
- label: "Use gutter padding",
15
- description: "When true, uses the theme gutter spacing as the container's horizontal padding",
16
- formType: FORM_TYPES.boolean,
17
- propType: PROP_TYPES.BOOLEAN,
18
- defaultValue: false,
19
- editable: false,
20
- required: true,
21
- },
22
- backgroundImage: createImageProp({
23
- label: "Background Image",
24
- description: "Apply a custom background image",
25
- defaultValue: null,
26
- }),
27
- backgroundImageResizeMode: createResizeModeProp(),
28
- elevation: createElevationType(0),
29
- },
30
- };
package/src/mappings/Container.ts DELETED
@@ -1,41 +0,0 @@
1
- import {
2
- GROUPS,
3
- COMPONENT_TYPES,
4
- FORM_TYPES,
5
- PROP_TYPES,
6
- createElevationType,
7
- createImageProp,
8
- createResizeModeProp,
9
- CONTAINER_COMPONENT_STYLES_SECTIONS,
10
- } from "@draftbit/types";
11
-
12
- export const SEED_DATA = {
13
- name: "Container",
14
- tag: "Container",
15
- description: "A container component with gutter padding",
16
- category: COMPONENT_TYPES.deprecated,
17
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
18
- layout: {
19
- height: 250,
20
- },
21
- props: {
22
- useThemeGutterPadding: {
23
- group: GROUPS.basic,
24
- label: "Use gutter padding",
25
- description:
26
- "When true, uses the theme gutter spacing as the container's horizontal padding",
27
- formType: FORM_TYPES.boolean,
28
- propType: PROP_TYPES.BOOLEAN,
29
- defaultValue: false,
30
- editable: false,
31
- required: true,
32
- },
33
- backgroundImage: createImageProp({
34
- label: "Background Image",
35
- description: "Apply a custom background image",
36
- defaultValue: null,
37
- }),
38
- backgroundImageResizeMode: createResizeModeProp(),
39
- elevation: createElevationType(0),
40
- },
41
- };