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

Set of react components.

import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import I18N_DOMAIN_COMPONENTS from '../constants';
import Icon from '../Icon';
import theme from './FormatValue.module.scss';
import { escapeRegExp } from "lodash";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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__*/_jsx(Icon, {
        "aria-label": t('FORMAT_VALUE_TAB_CHARACTER', {
          defaultValue: 'tab character'
        }),
        className: classNames(theme['td-white-space-character'], theme['td-tab-character'], 'td-white-space-character'),
        name: "talend-empty-cell"
      }, index);
    case ' ':
      return /*#__PURE__*/_jsx(Icon, {
        "aria-label": t('FORMAT_VALUE_SPACE_CHARACTER', {
          defaultValue: 'space character'
        }),
        className: classNames(theme['td-white-space-character'], 'td-white-space-character'),
        name: "talend-empty-space"
      }, index);
    case '\n':
      return /*#__PURE__*/_jsx("span", {
        children: /*#__PURE__*/_jsx(Icon, {
          "aria-label": t('FORMAT_VALUE_LINE_FEEDING_CHARACTER', {
            defaultValue: 'line feeding character'
          }),
          className: classNames(theme['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__*/_jsxs(_Fragment, {
        children: [whitespaces && ((_ref = [...whitespaces]) === null || _ref === void 0 ? void 0 : _ref.map(() => /*#__PURE__*/_jsx(Icon, {
          "aria-label": t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
            defaultValue: 'whitespace character'
          }),
          className: classNames(theme['td-white-space-character'], theme['td-other-characters'], 'td-white-space-character'),
          name: "talend-empty-char"
        }, index))), /*#__PURE__*/_jsx("span", {
          className: classNames(theme['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];
export function FormatValueComponent({
  value,
  className
}) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  let formattedValue = value;
  if (typeof value === 'string') {
    const regExp = new RegExp(`(${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__*/_jsx("span", {
    className: className,
    children: formattedValue
  });
}
FormatValueComponent.propTypes = {
  className: PropTypes.string,
  value: PropTypes.string
};
export default FormatValueComponent;
//# sourceMappingURL=FormatValue.component.js.map