seahub/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js

import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import WikiDirListItem from './wiki-dir-list-item';

const propTypes = {
  path: PropTypes.string.isRequired,
  direntList: PropTypes.array.isRequired,
  onDirentClick: PropTypes.func.isRequired,
};

class WikiDirListView extends React.Component {

  render() {
    const isDesktop = Utils.isDesktop();
    return (
      <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
        <thead>
          {isDesktop ? (
            <tr>
              <th style={{ width: '4%' }}></th>
              <th style={{ width: '66%' }}>{gettext('Name')}</th>
              <th style={{ width: '15%' }}>{gettext('Size')}</th>
              <th style={{ width: '15%' }}>{gettext('Last Update')}</th>
            </tr>
          ) : (
            <tr>
              <th width="12%"></th>
              <th width="88%"></th>
            </tr>
          )}
        </thead>
        <tbody>
          {this.props.direntList.length !== 0 && this.props.direntList.map((dirent, index) => {
            return (
              <WikiDirListItem key={index} path={this.props.path} dirent={dirent} onDirentClick={this.props.onDirentClick}/>
            );
          })}
        </tbody>
      </table>
    );
  }
}

WikiDirListView.propTypes = propTypes;

export default WikiDirListView;