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