@talend/react-components/lib/FormatValue/FormatValue.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FormatValueComponent = FormatValueComponent;
exports.default = void 0;
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = _interopRequireDefault(require("../constants"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _FormatValueModule = _interopRequireDefault(require("./FormatValue.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g;
const REG_EXP_CAPTUR_LINE_FEEDING = /(\n)/g;
const REG_EXP_LINE_FEEDING = /\n/;
const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s+/;

/**
 * replaceCharacterByIcon - replace a character by the corresponding icon
 *
 * @param  {string} value string to transform
 * @return {Component}    component with the replaced special characters by icon
 */
function replaceCharacterByIcon(value, index, t) {
  var _value$match, _ref;
  switch (value) {
    case '\t':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        "aria-label": t('FORMAT_VALUE_TAB_CHARACTER', {
          defaultValue: 'tab character'
        }),
        className: (0, _classnames.default)(_FormatValueModule.default['td-white-space-character'], _FormatValueModule.default['td-tab-character'], 'td-white-space-character'),
        name: "talend-empty-cell"
      }, index);
    case ' ':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        "aria-label": t('FORMAT_VALUE_SPACE_CHARACTER', {
          defaultValue: 'space character'
        }),
        className: (0, _classnames.default)(_FormatValueModule.default['td-white-space-character'], 'td-white-space-character'),
        name: "talend-empty-space"
      }, index);
    case '\n':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          "aria-label": t('FORMAT_VALUE_LINE_FEEDING_CHARACTER', {
            defaultValue: 'line feeding character'
          }),
          className: (0, _classnames.default)(_FormatValueModule.default['td-white-space-character'], 'td-white-space-character'),
          name: "talend-carriage-return"
        })
      }, index);
    default:
      const whitespaces = (_value$match = value.match(REG_EXP_WHITE_SPACE_CHARACTERS)) === null || _value$match === void 0 ? void 0 : _value$match[0];
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [whitespaces && ((_ref = [...whitespaces]) === null || _ref === void 0 ? void 0 : _ref.map(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          "aria-label": t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
            defaultValue: 'whitespace character'
          }),
          className: (0, _classnames.default)(_FormatValueModule.default['td-white-space-character'], _FormatValueModule.default['td-other-characters'], 'td-white-space-character'),
          name: "talend-empty-char"
        }, index))), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: (0, _classnames.default)(_FormatValueModule.default['td-value'], 'td-value'),
          children: value.trimStart()
        }, index)]
      });
  }
}

/**
 * isEmptyCharacter - filter function to remove unused character
 *
 * @param  {string} value string to filter
 * @return {string}       string (truthly if no empty)
 */
function isEmptyCharacter(value) {
  return value;
}
const SPLIT_REGEX = [REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS, REG_EXP_CAPTUR_LINE_FEEDING, REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS];
function FormatValueComponent({
  value,
  className
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  let formattedValue = value;
  if (typeof value === 'string') {
    const regExp = new RegExp(`(${(0, _lodash.escapeRegExp)(value.trim())})`);
    const hiddenCharsRegExpSplit = value.split(regExp);
    if (hiddenCharsRegExpSplit[0] || hiddenCharsRegExpSplit[2] || REG_EXP_LINE_FEEDING.test(value)) {
      formattedValue = hiddenCharsRegExpSplit.flatMap((flatMapValue, index) => flatMapValue === null || flatMapValue === void 0 ? void 0 : flatMapValue.split(SPLIT_REGEX[index])).filter(isEmptyCharacter).map((mappedValue, index) => replaceCharacterByIcon(mappedValue, index, t));
    }
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: className,
    children: formattedValue
  });
}
FormatValueComponent.propTypes = {
  className: _propTypes.default.string,
  value: _propTypes.default.string
};
var _default = exports.default = FormatValueComponent;
//# sourceMappingURL=FormatValue.component.js.map