@mapbox/mr-ui/chevronous-text/chevronous-text.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ChevronousText;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _icon = _interopRequireDefault(require("../icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ChevronousText(_ref) {
  let {
    text,
    iconBefore = false,
    iconSize = '1.5em'
  } = _ref;
  const splitText = text.split(' ');
  const iconWord = iconBefore ? splitText.shift() : splitText.pop();
  const textWithoutIconWord = splitText.join(' ');
  if (iconBefore) {
    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
      className: "txt-nowrap"
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: "chevron-left",
      inline: true,
      size: iconSize
    }), iconWord), ' ', textWithoutIconWord);
  }
  return /*#__PURE__*/_react.default.createElement("span", null, textWithoutIconWord, ' ', /*#__PURE__*/_react.default.createElement("span", {
    className: "txt-nowrap"
  }, iconWord, /*#__PURE__*/_react.default.createElement(_icon.default, {
    name: "chevron-right",
    inline: true,
    size: iconSize
  })));
}
ChevronousText.propTypes = {
  /** The text that should be aligned next to the chevron. */
  text: _propTypes.default.string.isRequired,
  /** When true, the text will follow after a left pointed chevron. */
  iconBefore: _propTypes.default.bool,
  /**
   * The width and height size of the chevron icon. Note that this icon is
   * inline and the height won't go beyond the line-height. This can be a
   * number which will fall back to px, or a string in the units of
   * px, em, %, or pt.
   */
  iconSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};