@helpscout/hsds-react/components/MessageCard/utils/MessageCard.utils.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.replaceMessageVariables = exports.messageVariableClassName = void 0;
var messageVariableClassName = 'hsds-message-card-variable';
/**
 * This function replaces all occurrences of variables in provided string with human friendly text
 * They would be replaced with fallback text, if present. If no fallback text, label from variable would be used
 * Only variables provided in parameter would be replaced, others are kept untouched in the raw version
 *
 * Variable raw text is replaced with <span class="hsds-message-card-variable"> and <span class="hsds-message-card-variable__text"> elements.
 * Two elements are necessary to properly insert ellipsis for longer variables, and keep the proper styling
 *
 * @param text {String} text to replace variables within (if any)
 * @param variables {Array<{id: String, display: String}>} list of variables to replace
 */

exports.messageVariableClassName = messageVariableClassName;

var replaceMessageVariables = function replaceMessageVariables(text, variables) {
  if (text === void 0) {
    text = '';
  }

  if (variables === void 0) {
    variables = [];
  }

  if (variables.length === 0) {
    return text;
  } // Regex to match the following cases:
  // 1) {%variableName,fallback=Fallback%}
  // 2) {%variableName,fallback=%}
  // 3) {%variableName%}
  // 4) {%variableName,fallback=Fallback with % sign%}
  // There are 3 groups, from left: variable name, fallback presence (optional), fallback value (optional)
  // (.*?(?=%}) is a group that finds fallback value, up until it reaches first `%}` group of characters


  var regex = /{%([^,%]+)(,fallback=(.*?(?=%})))?%}/g;

  var replacer = function replacer(match, variableId, fallbackConfig, fallback) {
    var variable = variables.find(function (variable) {
      return variable.id === variableId;
    });

    if (variable) {
      var variableText = !fallback ? variable.display : fallback;
      return "<span class=\"" + messageVariableClassName + "\" title=\"" + variableText + "\"><span class=\"" + messageVariableClassName + "__text\">" + variableText + "</span></span>";
    }

    return match;
  };

  return text.replace(regex, replacer);
};

exports.replaceMessageVariables = replaceMessageVariables;