@builder.io/sdk-react 0.1.6 → 0.1.7

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 (9) hide show
  1. package/dist/react/blocks/columns/columns.js +8 -5
  2. package/dist/react/components/render-block/render-block.js +0 -1
  3. package/dist/rsc/blocks/columns/columns.js +7 -5
  4. package/dist/rsc/components/render-block/render-block.js +0 -1
  5. package/package.json +1 -1
  6. package/packages/react/src/blocks/columns/columns.jsx +9 -5
  7. package/packages/react/src/components/render-block/render-block.jsx +0 -1
  8. package/packages/rsc/src/blocks/columns/columns.jsx +8 -5
  9. package/packages/rsc/src/components/render-block/render-block.jsx +0 -1
package/dist/react/blocks/columns/columns.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
+ import { useContext } from "react";
2
3
  import RenderBlocks from "../../components/render-blocks";
3
4
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
5
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
6
  import { TARGET } from "../../constants/target.js";
6
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
+ import BuilderContext from "../../context/builder.context.js";
7
9
  export default function Columns(props) {
8
10
  function getGutterSize() {
9
11
  return typeof props.space === "number" ? props.space || 0 : 20;
@@ -47,7 +49,7 @@ export default function Columns(props) {
47
49
  };
48
50
  }
49
51
  function getWidthForBreakpointSize(size) {
50
- const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
52
+ const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
51
53
  return breakpointSizes[size].max;
52
54
  }
53
55
  function columnStyleObjects() {
@@ -103,15 +105,16 @@ export default function Columns(props) {
103
105
  function reactNativeColumnStyles() {
104
106
  return columnStyleObjects.column.small;
105
107
  }
108
+ const builderContext = useContext(BuilderContext);
106
109
  return (React.createElement(React.Fragment, null,
107
110
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
108
- " div-46a0fd84", style: {
111
+ " div-0a8a143e", style: {
109
112
  ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
110
113
  ...columnsCssVars(),
111
114
  } },
112
115
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
113
116
  React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
114
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-46a0fd84-2", style: {
117
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-0a8a143e-2", style: {
115
118
  width: getColumnCssWidth(index),
116
119
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
117
120
  ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
@@ -120,10 +123,10 @@ export default function Columns(props) {
120
123
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
121
124
  flexGrow: "1",
122
125
  } }))))),
123
- React.createElement("style", null, `.div-46a0fd84 {
126
+ React.createElement("style", null, `.div-0a8a143e {
124
127
  display: flex;
125
128
  line-height: normal;
126
- }.div-46a0fd84-2 {
129
+ }.div-0a8a143e-2 {
127
130
  display: flex;
128
131
  flex-direction: column;
129
132
  align-items: stretch;
package/dist/react/components/render-block/render-block.js CHANGED
@@ -86,7 +86,6 @@ export default function RenderBlock(props) {
86
86
  ...actions(),
87
87
  },
88
88
  }),
89
- customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
90
89
  },
91
90
  context: childrenContext(),
92
91
  };
package/dist/rsc/blocks/columns/columns.js CHANGED
@@ -4,6 +4,7 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
4
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
5
  import { TARGET } from "../../constants/target.js";
6
6
  import { convertStyleMapToCSS } from "../../helpers/css";
7
+ import BuilderContext from "../../context/builder.context.js";
7
8
  export default function Columns(props) {
8
9
  const _context = { ...props["_context"] };
9
10
  const state = {
@@ -49,7 +50,7 @@ export default function Columns(props) {
49
50
  };
50
51
  },
51
52
  getWidthForBreakpointSize(size) {
52
- const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
53
+ const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
53
54
  return breakpointSizes[size].max;
54
55
  },
55
56
  get columnStyleObjects() {
@@ -106,15 +107,16 @@ export default function Columns(props) {
106
107
  return this.columnStyleObjects.column.small;
107
108
  },
108
109
  };
110
+ const builderContext = _context["BuilderContext"];
109
111
  return (React.createElement(React.Fragment, null,
110
112
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
111
- " div-ca644030", style: {
113
+ " div-fbdb9b00", style: {
112
114
  ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
113
115
  ...state.columnsCssVars,
114
116
  } },
115
117
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
116
118
  React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
117
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-ca644030-2", style: {
119
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-fbdb9b00-2", style: {
118
120
  width: state.getColumnCssWidth(index),
119
121
  marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
120
122
  ...(TARGET === "reactNative"
@@ -125,10 +127,10 @@ export default function Columns(props) {
125
127
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
126
128
  flexGrow: "1",
127
129
  }, _context: _context }))))),
128
- React.createElement("style", null, `.div-ca644030 {
130
+ React.createElement("style", null, `.div-fbdb9b00 {
129
131
  display: flex;
130
132
  line-height: normal;
131
- }.div-ca644030-2 {
133
+ }.div-fbdb9b00-2 {
132
134
  display: flex;
133
135
  flex-direction: column;
134
136
  align-items: stretch;
package/dist/rsc/components/render-block/render-block.js CHANGED
@@ -87,7 +87,6 @@ export default function RenderBlock(props) {
87
87
  ...state.actions,
88
88
  },
89
89
  }),
