react-film/lib/esm/Flipper.js

React component for showing carousel just like a film strip

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { useCallback, useRef } from 'react';
import useDir from './hooks/useDir';
import useScrollBarPercentage from './hooks/useScrollBarPercentage';
import useScrollOneLeft from './hooks/useScrollOneLeft';
import useScrollOneRight from './hooks/useScrollOneRight';

var Flipper = function Flipper(_ref) {
  var ariaLabel = _ref['aria-label'],
      blurFocusOnClick = _ref.blurFocusOnClick,
      children = _ref.children,
      mode = _ref.mode;

  var _useDir = useDir(),
      _useDir2 = _slicedToArray(_useDir, 1),
      dir = _useDir2[0];

  var _useScrollBarPercenta = useScrollBarPercentage(),
      _useScrollBarPercenta2 = _slicedToArray(_useScrollBarPercenta, 1),
      scrollBarPercentage = _useScrollBarPercenta2[0];

  var buttonRef = useRef();
  var left = mode === 'left';
  var scrollOneLeft = useScrollOneLeft();
  var scrollOneRight = useScrollOneRight();
  var handleClick = useCallback(function () {
    left ? scrollOneLeft() : scrollOneRight();
    blurFocusOnClick && buttonRef.current && buttonRef.current.blur();
  }, [blurFocusOnClick, buttonRef, left, scrollOneLeft, scrollOneRight]);
  var handleKeyDown = useCallback(function (event) {
    var key = event.key;

    if (key === 'Enter' || key === ' ') {
      event.preventDefault();
      left ? scrollOneLeft() : scrollOneRight();
    }
  }, [left, scrollOneLeft, scrollOneRight]);
  var hide;

  if (dir === 'rtl') {
    if (left) {
      hide = scrollBarPercentage === '100%' || scrollBarPercentage === '-100%';
    } else {
      hide = scrollBarPercentage === '0%';
    }
  } else {
    if (left) {
      hide = scrollBarPercentage === '0%';
    } else {
      hide = scrollBarPercentage === '100%';
    }
  }

  return /*#__PURE__*/React.createElement("button", {
    "aria-label": ariaLabel || (left ? 'left' : 'right'),
    className: classNames('react-film__flipper', 'react-film__main__overlay', {
      'react-film__flipper--left': left,
      'react-film__flipper--right': !left
    }),
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    ref: buttonRef,
    type: "button"
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('react-film__flipper__slider', 'react-film__main__slider', {
      'react-film__main__slider--hide': hide,
      'react-film__main__slider--left': left,
      'react-film__main__slider--right': !left
    })
  }, /*#__PURE__*/React.createElement("div", {
    className: "react-film__flipper__body"
  }, children)));
};

