@cntrl-site/sdk-nextjs 0.1.8 → 0.1.9

package/lib/components/Section.js

@@ -3,10 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-const Section = ({ section, layouts, children }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+const Section = ({ section, layouts, children }) => {
+    const getSectionVisibilityStyles = () => {
+        return layouts
+            .sort((a, b) => a.startsWith - b.startsWith)
+            .reduce((acc, layout) => {
+            const isHidden = section.hidden[layout.id];
+            return `
+          ${acc}
+          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+        }, '');
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${height * 100}vw;
+            position: relative;
           }`))}
+      ${getSectionVisibilityStyles()}
     ` })] }));
+};
 exports.Section = Section;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",

package/src/components/Section.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutStyles, TLayout, TArticleSection } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout } from '@cntrl-site/sdk';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -9,19 +9,38 @@ interface Props {
   children: SectionChild[];
 }
 
-export const Section: FC<Props> = ({ section, layouts, children }) => (
-  <>
-    <div className={`section-${section.id}`}>
-      {children}
-    </div>
-    <style jsx>{`
+export const Section: FC<Props> = ({ section, layouts, children }) => {
+  const getSectionVisibilityStyles = () => {
+    return layouts
+      .sort((a, b) => a.startsWith - b.startsWith)
+      .reduce((acc, layout) => {
+        const isHidden = section.hidden[layout.id];
+        return `
+          ${acc}
+          ${getLayoutMediaQuery(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none': 'block'};
+            }
+          }`;
+      }, '');
+  };
+
+ return (
+    <>
+      <div className={`section-${section.id}`}>
+        {children}
+      </div>
+      <style jsx>{`
       ${
-      getLayoutStyles(layouts, [section.height], ([height]) => (`
+        getLayoutStyles(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${height * 100}vw;
+            position: relative;
           }`
-      ))
-    }
+        ))
+      }
+      ${getSectionVisibilityStyles()}
     `}</style>
-  </>
-);
+    </>
+  );
+};