@massds/mayflower-react/dist/HelpTip/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

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

var _index = _interopRequireDefault(require("../Collapse/index.js"));

var _IconQuestionmark = _interopRequireDefault(require("../Icon/IconQuestionmark.js"));

var _IconClose = _interopRequireDefault(require("../Icon/IconClose.js"));

var _index2 = _interopRequireDefault(require("../Paragraph/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var HelpTip = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(HelpTip, _React$Component);

  function HelpTip(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "getSplitText", function (text, triggers) {
      var splitText = text;
      triggers.forEach(function (trigger, index) {
        if (index === 0) {
          splitText = splitText.split(trigger);
        } else {
          var nextPart = splitText[index].split(trigger);
          splitText.pop();
          splitText = splitText.concat(nextPart);
        }
      });
      return splitText;
    });

    _defineProperty(_assertThisInitialized(_this), "toggleOpenForKeyUp", function (e, index) {
      if (e.which === 13 || e.which === 32) {
        // 13 is enter, 32 is spacebar
        e.preventDefault();
        e.stopPropagation();

        _this.toggleOpen(index);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "toggleOpen", function (index) {
      var isOpen = _this.state.isOpen;
      isOpen[index] = !_this.state.isOpen[index];

      _this.setState({
        isOpen: isOpen
      });
    });

    _defineProperty(_assertThisInitialized(_this), "buildDangerouslyIfHasMarkup", function (text, hasMarkup) {
      return (
        /* eslint-disable react/no-danger */
        hasMarkup ? /*#__PURE__*/_react["default"].createElement("span", {
          dangerouslySetInnerHTML: {
            __html: text
          }
        }) : text
      );
    });

    var openArray = _this.props.triggerText.map(function () {
      return false;
    });

    _this.state = {
      isOpen: openArray
    };
    return _this;
  }

  var _proto = HelpTip.prototype;

  _proto.render = function render() {
    var _classNames,
        _classNames2,
        _classNames3,
        _classNames4,
        _this2 = this;

    var _this$props = this.props,
        hasMarkup = _this$props.hasMarkup,
        triggerText = _this$props.triggerText,
        helpText = _this$props.helpText,
        children = _this$props.children,
        id = _this$props.id,
        theme = _this$props.theme,
        text = _this$props.text,
        disabled = _this$props.disabled;
    var baseClass = (0, _classnames["default"])((_classNames = {
      'ma__help-tip': true,
      'mobile-tray': !this.props.bypassMobileStyle
    }, _classNames["ma__help-tip__text--" + theme] = theme, _classNames));
    var helpTextClasses = (0, _classnames["default"])((_classNames2 = {
      'ma__help-tip__text': !children,
      'ma__help-tip__text--children': children
    }, _classNames2["ma__help-tip__text--" + theme] = theme, _classNames2));
    var helpTextContainer = (0, _classnames["default"])((_classNames3 = {
      'ma__help-tip__container': true
    }, _classNames3["ma__help-tip__container--" + theme] = theme, _classNames3));
    var helpTextDirect = (0, _classnames["default"])((_classNames4 = {
      'ma__help-tip__text-direct': true
    }, _classNames4["ma__help-tip__text-direct--" + theme] = theme, _classNames4));
    var splitText = this.getSplitText(text, triggerText);
    var childArray = children && (Array.isArray(children) ? children : [children]);
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: baseClass,
      id: id
    }, triggerText.map(function (trigger, index) {
      var triggerTextClasses = (0, _classnames["default"])({
        'ma__help-tip__trigger': true,
        'ma__help-tip__trigger--active': _this2.state.isOpen[index],
        'ma__help-tip__trigger--disabled': disabled
      });
      return (
        /*#__PURE__*/

        /* eslint-disable-next-line react/no-array-index-key */
        _react["default"].createElement("span", {
          key: "help-tip-label-" + id + "-" + index,
          className: "ma__help-tip__label",
          id: "label-" + id + "-" + index
        }, index === 0 && _this2.buildDangerouslyIfHasMarkup(splitText[index], hasMarkup), /*#__PURE__*/_react["default"].createElement("span", {
          className: "ma_help-tip__label-a11y",
          id: "context-a11y-" + id + "-" + index,
          "aria-hidden": "true"
        }, _this2.state.isOpen[index] ? 'Close tooltip info about ' : 'Open tooltip info about ', _this2.buildDangerouslyIfHasMarkup(trigger, hasMarkup)), /*#__PURE__*/_react["default"].createElement("span", {
          className: triggerTextClasses,
          id: "trigger-" + id + "-" + index,
          onClick: function onClick() {
            return _this2.toggleOpen(index);
          },
          onKeyUp: function onKeyUp(e) {
            return _this2.toggleOpenForKeyUp(e, index);
          },
          tabIndex: disabled ? -1 : 0,
          role: "button",
          "aria-describedby": "context-a11y-" + id + "-" + index,
          "aria-expanded": _this2.state.isOpen[index],
          "aria-controls": "help-tip-content-" + id + "-" + index
        }, _this2.buildDangerouslyIfHasMarkup(trigger, hasMarkup), /*#__PURE__*/_react["default"].createElement(_IconQuestionmark["default"], {
          height: 15,
          width: 15
        })), _this2.buildDangerouslyIfHasMarkup(splitText[index + 1], hasMarkup))
      );
    }), triggerText.map(function (trigger, index) {
      return !disabled &&
      /*#__PURE__*/

      /* eslint-disable-next-line react/no-array-index-key */
      _react["default"].createElement(_index["default"], {
        key: "help-tip-collapse-" + id + "-" + index,
        "in": _this2.state.isOpen[index],
        dimension: "height",
        className: helpTextContainer
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__help-tip__content",
        id: "help-tip-content-" + id + "-" + index,
        "aria-hidden": !_this2.state.isOpen[index]
      }, /*#__PURE__*/_react["default"].createElement("div", {
        tabIndex: "0",
        role: "button",
        className: "ma__help-tip__close-mobile",
        onClick: function onClick() {
          return _this2.toggleOpen(index);
        },
        onKeyUp: function onKeyUp(e) {
          return _this2.toggleOpenForKeyUp(e, index);
        },
        "aria-label": _this2.state.isOpen[index] && 'Close help tip.'
      }, /*#__PURE__*/_react["default"].createElement(_IconClose["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
        tabIndex: "0",
        role: "button",
        className: "ma__help-tip__close-desktop",
        onClick: function onClick() {
          return _this2.toggleOpen(index);
        },
        onKeyUp: function onKeyUp(e) {
          return _this2.toggleOpenForKeyUp(e, index);
        },
        "aria-label": _this2.state.isOpen[index] && 'Close help tip.'
      }, /*#__PURE__*/_react["default"].createElement(_IconClose["default"], null)), (helpText || childArray) && /*#__PURE__*/_react["default"].createElement("div", {
        className: helpTextClasses,
        "aria-live": "polite"
      }, helpText && helpText[index] && /*#__PURE__*/_react["default"].createElement(_index2["default"], {
        className: helpTextDirect,
        text: helpText[index]
      }), childArray && childArray[index] && childArray[index])));
    }));
  };

  return HelpTip;
}(_react["default"].Component);

HelpTip.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The text that will have one or more help tips inserted in it. */
  text: _propTypes["default"].string,

  /** The text that will be a clickable inline toolitp */
  triggerText: _propTypes["default"].arrayOf(_propTypes["default"].string),

  /** The help text that is displayed on clicking the trigger text.
  You can also render children in the help text */
  helpText: _propTypes["default"].arrayOf(_propTypes["default"].string),

  /** The id for the whole component */
  id: _propTypes["default"].string.isRequired,

  /** Whether you want the help text to slide up on mobile screens */
  bypassMobileStyle: _propTypes["default"].bool,

  /** Whether text contains html markup */
  hasMarkup: _propTypes["default"].bool,

  /** Themes correspond to site color scheme i.e. sass variables */
  theme: _propTypes["default"].oneOf(['c-primary', 'c-primary-alt', 'c-highlight', 'c-gray-dark', 'c-error-red', 'c-white']),

  /** Disable helptip trigger text */
  disabled: _propTypes["default"].bool,
  children: _propTypes["default"].node
} : {};
HelpTip.defaultProps = {
  hasMarkup: true,
  theme: 'c-primary',
  bypassMobileStyle: false
};
var _default = HelpTip;
exports["default"] = _default;
module.exports = exports.default;