react-film/lib/Dot.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 _propTypes = _interopRequireDefault(require("prop-types"));

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

var _useIndex3 = _interopRequireDefault(require("./hooks/useIndex"));

var _useScrollTo = _interopRequireDefault(require("./hooks/useScrollTo"));

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 Dot = function Dot(_ref) {
  var ariaLabel = _ref['aria-label'],
      itemIndex = _ref.itemIndex;

  var _useIndex = (0, _useIndex3["default"])(),
      _useIndex2 = (0, _slicedToArray2["default"])(_useIndex, 1),
      index = _useIndex2[0];

  var scrollTo = (0, _useScrollTo["default"])();
  var checked = index === itemIndex;
  var handleChange = (0, _react.useCallback)(function () {
    return scrollTo(function () {
      return itemIndex;
    });
  }, [itemIndex, scrollTo]);
  var handleKeyPress = (0, _react.useCallback)(function (event) {
    var keyCode = event.keyCode; // 13 is ENTER, 32 is SPACEBAR.
    // eslint-disable-next-line no-magic-numbers

    if (keyCode === 13 || keyCode === 32) {
      event.preventDefault();
      event.stopPropagation();
      handleChange();
    }
  }, [handleChange]);
  return /*#__PURE__*/_react["default"].createElement("li", {
    className: "react-film__dot"
  }, /*#__PURE__*/_react["default"].createElement("input", {
    "aria-label": ariaLabel,
    "aria-pressed": checked,
    checked: checked,
    className: "react-film__dot__input",
    onChange: handleChange,
    onKeyPress: handleKeyPress,
    role: "button",
    type: "checkbox"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "react-film__dot__handle"
  }));
};

