lucid-ui/lib/components/InfiniteSlidePanel/InfiniteSlidePanel.js

A UI component library from AppNexus.

import _map from "lodash/map";
import _keys from "lodash/keys";
import _take from "lodash/take";
import _takeRight from "lodash/takeRight";
import _times from "lodash/times";
import _isFunction from "lodash/isFunction";
import _noop from "lodash/noop";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst, omitProps } from '../../util/component-types';
import SlidePanel from '../SlidePanel/SlidePanel';
var cx = lucidClassNames.bind('&-InfiniteSlidePanel');
var func = PropTypes.func,
    node = PropTypes.node,
    number = PropTypes.number,
    oneOfType = PropTypes.oneOfType,
    string = PropTypes.string;

var modulo = function modulo(n, a) {
  return a - n * Math.floor(a / n);
};

var InfiniteSlidePanelSlide = function InfiniteSlidePanelSlide(_props) {
  return null;
};

InfiniteSlidePanelSlide.displayName = 'InfiniteSlidePanel.Slide';
InfiniteSlidePanelSlide.propName = 'Slide';
InfiniteSlidePanelSlide.peek = {
  description: "The slide."
};
var defaultProps = {
  offset: 0,
  slidesToShow: 1,
  onSwipe: _noop,
  totalSlides: 8,
  isAnimated: SlidePanel.defaultProps.isAnimated,
  isLooped: SlidePanel.defaultProps.isLooped
};
export var InfiniteSlidePanel = function InfiniteSlidePanel(props) {
  var children = props.children,
      className = props.className,
      offset = props.offset,
      slidesToShow = props.slidesToShow,
      onSwipe = props.onSwipe,
      totalSlides = props.totalSlides,
      passThroughs = _objectWithoutProperties(props, ["children", "className", "offset", "slidesToShow", "onSwipe", "totalSlides"]);

  var slide = getFirst(props, InfiniteSlidePanel.Slide, /*#__PURE__*/React.createElement(InfiniteSlidePanelSlide, null, children));
  var slideChildRenderFunction = slide.props.children;

  if (!_isFunction(slideChildRenderFunction)) {
    throw new Error('InfiniteSlidePanel children must be a single function `(slideOffset) => { /* returns React.PropTypes.node */ }`');
  }

  var halfSlides = Math.floor(totalSlides / 2);
  var circularOffset = modulo(totalSlides, offset);

  var forwardSlideOffsets = _times(totalSlides - halfSlides, function (n) {
    return offset + n;
  });

  var backwardSlideOffsets = _times(halfSlides, function (n) {
    return offset + n - halfSlides;
  });

  var transposedSlideOffsets = forwardSlideOffsets.concat(backwardSlideOffsets);

  var slideOffsetArray = _takeRight(transposedSlideOffsets, circularOffset).concat(_take(transposedSlideOffsets, totalSlides - circularOffset));

  return /*#__PURE__*/React.createElement(SlidePanel, _extends({}, omitProps(passThroughs, undefined, _keys(InfiniteSlidePanel.propTypes), false), {
    className: cx('&', className),
    offset: offset,
    slidesToShow: slidesToShow,
    onSwipe: onSwipe,
    isLooped: true
  }), _map(slideOffsetArray, function (slideOffset, elementOffset) {
    return /*#__PURE__*/React.createElement(SlidePanel.Slide, _extends({
      key: elementOffset
    }, slide.props, {
      className: cx({
        '&-Slide-in-frame': slideOffset - offset < slidesToShow && slideOffset - offset >= 0
      }, slide.props.className)
    }), slideChildRenderFunction(slideOffset));
  }));
};
InfiniteSlidePanel.defaultProps = defaultProps;
InfiniteSlidePanel.Slide = InfiniteSlidePanelSlide;
InfiniteSlidePanel._isPrivate = true;
InfiniteSlidePanel.displayName = 'InfiniteSlidePanel';
InfiniteSlidePanel.peek = {
  description: "\n\t\tA container for rendering an infinite set of horizontal slides.\n\t\tTranslation between slides is controlled by passing in a new\n\t\t`offset`.  Can hook into touch events to update the `offset`. This\n\t\tcomponent is made from SlidePanel, so it accepts the same props.\n\t",
  categories: ['helpers'],
  madeFrom: ['SlidePanel']
};
InfiniteSlidePanel.propTypes = {
  className: string,
  children: oneOfType([node, func]),
  offset: number,
  slidesToShow: number,
  onSwipe: func,
  totalSlides: number,
  Slide: node
};
export default InfiniteSlidePanel;