react-film/lib/esm/Dot.js

React component for showing carousel just like a film strip

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import PropTypes from 'prop-types';
import React, { useCallback } from 'react';
import useIndex from './hooks/useIndex';
import useScrollTo from './hooks/useScrollTo';

var Dot = function Dot(_ref) {
  var ariaLabel = _ref['aria-label'],
      itemIndex = _ref.itemIndex;

  var _useIndex = useIndex(),
      _useIndex2 = _slicedToArray(_useIndex, 1),
      index = _useIndex2[0];

  var scrollTo = useScrollTo();
  var checked = index === itemIndex;
  var handleChange = useCallback(function () {
    return scrollTo(function () {
      return itemIndex;
    });
  }, [itemIndex, scrollTo]);
  var handleKeyPress = 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.createElement("li", {
    className: "react-film__dot"
  }, /*#__PURE__*/React.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.createElement("div", {
    className: "react-film__dot__handle"
  }));
};

Dot.defaultProps = {
  'aria-label': undefined
};
Dot.propTypes = {
  'aria-label': PropTypes.string,
  itemIndex: PropTypes.number.isRequired
};
export default Dot;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Eb3QuanMiXSwibmFtZXMiOlsiUHJvcFR5cGVzIiwiUmVhY3QiLCJ1c2VDYWxsYmFjayIsInVzZUluZGV4IiwidXNlU2Nyb2xsVG8iLCJEb3QiLCJhcmlhTGFiZWwiLCJpdGVtSW5kZXgiLCJpbmRleCIsInNjcm9sbFRvIiwiY2hlY2tlZCIsImhhbmRsZUNoYW5nZSIsImhhbmRsZUtleVByZXNzIiwiZXZlbnQiLCJrZXlDb2RlIiwicHJldmVudERlZmF1bHQiLCJzdG9wUHJvcGFnYXRpb24iLCJkZWZhdWx0UHJvcHMiLCJ1bmRlZmluZWQiLCJwcm9wVHlwZXMiLCJzdHJpbmciLCJudW1iZXIiLCJpc1JlcXVpcmVkIl0sIm1hcHBpbmdzIjoiO0FBQUEsT0FBT0EsU0FBUCxNQUFzQixZQUF0QjtBQUNBLE9BQU9DLEtBQVAsSUFBZ0JDLFdBQWhCLFFBQW1DLE9BQW5DO0FBRUEsT0FBT0MsUUFBUCxNQUFxQixrQkFBckI7QUFDQSxPQUFPQyxXQUFQLE1BQXdCLHFCQUF4Qjs7QUFFQSxJQUFNQyxHQUFHLEdBQUcsU0FBTkEsR0FBTSxPQUE0QztBQUFBLE1BQTNCQyxTQUEyQixRQUF6QyxZQUF5QztBQUFBLE1BQWhCQyxTQUFnQixRQUFoQkEsU0FBZ0I7O0FBQ3RELGtCQUFnQkosUUFBUSxFQUF4QjtBQUFBO0FBQUEsTUFBT0ssS0FBUDs7QUFDQSxNQUFNQyxRQUFRLEdBQUdMLFdBQVcsRUFBNUI7QUFFQSxNQUFNTSxPQUFPLEdBQUdGLEtBQUssS0FBS0QsU0FBMUI7QUFDQSxNQUFNSSxZQUFZLEdBQUdULFdBQVcsQ0FBQztBQUFBLFdBQU1PLFFBQVEsQ0FBQztBQUFBLGFBQU1GLFNBQU47QUFBQSxLQUFELENBQWQ7QUFBQSxHQUFELEVBQWtDLENBQUNBLFNBQUQsRUFBWUUsUUFBWixDQUFsQyxDQUFoQztBQUVBLE1BQU1HLGNBQWMsR0FBR1YsV0FBVyxDQUNoQyxVQUFBVyxLQUFLLEVBQUk7QUFDUCxRQUFRQyxPQUFSLEdBQW9CRCxLQUFwQixDQUFRQyxPQUFSLENBRE8sQ0FHUDtBQUNBOztBQUNBLFFBQUlBLE9BQU8sS0FBSyxFQUFaLElBQWtCQSxPQUFPLEtBQUssRUFBbEMsRUFBc0M7QUFDcENELE1BQUFBLEtBQUssQ0FBQ0UsY0FBTjtBQUNBRixNQUFBQSxLQUFLLENBQUNHLGVBQU47QUFDQUwsTUFBQUEsWUFBWTtBQUNiO0FBQ0YsR0FYK0IsRUFZaEMsQ0FBQ0EsWUFBRCxDQVpnQyxDQUFsQztBQWVBLHNCQUNFO0FBQUksSUFBQSxTQUFTLEVBQUM7QUFBZCxrQkFDRTtBQUNFLGtCQUFZTCxTQURkO0FBRUUsb0JBQWNJLE9BRmhCO0FBR0UsSUFBQSxPQUFPLEVBQUVBLE9BSFg7QUFJRSxJQUFBLFNBQVMsRUFBQyx3QkFKWjtBQUtFLElBQUEsUUFBUSxFQUFFQyxZQUxaO0FBTUUsSUFBQSxVQUFVLEVBQUVDLGNBTmQ7QUFPRSxJQUFBLElBQUksRUFBQyxRQVBQO0FBUUUsSUFBQSxJQUFJLEVBQUM7QUFSUCxJQURGLGVBV0U7QUFBSyxJQUFBLFNBQVMsRUFBQztBQUFmLElBWEYsQ0FERjtBQWVELENBckNEOztBQXVDQVAsR0FBRyxDQUFDWSxZQUFKLEdBQW1CO0FBQ2pCLGdCQUFjQztBQURHLENBQW5CO0FBSUFiLEdBQUcsQ0FBQ2MsU0FBSixHQUFnQjtBQUNkLGdCQUFjbkIsU0FBUyxDQUFDb0IsTUFEVjtBQUVkYixFQUFBQSxTQUFTLEVBQUVQLFNBQVMsQ0FBQ3FCLE1BQVYsQ0FBaUJDO0FBRmQsQ0FBaEI7QUFLQSxlQUFlakIsR0FBZiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB1c2VJbmRleCBmcm9tICcuL2hvb2tzL3VzZUluZGV4JztcbmltcG9ydCB1c2VTY3JvbGxUbyBmcm9tICcuL2hvb2tzL3VzZVNjcm9sbFRvJztcblxuY29uc3QgRG90ID0gKHsgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsIGl0ZW1JbmRleCB9KSA9PiB7XG4gIGNvbnN0IFtpbmRleF0gPSB1c2VJbmRleCgpO1xuICBjb25zdCBzY3JvbGxUbyA9IHVzZVNjcm9sbFRvKCk7XG5cbiAgY29uc3QgY2hlY2tlZCA9IGluZGV4ID09PSBpdGVtSW5kZXg7XG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IHVzZUNhbGxiYWNrKCgpID0+IHNjcm9sbFRvKCgpID0+IGl0ZW1JbmRleCksIFtpdGVtSW5kZXgsIHNjcm9sbFRvXSk7XG5cbiAgY29uc3QgaGFuZGxlS2V5UHJlc3MgPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBjb25zdCB7IGtleUNvZGUgfSA9IGV2ZW50O1xuXG4gICAgICAvLyAxMyBpcyBFTlRFUiwgMzIgaXMgU1BBQ0VCQVIuXG4gICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tbWFnaWMtbnVtYmVyc1xuICAgICAgaWYgKGtleUNvZGUgPT09IDEzIHx8IGtleUNvZGUgPT09IDMyKSB7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICBoYW5kbGVDaGFuZ2UoKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDaGFuZ2VdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGkgY2xhc3NOYW1lPVwicmVhY3QtZmlsbV9fZG90XCI+XG4gICAgICA8aW5wdXRcbiAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsfVxuICAgICAgICBhcmlhLXByZXNzZWQ9e2NoZWNrZWR9XG4gICAgICAgIGNoZWNrZWQ9e2NoZWNrZWR9XG4gICAgICAgIGNsYXNzTmFtZT1cInJlYWN0LWZpbG1fX2RvdF9faW5wdXRcIlxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbktleVByZXNzPXtoYW5kbGVLZXlQcmVzc31cbiAgICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAvPlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWFjdC1maWxtX19kb3RfX2hhbmRsZVwiIC8+XG4gICAgPC9saT5cbiAgKTtcbn07XG5cbkRvdC5kZWZhdWx0UHJvcHMgPSB7XG4gICdhcmlhLWxhYmVsJzogdW5kZWZpbmVkXG59O1xuXG5Eb3QucHJvcFR5cGVzID0ge1xuICAnYXJpYS1sYWJlbCc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGl0ZW1JbmRleDogUHJvcFR5cGVzLm51bWJlci5pc1JlcXVpcmVkXG59O1xuXG5leHBvcnQgZGVmYXVsdCBEb3Q7XG4iXX0=