react-film/lib/Flipper.js

React component for showing carousel just like a film strip

"use strict";

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/es.weak-map.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.object.define-property.js");

require("core-js/modules/es.object.get-own-property-descriptor.js");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _useDir3 = _interopRequireDefault(require("./hooks/useDir"));

var _useScrollBarPercentage = _interopRequireDefault(require("./hooks/useScrollBarPercentage"));

var _useScrollOneLeft = _interopRequireDefault(require("./hooks/useScrollOneLeft"));

var _useScrollOneRight = _interopRequireDefault(require("./hooks/useScrollOneRight"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

  var _useDir = (0, _useDir3["default"])(),
      _useDir2 = (0, _slicedToArray2["default"])(_useDir, 1),
      dir = _useDir2[0];

  var _useScrollBarPercenta = (0, _useScrollBarPercentage["default"])(),
      _useScrollBarPercenta2 = (0, _slicedToArray2["default"])(_useScrollBarPercenta, 1),
      scrollBarPercentage = _useScrollBarPercenta2[0];

  var buttonRef = (0, _react.useRef)();
  var left = mode === 'left';
  var scrollOneLeft = (0, _useScrollOneLeft["default"])();
  var scrollOneRight = (0, _useScrollOneRight["default"])();
  var handleClick = (0, _react.useCallback)(function () {
    left ? scrollOneLeft() : scrollOneRight();
    blurFocusOnClick && buttonRef.current && buttonRef.current.blur();
  }, [blurFocusOnClick, buttonRef, left, scrollOneLeft, scrollOneRight]);
  var handleKeyDown = (0, _react.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["default"].createElement("button", {
    "aria-label": ariaLabel || (left ? 'left' : 'right'),
    className: (0, _classnames["default"])('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["default"].createElement("div", {
    className: (0, _classnames["default"])('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["default"].createElement("div", {
    className: "react-film__flipper__body"
  }, children)));
};

Flipper.defaultProps = {
  'aria-label': undefined,
  blurFocusOnClick: false,
  children: undefined,
  mode: 'left'
};
Flipper.propTypes = {
  'aria-label': _propTypes["default"].string,
  blurFocusOnClick: _propTypes["default"].bool,
  children: _propTypes["default"].any,
  mode: _propTypes["default"].oneOf(['left', 'right'])
};
var _default = Flipper;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9GbGlwcGVyLmpzIl0sIm5hbWVzIjpbIkZsaXBwZXIiLCJhcmlhTGFiZWwiLCJibHVyRm9jdXNPbkNsaWNrIiwiY2hpbGRyZW4iLCJtb2RlIiwiZGlyIiwic2Nyb2xsQmFyUGVyY2VudGFnZSIsImJ1dHRvblJlZiIsImxlZnQiLCJzY3JvbGxPbmVMZWZ0Iiwic2Nyb2xsT25lUmlnaHQiLCJoYW5kbGVDbGljayIsImN1cnJlbnQiLCJibHVyIiwiaGFuZGxlS2V5RG93biIsImV2ZW50Iiwia2V5IiwicHJldmVudERlZmF1bHQiLCJoaWRlIiwiZGVmYXVsdFByb3BzIiwidW5kZWZpbmVkIiwicHJvcFR5cGVzIiwiUHJvcFR5cGVzIiwic3RyaW5nIiwiYm9vbCIsImFueSIsIm9uZU9mIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFDQTs7QUFFQTs7QUFDQTs7QUFDQTs7QUFDQTs7Ozs7O0FBRUEsSUFBTUEsT0FBTyxHQUFHLFNBQVZBLE9BQVUsT0FBbUU7QUFBQSxNQUFsREMsU0FBa0QsUUFBaEUsWUFBZ0U7QUFBQSxNQUF2Q0MsZ0JBQXVDLFFBQXZDQSxnQkFBdUM7QUFBQSxNQUFyQkMsUUFBcUIsUUFBckJBLFFBQXFCO0FBQUEsTUFBWEMsSUFBVyxRQUFYQSxJQUFXOztBQUNqRixnQkFBYywwQkFBZDtBQUFBO0FBQUEsTUFBT0MsR0FBUDs7QUFDQSw4QkFBOEIseUNBQTlCO0FBQUE7QUFBQSxNQUFPQyxtQkFBUDs7QUFDQSxNQUFNQyxTQUFTLEdBQUcsb0JBQWxCO0FBQ0EsTUFBTUMsSUFBSSxHQUFHSixJQUFJLEtBQUssTUFBdEI7QUFDQSxNQUFNSyxhQUFhLEdBQUcsbUNBQXRCO0FBQ0EsTUFBTUMsY0FBYyxHQUFHLG9DQUF2QjtBQUVBLE1BQU1DLFdBQVcsR0FBRyx3QkFBWSxZQUFNO0FBQ3BDSCxJQUFBQSxJQUFJLEdBQUdDLGFBQWEsRUFBaEIsR0FBcUJDLGNBQWMsRUFBdkM7QUFDQVIsSUFBQUEsZ0JBQWdCLElBQUlLLFNBQVMsQ0FBQ0ssT0FBOUIsSUFBeUNMLFNBQVMsQ0FBQ0ssT0FBVixDQUFrQkMsSUFBbEIsRUFBekM7QUFDRCxHQUhtQixFQUdqQixDQUFDWCxnQkFBRCxFQUFtQkssU0FBbkIsRUFBOEJDLElBQTlCLEVBQW9DQyxhQUFwQyxFQUFtREMsY0FBbkQsQ0FIaUIsQ0FBcEI7QUFLQSxNQUFNSSxhQUFhLEdBQUcsd0JBQ3BCLFVBQUFDLEtBQUssRUFBSTtBQUNQLFFBQVFDLEdBQVIsR0FBZ0JELEtBQWhCLENBQVFDLEdBQVI7O0FBRUEsUUFBSUEsR0FBRyxLQUFLLE9BQVIsSUFBbUJBLEdBQUcsS0FBSyxHQUEvQixFQUFvQztBQUNsQ0QsTUFBQUEsS0FBSyxDQUFDRSxjQUFOO0FBQ0FULE1BQUFBLElBQUksR0FBR0MsYUFBYSxFQUFoQixHQUFxQkMsY0FBYyxFQUF2QztBQUNEO0FBQ0YsR0FSbUIsRUFTcEIsQ0FBQ0YsSUFBRCxFQUFPQyxhQUFQLEVBQXNCQyxjQUF0QixDQVRvQixDQUF0QjtBQVlBLE1BQUlRLElBQUo7O0FBRUEsTUFBSWIsR0FBRyxLQUFLLEtBQVosRUFBbUI7QUFDakIsUUFBSUcsSUFBSixFQUFVO0FBQ1JVLE1BQUFBLElBQUksR0FBR1osbUJBQW1CLEtBQUssTUFBeEIsSUFBa0NBLG1CQUFtQixLQUFLLE9BQWpFO0FBQ0QsS0FGRCxNQUVPO0FBQ0xZLE1BQUFBLElBQUksR0FBR1osbUJBQW1CLEtBQUssSUFBL0I7QUFDRDtBQUNGLEdBTkQsTUFNTztBQUNMLFFBQUlFLElBQUosRUFBVTtBQUNSVSxNQUFBQSxJQUFJLEdBQUdaLG1CQUFtQixLQUFLLElBQS9CO0FBQ0QsS0FGRCxNQUVPO0FBQ0xZLE1BQUFBLElBQUksR0FBR1osbUJBQW1CLEtBQUssTUFBL0I7QUFDRDtBQUNGOztBQUVELHNCQUNFO0FBQ0Usa0JBQVlMLFNBQVMsS0FBS08sSUFBSSxHQUFHLE1BQUgsR0FBWSxPQUFyQixDQUR2QjtBQUVFLElBQUEsU0FBUyxFQUFFLDRCQUFXLHFCQUFYLEVBQWtDLDJCQUFsQyxFQUErRDtBQUN4RSxtQ0FBNkJBLElBRDJDO0FBRXhFLG9DQUE4QixDQUFDQTtBQUZ5QyxLQUEvRCxDQUZiO0FBTUUsSUFBQSxPQUFPLEVBQUVHLFdBTlg7QUFPRSxJQUFBLFNBQVMsRUFBRUcsYUFQYjtBQVFFLElBQUEsR0FBRyxFQUFFUCxTQVJQO0FBU0UsSUFBQSxJQUFJLEVBQUM7QUFUUCxrQkFXRTtBQUNFLElBQUEsU0FBUyxFQUFFLDRCQUFXLDZCQUFYLEVBQTBDLDBCQUExQyxFQUFzRTtBQUMvRSx3Q0FBa0NXLElBRDZDO0FBRS9FLHdDQUFrQ1YsSUFGNkM7QUFHL0UseUNBQW1DLENBQUNBO0FBSDJDLEtBQXRFO0FBRGIsa0JBT0U7QUFBSyxJQUFBLFNBQVMsRUFBQztBQUFmLEtBQTRDTCxRQUE1QyxDQVBGLENBWEYsQ0FERjtBQXVCRCxDQWhFRDs7QUFrRUFILE9BQU8sQ0FBQ21CLFlBQVIsR0FBdUI7QUFDckIsZ0JBQWNDLFNBRE87QUFFckJsQixFQUFBQSxnQkFBZ0IsRUFBRSxLQUZHO0FBR3JCQyxFQUFBQSxRQUFRLEVBQUVpQixTQUhXO0FBSXJCaEIsRUFBQUEsSUFBSSxFQUFFO0FBSmUsQ0FBdkI7QUFPQUosT0FBTyxDQUFDcUIsU0FBUixHQUFvQjtBQUNsQixnQkFBY0Msc0JBQVVDLE1BRE47QUFFbEJyQixFQUFBQSxnQkFBZ0IsRUFBRW9CLHNCQUFVRSxJQUZWO0FBR2xCckIsRUFBQUEsUUFBUSxFQUFFbUIsc0JBQVVHLEdBSEY7QUFJbEJyQixFQUFBQSxJQUFJLEVBQUVrQixzQkFBVUksS0FBVixDQUFnQixDQUFDLE1BQUQsRUFBUyxPQUFULENBQWhCO0FBSlksQ0FBcEI7ZUFPZTFCLE8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY2xhc3NOYW1lcyBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHVzZURpciBmcm9tICcuL2hvb2tzL3VzZURpcic7XG5pbXBvcnQgdXNlU2Nyb2xsQmFyUGVyY2VudGFnZSBmcm9tICcuL2hvb2tzL3VzZVNjcm9sbEJhclBlcmNlbnRhZ2UnO1xuaW1wb3J0IHVzZVNjcm9sbE9uZUxlZnQgZnJvbSAnLi9ob29rcy91c2VTY3JvbGxPbmVMZWZ0JztcbmltcG9ydCB1c2VTY3JvbGxPbmVSaWdodCBmcm9tICcuL2hvb2tzL3VzZVNjcm9sbE9uZVJpZ2h0JztcblxuY29uc3QgRmxpcHBlciA9ICh7ICdhcmlhLWxhYmVsJzogYXJpYUxhYmVsLCBibHVyRm9jdXNPbkNsaWNrLCBjaGlsZHJlbiwgbW9kZSB9KSA9PiB7XG4gIGNvbnN0IFtkaXJdID0gdXNlRGlyKCk7XG4gIGNvbnN0IFtzY3JvbGxCYXJQZXJjZW50YWdlXSA9IHVzZVNjcm9sbEJhclBlcmNlbnRhZ2UoKTtcbiAgY29uc3QgYnV0dG9uUmVmID0gdXNlUmVmKCk7XG4gIGNvbnN0IGxlZnQgPSBtb2RlID09PSAnbGVmdCc7XG4gIGNvbnN0IHNjcm9sbE9uZUxlZnQgPSB1c2VTY3JvbGxPbmVMZWZ0KCk7XG4gIGNvbnN0IHNjcm9sbE9uZVJpZ2h0ID0gdXNlU2Nyb2xsT25lUmlnaHQoKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBsZWZ0ID8gc2Nyb2xsT25lTGVmdCgpIDogc2Nyb2xsT25lUmlnaHQoKTtcbiAgICBibHVyRm9jdXNPbkNsaWNrICYmIGJ1dHRvblJlZi5jdXJyZW50ICYmIGJ1dHRvblJlZi5jdXJyZW50LmJsdXIoKTtcbiAgfSwgW2JsdXJGb2N1c09uQ2xpY2ssIGJ1dHRvblJlZiwgbGVmdCwgc2Nyb2xsT25lTGVmdCwgc2Nyb2xsT25lUmlnaHRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlEb3duID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgY29uc3QgeyBrZXkgfSA9IGV2ZW50O1xuXG4gICAgICBpZiAoa2V5ID09PSAnRW50ZXInIHx8IGtleSA9PT0gJyAnKSB7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGxlZnQgPyBzY3JvbGxPbmVMZWZ0KCkgOiBzY3JvbGxPbmVSaWdodCgpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2xlZnQsIHNjcm9sbE9uZUxlZnQsIHNjcm9sbE9uZVJpZ2h0XVxuICApO1xuXG4gIGxldCBoaWRlO1xuXG4gIGlmIChkaXIgPT09ICdydGwnKSB7XG4gICAgaWYgKGxlZnQpIHtcbiAgICAgIGhpZGUgPSBzY3JvbGxCYXJQZXJjZW50YWdlID09PSAnMTAwJScgfHwgc2Nyb2xsQmFyUGVyY2VudGFnZSA9PT0gJy0xMDAlJztcbiAgICB9IGVsc2Uge1xuICAgICAgaGlkZSA9IHNjcm9sbEJhclBlcmNlbnRhZ2UgPT09ICcwJSc7XG4gICAgfVxuICB9IGVsc2Uge1xuICAgIGlmIChsZWZ0KSB7XG4gICAgICBoaWRlID0gc2Nyb2xsQmFyUGVyY2VudGFnZSA9PT0gJzAlJztcbiAgICB9IGVsc2Uge1xuICAgICAgaGlkZSA9IHNjcm9sbEJhclBlcmNlbnRhZ2UgPT09ICcxMDAlJztcbiAgICB9XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbCB8fCAobGVmdCA/ICdsZWZ0JyA6ICdyaWdodCcpfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKCdyZWFjdC1maWxtX19mbGlwcGVyJywgJ3JlYWN0LWZpbG1fX21haW5fX292ZXJsYXknLCB7XG4gICAgICAgICdyZWFjdC1maWxtX19mbGlwcGVyLS1sZWZ0JzogbGVmdCxcbiAgICAgICAgJ3JlYWN0LWZpbG1fX2ZsaXBwZXItLXJpZ2h0JzogIWxlZnRcbiAgICAgIH0pfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICBvbktleURvd249e2hhbmRsZUtleURvd259XG4gICAgICByZWY9e2J1dHRvblJlZn1cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKCdyZWFjdC1maWxtX19mbGlwcGVyX19zbGlkZXInLCAncmVhY3QtZmlsbV9fbWFpbl9fc2xpZGVyJywge1xuICAgICAgICAgICdyZWFjdC1maWxtX19tYWluX19zbGlkZXItLWhpZGUnOiBoaWRlLFxuICAgICAgICAgICdyZWFjdC1maWxtX19tYWluX19zbGlkZXItLWxlZnQnOiBsZWZ0LFxuICAgICAgICAgICdyZWFjdC1maWxtX19tYWluX19zbGlkZXItLXJpZ2h0JzogIWxlZnRcbiAgICAgICAgfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicmVhY3QtZmlsbV9fZmxpcHBlcl9fYm9keVwiPntjaGlsZHJlbn08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuRmxpcHBlci5kZWZhdWx0UHJvcHMgPSB7XG4gICdhcmlhLWxhYmVsJzogdW5kZWZpbmVkLFxuICBibHVyRm9jdXNPbkNsaWNrOiBmYWxzZSxcbiAgY2hpbGRyZW46IHVuZGVmaW5lZCxcbiAgbW9kZTogJ2xlZnQnXG59O1xuXG5GbGlwcGVyLnByb3BUeXBlcyA9IHtcbiAgJ2FyaWEtbGFiZWwnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBibHVyRm9jdXNPbkNsaWNrOiBQcm9wVHlwZXMuYm9vbCxcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5hbnksXG4gIG1vZGU6IFByb3BUeXBlcy5vbmVPZihbJ2xlZnQnLCAncmlnaHQnXSlcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZsaXBwZXI7XG4iXX0=