@talend/react-components/lib-esm/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.component.js

Set of react components.

import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import DefaultValueRenderer from './DefaultValueRenderer.component';
import theme from './SimpleTextKeyValue.module.scss';
import { isNull, get } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DATE_TYPE_FORMATER = 'date';
const LONG_TYPE = 'long';
const AVRO_TYPES = ['boolean', 'int', LONG_TYPE, 'float', 'double', 'bytes', 'string', 'unknown', 'date', 'enum'];
const TIMESTAMP_MILLIS_LOGICAL_TYPES = 'timestamp-millis';
const LOGICAL_TYPES = [TIMESTAMP_MILLIS_LOGICAL_TYPES];
const PRIMITIVES_MAPPING = {
  double: 'int',
  float: 'int',
  int: 'int',
  long: 'int'
};
function getTypeRenderer(schemaType) {
  if (!schemaType) return '';
  if (schemaType.type === LONG_TYPE && schemaType.logicalType === TIMESTAMP_MILLIS_LOGICAL_TYPES) {
    return DATE_TYPE_FORMATER;
  }
  if (PRIMITIVES_MAPPING[schemaType.type]) {
    return PRIMITIVES_MAPPING[schemaType.type];
  }
  return schemaType.type;
}
export function AvroRenderer({
  colDef,
  data,
  isValueOverflown,
  isLongValueToggled
}) {
  const typeRenderer = getTypeRenderer(colDef.avro.type);
  const dateToString = value => {
    if (value === null) {
      return value;
    }
    try {
      return new Date(value).toISOString();
    } catch (e) {
      return value;
    }
  };
  switch (typeRenderer) {
    case 'DefaultInt':
    case 'number':
      return /*#__PURE__*/_jsx(DefaultValueRenderer, {
        value: data.value,
        isValueOverflown: isValueOverflown,
        isLongValueToggled: isLongValueToggled,
        className: classNames(theme['td-cell-int'], 'td-cell-int')
      });
    case 'DefaultDate':
    case 'date':
    case 'datetime':
      return /*#__PURE__*/_jsx(DefaultValueRenderer, {
        value: dateToString(data.value),
        isValueOverflown: isValueOverflown,
        isLongValueToggled: isLongValueToggled,
        className: classNames('td-cell-date')
      });
    case 'fixed':
      return /*#__PURE__*/_jsx(DefaultValueRenderer, {
        value: data,
        isValueOverflown: isValueOverflown,
        isLongValueToggled: isLongValueToggled
      });
    default:
      return /*#__PURE__*/_jsx(DefaultValueRenderer, {
        value: data.value,
        isValueOverflown: isValueOverflown,
        isLongValueToggled: isLongValueToggled
      });
  }
}
AvroRenderer.propTypes = {
  colDef: PropTypes.shape({
    avro: PropTypes.shape({
      type: PropTypes.shape({
        type: PropTypes.oneOf([...AVRO_TYPES, 'array', 'fixed']),
        logicalType: PropTypes.oneOf(LOGICAL_TYPES)
      })
    })
  }),
  data: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number, PropTypes.bool]),
  isValueOverflown: PropTypes.bool,
  isLongValueToggled: PropTypes.bool
};

// eslint-disable-next-line prefer-arrow-callback
const SimpleTextKeyValue = /*#__PURE__*/forwardRef(function SimpleTextKeyValue({
  formattedKey,
  className,
  schema,
  separator,
  style,
  value,
  displayTypes,
  typesRenderer,
  isValueOverflown,
  isLongValueToggled
}, ref) {
  let types;
  if (displayTypes && schema && value) {
    types = /*#__PURE__*/_jsx("span", {
      className: classNames(theme['tc-simple-text-type'], 'tc-simple-text-type'),
      children: typesRenderer(schema)
    });
  }
  return /*#__PURE__*/_jsxs("span", {
    ref: ref,
    className: classNames(theme['tc-simple-text'], 'tc-simple-text', className),
    style: style,
    children: [!isNull(formattedKey) && /*#__PURE__*/_jsxs("span", {
      className: classNames(theme['tc-simple-text-key'], 'tc-simple-text-key', {
        [theme['tc-simple-text-key-with-value']]: value,
        'tc-simple-text-key-with-value': value
      }),
      children: [get(schema, 'talend.component.label', formattedKey), separator, types]
    }), !schema && value && /*#__PURE__*/_jsx("span", {
      className: classNames(theme['tc-simple-text-value'], 'tc-simple-text-value', {
        [theme['shrink-value']]: isValueOverflown,
        [theme['wrap-value']]: isLongValueToggled
      }),
      children: value
    }), schema && value && /*#__PURE__*/_jsx(AvroRenderer, {
      colDef: {
        avro: typeof schema.type === 'string' ? {
          type: schema
        } : schema
      },
      data: value,
      isValueOverflown: isValueOverflown,
      isLongValueToggled: isLongValueToggled
    })]
  });
});
SimpleTextKeyValue.displayName = 'SimpleTextKeyValue';
SimpleTextKeyValue.propTypes = {
  className: PropTypes.string,
  formattedKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  schema: PropTypes.object,
  value: PropTypes.any,
  separator: PropTypes.string,
  style: PropTypes.object,
  displayTypes: PropTypes.bool,
  typesRenderer: PropTypes.func,
  isValueOverflown: PropTypes.bool,
  isLongValueToggled: PropTypes.bool
};
SimpleTextKeyValue.defaultProps = {
  displayTypes: false,
  typesRenderer: schema => `- ${schema.type.type}`
};
export default SimpleTextKeyValue;
//# sourceMappingURL=SimpleTextKeyValue.component.js.map