homeflowjs 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/index.js

@@ -10,6 +10,7 @@ import PreviousPropertyLink from './previous-property-link/previous-property-lin
 import BackToSearchButton from './back-to-search-button/back-to-search-button.component';
 import StampDutyCalculator from './stamp-duty-calculator/stamp-duty-calculator.component';
 import RemoveSavedPropertyButton from './remove-saved-property-button/remove-saved-property-button.component';
+import PropertyResultsPagination from './property-results-pagination/property-results-pagination.component';
 
 export {
   SavePropertyButton,
@@ -24,4 +25,5 @@ export {
   BackToSearchButton,
   StampDutyCalculator,
   RemoveSavedPropertyButton,
+  PropertyResultsPagination,
 };

package/properties/properties-display/properties-display.component.jsx

@@ -140,7 +140,7 @@ const PropertiesDisplay = ({
             key={property.property_id}
             onClick={() => visitPropertyUpdate(property.property_id)}
             property={property}
-            data-page-marker={!addWrapper && index === 0 ? page[0].resultPage : null}
+            data-page-marker={!infiniteScroll && index === 0 ? page[0].resultPage : null}
             {...other}
           />
         );

package/properties/property-results-pagination/property-results-pagination-item.component.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChevronLeftIcon from '../../shared/chevron-left-icon';
+import ChevronRightIcon from '../../shared/chevron-right-icon';
+
+export default function PropertyResultsPaginationItem({
+  pageNumber,
+  currentPage,
+  next,
+  previous,
+  noChevrons,
+  noPrevOrNextText,
+  LeftChevron,
+  RightChevron,
+}) {
+  const activeClassName = (className) => (
+    currentPage === pageNumber ? `${className}--active` : ''
+  );
+  return (
+    <li className={`property-results-pagination__item ${activeClassName('property-results-pagination__item')}`}>
+      <a href={`${window.location.pathname}/page-${pageNumber}`} className={`property-results-pagination__link ${activeClassName('property-results-pagination__link')}`}>
+        {previous && (
+          <>
+            {!noChevrons && <LeftChevron />}
+            {!noPrevOrNextText && <span className="property-results-pagination__link-prev-text">Previous</span>}
+          </>
+        )}
+        {next && (
+          <>
+            {!noPrevOrNextText && <span className="property-results-pagination__link-next-text">Next</span>}
+            {!noChevrons && <RightChevron />}
+          </>
+        )}
+        {!previous && !next && pageNumber}
+      </a>
+    </li>
+  );
+}
+
+PropertyResultsPaginationItem.propTypes = {
+  pageNumber: PropTypes.number.isRequired,
+  currentPage: PropTypes.number,
+  LeftChevron: PropTypes.elementType,
+  RightChevron: PropTypes.elementType,
+  previous: PropTypes.bool,
+  next: PropTypes.bool,
+  noChevrons: PropTypes.bool,
+  noPrevOrNextText: PropTypes.bool,
+};
+
+PropertyResultsPaginationItem.defaultProps = {
+  currentPage: null,
+  previous: false,
+  next: false,
+  noChevrons: false,
+  noPrevOrNextText: false,
+  LeftChevron: () => (
+    <ChevronLeftIcon
+      stroke="#000000"
+      width="16"
+      height="16"
+      className="property-results-pagination__chevron property-results-pagination__chevron--left"
+    />
+  ),
+  RightChevron: () => (
+    <ChevronRightIcon
+      stroke="#000000"
+      width="16"
+      height="16"
+      className="property-results-pagination__chevron property-results-pagination__chevron--right"
+    />
+  ),
+};

package/properties/property-results-pagination/property-results-pagination.component.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import PropertyResultsPaginationItem from './property-results-pagination-item.component';
+
+import './property-results-pagination.styles.scss';
+
+export default function PropertyResultsPagination({
+  noChevrons,
+  noPrevOrNextText,
+  showIfPageCountIsOne,
+  paginationIncrements,
+  LeftChevron,
+  RightChevron,
+  ...otherProps
+}) {
+  const pagination = useSelector((state) => state.properties?.pagination);
+
+  if (!pagination) return null;
+
+  const {
+    current_page: currentPage,
+    has_next_page: hasNextPage,
+    has_prev_page: hasPrevPage,
+    total_count: totalCount,
+    page_count: pageCount,
+  } = pagination;
+
+  /**
+   * Generates an array of pagination increments (the middle numbers in the pagination)
+   * based on the current page and total page count.
+   * For example the 2,3,4 and 5 in < 1 ... 2 - 3 - 4 - 5 ... 29 >
+   *
+   * @example
+   * currentPage = 1;
+   * pageCount = 100;
+   * 'Should output: [2, 3, 4, 5]'
+   *
+   * currentPage = 1;
+   * pageCount = 5;
+   *'Should output: [2, 3, 4]'
+   *
+   * currentPage = 2;
+   * pageCount = 100;
+   *'Should output: [2, 3, 4, 5]'
+   *
+   * currentPage = 3;
+   * pageCount = 100;
+   *'Should output: [ 3, 4, 5, 6]'
+   * @returns {number[]} An array of page numbers for pagination.
+   */
+  const getPaginationIncrements = () => {
+    if (pageCount === 1) return [];
+
+    const pagination = [];
+    let startIncrement = currentPage;
+    let endIncrement = currentPage + paginationIncrements;
+    if (currentPage === 1) {
+      startIncrement++;
+      endIncrement++;
+    }
+    if (endIncrement >= pageCount) {
+      endIncrement = pageCount;
+    }
+
+    for (let i = startIncrement; i < endIncrement; i++) {
+      pagination.push(i);
+    }
+    return pagination;
+  };
+
+  return (
+    <div className="property-results-pagination" {...otherProps}>
+      <ul className="property-results-pagination__links">
+        {/* Previous page */}
+        {hasPrevPage && (!noChevrons && !noPrevOrNextText) && (
+          <PropertyResultsPaginationItem
+            previous
+            pageNumber={currentPage - 1}
+            currentPage={currentPage}
+            {...(LeftChevron && { LeftChevron: <LeftChevron /> })}
+          />
+        )}
+
+        {/* First page */}
+        {pageCount > 1 && (
+          <PropertyResultsPaginationItem pageNumber={1} currentPage={currentPage} />
+        )}
+
+        {/* Ellipsis */}
+        {totalCount > paginationIncrements && (
+          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
+            <span className="property-results-pagination__ellipsis">&hellip;</span>
+          </li>
+        )}
+
+        {/* Pagination increments */}
+        {getPaginationIncrements().map((pageNumber) => (
+          <PropertyResultsPaginationItem
+            key={pageNumber}
+            pageNumber={pageNumber}
+            currentPage={currentPage}
+          />
+        ))}
+
+        {/* Ellipsis */}
+        {totalCount > paginationIncrements && (
+          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
+            <span className="property-results-pagination__ellipsis">&hellip;</span>
+          </li>
+        )}
+
+        {/* Total page count */}
+        {showIfPageCountIsOne && pageCount !== 0 ? (
+          <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
+        ) : (
+          pageCount > 1 && (
+            <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
+          )
+        )}
+
+        {/* Previous page */}
+        {hasNextPage && (!noChevrons && !noPrevOrNextText) && (
+          <PropertyResultsPaginationItem
+            next
+            pageNumber={currentPage + 1}
+            {...(RightChevron && { RightChevron: <RightChevron /> })}
+          />
+        )}
+      </ul>
+    </div>
+  );
+}
+
+PropertyResultsPagination.propTypes = {
+  noChevrons: PropTypes.bool,
+  noPrevOrNextText: PropTypes.bool,
+  showIfPageCountIsOne: PropTypes.bool,
+  paginationIncrements: PropTypes.number,
+  LeftChevron: PropTypes.elementType,
+  RightChevron: PropTypes.elementType,
+};
+
+PropertyResultsPagination.defaultProps = {
+  noChevrons: false,
+  noPrevOrNextText: false,
+  showIfPageCountIsOne: true,
+  paginationIncrements: 4,
+  LeftChevron: null,
+  RightChevron: null,
+};

package/properties/property-results-pagination/property-results-pagination.styles.scss

@@ -0,0 +1,68 @@
+.property-results-pagination {
+  display: flex;
+  justify-content: center;
+
+  &__links {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 8px;
+  }
+
+  &__item {
+    &--ellipsis {
+      display: flex;
+      align-items: flex-end;
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    color: inherit;
+    padding: 4px 8px;
+    border-radius: 4px;
+    height: 100%;
+
+    &:hover {
+      background-color: rgba(118, 118, 118, .25);
+    }
+
+    &:focus {
+      background-color: #ffffff;
+      border: 1px solid #767676;
+    }
+    
+    &:visited, &:hover, &:active {
+      color: inherit;
+      text-decoration: none;
+    }
+    
+    @media only screen and (min-width: 425px) {
+      gap: 4px;
+      padding: 8px 12px;
+    }
+
+    &--active {
+      background-color: #ffffff;
+      border: 1px solid #767676;
+
+      &:hover {
+        background-color: #ffffff;
+      }
+    }
+  }
+
+  &__link-prev-text, &__link-next-text {
+    display: none;
+
+    @media only screen and (min-width: 768px) {
+      display: block;
+    }
+  }
+
+  &__ellipsis {
+    padding-bottom: 8px;
+  }
+}

package/shared/chevron-left-icon.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ChevronLeftIcon = ({ ...otherProps }) => (
+  <svg
+    className="hf-chevron-left-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="inherit"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    role="img"
+    {...otherProps}
+  >
+    <title>Chevron left icon</title>
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+);
+
+export default ChevronLeftIcon;

package/shared/chevron-right-icon.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ChevronRightIcon = ({ ...otherProps }) => (
+  <svg
+    className="hf-chevron-right-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="inherit"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    role="img"
+    {...otherProps}
+  >
+    <title>Chevron right icon</title>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+export default ChevronRightIcon;