cmspageblocks 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "main": "build/index.js",
   "repository": {
@@ -31,9 +31,9 @@
     "bukazu-portal-react": "^2.0.7",
     "classnames": "^2.3.1",
     "formik": "^2.2.9",
-    "leaflet": "^1.7.1",
-    "react-leaflet": "^3.2.2",
+    "react-google-maps": "^9.4.5",
     "react-responsive-carousel": "^3.2.21",
+    "recompose": "^0.30.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {

package/src/Main.css.js

@@ -9,7 +9,6 @@ flex-wrap: wrap;
 ${MEDIA.TABLET`
   margin: 80px 0 0;
 `};
-/* justify-content: space-between; */
 .ql-align-center {
   text-align: center;
 }
@@ -154,4 +153,39 @@ a {
   max-width: 100%;
   overflow: hidden;
 }
+.page_row,
+  .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,16 @@ export const SliderContainer = styled.div`
   ul li {
     padding: 0;
   }
+  div img {
+    object-fit: cover;
+  }
+  .carousel .thumbs-wrapper {
+    margin: 16px;
+  }
+  max-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} 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,50 @@
-import React from "react";
-// import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+import React from 'react';
+import { compose, withProps } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from 'react-google-maps';
 
-function HouseMap({ latitude, longitude }) {
+const HouseMap = compose(
+  withProps({
+    /**
+     * Note: create and replace your own key in the Google console.
+     * https://console.developers.google.com/apis/dashboard
+     * The key "AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q" can be ONLY used in this sandbox (no forked).
+     */
+    googleMapURL:
+      'https://maps.googleapis.com/maps/api/js?key=AIzaSyDnzyZ8cUsl2pcSJWUXqgj3nRg_EO1lY6Q&v=3.exp&libraries=geometry,drawing,places',
+    loadingElement: <div style={{ height: '100%' }} />,
+    containerElement: <div style={{ height: '400px', width: '100%' }} />,
+    mapElement: <div style={{ height: '100%' }} />,
+  }),
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    defaultZoom={10}
+    defaultCenter={{ lat: props.latitude, lng: props.longitude }}
+  >
+    {props.isMarkerShown && (
+      <Marker position={{ lat: props.latitude, lng: props.longitude }} />
+    )}
+  </GoogleMap>
+));
+
+function Map({options}) {
+  const { location} = options
   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>
-  );
+  <HouseMap
+    latitude={Number(location.lat)}
+    longitude={Number(location.lng)}
+    isMarkerShown={true}
+  >
+
+  </HouseMap>
+
+  )
 }
 
-export default HouseMap;
+export default Map;

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,26 @@
 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) => {
+            console.log({ block });
+            return <Block pageBlock={block} key={index} />
           })}
     </div>
   )