@blaze-cms/react-page-builder 0.141.0-core-styles.10 → 0.141.0-core-styles.20

package/src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useGetImages } from '../../../hooks';
+import { getImageData } from '../../../utils';
+
+const useThumbnailImage = ({
+  imageId,
+  enableLightbox,
+  toggleModal,
+  handleSelectedImage,
+  priority,
+  selectedImageId,
+  handleOnClick
+}) => {
+  const imageRef = useRef(null);
+  const isSelected = selectedImageId === imageId;
+  const { data = {}, loading, error } = useGetImages(imageId);
+
+  useEffect(
+    () => {
+      if (imageRef.current && isSelected) {
+        imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    },
+    [isSelected]
+  );
+
+  const handleEnableLightbox = () => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(imageId);
+  };
+
+  const handleClick = () => {
+    handleOnClick(imageId);
+  };
+
+  const { url: imageUrl = '', data: imageData = {} } = data.getFile || {
+    getFile: { url: '', data: {} }
+  };
+  const { altText } = getImageData({}, imageData);
+
+  const className =
+    selectedImageId === imageId
+      ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'
+      : 'thumbnail-carousel-image';
+
+  return {
+    loading,
+    error,
+    className,
+    imageRef,
+    imageUrl,
+    altText,
+    priority,
+    handleClick,
+    handleEnableLightbox
+  };
+};
+
+useThumbnailImage.propTypes = {
+  imageId: PropTypes.string.isRequired,
+  selectedImageId: PropTypes.string.isRequired,
+  enableLightbox: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  handleSelectedImage: PropTypes.func.isRequired,
+  priority: PropTypes.bool.isRequired,
+  handleOnClick: PropTypes.func
+};
+
+useThumbnailImage.defaultProps = {
+  handleOnClick: () => {}
+};
+
+export default useThumbnailImage;

package/src/variants/ThumbnailCarousel/index.js

@@ -0,0 +1,10 @@
+import ThumbnailCarouselComponent from './ThumbnailCarousel';
+
+const ThumbnailCarousel = {
+  getSettings: componentSettings => ({
+    ...componentSettings
+  }),
+  VariantComponent: ThumbnailCarouselComponent
+};
+
+export default ThumbnailCarousel;

package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -0,0 +1,37 @@
+import { useState, useRef } from 'react';
+
+const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const thumbnailsListRef = useRef(null);
+  const selectedImageId = imageIds[selectedImageIndex];
+
+  const mainImageButtonClick = next => {
+    if (next) {
+      const isLast = imageIds.length - 1 === selectedImageIndex;
+      const newIndex = isLast ? 0 : selectedImageIndex + 1;
+      setSelectedImageIndex(newIndex);
+    } else {
+      const isFirst = selectedImageIndex === 0;
+      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
+      setSelectedImageIndex(newIndex);
+    }
+  };
+
+  const thumbnailImageClick = id => {
+    const newIndex = imageIds.indexOf(id);
+    if (newIndex !== -1) setSelectedImageIndex(newIndex);
+  };
+
+  return {
+    ...props,
+    imageIds,
+    selectedImageId,
+    selectedImageIndex,
+    thumbnailsListRef,
+    priorityLimit,
+    thumbnailImageClick,
+    mainImageButtonClick
+  };
+};
+
+export default useThumbnailCarousel;

package/src/variants/index.js

@@ -1 +1,5 @@
-export default {};
+import thumbnailCarousel from './ThumbnailCarousel';
+
+export default {
+  thumbnailCarousel
+};

package/tests/unit/src/components/List/helpers/build-query-booster.test.js

