@massds/mayflower-react/dist/FootNote/index.mjs

React versions of Mayflower design system UI components

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * FootNote module.
 * @module @massds/mayflower-react/FootNote
 * @requires module:@massds/mayflower-assets/scss/01-atoms/footnote
 */
import React from "react";
import PropTypes from "prop-types";

let FootNote = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(FootNote, _React$Component);

  function FootNote() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = FootNote.prototype;

  _proto.handleScroll = function handleScroll() {
    const element = document.getElementsByClassName("footnoteref" + this.props.index)[0];
    element.scrollIntoView({
      block: 'start',
      behavior: 'smooth'
    });
  };

  _proto.render = function render() {
    const _this$props = this.props,
          children = _this$props.children,
          index = _this$props.index;
    return /*#__PURE__*/React.createElement("div", {
      className: "ma__footnote-item"
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      id: "footnotemsg" + index,
      onClick: () => this.handleScroll()
    }, /*#__PURE__*/React.createElement("span", {
      className: "ma__footnote-item-content",
      dangerouslySetInnerHTML: {
        __html: index + ". " + children
      }
    })));
  };

  return FootNote;
}(React.Component);

FootNote.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Pair the FootNote molecule with the FootNoteLink.
  The number/index of the footnote item.
  If this is the second footnote on the page, `i` would be 2. */
  index: PropTypes.string,
  children: PropTypes.node
} : {};
export default FootNote;