@talend/react-components/lib/ObjectViewer/Table/Table.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.buildContentHeaders = buildContentHeaders;
exports.default = void 0;
exports.getAbsolutePath = getAbsolutePath;
exports.getHeaders = getHeaders;
exports.getKeys = getKeys;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _toflat = _interopRequireDefault(require("../toflat"));
var _JSONLike = _interopRequireDefault(require("../JSONLike"));
var _TableModule = _interopRequireDefault(require("./Table.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * @param {Object} data
 * @param {Bool} isFlat
 * @return {Array<String>}
 */
function getKeys(data, isFlat) {
  if (isFlat) {
    return Object.keys((0, _toflat.default)(data));
  }
  return Object.keys(data);
}
function getAbsolutePath(index, key, flat) {
  if (flat) {
    return `$[${index}]${key.replace('$', '')}`;
  }
  return `$[${index}]['${key}']`;
}
function getHeaders(keys, isFlat, baseId) {
  return keys.map(key => {
    // This transforms $['id'][0]['foo'] into id[0].foo
    const adaptedKey = isFlat ? key.replace(/^\$\['/g, '').replace(/']\['/g, '.').replace(/]\['/g, '].').replace(/']\[/g, '[').replace(/']/g, '') : key;
    return {
      id: `${baseId}-${adaptedKey}`,
      key,
      header: adaptedKey
    };
  });
}

/**
 * We construct the jsx dispayed for the header.
 * If there is a type we add it.
 * @param {array} headersDefinitions
 * @param {object} schema
 */
function buildContentHeaders(headersDefinitions, schema) {
  return headersDefinitions.map(({
    header,
    id
  }, index) => {
    let type;
    if (schema) {
      type = schema.get(header);
    }
    if (!type) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
        id: id,
        children: header
      }, index);
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
      id: id,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: header
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('text-right'),
        children: type
      })]
    }, index);
  });
}
function Table({
  flat,
  data,
  title,
  ...props
}) {
  if (!Array.isArray(data) && !Array.isArray(data.dataset)) {
    return null;
  }

  // The datas can be an array or an array in an object. We assign the value correctly here.
  const dataset = Array.isArray(data) ? data : data.dataset;
  /**
   * because we want to display all the possible table header keys
   * for each row of the dataset we try to find each possible key
   * and merge them into a array of unique values
   * this may not be performant or good UX for huge heterogenous datasets
   * because it require to run a recursive exploratory function on each member of the dataset
   * and it may show to many column to the end user
   */
  const keys = dataset.reduce((accumulator, currentValue) => (0, _lodash.union)(getKeys(currentValue, flat), accumulator), []);
  const headers = getHeaders(keys, flat, props.id);
  const tableClassName = (0, _classnames.default)(_TableModule.default.table, 'tc-object-viewer', 'table table-bordered table-striped table-hover');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
    className: tableClassName,
    id: props.id,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("caption", {
      className: "sr-only",
      children: title
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
        children: buildContentHeaders(headers, data.schema)
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
      children: dataset.map((row, index) => {
        const flattenRow = flat ? (0, _toflat.default)(row) : row;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
          children: headers.map(({
            key,
            id
          }, j) => {
            const path = getAbsolutePath(index, key, flat);
            return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              headers: id,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_JSONLike.default, {
                data: flattenRow[key],
                ...props,
                jsonpath: path,
                nativeValueClassName: _TableModule.default.nativevalue
              })
            }, j);
          })
        }, index);
      })
    })]
  });
}
Table.displayName = 'Table';
Table.propTypes = {
  id: _propTypes.default.string.isRequired,
  title: _propTypes.default.string.isRequired,
  flat: _propTypes.default.bool,
  data: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number, _propTypes.default.string, _propTypes.default.object, _propTypes.default.array]).isRequired
};
var _default = exports.default = Table;
//# sourceMappingURL=Table.component.js.map