Replicating InfinityCarousel and fixing outdated bugfixes, css changes

src/components/Carousel/InfiniteCarousel.css

@@ -0,0 +1,91 @@
+.InfiniteCarousel {
+  position: relative;
+}
+
+.InfiniteCarouselFrame {
+  width: 100%;
+  overflow: hidden;
+}
+
+.InfiniteCarouselScrollTrack {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  overflow: -moz-scrollbars-none;
+  -webkit-box-sizing: border-box;
+}
+
+.InfiniteCarouselScrollTrack::-webkit-scrollbar {
+  display: none;
+}
+
+.InfiniteCarouselSlide img {
+  width: 100%;
+}
+
+.InfiniteCarouselDots {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  padding: 0;
+  transform: translateX(-50%);
+}
+
+.InfiniteCarouselDot {
+  display: inline-block;
+  list-style: none;
+  margin: 0 5px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.InfiniteCarouselDotIcon {
+  display: block;
+  background-color: #e5e5e5;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.InfiniteCarouselDotActiveIcon {
+  background-color: #48799a;
+}
+
+.InfiniteCarouselArrow {
+  display: block;
+  background: none;
+  border: none;
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  outline: none;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.InfiniteCarouselArrowPrev {
+  left: 15px;
+  right: auto;
+}
+
+.InfiniteCarouselArrowNext {
+  left: auto;
+  right: 15px;
+}
+
+.InfiniteCarouselArrowIcon {
+  display: inline-block;
+  padding: 10px;
+  border: solid #e5e5e5;
+  border-width: 0 5px 5px 0;
+}
+
+.InfiniteCarouselArrowNextIcon {
+  transform: rotate(-45deg);
+}
+
+.InfiniteCarouselArrowPrevIcon {
+  transform: rotate(135deg);
+}

src/components/Carousel/InfiniteCarouselArrow.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function InfiniteCarouselArrow({ next, onClick, styles }) {
+  const arrowClassName = styles.InfiniteCarouselArrow
+  let typeClassName
+  if (next) {
+    typeClassName = styles.InfiniteCarouselArrowNext
+  } else {
+    typeClassName = styles.InfiniteCarouselArrowPrev
+  }
+
+  const iconClassName = styles.InfiniteCarouselArrowIcon
+  let iconTypeClassName
+  if (next) {
+    iconTypeClassName = styles.InfiniteCarouselArrowNextIcon
+  } else {
+    iconTypeClassName = styles.InfiniteCarouselArrowPrevIcon
+  }
+
+  const className = `${arrowClassName} ${typeClassName}`
+  const classNameIcon = `${iconClassName} ${iconTypeClassName}`
+
+  return (
+    <button className={className} onClick={onClick}>
+      <i className={classNameIcon} />
+    </button>
+  )
+}
+
+InfiniteCarouselArrow.propTypes = {
+  next: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+}
+
+InfiniteCarouselArrow.defaultProps = {
+  next: true,
+}
+
+export default InfiniteCarouselArrow

src/components/Carousel/InfiniteCarouselDots.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function InfiniteCarouselDots({ numberOfDots, activePage, onClick, styles }) {
+  const dots = []
+  const className = styles.InfiniteCarouselDots
+  const dotClassName = styles.InfiniteCarouselDot
+  const dotIconClassName = styles.InfiniteCarouselDotIcon
+  const activeClass = styles.InfiniteCarouselDotActiveIcon
+  let classNameIcon
+
+  for (let i = 0; i < numberOfDots; i += 1) {
+    classNameIcon = `${dotIconClassName} ${i === activePage ? activeClass : ''}`
+    dots.push(
+      <button
+        className={dotClassName}
+        data-index={i}
+        key={i + 1}
+        onClick={onClick}
+      >
+        <i className={classNameIcon} />
+      </button>
+    ) // eslint-disable-line react/jsx-closing-tag-location
+  }
+
+  return <ul className={className}>{dots}</ul>
+}
+
+InfiniteCarouselDots.propTypes = {
+  numberOfDots: PropTypes.number.isRequired,
+  activePage: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+}
+
+export default InfiniteCarouselDots

src/components/Carousel/helpers.js

@@ -0,0 +1,44 @@
+export function getElementWidth(elem) {
+  return elem.getBoundingClientRect().width || elem.offsetWidth || 0
+}
+
+export function getElementHeight(elem) {
+  return elem.getBoundingClientRect().height || elem.offsetHeight || 0
+}
+
+export function getSwipeDirection(x1, x2, y1, y2) {
+  const xDist = x1 - x2
+  const yDist = y1 - y2
+
+  let swipeAngle = Math.round((Math.atan2(yDist, xDist) * 180) / Math.PI)
+
+  if (swipeAngle < 0) {
+    swipeAngle = 360 - Math.abs(swipeAngle)
+  }
+  if (swipeAngle <= 45 && swipeAngle >= 0) {
+    return 1
+  }
+  if (swipeAngle <= 360 && swipeAngle >= 315) {
+    return 1
+  }
+  if (swipeAngle >= 135 && swipeAngle <= 225) {
+    return -1
+  }
+  return 0
+}
+
+export function isTouchDevice() {
+  return 'ontouchstart' in document.documentElement
+}
+
+export function sortNumber(a, b) {
+  return a - b
+}
+
+export function getScreenWidth() {
+  return (
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth
+  )
+}