cmspageblocks 1.0.7 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.7",
+  "version": "1.0.12",
   "description": "",
   "main": "build/index.js",
   "repository": {
@@ -24,17 +24,16 @@
   },
   "homepage": "https://gitlab.com/bukazu-cms/cmspageblocks#readme",
   "peerDependencies": {
+    "bukazu-portal-react": "^2.0.7",
     "react": "^16.14.0 || ^17.0.2",
-    "react-dom": "^16.14.0 || ^17.0.2"
+    "react-dom": "^16.14.0 || ^17.0.2",
+    "styled-components": "^5.3.1"
   },
   "dependencies": {
-    "bukazu-portal-react": "^2.0.7",
     "classnames": "^2.3.1",
     "formik": "^2.2.9",
-    "leaflet": "^1.7.1",
-    "react-leaflet": "^3.2.2",
-    "react-responsive-carousel": "^3.2.21",
-    "styled-components": "^5.3.1"
+    "google-map-react": "^2.1.10",
+    "react-responsive-carousel": "^3.2.21"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

package/src/Main.css.js

@@ -5,11 +5,9 @@ export const BlockContainer = styled.div`
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
-/* padding: 0 0 80px; */
 ${MEDIA.TABLET`
   margin: 80px 0 0;
 `};
-/* justify-content: space-between; */
 .ql-align-center {
   text-align: center;
 }
@@ -154,4 +152,38 @@ a {
   max-width: 100%;
   overflow: hidden;
 }
+.page_row {
+    max-width: 1240px;
+    width: 100%;
+    margin: 0px auto;
+    padding: 16px;
+    width: 100%;
+    flex-direction: column;
+    @media (min-width: 676px) {
+      // flex-direction: row;
+    }
+    &.full-width {
+      max-width: 100%;
+      padding: 0;
+    }
+
+    &.container-width {
+      margin: 0 auto;
+      @media (min-width: 676px) {
+        max-width: 640px;
+      }
+
+      @media (min-width: 868px) {
+        max-width: 820px;
+      }
+
+      @media (min-width: 992px) {
+        max-width: 960px;
+      }
+
+      @media (min-width: 1290px) {
+        max-width: 1260px;
+      }
+    }
+  }
 `;

package/src/components/Block.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Text, Image, ImageSlider, Button, Map, SearchBar} from './BlockTypes';
+import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal} from './BlockTypes';
 import { BlockContainer } from '../Main.css'
 
 function Block({pageBlock}) {
-  const { options, content } = pageBlock;
+  const { options } = pageBlock;
 
   switch(options.type) {
     case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
@@ -14,11 +14,17 @@ function Block({pageBlock}) {
     case 'text': return <Wrapper options={options} key={pageBlock.id}><Text options={options} /></Wrapper>
     case 'image': return <Wrapper options={options}><Image options={options} /></Wrapper>
     case 'image_slider': return <Wrapper options={options} key={pageBlock.id}><ImageSlider options={options} /></Wrapper>
-    default: return <Wrapper options={options}>{options.type}</Wrapper>
+    case 'imageGallery': return <Wrapper options={options} key={pageBlock.id}><ImageGallery options={options} /></Wrapper>
+    case 'bukazu_portal': return <Wrapper options={options} key={pageBlock.id}><Portal options={options} /></Wrapper>
+    default: return <Wrapper options={options} key={pageBlock.id}>{options.type}</Wrapper>
   }
 
 }
 
+Block.propTypes = {
+  pageBlock: PropTypes.object.isRequired
+}
+
 function Wrapper({ children, options }) {
   let classes = '';
   Object.entries(options.classes).forEach(element => {

package/src/components/BlockTypes/Image.js

@@ -3,6 +3,7 @@ import React from 'react'
 export default function({options}) {
   return (
     <img
+          style={{ objectFit: 'contain' }}
           src={
             options.content[0]
               ? 'https://cdn.burobork.nl/' + options.content[0].reference

package/src/components/BlockTypes/ImageGallery.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Carousel } from 'react-responsive-carousel'
+import { SliderContainer } from './ImageSlide.css'
+
+export default function ImageGallery({options}) {
+  console.log({options })
+  return (
+    <SliderContainer>
+    <Carousel showThumbs={true} swipeable={true} emulateTouch dynamicHeight={true}>
+      {options.content.map(image => {
+       return ( <div key={image.reference}>
+        <img
+              src={
+                'https://cdn.burobork.nl/' + image.reference
+
+              }
+              alt={image.title}
+              />
+</div>)
+      })}
+          </Carousel>
+          </SliderContainer>
+  )
+}

package/src/components/BlockTypes/ImageSlide.css.js

@@ -5,5 +5,17 @@ export const SliderContainer = styled.div`
   ul li {
     padding: 0;
   }
+  div img {
+    object-fit: cover;
+  }
+  .carousel .thumbs-wrapper {
+    margin: 16px;
+  }
+  max-width: 100%;
+  width: 100%;
+  .carousel .thumbs {
+    padding: 0;
+  }
+
+`;
 
-`;

package/src/components/BlockTypes/ImageSlider.js

@@ -5,10 +5,10 @@ import { SliderContainer } from './ImageSlide.css'
 export default function ImageSlider({options}) {
   return (
     <SliderContainer>
-    <Carousel showThumbs={false} swipeable={true}>
+    <Carousel showThumbs={false} swipeable={true} showStatus={false} dynamicHeight={true} width="100%">
       {options.content.map(slide => {
       if (!slide.active) return;
-       return ( <div key={slide.image[0].reference}>
+       return ( <div key={slide.image[0].reference} style={{ height: 600 }}>
         <img
               src={
                 slide
@@ -16,6 +16,7 @@ export default function ImageSlider({options}) {
                 : null
               }
               alt={slide.title}
+              style={{ height: 600 }}
               />
 </div>)
       })}

package/src/components/BlockTypes/Map.js

@@ -1,25 +1,32 @@
-import React from "react";
-// import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+import React from 'react';
+import GoogleMapReact from 'google-map-react';
 
-function HouseMap({ latitude, longitude }) {
+const isClient = typeof window !== 'undefined';
+
+export default function GoogleMap({ options }) {
+  const { location } = options
+  const lat = parseFloat(location.lat);
+  const lng = parseFloat(location.lng);
   return (
-    <></>
-    // <MapContainer
-    //   center={[latitude, longitude]}
-    //   zoom={10}
-    //   scrollWheelZoom={false}
-    // >
-    //   <TileLayer
-    //     attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-    //     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    //   />
-    //   <Marker position={[latitude, longitude]}>
-    //     {/* <Popup>
-    //   A pretty CSS3 popup. <br /> Easily customizable.
-    // </Popup> */}
-    //   </Marker>
-    // </MapContainer>
+    <div style={{ height: '500px', width: '100%' }}>
+        { isClient && (
+          <GoogleMapReact
+            bootstrapURLKeys={{ key: "AIzaSyDnzyZ8cUsl2pcSJWUXqgj3nRg_EO1lY6Q" }}
+            defaultCenter={[lat, lng]}
+            defaultZoom={14}
+          >
+            <Marker
+              lat={lat}
+              lng={lng}
+            />
+          </GoogleMapReact>
+        )}
+      </div>
   );
 }
 
-export default HouseMap;
+const Marker = () => (
+	<>
+		Marke
+	</>
+);

package/src/components/BlockTypes/Portal.js

@@ -1,7 +1,29 @@
 import React from 'react'
+import BukazuPortal from 'bukazu-portal-react';
 
-export default function Portal({options}) {
-  return (
-    <div>Portal</div>
-  )
+// import 'bukazu-portal-react/build/index.css';
+
+export default function Portal({ options }) {
+  if (typeof window !== `undefined`) {
+    return  (
+      <>
+        {options.portal_type === 'calendar' && (
+          <div id="bukazu-app">
+            <BukazuPortal
+              portalCode={options.portal_code}
+              objectCode={options.object_code}
+              locale={options.language}
+            />
+          </div>
+        )}
+        {options.portal_type === 'search' && (
+          <div id="bukazu-app">
+            <BukazuPortal portalCode={options.portal_code} locale={options.language} />
+          </div>
+        )}
+      </>
+    );
+  } else {
+    return <div />;
+  }
 }

package/src/components/BlockTypes/index.js

@@ -2,6 +2,7 @@ import Button from './Button'
 // import Form from './Form'
 import Iframe from './Iframe'
 import Image from './Image'
+import ImageGallery from './ImageGallery'
 import ImageSlider from './ImageSlider'
 import Map from './Map'
 import Portal from './Portal'
@@ -11,6 +12,7 @@ import Text from './Text'
 export {
   Button,
   Image,
+  ImageGallery,
   ImageSlider,
   Iframe,
   Map,

package/src/components/Row.js

@@ -1,11 +1,25 @@
 import React from 'react'
 import Block from './Block'
+import classNames from 'classnames';
 
 export default function Row({ content }) {
+  const { options } = content;
+
+  let classes = 'page_row';
+  if (options.classes) {
+
+    Object.entries(options.classes).forEach(element => {
+      classes += ' ';
+      classes += element[1];
+    });
+
+    classes = classNames(classes, options.classes.width, options.className);
+  }
+
   return (
-    <div className="row" style={content.options.style}>
-      {content.page_blocks.map(block => {
-            return <Block pageBlock={block} key={block.id} />
+    <div className={classes} style={content.options.style}>
+      {content.page_blocks.map((block,index) => {
+            return <Block pageBlock={block} key={index} />
           })}
     </div>
   )