@webiny/website-builder-react 6.4.10-beta.2 → 6.4.10-beta.4
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.
|
@@ -15,5 +15,5 @@ type GridProps = ComponentProps<{
|
|
|
15
15
|
stackAtBreakpoint?: string;
|
|
16
16
|
reverseWhenStacked?: boolean;
|
|
17
17
|
}>;
|
|
18
|
-
export declare const GridComponent: ({ inputs, styles,
|
|
18
|
+
export declare const GridComponent: ({ inputs, styles, element }: GridProps) => React.JSX.Element;
|
|
19
19
|
export {};
|
package/editorComponents/Grid.js
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
import react from "react";
|
|
2
|
+
import { createGridClass, createGridStackingCss } from "./gridStyles.js";
|
|
2
3
|
const GridColumnComponent = ({ inputs })=>/*#__PURE__*/ react.createElement(react.Fragment, null, inputs.children);
|
|
3
|
-
const GridComponent = ({ inputs, styles,
|
|
4
|
+
const GridComponent = ({ inputs, styles, element })=>{
|
|
4
5
|
const { gridLayout = "12", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;
|
|
5
6
|
const rowConfig = gridLayout.split("-").map((size)=>parseInt(size));
|
|
6
7
|
const rows = [];
|
|
7
8
|
for(let i = 0; i < columns.length; i += rowConfig.length)rows.push(columns.slice(i, i + rowConfig.length));
|
|
8
9
|
const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;
|
|
9
|
-
const
|
|
10
|
-
|
|
10
|
+
const gridClass = createGridClass(element.id);
|
|
11
|
+
const stackCss = createGridStackingCss({
|
|
12
|
+
gridClass,
|
|
13
|
+
stackAtBreakpoint,
|
|
14
|
+
reverseWhenStacked
|
|
15
|
+
});
|
|
11
16
|
return /*#__PURE__*/ react.createElement("div", {
|
|
17
|
+
className: gridClass,
|
|
12
18
|
style: styles
|
|
13
|
-
},
|
|
19
|
+
}, stackCss ? /*#__PURE__*/ react.createElement("style", {
|
|
20
|
+
dangerouslySetInnerHTML: {
|
|
21
|
+
__html: stackCss
|
|
22
|
+
}
|
|
23
|
+
}) : null, rows.map((columns)=>columns.map((column, i)=>/*#__PURE__*/ react.createElement(Span, {
|
|
14
24
|
key: i,
|
|
15
|
-
stackColumns: stackColumns,
|
|
16
25
|
size: rowConfig[i],
|
|
17
26
|
reductionInPx: cellWidthReduction
|
|
18
27
|
}, /*#__PURE__*/ react.createElement(GridColumnComponent, {
|
|
@@ -22,9 +31,10 @@ const GridComponent = ({ inputs, styles, breakpoint })=>{
|
|
|
22
31
|
}
|
|
23
32
|
})))));
|
|
24
33
|
};
|
|
25
|
-
const Span = ({ size, children, reductionInPx
|
|
26
|
-
const width =
|
|
34
|
+
const Span = ({ size, children, reductionInPx })=>{
|
|
35
|
+
const width = `calc(${size / 12 * 100}% - ${reductionInPx}px)`;
|
|
27
36
|
return /*#__PURE__*/ react.createElement("div", {
|
|
37
|
+
className: "wb-grid-col",
|
|
28
38
|
style: {
|
|
29
39
|
flex: `0 0 ${width}`,
|
|
30
40
|
maxWidth: width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editorComponents/Grid.js","sources":["../../src/editorComponents/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const GridColumnComponent = ({\n inputs\n}: {\n inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n return <>{inputs.children}</>;\n};\n\nexport interface Column {\n children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n gridLayout: string;\n rowCount: number;\n rowGap: number;\n columnGap: number;\n columns: Column[];\n stackAtBreakpoint?: string;\n reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles,
|
|
1
|
+
{"version":3,"file":"editorComponents/Grid.js","sources":["../../src/editorComponents/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types.js\";\nimport { createGridClass, createGridStackingCss } from \"./gridStyles.js\";\n\nexport const GridColumnComponent = ({\n inputs\n}: {\n inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n return <>{inputs.children}</>;\n};\n\nexport interface Column {\n children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n gridLayout: string;\n rowCount: number;\n rowGap: number;\n columnGap: number;\n columns: Column[];\n stackAtBreakpoint?: string;\n reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles, element }: GridProps) => {\n const { gridLayout = \"12\", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;\n const rowConfig = gridLayout.split(\"-\").map(size => parseInt(size));\n const rows: Column[][] = [];\n\n // Chunk columns into rows\n for (let i = 0; i < columns.length; i += rowConfig.length) {\n rows.push(columns.slice(i, i + rowConfig.length));\n }\n\n // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap\n const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n\n const gridClass = createGridClass(element.id);\n\n // Columns stack via a CSS media query (see createGridStackingCss).\n const stackCss = createGridStackingCss({ gridClass, stackAtBreakpoint, reverseWhenStacked });\n\n return (\n <div className={gridClass} style={styles}>\n {/*\n A media query can't be expressed in an inline `style` attribute (that only\n holds declarations, not at-rules), so the stacking CSS is emitted as a\n scoped <style> tag. A <style> is `display:none` and valid inside <body>,\n so it doesn't affect the grid's flex layout.\n */}\n {stackCss ? <style dangerouslySetInnerHTML={{ __html: stackCss }} /> : null}\n {rows.map(columns => {\n return columns.map((column, i) => (\n <Span key={i} size={rowConfig[i]} reductionInPx={cellWidthReduction}>\n <GridColumnComponent key={i} inputs={{ children: column.children }} />\n </Span>\n ));\n })}\n </div>\n );\n};\n\ninterface SpanProps {\n size: number;\n reductionInPx: number;\n children: React.ReactNode;\n}\n\nconst Span = ({ size, children, reductionInPx }: SpanProps) => {\n // Base (row) width. The Grid's media query overrides this to 100% when stacked.\n const width = `calc(${(size / 12) * 100}% - ${reductionInPx}px)`;\n\n return (\n <div\n className=\"wb-grid-col\"\n style={{\n flex: `0 0 ${width}`,\n maxWidth: width,\n boxSizing: \"border-box\"\n }}\n >\n {children}\n </div>\n );\n};\n"],"names":["GridColumnComponent","inputs","GridComponent","styles","element","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","size","parseInt","rows","i","cellWidthReduction","gridClass","createGridClass","stackCss","createGridStackingCss","column","Span","children","reductionInPx","width"],"mappings":";;AAIO,MAAMA,sBAAsB,CAAC,EAChCC,MAAM,EAGT,GACU,WAAP,GAAO,0CAAGA,OAAO,QAAQ;AAiBtB,MAAMC,gBAAgB,CAAC,EAAED,MAAM,EAAEE,MAAM,EAAEC,OAAO,EAAa;IAChE,MAAM,EAAEC,aAAa,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGR;IACzF,MAAMS,YAAYL,WAAW,KAAK,CAAC,KAAK,GAAG,CAACM,CAAAA,OAAQC,SAASD;IAC7D,MAAME,OAAmB,EAAE;IAG3B,IAAK,IAAIC,IAAI,GAAGA,IAAIR,QAAQ,MAAM,EAAEQ,KAAKJ,UAAU,MAAM,CACrDG,KAAK,IAAI,CAACP,QAAQ,KAAK,CAACQ,GAAGA,IAAIJ,UAAU,MAAM;IAInD,MAAMK,qBAAqBR,YAAYA,YAAYA,YAAYG,UAAU,MAAM,GAAG;IAElF,MAAMM,YAAYC,gBAAgBb,QAAQ,EAAE;IAG5C,MAAMc,WAAWC,sBAAsB;QAAEH;QAAWR;QAAmBC;IAAmB;IAE1F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWO;QAAW,OAAOb;OAO7Be,WAAW,WAAXA,GAAW,oBAAC;QAAM,yBAAyB;YAAE,QAAQA;QAAS;SAAQ,MACtEL,KAAK,GAAG,CAACP,CAAAA,UACCA,QAAQ,GAAG,CAAC,CAACc,QAAQN,IAAAA,WAAAA,GACxB,oBAACO,MAAIA;gBAAC,KAAKP;gBAAG,MAAMJ,SAAS,CAACI,EAAE;gBAAE,eAAeC;6BAC7C,oBAACf,qBAAmBA;gBAAC,KAAKc;gBAAG,QAAQ;oBAAE,UAAUM,OAAO,QAAQ;gBAAC;;AAMzF;AAQA,MAAMC,OAAO,CAAC,EAAEV,IAAI,EAAEW,QAAQ,EAAEC,aAAa,EAAa;IAEtD,MAAMC,QAAQ,CAAC,KAAK,EAAGb,OAAO,KAAM,IAAI,IAAI,EAAEY,cAAc,GAAG,CAAC;IAEhE,OAAO,WAAP,GACI,oBAAC;QACG,WAAU;QACV,OAAO;YACH,MAAM,CAAC,IAAI,EAAEC,OAAO;YACpB,UAAUA;YACV,WAAW;QACf;OAECF;AAGb"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Builds a stable, SSR-consistent class scoped to a single grid instance
|
|
3
|
+
* (e.g. `wb-grid-<id>`), sanitized to a valid CSS class name.
|
|
4
|
+
*/
|
|
5
|
+
export declare const createGridClass: (elementId: string) => string;
|
|
6
|
+
interface CreateGridStackingCssParams {
|
|
7
|
+
/** Scoped class applied to the grid container (from `createGridClass`). */
|
|
8
|
+
gridClass: string;
|
|
9
|
+
/** Breakpoint name at (and below) which columns stack, e.g. "mobile". */
|
|
10
|
+
stackAtBreakpoint?: string;
|
|
11
|
+
/** Reverse the visual order of columns when stacked. */
|
|
12
|
+
reverseWhenStacked?: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Builds the media query that stacks a grid's columns at (and below) the given
|
|
16
|
+
* breakpoint's width.
|
|
17
|
+
*
|
|
18
|
+
* Stacking is expressed as CSS rather than JS so the layout is correct straight
|
|
19
|
+
* from the SSR HTML — no hydration, no viewport JS, no flash — the browser
|
|
20
|
+
* applies it by the real viewport width. The width comes from the theme's
|
|
21
|
+
* breakpoint definition (populated on both server and client via ContentSdk.init).
|
|
22
|
+
*
|
|
23
|
+
* Returns an empty string when no stacking breakpoint is configured (or the
|
|
24
|
+
* named breakpoint is unknown), in which case the grid never stacks.
|
|
25
|
+
*/
|
|
26
|
+
export declare const createGridStackingCss: ({ gridClass, stackAtBreakpoint, reverseWhenStacked }: CreateGridStackingCssParams) => string;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { viewportManager } from "@webiny/website-builder-sdk";
|
|
2
|
+
const createGridClass = (elementId)=>`wb-grid-${String(elementId).replace(/[^a-zA-Z0-9_-]/g, "-")}`;
|
|
3
|
+
const createGridStackingCss = ({ gridClass, stackAtBreakpoint, reverseWhenStacked })=>{
|
|
4
|
+
if (!stackAtBreakpoint) return "";
|
|
5
|
+
const breakpoint = viewportManager.getViewport().breakpoints.find((bp)=>bp.name === stackAtBreakpoint);
|
|
6
|
+
if (!breakpoint) return "";
|
|
7
|
+
const direction = reverseWhenStacked ? "column-reverse" : "column";
|
|
8
|
+
return [
|
|
9
|
+
`@media (max-width: ${breakpoint.maxWidth}px) {`,
|
|
10
|
+
` .${gridClass} { flex-direction: ${direction} !important; }`,
|
|
11
|
+
` .${gridClass} > .wb-grid-col { flex: 0 0 100% !important; max-width: 100% !important; }`,
|
|
12
|
+
"}"
|
|
13
|
+
].join("\n");
|
|
14
|
+
};
|
|
15
|
+
export { createGridClass, createGridStackingCss };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=gridStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editorComponents/gridStyles.js","sources":["../../src/editorComponents/gridStyles.ts"],"sourcesContent":["import { viewportManager } from \"@webiny/website-builder-sdk\";\n\n/**\n * Builds a stable, SSR-consistent class scoped to a single grid instance\n * (e.g. `wb-grid-<id>`), sanitized to a valid CSS class name.\n */\nexport const createGridClass = (elementId: string): string => {\n return `wb-grid-${String(elementId).replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n};\n\ninterface CreateGridStackingCssParams {\n /** Scoped class applied to the grid container (from `createGridClass`). */\n gridClass: string;\n /** Breakpoint name at (and below) which columns stack, e.g. \"mobile\". */\n stackAtBreakpoint?: string;\n /** Reverse the visual order of columns when stacked. */\n reverseWhenStacked?: boolean;\n}\n\n/**\n * Builds the media query that stacks a grid's columns at (and below) the given\n * breakpoint's width.\n *\n * Stacking is expressed as CSS rather than JS so the layout is correct straight\n * from the SSR HTML — no hydration, no viewport JS, no flash — the browser\n * applies it by the real viewport width. The width comes from the theme's\n * breakpoint definition (populated on both server and client via ContentSdk.init).\n *\n * Returns an empty string when no stacking breakpoint is configured (or the\n * named breakpoint is unknown), in which case the grid never stacks.\n */\nexport const createGridStackingCss = ({\n gridClass,\n stackAtBreakpoint,\n reverseWhenStacked\n}: CreateGridStackingCssParams): string => {\n if (!stackAtBreakpoint) {\n return \"\";\n }\n\n const breakpoint = viewportManager\n .getViewport()\n .breakpoints.find(bp => bp.name === stackAtBreakpoint);\n\n if (!breakpoint) {\n return \"\";\n }\n\n const direction = reverseWhenStacked ? \"column-reverse\" : \"column\";\n\n // `!important` overrides the inline base (row) styles set on the elements.\n return [\n `@media (max-width: ${breakpoint.maxWidth}px) {`,\n ` .${gridClass} { flex-direction: ${direction} !important; }`,\n ` .${gridClass} > .wb-grid-col { flex: 0 0 100% !important; max-width: 100% !important; }`,\n `}`\n ].join(\"\\n\");\n};\n"],"names":["createGridClass","elementId","String","createGridStackingCss","gridClass","stackAtBreakpoint","reverseWhenStacked","breakpoint","viewportManager","bp","direction"],"mappings":";AAMO,MAAMA,kBAAkB,CAACC,YACrB,CAAC,QAAQ,EAAEC,OAAOD,WAAW,OAAO,CAAC,mBAAmB,MAAM;AAwBlE,MAAME,wBAAwB,CAAC,EAClCC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EACQ;IAC1B,IAAI,CAACD,mBACD,OAAO;IAGX,MAAME,aAAaC,gBAAAA,WACH,GACX,WAAW,CAAC,IAAI,CAACC,CAAAA,KAAMA,GAAG,IAAI,KAAKJ;IAExC,IAAI,CAACE,YACD,OAAO;IAGX,MAAMG,YAAYJ,qBAAqB,mBAAmB;IAG1D,OAAO;QACH,CAAC,mBAAmB,EAAEC,WAAW,QAAQ,CAAC,KAAK,CAAC;QAChD,CAAC,GAAG,EAAEH,UAAU,mBAAmB,EAAEM,UAAU,cAAc,CAAC;QAC9D,CAAC,GAAG,EAAEN,UAAU,0EAA0E,CAAC;QAC3F;KACH,CAAC,IAAI,CAAC;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/website-builder-react",
|
|
3
|
-
"version": "6.4.10-beta.
|
|
3
|
+
"version": "6.4.10-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
],
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@webiny/website-builder-sdk": "6.4.10-beta.
|
|
20
|
+
"@webiny/website-builder-sdk": "6.4.10-beta.4",
|
|
21
21
|
"deep-equal": "2.2.3",
|
|
22
22
|
"mobx": "6.16.1",
|
|
23
23
|
"mobx-react-lite": "4.1.1",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": "18.3.31",
|
|
29
|
-
"@webiny/build-tools": "6.4.10-beta.
|
|
29
|
+
"@webiny/build-tools": "6.4.10-beta.4",
|
|
30
30
|
"typescript": "6.0.3",
|
|
31
31
|
"vitest": "4.1.10"
|
|
32
32
|
},
|