function FileList({
  files,
  isLoading = false,
  selectedFile,
  onSelectFile,
  onUseFile,
  noFilesMessage,
}) {
  /** @param {string} isoString */
  const formatDate = isoString => new Date(isoString).toLocaleDateString();
  const columns = [
    {
      label: 'Name',
    },
    {
      label: 'Last modified',
      classes: 'FileList__date-header',
    },
  ];

  return (
    <Table
      accessibleLabel="File list"
      classes="FileList"
      emptyItemsMessage={noFilesMessage}
      tableHeaders={columns}
      isLoading={isLoading}
      items={files}
      selectedItem={selectedFile}
      onSelectItem={onSelectFile}
      onUseItem={onUseFile}
      renderItem={(file, isSelected) => (
        <>
          <td aria-label={file.display_name}>
            <div className="hyp-u-layout-row--align-center hyp-u-horizontal-spacing hyp-u-padding--left--2">
              <Icon
                name={file.type && file.type === 'Folder' ? 'folder' : 'pdf'}
                classes={classnames('FileList__icon', {
                  'is-selected': isSelected,
                })}
              />
              <div className="hyp-u-stretch u-line-height">
                {file.display_name}
              </div>
            </div>
          </td>
          <td>{file.updated_at && formatDate(file.updated_at)}</td>
        </>
      )}
    />
  );
}
/**
 * List of the files within a single directory.
 *
 * @param {FileListProps} props
 */
List of the files within a single directory.
List of the files within a single directory .
function FileList({
  files,
  isLoading = false,
  selectedFile,
  onSelectFile,
  onUseFile,
  noFilesMessage,
}) {
  const formatDate = isoString => new Date(isoString).toLocaleDateString();
  const columns = [
    {
      label: 'Name',
    },
    {
      label: 'Last modified',
      classes: 'FileList__date-header',
    },
  ];
  return (
    <Table
      accessibleLabel="File list"
      classes="FileList"
      emptyItemsMessage={noFilesMessage}
      tableHeaders={columns}
      isLoading={isLoading}
      items={files}
      selectedItem={selectedFile}
      onSelectItem={onSelectFile}
      onUseItem={onUseFile}
      renderItem={(file, isSelected) => (
        <>
          <td aria-label={file.display_name}>
            <div className="hyp-u-layout-row--align-center hyp-u-horizontal-spacing hyp-u-padding--left--2">
              <Icon
                name={file.type && file.type === 'Folder' ? 'folder' : 'pdf'}
                classes={classnames('FileList__icon', {
                  'is-selected': isSelected,
                })}
              />
              <div className="hyp-u-stretch u-line-height">
                {file.display_name}
              </div>
            </div>
          </td>
          <td>{file.updated_at && formatDate(file.updated_at)}</td>
        </>
      )}
    />
  );
}
function FileList ( { files , isLoading = false , selectedFile , onSelectFile , onUseFile , noFilesMessage , } ) { const formatDate = isoString => new Date ( isoString ) . toLocaleDateString ( ) ; const columns = [ { label : 'Name' , } , { label : 'Last modified' , classes : 'FileList__date-header' , } , ] ; return ( < Table accessibleLabel = "File list" classes = "FileList" emptyItemsMessage = { noFilesMessage } tableHeaders = { columns } isLoading = { isLoading } items = { files } selectedItem = { selectedFile } onSelectItem = { onSelectFile } onUseItem = { onUseFile } renderItem = { ( file , isSelected ) => ( < > < td aria-label = { file . display_name } > < div className = "hyp-u-layout-row--align-center hyp-u-horizontal-spacing hyp-u-padding--left--2" > < Icon name = { file . type && file . type === 'Folder' ? 'folder' : 'pdf' } classes = { classnames ( 'FileList__icon' , { 'is-selected' : isSelected , } ) } / > < div className = "hyp-u-stretch u-line-height" > { file . display_name } < / div > < / div > < / td > < td > { file . updated_at && formatDate ( file . updated_at ) } < / td > < / > ) } / > ) ; }
List of the files within a single directory.
List of the files within a single directory .
/** @param {string} isoString */