@builder.io/sdk-react-native 0.1.12 → 0.1.13

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 (5) hide show
  1. package/dist/blocks/columns/columns.js +67 -64
  2. package/dist/components/render-blocks.js +1 -1
  3. package/package.json +1 -1
  4. package/src/blocks/columns/columns.jsx +84 -69
  5. package/src/components/render-blocks.jsx +1 -1
package/dist/blocks/columns/columns.js CHANGED
@@ -33,50 +33,75 @@ const render_blocks_1 = __importDefault(require("../../components/render-blocks"
33
33
  const device_sizes_1 = require("../../constants/device-sizes");
34
34
  const render_inlined_styles_1 = __importDefault(require("../../components/render-inlined-styles"));
35
35
  const target_js_1 = require("../../constants/target.js");
36
- const css_1 = require("../../helpers/css");
37
36
  const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
38
37
  function Columns(props) {
39
38
  var _a;
40
- function getGutterSize() {
41
- return typeof props.space === "number" ? props.space || 0 : 20;
42
- }
43
- function getColumns() {
44
- return props.columns || [];
45
- }
39
+ const [gutterSize, setGutterSize] = (0, react_1.useState)(() => typeof props.space === "number" ? props.space || 0 : 20);
40
+ const [cols, setCols] = (0, react_1.useState)(() => props.columns || []);
41
+ const [stackAt, setStackAt] = (0, react_1.useState)(() => props.stackColumnsAt || "tablet");
46
42
  function getWidth(index) {
47
43
  var _a;
48
- const columns = getColumns();
49
- return ((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / columns.length;
44
+ return ((_a = cols[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / cols.length;
50
45
  }
51
46
  function getColumnCssWidth(index) {
52
- const columns = getColumns();
53
- const gutterSize = getGutterSize();
54
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
47
+ const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
55
48
  return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
56
49
  }
57
- function maybeApplyForTablet(prop) {
58
- const _stackColumnsAt = props.stackColumnsAt || "tablet";
59
- return _stackColumnsAt === "tablet" ? prop : "inherit";
50
+ function getTabletStyle({ stackedStyle, desktopStyle }) {
51
+ return stackAt === "tablet" ? stackedStyle : desktopStyle;
60
52
  }
53
+ function getMobileStyle({ stackedStyle, desktopStyle }) {
54
+ return stackAt === "never" ? desktopStyle : stackedStyle;
55
+ }
56
+ const [flexDir, setFlexDir] = (0, react_1.useState)(() => props.stackColumnsAt === "never"
57
+ ? "row"
58
+ : props.reverseColumnsWhenStacked
59
+ ? "column-reverse"
60
+ : "column");
61
61
  function columnsCssVars() {
62
- const flexDir = props.stackColumnsAt === "never"
63
- ? "inherit"
64
- : props.reverseColumnsWhenStacked
65
- ? "column-reverse"
66
- : "column";
62
+ if (target_js_1.TARGET === "reactNative") {
63
+ return {
64
+ flexDirection: flexDir,
65
+ };
66
+ }
67
67
  return {
68
68
  "--flex-dir": flexDir,
69
- "--flex-dir-tablet": maybeApplyForTablet(flexDir),
69
+ "--flex-dir-tablet": getTabletStyle({
70
+ stackedStyle: flexDir,
71
+ desktopStyle: "row",
72
+ }),
70
73
  };
71
74
  }
72
- function columnCssVars() {
73
- const width = "100%";
74
- const marginLeft = "0";
75
+ function columnCssVars(index) {
76
+ const width = getColumnCssWidth(index);
77
+ const gutter = `${index === 0 ? 0 : gutterSize}px`;
78
+ if (target_js_1.TARGET === "reactNative") {
79
+ return {
80
+ width,
81
+ marginLeft: props.stackColumnsAt === "never" ? gutter : "0",
82
+ };
83
+ }
84
+ const mobileWidth = "100%";
85
+ const mobileMarginLeft = "0";
75
86
  return {
76
- "--column-width": width,
77
- "--column-margin-left": marginLeft,
78
- "--column-width-tablet": maybeApplyForTablet(width),
79
- "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
87
+ width,
88
+ "margin-left": gutter,
89
+ "--column-width-mobile": getMobileStyle({
90
+ stackedStyle: mobileWidth,
91
+ desktopStyle: width,
92
+ }),
93
+ "--column-margin-left-mobile": getMobileStyle({
94
+ stackedStyle: mobileMarginLeft,
95
+ desktopStyle: gutter,
96
+ }),
97
+ "--column-width-tablet": getTabletStyle({
98
+ stackedStyle: mobileWidth,
99
+ desktopStyle: width,
100
+ }),
101
+ "--column-margin-left-tablet": getTabletStyle({
102
+ stackedStyle: mobileMarginLeft,
103
+ desktopStyle: gutter,
104
+ }),
80
105
  };
81
106
  }
82
107
  function getWidthForBreakpointSize(size) {
@@ -84,64 +109,42 @@ function Columns(props) {
84
109
  const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(((_b = (_a = builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
85
110
  return breakpointSizes[size].max;
86
111
  }
87
- function columnStyleObjects() {
88
- return {
89
- columns: {
90
- small: {
91
- flexDirection: "var(--flex-dir)",
92
- alignItems: "stretch",
93
- },
94
- medium: {
95
- flexDirection: "var(--flex-dir-tablet)",
96
- alignItems: "stretch",
97
- },
98
- },
99
- column: {
100
- small: {
101
- width: "var(--column-width) !important",
102
- marginLeft: "var(--column-margin-left) !important",
103
- },
104
- medium: {
105
- width: "var(--column-width-tablet) !important",
106
- marginLeft: "var(--column-margin-left-tablet) !important",
107
- },
108
- },
109
- };
110
- }
111
112
  function columnsStyles() {
112
113
  return `
113
114
  @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
114
115
  .${props.builderBlock.id}-breakpoints {
115
- ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.medium)}
116
+ flex-direction: var(--flex-dir-tablet);
117
+ align-items: stretch;
116
118
  }
117
119
 
118
120
  .${props.builderBlock.id}-breakpoints > .builder-column {
119
- ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.medium)}
121
+ width: var(--column-width-tablet) !important;
122
+ margin-left: var(--column-margin-left-tablet) !important;
120
123
  }
121
124
  }
122
125
 
123
126
  @media (max-width: ${getWidthForBreakpointSize("small")}px) {
124
127
  .${props.builderBlock.id}-breakpoints {
125
- ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.small)}
128
+ flex-direction: var(--flex-dir);
129
+ align-items: stretch;
126
130
  }
127
131
 
128
132
  .${props.builderBlock.id}-breakpoints > .builder-column {
129
- ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.small)}
133
+ width: var(--column-width-mobile) !important;
134
+ margin-left: var(--column-margin-left-mobile) !important;
130
135
  }
131
136
  },
132
137
  `;
133
138
  }
134
- function reactNativeColumnsStyles() {
135
- return columnStyleObjects.columns.small;
136
- }
137
- function reactNativeColumnStyles() {
138
- return columnStyleObjects.column.small;
139
- }
140
139
  const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
141
- return (React.createElement(react_native_1.View, { style: styles.view1 },
140
+ return (React.createElement(react_native_1.View, { style: columnsCssVars(), dataSet: {
141
+ "builder-block-name": "builder-columns",
142
+ } },
142
143
  target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
143
144
  React.createElement(render_inlined_styles_1.default, { styles: columnsStyles() }))) : null, (_a = props.columns) === null || _a === void 0 ? void 0 :
144
- _a.map((column, index) => (React.createElement(react_native_1.View, { style: styles.view2, key: index },
145
+ _a.map((column, index) => (React.createElement(react_native_1.View, { style: columnCssVars(index), dataSet: {
146
+ "builder-block-name": "builder-column",
147
+ }, key: index },
145
148
  React.createElement(render_blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
146
149
  flexGrow: "1",
147
150
  } }))))));
package/dist/components/render-blocks.js CHANGED
@@ -66,7 +66,7 @@ function RenderBlocks(props) {
66
66
  const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
67
67
  return (React.createElement(react_native_1.ScrollView, { "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
68
68
  class: className(),
69
- }, contentContainerStyle: styles.scrollView1, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
69
+ }, contentContainerStyle: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
70
70
  props.blocks ? (React.createElement(React.Fragment, null, (_a = props.blocks) === null || _a === void 0 ? void 0 : _a.map((block) => (React.createElement(render_block_1.default, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
71
71
  props.blocks ? (React.createElement(React.Fragment, null, (_b = props.blocks) === null || _b === void 0 ? void 0 : _b.map((block) => (React.createElement(block_styles_1.default, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null));
72
72
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react-native",
3
3
  "description": "Builder.io SDK for React Native",
4
- "version": "0.1.12",
4
+ "version": "0.1.13",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/src/blocks/columns/columns.jsx CHANGED
@@ -7,61 +7,94 @@ import {
7
7
  Image,
8
8
  Text,
9
9
  } from "react-native";
10
- import { useContext } from "react";
10
+ import { useState, useContext } from "react";
11
11
  import RenderBlocks from "../../components/render-blocks";
12
12
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
13
13
  import RenderInlinedStyles from "../../components/render-inlined-styles";
14
14
  import { TARGET } from "../../constants/target.js";
15
- import { convertStyleMapToCSS } from "../../helpers/css";
16
15
  import BuilderContext from "../../context/builder.context.js";
17
16
 
18
17
  function Columns(props) {
19
- function getGutterSize() {
20
- return typeof props.space === "number" ? props.space || 0 : 20;
21
- }
18
+ const [gutterSize, setGutterSize] = useState(() =>
19
+ typeof props.space === "number" ? props.space || 0 : 20
20
+ );
22
21
 
23
- function getColumns() {
24
- return props.columns || [];
25
- }
22
+ const [cols, setCols] = useState(() => props.columns || []);
23
+
24
+ const [stackAt, setStackAt] = useState(
25
+ () => props.stackColumnsAt || "tablet"
26
+ );
26
27
 
27
28
  function getWidth(index) {
28
- const columns = getColumns();
29
- return columns[index]?.width || 100 / columns.length;
29
+ return cols[index]?.width || 100 / cols.length;
30
30
  }
31
31
 
32
32
  function getColumnCssWidth(index) {
33
- const columns = getColumns();
34
- const gutterSize = getGutterSize();
35
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
33
+ const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
36
34
  return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
37
35
  }
38
36
 
39
- function maybeApplyForTablet(prop) {
40
- const _stackColumnsAt = props.stackColumnsAt || "tablet";
41
- return _stackColumnsAt === "tablet" ? prop : "inherit";
37
+ function getTabletStyle({ stackedStyle, desktopStyle }) {
38
+ return stackAt === "tablet" ? stackedStyle : desktopStyle;
42
39
  }
43
40
 
41
+ function getMobileStyle({ stackedStyle, desktopStyle }) {
42
+ return stackAt === "never" ? desktopStyle : stackedStyle;
43
+ }
44
+
45
+ const [flexDir, setFlexDir] = useState(() =>
46
+ props.stackColumnsAt === "never"
47
+ ? "row"
48
+ : props.reverseColumnsWhenStacked
49
+ ? "column-reverse"
50
+ : "column"
51
+ );
52
+
44
53
  function columnsCssVars() {
45
- const flexDir =
46
- props.stackColumnsAt === "never"
47
- ? "inherit"
48
- : props.reverseColumnsWhenStacked
49
- ? "column-reverse"
50
- : "column";
54
+ if (TARGET === "reactNative") {
55
+ return {
56
+ flexDirection: flexDir,
57
+ };
58
+ }
51
59
  return {
52
60
  "--flex-dir": flexDir,
53
- "--flex-dir-tablet": maybeApplyForTablet(flexDir),
61
+ "--flex-dir-tablet": getTabletStyle({
62
+ stackedStyle: flexDir,
63
+ desktopStyle: "row",
64
+ }),
54
65
  };
55
66
  }
56
67
 
57
- function columnCssVars() {
58
- const width = "100%";
59
- const marginLeft = "0";
68
+ function columnCssVars(index) {
69
+ const width = getColumnCssWidth(index);
70
+ const gutter = `${index === 0 ? 0 : gutterSize}px`;
71
+ if (TARGET === "reactNative") {
72
+ return {
73
+ width,
74
+ marginLeft: props.stackColumnsAt === "never" ? gutter : "0",
75
+ };
76
+ }
77
+ const mobileWidth = "100%";
78
+ const mobileMarginLeft = "0";
60
79
  return {
61
- "--column-width": width,
62
- "--column-margin-left": marginLeft,
63
- "--column-width-tablet": maybeApplyForTablet(width),
64
- "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
80
+ width,
81
+ "margin-left": gutter,
82
+ "--column-width-mobile": getMobileStyle({
83
+ stackedStyle: mobileWidth,
84
+ desktopStyle: width,
85
+ }),
86
+ "--column-margin-left-mobile": getMobileStyle({
87
+ stackedStyle: mobileMarginLeft,
88
+ desktopStyle: gutter,
89
+ }),
90
+ "--column-width-tablet": getTabletStyle({
91
+ stackedStyle: mobileWidth,
92
+ desktopStyle: width,
93
+ }),
94
+ "--column-margin-left-tablet": getTabletStyle({
95
+ stackedStyle: mobileMarginLeft,
96
+ desktopStyle: gutter,
97
+ }),
65
98
  };
66
99
  }
67
100
 
@@ -72,67 +105,43 @@ function Columns(props) {
72
105
  return breakpointSizes[size].max;
73
106
  }
74
107
 
75
- function columnStyleObjects() {
76
- return {
77
- columns: {
78
- small: {
79
- flexDirection: "var(--flex-dir)",
80
- alignItems: "stretch",
81
- },
82
- medium: {
83
- flexDirection: "var(--flex-dir-tablet)",
84
- alignItems: "stretch",
85
- },
86
- },
87
- column: {
88
- small: {
89
- width: "var(--column-width) !important",
90
- marginLeft: "var(--column-margin-left) !important",
91
- },
92
- medium: {
93
- width: "var(--column-width-tablet) !important",
94
- marginLeft: "var(--column-margin-left-tablet) !important",
95
- },
96
- },
97
- };
98
- }
99
-
100
108
  function columnsStyles() {
101
109
  return `
102
110
  @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
103
111
  .${props.builderBlock.id}-breakpoints {
104
- ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
112
+ flex-direction: var(--flex-dir-tablet);
113
+ align-items: stretch;
105
114
  }
106
115
 
107
116
  .${props.builderBlock.id}-breakpoints > .builder-column {
108
- ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
117
+ width: var(--column-width-tablet) !important;
118
+ margin-left: var(--column-margin-left-tablet) !important;
109
119
  }
110
120
  }
111
121
 
112
122
  @media (max-width: ${getWidthForBreakpointSize("small")}px) {
113
123
  .${props.builderBlock.id}-breakpoints {
114
- ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
124
+ flex-direction: var(--flex-dir);
125
+ align-items: stretch;
115
126
  }
116
127
 
117
128
  .${props.builderBlock.id}-breakpoints > .builder-column {
118
- ${convertStyleMapToCSS(columnStyleObjects().column.small)}
129
+ width: var(--column-width-mobile) !important;
130
+ margin-left: var(--column-margin-left-mobile) !important;
119
131
  }
120
132
  },
121
133
  `;
122
134
  }
123
135
 
124
- function reactNativeColumnsStyles() {
125
- return columnStyleObjects.columns.small;
126
- }
127
-
128
- function reactNativeColumnStyles() {
129
- return columnStyleObjects.column.small;
130
- }
131
-
132
136
  const builderContext = useContext(BuilderContext);
133
137
 
134
138
  return (
135
- <View style={styles.view1}>
139
+ <View
140
+ style={columnsCssVars()}
141
+ dataSet={{
142
+ "builder-block-name": "builder-columns",
143
+ }}
144
+ >
136
145
  {TARGET !== "reactNative" ? (
137
146
  <>
138
147
  <RenderInlinedStyles styles={columnsStyles()} />
@@ -140,7 +149,13 @@ function Columns(props) {
140
149
  ) : null}
141
150
 
142
151
  {props.columns?.map((column, index) => (
143
- <View style={styles.view2} key={index}>
152
+ <View
153
+ style={columnCssVars(index)}
154
+ dataSet={{
155
+ "builder-block-name": "builder-column",
156
+ }}
157
+ key={index}
158
+ >
144
159
  <RenderBlocks
145
160
  blocks={column.blocks}
146
161
  path={`component.options.columns.${index}.blocks`}
package/src/components/render-blocks.jsx CHANGED
@@ -57,7 +57,7 @@ function RenderBlocks(props) {
57
57
  dataSet={{
58
58
  class: className(),
59
59
  }}
60
- contentContainerStyle={styles.scrollView1}
60
+ contentContainerStyle={props.styleProp}
61
61
  onClick={(event) => onClick()}
62
62
  onMouseEnter={(event) => onMouseEnter()}
63
63
  >