cmspageblocks 1.0.39 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.39",
+  "version": "1.0.42",
   "description": "",
   "main": "build/index.js",
   "repository": {
@@ -35,7 +35,9 @@
     "formik": "^2.2.9",
     "react-image-gallery": "^1.2.7",
     "react-photo-gallery": "^8.0.0",
-    "react-responsive-carousel": "^3.2.21"
+    "react-responsive-carousel": "^3.2.21",
+    "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

package/src/components/Block.js

@@ -1,7 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal, Embed, Form, AssortedHouses} from './BlockTypes';
+import {
+  Text,
+  Image,
+  ImageSlider,
+  Button,
+  Map,
+  SearchBar,
+  ImageGallery,
+  Portal,
+  Embed,
+  Form,
+  AssortedHouses,
+  CustomSlider,
+} from './BlockTypes';
 import { BlockSelf } from '../Main.css'
 
 function Block({pageBlock, houses, locale }) {
@@ -15,6 +28,7 @@ function Block({pageBlock, houses, locale }) {
     case 'assorted_houses': return <Wrapper options={options} key={pageBlock.id}><AssortedHouses options={options} houses={houses} locale={locale} /></Wrapper>
     case 'bukazu_portal': return <Wrapper options={options} key={pageBlock.id}><Portal options={options} /></Wrapper>
     case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
+    case 'custom_slider': return <Wrapper options={options} key={pageBlock.id}><CustomSlider options={options} /></Wrapper>
     case 'embed': return <Wrapper options={options} key={pageBlock.id}><Embed options={options} /></Wrapper>
     case 'form': return <Wrapper options={options} key={pageBlock.id}><Form options={options} /></Wrapper>
     case 'image': return <Wrapper options={options}><Image options={options} /></Wrapper>

package/src/components/BlockTypes/CustomSlider.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Carousel } from 'react-responsive-carousel';
+import { SliderContainer } from './ImageGallery/ImageSlide.css';
+
+export default function CustomSlider({ options }) {
+  const { content } = options;
+  return (
+    <SliderContainer>
+      <Carousel
+        showThumbs={false}
+        swipeable
+        showStatus
+        dynamicHeight={false}
+        showArrows
+        width="100%"
+        infiniteLoop
+        centerMode
+        showIndicators={content.length > 1 ? true : false}
+        centerSlidePercentage={70}
+      >
+        {options.content.map((slide, index) => {
+          return (
+            <div
+              key={index}
+              dangerouslySetInnerHTML={{ __html: slide.content }}
+            ></div>
+          );
+        })}
+      </Carousel>
+    </SliderContainer>
+  );
+}

package/src/components/BlockTypes/index.js

@@ -1,5 +1,6 @@
 import AssortedHouses from './AssortedHouses'
 import Button from './Button'
+import CustomSlider from './CustomSlider';
 import Embed from './Embed'
 import Form from './Form'
 import Iframe from './Iframe'
@@ -14,6 +15,7 @@ import Text from './Text'
 export {
   AssortedHouses,
   Button,
+  CustomSlider,
   Embed,
   Form,
   Image,