@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
212 lines (211 loc) • 10.2 kB
JavaScript
"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 _IconQuestion = _interopRequireDefault(require("../Icon/IconQuestion.js"));
var _IconClose = _interopRequireDefault(require("../Icon/IconClose.js"));
var _index2 = _interopRequireDefault(require("../Paragraph/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* HelpTip module.
* @module @massds/mayflower-react/HelpTip
* @requires module:@massds/mayflower-assets/scss/03-organisms/help-tip
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
*/ // eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
var HelpTip = /*#__PURE__*/function (_React$Component) {
function HelpTip(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_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(_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(_this, "toggleOpen", function (index) {
var isOpen = _this.state.isOpen;
isOpen[index] = !_this.state.isOpen[index];
_this.setState({
isOpen: isOpen
});
});
_defineProperty(_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;
}
_inheritsLoose(HelpTip, _React$Component);
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(_IconQuestion["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 = exports["default"] = HelpTip;
module.exports = exports.default;