@builder.io/sdk-react 0.1.12 → 0.1.14

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