metadata-based-explorer1/es/features/metadata-based-view/MetadataBasedItemList.js

Box UI Elements

/**
 * 
 * @file Item list component
 * @author Box
 */
import React from 'react';
import classNames from 'classnames';
import { injectIntl } from 'react-intl';
import MultiGrid from 'react-virtualized/dist/es/MultiGrid/MultiGrid';
import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
import { getFileExtension } from '../../utils/file';
import FileIcon from '../../icons/file-icon';
import '../../elements/content-explorer/ItemList.scss';
import './MetadataBasedItemList.scss';
var FILENAME_COLUMN_WIDTH = 350;
var METADATA_MIN_COLUMN_WIDTH = 250;
var itemCollection;
var metadataColumns;

var getFileIcon = function getFileIcon() {
  var filename = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var ext = getFileExtension(filename);
  return ext ? React.createElement(FileIcon, {
    dimension: 32,
    extension: ext
  }) : React.createElement(FileIcon, {
    dimension: 32
  });
};

var getColumnWidth = function getColumnWidth(width) {
  var availableWidth = width - FILENAME_COLUMN_WIDTH; // Maintain min column width, else occupy the rest of the space equally

  var mdColumnWidth = Math.max(availableWidth / metadataColumns.length, METADATA_MIN_COLUMN_WIDTH);
  return function (_ref) {
    var index = _ref.index;
    return index === 0 ? 350 : mdColumnWidth;
  };
};

var getGridHeader = function getGridHeader(columnIndex) {
  if (columnIndex === 0) {
    // fixed column filename header
    return React.createElement("span", null, "Name");
  }

  return React.createElement("span", null, metadataColumns[columnIndex - 1]);
};

var getGridCell = function getGridCell(columnIndex, rowIndex) {
  var items = itemCollection.items;
  var item = items[rowIndex];

  if (columnIndex === 0) {
    // fixed column for filename
    return React.createElement("div", {
      className: "mv-grid-cell-fileinfo"
    }, getFileIcon(item.name), React.createElement("span", null, item.name));
  }

  var _items$rowIndex$metad = items[rowIndex].metadata,
      metadata = _items$rowIndex$metad === void 0 ? {} : _items$rowIndex$metad;
  var data = metadata.data;
  var mdFieldName = metadataColumns[columnIndex - 1];
  return React.createElement("div", null, data[mdFieldName]);
};

var cellRenderer = function cellRenderer(_ref2) {
  var columnIndex = _ref2.columnIndex,
      key = _ref2.key,
      rowIndex = _ref2.rowIndex,
      style = _ref2.style;

  if (rowIndex === 0) {
    // Render Header
    var displayName = getGridHeader(columnIndex);
    var headerClass = classNames('mv-column-header', {
      'mv-column-header-filename': columnIndex === 0
    });
    return React.createElement("button", {
      className: headerClass,
      type: "button",
      style: style
    }, displayName);
  } // Render data


  var cellData = getGridCell(columnIndex, rowIndex - 1);
  return React.createElement("div", {
    key: key,
    className: "mv-grid-cell",
    style: style
  }, cellData);
};

var MetadataBasedItemList = function MetadataBasedItemList(_ref3) {
  var currentCollection = _ref3.currentCollection,
      metadataColumnsToShow = _ref3.metadataColumnsToShow;
  var rowCount = currentCollection.items ? currentCollection.items.length : 0;
  itemCollection = currentCollection;
  metadataColumns = metadataColumnsToShow;
  return React.createElement(AutoSizer, null, function (_ref4) {
    var width = _ref4.width,
        height = _ref4.height;
    return React.createElement("div", {
      className: "mv-item-grid"
    }, React.createElement(MultiGrid, {
      cellRenderer: cellRenderer,
      classNameBottomLeftGrid: "mv-bottom-left-grid",
      classNameTopLeftGrid: "mv-top-left-grid",
      classNameTopRightGrid: "mv-top-right-grid",
      columnCount: metadataColumnsToShow.length + 1,
      columnWidth: getColumnWidth(width),
      enableFixedColumnScroll: true,
      fixedColumnCount: 1,
      fixedRowCount: 1,
      height: height,
      hideBottomLeftGridScrollbar: true,
      hideTopRightGridScrollbar: true,
      rowCount: rowCount + 1,
      rowHeight: 50,
      scrollToColumn: 0,
      scrollToRow: 0,
      width: width
    }));
  });
};

export default injectIntl(MetadataBasedItemList);