Dot.defaultProps = {
  'aria-label': undefined
};
Dot.propTypes = {
  'aria-label': _propTypes["default"].string,
  itemIndex: _propTypes["default"].number.isRequired
};
var _default = Dot;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Eb3QuanMiXSwibmFtZXMiOlsiRG90IiwiYXJpYUxhYmVsIiwiaXRlbUluZGV4IiwiaW5kZXgiLCJzY3JvbGxUbyIsImNoZWNrZWQiLCJoYW5kbGVDaGFuZ2UiLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5Q29kZSIsInByZXZlbnREZWZhdWx0Iiwic3RvcFByb3BhZ2F0aW9uIiwiZGVmYXVsdFByb3BzIiwidW5kZWZpbmVkIiwicHJvcFR5cGVzIiwiUHJvcFR5cGVzIiwic3RyaW5nIiwibnVtYmVyIiwiaXNSZXF1aXJlZCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBRUE7O0FBQ0E7Ozs7OztBQUVBLElBQU1BLEdBQUcsR0FBRyxTQUFOQSxHQUFNLE9BQTRDO0FBQUEsTUFBM0JDLFNBQTJCLFFBQXpDLFlBQXlDO0FBQUEsTUFBaEJDLFNBQWdCLFFBQWhCQSxTQUFnQjs7QUFDdEQsa0JBQWdCLDRCQUFoQjtBQUFBO0FBQUEsTUFBT0MsS0FBUDs7QUFDQSxNQUFNQyxRQUFRLEdBQUcsOEJBQWpCO0FBRUEsTUFBTUMsT0FBTyxHQUFHRixLQUFLLEtBQUtELFNBQTFCO0FBQ0EsTUFBTUksWUFBWSxHQUFHLHdCQUFZO0FBQUEsV0FBTUYsUUFBUSxDQUFDO0FBQUEsYUFBTUYsU0FBTjtBQUFBLEtBQUQsQ0FBZDtBQUFBLEdBQVosRUFBNkMsQ0FBQ0EsU0FBRCxFQUFZRSxRQUFaLENBQTdDLENBQXJCO0FBRUEsTUFBTUcsY0FBYyxHQUFHLHdCQUNyQixVQUFBQyxLQUFLLEVBQUk7QUFDUCxRQUFRQyxPQUFSLEdBQW9CRCxLQUFwQixDQUFRQyxPQUFSLENBRE8sQ0FHUDtBQUNBOztBQUNBLFFBQUlBLE9BQU8sS0FBSyxFQUFaLElBQWtCQSxPQUFPLEtBQUssRUFBbEMsRUFBc0M7QUFDcENELE1BQUFBLEtBQUssQ0FBQ0UsY0FBTjtBQUNBRixNQUFBQSxLQUFLLENBQUNHLGVBQU47QUFDQUwsTUFBQUEsWUFBWTtBQUNiO0FBQ0YsR0FYb0IsRUFZckIsQ0FBQ0EsWUFBRCxDQVpxQixDQUF2QjtBQWVBLHNCQUNFO0FBQUksSUFBQSxTQUFTLEVBQUM7QUFBZCxrQkFDRTtBQUNFLGtCQUFZTCxTQURkO0FBRUUsb0JBQWNJLE9BRmhCO0FBR0UsSUFBQSxPQUFPLEVBQUVBLE9BSFg7QUFJRSxJQUFBLFNBQVMsRUFBQyx3QkFKWjtBQUtFLElBQUEsUUFBUSxFQUFFQyxZQUxaO0FBTUUsSUFBQSxVQUFVLEVBQUVDLGNBTmQ7QUFPRSxJQUFBLElBQUksRUFBQyxRQVBQO0FBUUUsSUFBQSxJQUFJLEVBQUM7QUFSUCxJQURGLGVBV0U7QUFBSyxJQUFBLFNBQVMsRUFBQztBQUFmLElBWEYsQ0FERjtBQWVELENBckNEOztBQXVDQVAsR0FBRyxDQUFDWSxZQUFKLEdBQW1CO0FBQ2pCLGdCQUFjQztBQURHLENBQW5CO0FBSUFiLEdBQUcsQ0FBQ2MsU0FBSixHQUFnQjtBQUNkLGdCQUFjQyxzQkFBVUMsTUFEVjtBQUVkZCxFQUFBQSxTQUFTLEVBQUVhLHNCQUFVRSxNQUFWLENBQWlCQztBQUZkLENBQWhCO2VBS2VsQixHIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHVzZUluZGV4IGZyb20gJy4vaG9va3MvdXNlSW5kZXgnO1xuaW1wb3J0IHVzZVNjcm9sbFRvIGZyb20gJy4vaG9va3MvdXNlU2Nyb2xsVG8nO1xuXG5jb25zdCBEb3QgPSAoeyAnYXJpYS1sYWJlbCc6IGFyaWFMYWJlbCwgaXRlbUluZGV4IH0pID0+IHtcbiAgY29uc3QgW2luZGV4XSA9IHVzZUluZGV4KCk7XG4gIGNvbnN0IHNjcm9sbFRvID0gdXNlU2Nyb2xsVG8oKTtcblxuICBjb25zdCBjaGVja2VkID0gaW5kZXggPT09IGl0ZW1JbmRleDtcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soKCkgPT4gc2Nyb2xsVG8oKCkgPT4gaXRlbUluZGV4KSwgW2l0ZW1JbmRleCwgc2Nyb2xsVG9dKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGNvbnN0IHsga2V5Q29kZSB9ID0gZXZlbnQ7XG5cbiAgICAgIC8vIDEzIGlzIEVOVEVSLCAzMiBpcyBTUEFDRUJBUi5cbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1tYWdpYy1udW1iZXJzXG4gICAgICBpZiAoa2V5Q29kZSA9PT0gMTMgfHwga2V5Q29kZSA9PT0gMzIpIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIGhhbmRsZUNoYW5nZSgpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2hhbmRsZUNoYW5nZV1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxsaSBjbGFzc05hbWU9XCJyZWFjdC1maWxtX19kb3RcIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgIGFyaWEtcHJlc3NlZD17Y2hlY2tlZH1cbiAgICAgICAgY2hlY2tlZD17Y2hlY2tlZH1cbiAgICAgICAgY2xhc3NOYW1lPVwicmVhY3QtZmlsbV9fZG90X19pbnB1dFwiXG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgIC8+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cInJlYWN0LWZpbG1fX2RvdF9faGFuZGxlXCIgLz5cbiAgICA8L2xpPlxuICApO1xufTtcblxuRG90LmRlZmF1bHRQcm9wcyA9IHtcbiAgJ2FyaWEtbGFiZWwnOiB1bmRlZmluZWRcbn07XG5cbkRvdC5wcm9wVHlwZXMgPSB7XG4gICdhcmlhLWxhYmVsJzogUHJvcFR5cGVzLnN0cmluZyxcbiAgaXRlbUluZGV4OiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWRcbn07XG5cbmV4cG9ydCBkZWZhdWx0IERvdDtcbiJdfQ==