strapi/packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js

import React from 'react';
import { isEmpty } from 'lodash';
import { PageFooter } from 'strapi-helper-plugin';
import { Flex, Padded } from '@buffetjs/core';

import { generatePageFromStart, generateStartFromPage } from '../../utils';
import Filters from '../Filters';
import List from '../List';
import ListEmpty from '../ListEmpty';
import SelectAll from '../SelectAll';
import SortPicker from '../SortPicker';
import useModalContext from '../../hooks/useModalContext';
import Wrapper from './Wrapper';
import CardControl from '../CardControl';

const BrowseAssets = () => {
  const {
    allowedActions,
    allowedTypes,
    count,
    files,
    goTo,
    handleAllFilesSelection,
    handleFileSelection,
    handleGoToEditFile,
    multiple,
    noNavigation,
    params,
    removeFilter,
    selectedFiles,
    setParam,
  } = useModalContext();

  const handleChangeParams = ({ target: { name, value } }) => {
    setParam({ name, value });
  };

  const handleChangeListParams = ({ target: { name, value } }) => {
    if (name.includes('_page')) {
      handleChangeParams({
        target: { name: '_start', value: generateStartFromPage(value, params._limit) },
      });
    } else {
      handleChangeParams({ target: { name: '_limit', value } });
    }
  };

  const handleDeleteFilter = index => {
    removeFilter(index);
  };

  const handleGoToUpload = () => {
    goTo('browse');
  };

  const limit = parseInt(params._limit, 10) || 10;
  const start = parseInt(params._start, 10) || 0;
  const canSelectFile = multiple === true || (selectedFiles.length < 1 && !multiple);

  const handleCheckboxChange = ({ target: { name } }) => {
    handleListCardClick(name);
  };

  const handleListCardClick = id => {
    if (!canSelectFile && id !== selectedFiles[0].id) {
      handleFileSelection({
        target: {
          name: selectedFiles[0].id,
        },
      });
    }

    handleFileSelection({
      target: {
        name: id,
      },
    });
  };

  /* eslint-disable indent */
  /* eslint-disable react/jsx-indent */
  const renderCardControl = noNavigation
    ? null
    : id => {
        if (!allowedActions.canUpdate) {
          return null;
        }

        return (
          <CardControl
            small
            title="edit"
            color="#9EA7B8"
            type="pencil"
            onClick={e => {
              e.stopPropagation();
              handleGoToEditFile(id);
            }}
          />
        );
      };

  /* eslint-enable indent */
  /* eslint-enable react/jsx-indent */

  const paginationParams = {
    _limit: parseInt(params._limit, 10) || 10,
    _page: generatePageFromStart(start, limit),
  };

  const hasSomeCheckboxSelected = files.some(file =>
    selectedFiles.find(selectedFile => file.id === selectedFile.id)
  );
  const areAllCheckboxesSelected =
    files.every(file => selectedFiles.find(selectedFile => file.id === selectedFile.id)) &&
    hasSomeCheckboxSelected;

  const hasFilters = !isEmpty(params.filters.filter(filter => !filter.isDisabled));
  const hasSearch = !isEmpty(params._q);
  const areResultsEmptyWithSearchOrFilters = isEmpty(files) && (hasSearch || hasFilters);

  return (
    <>
      <Wrapper>
        <Padded top>
          {allowedActions.canRead && (
            <Flex flexWrap="wrap">
              {multiple && (
                <Padded right size="sm">
                  <SelectAll
                    checked={areAllCheckboxesSelected}
                    onChange={handleAllFilesSelection}
                    someChecked={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
                  />
                </Padded>
              )}
              <SortPicker onChange={handleChangeParams} value={params._sort} />
              <Padded left size="sm" />
              <Filters
                filters={params.filters}
                onChange={handleChangeParams}
                onClick={handleDeleteFilter}
              />
            </Flex>
          )}
        </Padded>
        {!files || files.length === 0 ? (
          <ListEmpty
            canCreate={allowedActions.canCreate}
            numberOfRows={2}
            onClick={handleGoToUpload}
            hasSearchApplied={areResultsEmptyWithSearchOrFilters}
          />
        ) : (
          <>
            <List
              data={files}
              onChange={handleCheckboxChange}
              selectedItems={selectedFiles}
              onCardClick={handleListCardClick}
              allowedTypes={allowedTypes}
              smallCards
              renderCardControl={renderCardControl}
            />
            <Padded left right>
              <Padded left right size="xs">
                <PageFooter
                  context={{ emitEvent: () => {} }}
                  count={count}
                  onChangeParams={handleChangeListParams}
                  params={paginationParams}
                />
              </Padded>
            </Padded>
          </>
        )}
      </Wrapper>
    </>
  );
};

export default BrowseAssets;