@@ -0,0 +1,33 @@
+import buildQueryBooster from '../../../../../../src/components/List/helpers/build-query-booster';
+
+describe('buildQueryBooster helper function', () => {
+  it('should return unmodified variables if no recencyBoostProperty is present in props', () => {
+    const noRecencyBoostProperty = buildQueryBooster({}, { rawQueryStringified: `{"test":"t"}` });
+    expect(noRecencyBoostProperty).toEqual({ rawQueryStringified: '{"test":"t"}' });
+  });
+
+  it('should return update rawQueryStringified with recency boosted props', () => {
+    const noRecencyBoostProperty = buildQueryBooster(
+      { recencyBoostProperty: ['date'] },
+      { rawQueryStringified: `{"test":"t"}` }
+    );
+    expect(noRecencyBoostProperty).toEqual({
+      rawQueryStringified:
+        '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"date":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}}],"boost_mode":"multiply"}}'
+    });
+  });
+
+  it('should return update rawQueryStringified with recency boosted props and existing functions if present', () => {
+    const noRecencyBoostProperty = buildQueryBooster(
+      { recencyBoostProperty: ['date'] },
+      {
+        rawQueryStringified:
+          '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"test":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}}],"boost_mode":"multiply"}}'
+      }
+    );
+    expect(noRecencyBoostProperty).toEqual({
+      rawQueryStringified:
+        '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"test":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}},{"gauss":{"date":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}}],"boost_mode":"multiply"}}'
+    });
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailCarousel.test.js

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import ThumbnailCarousel from '../../../../../src/variants/ThumbnailCarousel/ThumbnailCarousel';
+import IMAGE_MOCKS from './mocks';
+
+const mockedProps = {
+  imageIds: ['1', '2', '3'],
+  priorityLimit: 0
+};
+
+describe('ThumbnailCarousel component', () => {
+  it('renders ThumbnailCarousel without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailCarousel {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByTestId('thumbnail-image')[0]).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('thumbnail-carousel')).toBeInTheDocument();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailImage.test.js

@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import ThumbnailImage from '../../../../../src/variants/ThumbnailCarousel/ThumbnailImage';
+import IMAGE_MOCKS from './mocks';
+
+describe('ThumbnailImage component', () => {
+  const mockedProps = {
+    imageId: '1',
+    enableLightbox: false,
+    toggleModal: () => {},
+    handleSelectedImage: () => {},
+    priority: 0,
+    selectedImageId: '1',
+    handleOnClick: () => {}
+  };
+
+  it('renders ThumbnailImage without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('thumbnail-image')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render error message if query fails', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} imageId="6" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Oops something went wrong')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailCarousel component renders ThumbnailCarousel without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel"
+    data-testid="thumbnail-carousel"
+  >
+    <div
+      class="thumbnail-carousel__main_image_container"
+    >
+      <div
+        class="thumbnail-carousel__main_image_container__button"
+        id="previous-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--left"
+        />
+      </div>
+      <div
+        class="thumbnail-carousel__main_image_container__main-image"
+        data-testid="thumbnail-main-image"
+      >
+        <div
+          class="thumbnail-carousel-image"
+          data-testid="thumbnail-image"
+          role="button"
+        >
+          <span>
+            <img
+              alt=""
+              role="button"
+              src="image1.jpg"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="thumbnail-carousel__main_image_container__button next"
+        id="next-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--right"
+        />
+      </div>
+    </div>
+    <div
+      class="thumbnail-carousel__list"
+    >
+      <div
+        class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailImage.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailImage component renders ThumbnailImage without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+    data-testid="thumbnail-image"
+    role="button"
+  >
+    <span />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ThumbnailImage component should render error message if query fails 1`] = `
+<DocumentFragment>
+  Oops something went wrong
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/mocks.js

@@ -0,0 +1,64 @@
+import { getFileById } from '../../../../../src/application/query';
+
+const IMAGE_MOCKS = [
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '1' }
+    },
+    result: {
+      data: {
+        getFile: { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '2' }
+    },
+    result: {
+      data: {
+        getFile: { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '3' }
+    },
+    result: {
+      data: {
+        getFile: { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '6' }
+    },
+    error: {
+      message: 'Oops something went wrong'
+    }
+  }
+  //   {
+  //     request: {
+  //       query: getFiles,
+  //       variables: { where: { id: { _in: ['1', '2', '3', '4'] } } }
+  //     },
+  //     result: {
+  //       data: {
+  //         getImages: [
+  //           { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} },
+  //           { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} },
+  //           { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} },
+  //           { id: '4', url: 'image4.jpg', caption: 'Caption 4', data: {} }
+  //         ]
+  //       }
+  //     }
+  //   }
+];
+
+export default IMAGE_MOCKS;