Flipper.defaultProps = {
  'aria-label': undefined,
  blurFocusOnClick: false,
  children: undefined,
  mode: 'left'
};
Flipper.propTypes = {
  'aria-label': PropTypes.string,
  blurFocusOnClick: PropTypes.bool,
  children: PropTypes.any,
  mode: PropTypes.oneOf(['left', 'right'])
};
export default Flipper;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9GbGlwcGVyLmpzIl0sIm5hbWVzIjpbImNsYXNzTmFtZXMiLCJQcm9wVHlwZXMiLCJSZWFjdCIsInVzZUNhbGxiYWNrIiwidXNlUmVmIiwidXNlRGlyIiwidXNlU2Nyb2xsQmFyUGVyY2VudGFnZSIsInVzZVNjcm9sbE9uZUxlZnQiLCJ1c2VTY3JvbGxPbmVSaWdodCIsIkZsaXBwZXIiLCJhcmlhTGFiZWwiLCJibHVyRm9jdXNPbkNsaWNrIiwiY2hpbGRyZW4iLCJtb2RlIiwiZGlyIiwic2Nyb2xsQmFyUGVyY2VudGFnZSIsImJ1dHRvblJlZiIsImxlZnQiLCJzY3JvbGxPbmVMZWZ0Iiwic2Nyb2xsT25lUmlnaHQiLCJoYW5kbGVDbGljayIsImN1cnJlbnQiLCJibHVyIiwiaGFuZGxlS2V5RG93biIsImV2ZW50Iiwia2V5IiwicHJldmVudERlZmF1bHQiLCJoaWRlIiwiZGVmYXVsdFByb3BzIiwidW5kZWZpbmVkIiwicHJvcFR5cGVzIiwic3RyaW5nIiwiYm9vbCIsImFueSIsIm9uZU9mIl0sIm1hcHBpbmdzIjoiO0FBQUEsT0FBT0EsVUFBUCxNQUF1QixZQUF2QjtBQUNBLE9BQU9DLFNBQVAsTUFBc0IsWUFBdEI7QUFDQSxPQUFPQyxLQUFQLElBQWdCQyxXQUFoQixFQUE2QkMsTUFBN0IsUUFBMkMsT0FBM0M7QUFFQSxPQUFPQyxNQUFQLE1BQW1CLGdCQUFuQjtBQUNBLE9BQU9DLHNCQUFQLE1BQW1DLGdDQUFuQztBQUNBLE9BQU9DLGdCQUFQLE1BQTZCLDBCQUE3QjtBQUNBLE9BQU9DLGlCQUFQLE1BQThCLDJCQUE5Qjs7QUFFQSxJQUFNQyxPQUFPLEdBQUcsU0FBVkEsT0FBVSxPQUFtRTtBQUFBLE1BQWxEQyxTQUFrRCxRQUFoRSxZQUFnRTtBQUFBLE1BQXZDQyxnQkFBdUMsUUFBdkNBLGdCQUF1QztBQUFBLE1BQXJCQyxRQUFxQixRQUFyQkEsUUFBcUI7QUFBQSxNQUFYQyxJQUFXLFFBQVhBLElBQVc7O0FBQ2pGLGdCQUFjUixNQUFN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QixnQkFBYzdCLFNBQVMsQ0FBQzhCLE1BRE47QUFFbEJwQixFQUFBQSxnQkFBZ0IsRUFBRVYsU0FBUyxDQUFDK0IsSUFGVjtBQUdsQnBCLEVBQUFBLFFBQVEsRUFBRVgsU0FBUyxDQUFDZ0MsR0FIRjtBQUlsQnBCLEVBQUFBLElBQUksRUFBRVosU0FBUyxDQUFDaUMsS0FBVixDQUFnQixDQUFDLE1BQUQsRUFBUyxPQUFULENBQWhCO0FBSlksQ0FBcEI7QUFPQSxlQUFlekIsT0FBZiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjbGFzc05hbWVzIGZyb20gJ2NsYXNzbmFtZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgdXNlRGlyIGZyb20gJy4vaG9va3MvdXNlRGlyJztcbmltcG9ydCB1c2VTY3JvbGxCYXJQZXJjZW50YWdlIGZyb20gJy4vaG9va3MvdXNlU2Nyb2xsQmFyUGVyY2VudGFnZSc7XG5pbXBvcnQgdXNlU2Nyb2xsT25lTGVmdCBmcm9tICcuL2hvb2tzL3VzZVNjcm9sbE9uZUxlZnQnO1xuaW1wb3J0IHVzZVNjcm9sbE9uZVJpZ2h0IGZyb20gJy4vaG9va3MvdXNlU2Nyb2xsT25lUmlnaHQnO1xuXG5jb25zdCBGbGlwcGVyID0gKHsgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsIGJsdXJGb2N1c09uQ2xpY2ssIGNoaWxkcmVuLCBtb2RlIH0pID0+IHtcbiAgY29uc3QgW2Rpcl0gPSB1c2VEaXIoKTtcbiAgY29uc3QgW3Njcm9sbEJhclBlcmNlbnRhZ2VdID0gdXNlU2Nyb2xsQmFyUGVyY2VudGFnZSgpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWYoKTtcbiAgY29uc3QgbGVmdCA9IG1vZGUgPT09ICdsZWZ0JztcbiAgY29uc3Qgc2Nyb2xsT25lTGVmdCA9IHVzZVNjcm9sbE9uZUxlZnQoKTtcbiAgY29uc3Qgc2Nyb2xsT25lUmlnaHQgPSB1c2VTY3JvbGxPbmVSaWdodCgpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGxlZnQgPyBzY3JvbGxPbmVMZWZ0KCkgOiBzY3JvbGxPbmVSaWdodCgpO1xuICAgIGJsdXJGb2N1c09uQ2xpY2sgJiYgYnV0dG9uUmVmLmN1cnJlbnQgJiYgYnV0dG9uUmVmLmN1cnJlbnQuYmx1cigpO1xuICB9LCBbYmx1ckZvY3VzT25DbGljaywgYnV0dG9uUmVmLCBsZWZ0LCBzY3JvbGxPbmVMZWZ0LCBzY3JvbGxPbmVSaWdodF0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBjb25zdCB7IGtleSB9ID0gZXZlbnQ7XG5cbiAgICAgIGlmIChrZXkgPT09ICdFbnRlcicgfHwga2V5ID09PSAnICcpIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgbGVmdCA/IHNjcm9sbE9uZUxlZnQoKSA6IHNjcm9sbE9uZVJpZ2h0KCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbbGVmdCwgc2Nyb2xsT25lTGVmdCwgc2Nyb2xsT25lUmlnaHRdXG4gICk7XG5cbiAgbGV0IGhpZGU7XG5cbiAgaWYgKGRpciA9PT0gJ3J0bCcpIHtcbiAgICBpZiAobGVmdCkge1xuICAgICAgaGlkZSA9IHNjcm9sbEJhclBlcmNlbnRhZ2UgPT09ICcxMDAlJyB8fCBzY3JvbGxCYXJQZXJjZW50YWdlID09PSAnLTEwMCUnO1xuICAgIH0gZWxzZSB7XG4gICAgICBoaWRlID0gc2Nyb2xsQmFyUGVyY2VudGFnZSA9PT0gJzAlJztcbiAgICB9XG4gIH0gZWxzZSB7XG4gICAgaWYgKGxlZnQpIHtcbiAgICAgIGhpZGUgPSBzY3JvbGxCYXJQZXJjZW50YWdlID09PSAnMCUnO1xuICAgIH0gZWxzZSB7XG4gICAgICBoaWRlID0gc2Nyb2xsQmFyUGVyY2VudGFnZSA9PT0gJzEwMCUnO1xuICAgIH1cbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsIHx8IChsZWZ0ID8gJ2xlZnQnIDogJ3JpZ2h0Jyl9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoJ3JlYWN0LWZpbG1fX2ZsaXBwZXInLCAncmVhY3QtZmlsbV9fbWFpbl9fb3ZlcmxheScsIHtcbiAgICAgICAgJ3JlYWN0LWZpbG1fX2ZsaXBwZXItLWxlZnQnOiBsZWZ0LFxuICAgICAgICAncmVhY3QtZmlsbV9fZmxpcHBlci0tcmlnaHQnOiAhbGVmdFxuICAgICAgfSl9XG4gICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgIG9uS2V5RG93bj17aGFuZGxlS2V5RG93bn1cbiAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoJ3JlYWN0LWZpbG1fX2ZsaXBwZXJfX3NsaWRlcicsICdyZWFjdC1maWxtX19tYWluX19zbGlkZXInLCB7XG4gICAgICAgICAgJ3JlYWN0LWZpbG1fX21haW5fX3NsaWRlci0taGlkZSc6IGhpZGUsXG4gICAgICAgICAgJ3JlYWN0LWZpbG1fX21haW5fX3NsaWRlci0tbGVmdCc6IGxlZnQsXG4gICAgICAgICAgJ3JlYWN0LWZpbG1fX21haW5fX3NsaWRlci0tcmlnaHQnOiAhbGVmdFxuICAgICAgICB9KX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWFjdC1maWxtX19mbGlwcGVyX19ib2R5XCI+e2NoaWxkcmVufTwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5GbGlwcGVyLmRlZmF1bHRQcm9wcyA9IHtcbiAgJ2FyaWEtbGFiZWwnOiB1bmRlZmluZWQsXG4gIGJsdXJGb2N1c09uQ2xpY2s6IGZhbHNlLFxuICBjaGlsZHJlbjogdW5kZWZpbmVkLFxuICBtb2RlOiAnbGVmdCdcbn07XG5cbkZsaXBwZXIucHJvcFR5cGVzID0ge1xuICAnYXJpYS1sYWJlbCc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGJsdXJGb2N1c09uQ2xpY2s6IFByb3BUeXBlcy5ib29sLFxuICBjaGlsZHJlbjogUHJvcFR5cGVzLmFueSxcbiAgbW9kZTogUHJvcFR5cGVzLm9uZU9mKFsnbGVmdCcsICdyaWdodCddKVxufTtcblxuZXhwb3J0IGRlZmF1bHQgRmxpcHBlcjtcbiJdfQ==