90
- customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
91
90
  },
92
91
  context: state.childrenContext,
93
92
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react",
3
3
  "description": "Builder.io SDK for React",
4
- "version": "0.1.6",
4
+ "version": "0.1.7",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
7
7
  "exports": {
package/packages/react/src/blocks/columns/columns.jsx CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
+ import { useContext } from "react";
2
3
  import RenderBlocks from "../../components/render-blocks";
3
4
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
5
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
6
  import { TARGET } from "../../constants/target.js";
6
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
+ import BuilderContext from "../../context/builder.context.js";
7
9
 
8
10
  export default function Columns(props) {
9
11
  function getGutterSize() {
@@ -57,7 +59,7 @@ export default function Columns(props) {
57
59
 
58
60
  function getWidthForBreakpointSize(size) {
59
61
  const breakpointSizes = getSizesForBreakpoints(
60
- props.customBreakpoints || {}
62
+ builderContext.content?.meta?.breakpoints || {}
61
63
  );
62
64
  return breakpointSizes[size].max;
63
65
  }
@@ -119,12 +121,14 @@ export default function Columns(props) {
119
121
  return columnStyleObjects.column.small;
120
122
  }
121
123
 
124
+ const builderContext = useContext(BuilderContext);
125
+
122
126
  return (
123
127
  <>
124
128
  <div
125
129
  className={
126
130
  `builder-columns ${props.builderBlock.id}-breakpoints` +
127
- " div-46a0fd84"
131
+ " div-0a8a143e"
128
132
  }
129
133
  style={{
130
134
  ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
@@ -139,7 +143,7 @@ export default function Columns(props) {
139
143
 
140
144
  {props.columns?.map((column, index) => (
141
145
  <div
142
- className="builder-column div-46a0fd84-2"
146
+ className="builder-column div-0a8a143e-2"
143
147
  style={{
144
148
  width: getColumnCssWidth(index),
145
149
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -159,10 +163,10 @@ export default function Columns(props) {
159
163
  </div>
160
164
  ))}
161
165
  </div>
162
- <style>{`.div-46a0fd84 {
166
+ <style>{`.div-0a8a143e {
163
167
  display: flex;
164
168
  line-height: normal;
165
- }.div-46a0fd84-2 {
169
+ }.div-0a8a143e-2 {
166
170
  display: flex;
167
171
  flex-direction: column;
168
172
  align-items: stretch;
package/packages/react/src/components/render-block/render-block.jsx CHANGED
@@ -102,7 +102,6 @@ export default function RenderBlock(props) {
102
102
  ...actions(),
103
103
  },
104
104
  }),
105
- customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
106
105
  },
107
106
  context: childrenContext(),
108
107
  };
package/packages/rsc/src/blocks/columns/columns.jsx CHANGED
@@ -4,6 +4,7 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
4
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
5
  import { TARGET } from "../../constants/target.js";
6
6
  import { convertStyleMapToCSS } from "../../helpers/css";
7
+ import BuilderContext from "../../context/builder.context.js";
7
8
 
8
9
  export default function Columns(props) {
9
10
  const _context = { ...props["_context"] };
@@ -54,7 +55,7 @@ export default function Columns(props) {
54
55
  },
55
56
  getWidthForBreakpointSize(size) {
56
57
  const breakpointSizes = getSizesForBreakpoints(
57
- props.customBreakpoints || {}
58
+ builderContext.content?.meta?.breakpoints || {}
58
59
  );
59
60
  return breakpointSizes[size].max;
60
61
  },
@@ -113,12 +114,14 @@ export default function Columns(props) {
113
114
  },
114
115
  };
115
116
 
117
+ const builderContext = _context["BuilderContext"];
118
+
116
119
  return (
117
120
  <>
118
121
  <div
119
122
  className={
120
123
  `builder-columns ${props.builderBlock.id}-breakpoints` +
121
- " div-ca644030"
124
+ " div-fbdb9b00"
122
125
  }
123
126
  style={{
124
127
  ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
@@ -136,7 +139,7 @@ export default function Columns(props) {
136
139
 
137
140
  {props.columns?.map((column, index) => (
138
141
  <div
139
- className="builder-column div-ca644030-2"
142
+ className="builder-column div-fbdb9b00-2"
140
143
  style={{
141
144
  width: state.getColumnCssWidth(index),
142
145
  marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
@@ -159,10 +162,10 @@ export default function Columns(props) {
159
162
  </div>
160
163
  ))}
161
164
  </div>
162
- <style>{`.div-ca644030 {
165
+ <style>{`.div-fbdb9b00 {
163
166
  display: flex;
164
167
  line-height: normal;
165
- }.div-ca644030-2 {
168
+ }.div-fbdb9b00-2 {
166
169
  display: flex;
167
170
  flex-direction: column;
168
171
  align-items: stretch;
package/packages/rsc/src/components/render-block/render-block.jsx CHANGED
@@ -96,7 +96,6 @@ export default function RenderBlock(props) {
96
96
  ...state.actions,
97
97
  },
98
98
  }),
99
- customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
100
99
  },
101
100
  context: state.childrenContext,
102
101
  };