@pranaysahith/decap-cms-core 3.9.1

package/src/components/MediaLibrary/MediaLibraryCard.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { colors, borders, lengths, shadows, effects } from 'decap-cms-ui-default';
+
+const IMAGE_HEIGHT = 160;
+
+const Card = styled.div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  margin: ${props => props.margin};
+  border: ${borders.textField};
+  border-color: ${props => props.isSelected && colors.active};
+  border-radius: ${lengths.borderRadius};
+  cursor: pointer;
+  overflow: hidden;
+  background-color: ${props => props.isPrivate && colors.textFieldBorder};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const CardImageWrapper = styled.div`
+  height: ${IMAGE_HEIGHT + 2}px;
+  ${effects.checkerboard};
+  ${shadows.inset};
+  border-bottom: solid ${lengths.borderWidth} ${colors.textFieldBorder};
+  position: relative;
+`;
+
+const CardImage = styled.img`
+  width: 100%;
+  height: ${IMAGE_HEIGHT}px;
+  object-fit: contain;
+  border-radius: 2px 2px 0 0;
+`;
+
+const CardFileIcon = styled.div`
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 2px 2px 0 0;
+  padding: 1em;
+  font-size: 3em;
+`;
+
+const CardText = styled.p`
+  color: ${colors.text};
+  padding: 8px;
+  margin-top: 20px;
+  overflow-wrap: break-word;
+  line-height: 1.3 !important;
+`;
+
+const DraftText = styled.p`
+  color: ${colors.mediaDraftText};
+  background-color: ${colors.mediaDraftBackground};
+  position: absolute;
+  padding: 8px;
+  border-radius: ${lengths.borderRadius} 0 ${lengths.borderRadius} 0;
+`;
+
+class MediaLibraryCard extends React.Component {
+  render() {
+    const {
+      isSelected,
+      displayURL,
+      text,
+      onClick,
+      draftText,
+      width,
+      height,
+      margin,
+      isPrivate,
+      type,
+      isViewableImage,
+      isDraft,
+    } = this.props;
+    const url = displayURL.get('url');
+    return (
+      <Card
+        isSelected={isSelected}
+        onClick={onClick}
+        width={width}
+        height={height}
+        margin={margin}
+        tabIndex="-1"
+        isPrivate={isPrivate}
+      >
+        <CardImageWrapper>
+          {isDraft ? <DraftText data-testid="draft-text">{draftText}</DraftText> : null}
+          {url && isViewableImage ? (
+            <CardImage loading="lazy" src={url} />
+          ) : (
+            <CardFileIcon data-testid="card-file-icon">{type}</CardFileIcon>
+          )}
+        </CardImageWrapper>
+        <CardText>{text}</CardText>
+      </Card>
+    );
+  }
+  componentDidMount() {
+    const { displayURL, loadDisplayURL } = this.props;
+    if (!displayURL.get('url')) {
+      loadDisplayURL();
+    }
+  }
+}
+
+MediaLibraryCard.propTypes = {
+  isSelected: PropTypes.bool,
+  displayURL: ImmutablePropTypes.map.isRequired,
+  text: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  draftText: PropTypes.string.isRequired,
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired,
+  margin: PropTypes.string.isRequired,
+  isPrivate: PropTypes.bool,
+  type: PropTypes.string,
+  isViewableImage: PropTypes.bool.isRequired,
+  loadDisplayURL: PropTypes.func.isRequired,
+  isDraft: PropTypes.bool,
+};
+
+export default MediaLibraryCard;

package/src/components/MediaLibrary/MediaLibraryCardGrid.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Waypoint } from 'react-waypoint';
+import { Map } from 'immutable';
+import { colors } from 'decap-cms-ui-default';
+import { FixedSizeGrid as Grid } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import MediaLibraryCard from './MediaLibraryCard';
+
+function CardWrapper(props) {
+  const {
+    rowIndex,
+    columnIndex,
+    style,
+    data: {
+      mediaItems,
+      isSelectedFile,
+      onAssetClick,
+      cardDraftText,
+      cardWidth,
+      cardHeight,
+      isPrivate,
+      displayURLs,
+      loadDisplayURL,
+      columnCount,
+      gutter,
+    },
+  } = props;
+  const index = rowIndex * columnCount + columnIndex;
+  if (index >= mediaItems.length) {
+    return null;
+  }
+  const file = mediaItems[index];
+
+  return (
+    <div
+      tabIndex="0"
+      style={{
+        ...style,
+        left: style.left + gutter * columnIndex,
+        top: style.top + gutter,
+        width: style.width - gutter,
+        height: style.height - gutter,
+      }}
+    >
+      <MediaLibraryCard
+        key={file.key}
+        isSelected={isSelectedFile(file)}
+        text={file.name}
+        onClick={() => onAssetClick(file)}
+        isDraft={file.draft}
+        draftText={cardDraftText}
+        width={cardWidth}
+        height={cardHeight}
+        margin={'0px'}
+        isPrivate={isPrivate}
+        displayURL={displayURLs.get(file.id, file.url ? Map({ url: file.url }) : Map())}
+        loadDisplayURL={() => loadDisplayURL(file)}
+        type={file.type}
+        isViewableImage={file.isViewableImage}
+      />
+    </div>
+  );
+}
+
+function VirtualizedGrid(props) {
+  const { mediaItems, setScrollContainerRef } = props;
+
+  return (
+    <CardGridContainer ref={setScrollContainerRef}>
+      <AutoSizer>
+        {({ height, width }) => {
+          const cardWidth = parseInt(props.cardWidth, 10);
+          const cardHeight = parseInt(props.cardHeight, 10);
+          const gutter = parseInt(props.cardMargin, 10);
+          const columnWidth = cardWidth + gutter;
+          const rowHeight = cardHeight + gutter;
+          const columnCount = Math.floor(width / columnWidth);
+          const rowCount = Math.ceil(mediaItems.length / columnCount);
+          return (
+            <Grid
+              columnCount={columnCount}
+              columnWidth={columnWidth}
+              rowCount={rowCount}
+              rowHeight={rowHeight}
+              width={width}
+              height={height}
+              itemData={{ ...props, gutter, columnCount }}
+            >
+              {CardWrapper}
+            </Grid>
+          );
+        }}
+      </AutoSizer>
+    </CardGridContainer>
+  );
+}
+
+function PaginatedGrid({
+  setScrollContainerRef,
+  mediaItems,
+  isSelectedFile,
+  onAssetClick,
+  cardDraftText,
+  cardWidth,
+  cardHeight,
+  cardMargin,
+  isPrivate,
+  displayURLs,
+  loadDisplayURL,
+  canLoadMore,
+  onLoadMore,
+  isPaginating,
+  paginatingMessage,
+}) {
+  return (
+    <CardGridContainer ref={setScrollContainerRef}>
+      <CardGrid>
+        {mediaItems.map(file => (
+          <MediaLibraryCard
+            key={file.key}
+            isSelected={isSelectedFile(file)}
+            text={file.name}
+            onClick={() => onAssetClick(file)}
+            isDraft={file.draft}
+            draftText={cardDraftText}
+            width={cardWidth}
+            height={cardHeight}
+            margin={cardMargin}
+            isPrivate={isPrivate}
+            displayURL={displayURLs.get(file.id, file.url ? Map({ url: file.url }) : Map())}
+            loadDisplayURL={() => loadDisplayURL(file)}
+            type={file.type}
+            isViewableImage={file.isViewableImage}
+          />
+        ))}
+        {!canLoadMore ? null : <Waypoint onEnter={onLoadMore} />}
+      </CardGrid>
+      {!isPaginating ? null : (
+        <PaginatingMessage isPrivate={isPrivate}>{paginatingMessage}</PaginatingMessage>
+      )}
+    </CardGridContainer>
+  );
+}
+
+const CardGridContainer = styled.div`
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const CardGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+
+  margin-left: -10px;
+  margin-right: -10px;
+`;
+
+const PaginatingMessage = styled.h1`
+  color: ${props => props.isPrivate && colors.textFieldBorder};
+`;
+
+function MediaLibraryCardGrid(props) {
+  const { canLoadMore, isPaginating } = props;
+  if (canLoadMore || isPaginating) {
+    return <PaginatedGrid {...props} />;
+  }
+  return <VirtualizedGrid {...props} />;
+}
+
+MediaLibraryCardGrid.propTypes = {
+  setScrollContainerRef: PropTypes.func.isRequired,
+  mediaItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayURL: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+      id: PropTypes.string.isRequired,
+      key: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      draft: PropTypes.bool,
+    }),
+  ).isRequired,
+  isSelectedFile: PropTypes.func.isRequired,
+  onAssetClick: PropTypes.func.isRequired,
+  canLoadMore: PropTypes.bool,
+  onLoadMore: PropTypes.func.isRequired,
+  isPaginating: PropTypes.bool,
+  paginatingMessage: PropTypes.string,
+  cardDraftText: PropTypes.string.isRequired,
+  cardWidth: PropTypes.string.isRequired,
+  cardMargin: PropTypes.string.isRequired,
+  loadDisplayURL: PropTypes.func.isRequired,
+  isPrivate: PropTypes.bool,
+  displayURLs: PropTypes.instanceOf(Map).isRequired,
+};
+
+export default MediaLibraryCardGrid;

package/src/components/MediaLibrary/MediaLibraryHeader.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Icon, shadows, colors, buttons } from 'decap-cms-ui-default';
+
+const CloseButton = styled.button`
+  ${buttons.button};
+  ${shadows.dropMiddle};
+  position: absolute;
+  margin-right: -40px;
+  left: -40px;
+  top: -40px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: white;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LibraryTitle = styled.h1`
+  line-height: 36px;
+  font-size: 22px;
+  text-align: left;
+  margin-bottom: 25px;
+  color: ${props => props.isPrivate && colors.textFieldBorder};
+`;
+
+function MediaLibraryHeader({ onClose, title, isPrivate }) {
+  return (
+    <div>
+      <CloseButton onClick={onClose}>
+        <Icon type="close" />
+      </CloseButton>
+      <LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>
+    </div>
+  );
+}
+
+MediaLibraryHeader.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  isPrivate: PropTypes.bool,
+};
+
+export default MediaLibraryHeader;

package/src/components/MediaLibrary/MediaLibraryModal.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Map } from 'immutable';
+import isEmpty from 'lodash/isEmpty';
+import { translate } from 'react-polyglot';
+import { colors } from 'decap-cms-ui-default';
+
+import { Modal } from '../UI';
+import MediaLibraryTop from './MediaLibraryTop';
+import MediaLibraryCardGrid from './MediaLibraryCardGrid';
+import EmptyMessage from './EmptyMessage';
+
+/**
+ * Responsive styling needs to be overhauled. Current setup requires specifying
+ * widths per breakpoint.
+ */
+const cardWidth = `280px`;
+const cardHeight = `240px`;
+const cardMargin = `10px`;
+
+/**
+ * cardWidth + cardMargin * 2 = cardOutsideWidth
+ * (not using calc because this will be nested in other calcs)
+ */
+const cardOutsideWidth = `300px`;
+
+const StyledModal = styled(Modal)`
+  display: grid;
+  grid-template-rows: 120px auto;
+  width: calc(${cardOutsideWidth} + 20px);
+  background-color: ${props => props.isPrivate && colors.grayDark};
+
+  @media (min-width: 800px) {
+    width: calc(${cardOutsideWidth} * 2 + 20px);
+  }
+
+  @media (min-width: 1120px) {
+    width: calc(${cardOutsideWidth} * 3 + 20px);
+  }
+
+  @media (min-width: 1440px) {
+    width: calc(${cardOutsideWidth} * 4 + 20px);
+  }
+
+  @media (min-width: 1760px) {
+    width: calc(${cardOutsideWidth} * 5 + 20px);
+  }
+
+  @media (min-width: 2080px) {
+    width: calc(${cardOutsideWidth} * 6 + 20px);
+  }
+
+  h1 {
+    color: ${props => props.isPrivate && colors.textFieldBorder};
+  }
+
+  button:disabled,
+  label[disabled] {
+    background-color: ${props => props.isPrivate && `rgba(217, 217, 217, 0.15)`};
+  }
+`;
+
+function MediaLibraryModal({
+  isVisible,
+  canInsert,
+  files,
+  dynamicSearch,
+  dynamicSearchActive,
+  forImage,
+  isLoading,
+  isPersisting,
+  isDeleting,
+  hasNextPage,
+  isPaginating,
+  privateUpload,
+  query,
+  selectedFile,
+  handleFilter,
+  handleQuery,
+  toTableData,
+  handleClose,
+  handleSearchChange,
+  handleSearchKeyDown,
+  handlePersist,
+  handleDelete,
+  handleInsert,
+  handleDownload,
+  setScrollContainerRef,
+  handleAssetClick,
+  handleLoadMore,
+  loadDisplayURL,
+  displayURLs,
+  t,
+}) {
+  const filteredFiles = forImage ? handleFilter(files) : files;
+  const queriedFiles = !dynamicSearch && query ? handleQuery(query, filteredFiles) : filteredFiles;
+  const tableData = toTableData(queriedFiles);
+  const hasFiles = files && !!files.length;
+  const hasFilteredFiles = filteredFiles && !!filteredFiles.length;
+  const hasSearchResults = queriedFiles && !!queriedFiles.length;
+  const hasMedia = hasSearchResults;
+  const shouldShowEmptyMessage = !hasMedia;
+  const emptyMessage =
+    (isLoading && !hasMedia && t('mediaLibrary.mediaLibraryModal.loading')) ||
+    (dynamicSearchActive && t('mediaLibrary.mediaLibraryModal.noResults')) ||
+    (!hasFiles && t('mediaLibrary.mediaLibraryModal.noAssetsFound')) ||
+    (!hasFilteredFiles && t('mediaLibrary.mediaLibraryModal.noImagesFound')) ||
+    (!hasSearchResults && t('mediaLibrary.mediaLibraryModal.noResults'));
+
+  const hasSelection = hasMedia && !isEmpty(selectedFile);
+
+  return (
+    <StyledModal isOpen={isVisible} onClose={handleClose} isPrivate={privateUpload}>
+      <MediaLibraryTop
+        t={t}
+        onClose={handleClose}
+        privateUpload={privateUpload}
+        forImage={forImage}
+        onDownload={handleDownload}
+        onUpload={handlePersist}
+        query={query}
+        onSearchChange={handleSearchChange}
+        onSearchKeyDown={handleSearchKeyDown}
+        searchDisabled={!dynamicSearchActive && !hasFilteredFiles}
+        onDelete={handleDelete}
+        canInsert={canInsert}
+        onInsert={handleInsert}
+        hasSelection={hasSelection}
+        isPersisting={isPersisting}
+        isDeleting={isDeleting}
+        selectedFile={selectedFile}
+      />
+      {!shouldShowEmptyMessage ? null : (
+        <EmptyMessage content={emptyMessage} isPrivate={privateUpload} />
+      )}
+      <MediaLibraryCardGrid
+        setScrollContainerRef={setScrollContainerRef}
+        mediaItems={tableData}
+        isSelectedFile={file => selectedFile.key === file.key}
+        onAssetClick={handleAssetClick}
+        canLoadMore={hasNextPage}
+        onLoadMore={handleLoadMore}
+        isPaginating={isPaginating}
+        paginatingMessage={t('mediaLibrary.mediaLibraryModal.loading')}
+        cardDraftText={t('mediaLibrary.mediaLibraryCard.draft')}
+        cardWidth={cardWidth}
+        cardHeight={cardHeight}
+        cardMargin={cardMargin}
+        isPrivate={privateUpload}
+        loadDisplayURL={loadDisplayURL}
+        displayURLs={displayURLs}
+      />
+    </StyledModal>
+  );
+}
+
+export const fileShape = {
+  displayURL: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  id: PropTypes.string.isRequired,
+  key: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  queryOrder: PropTypes.number,
+  size: PropTypes.number,
+  path: PropTypes.string.isRequired,
+};
+
+MediaLibraryModal.propTypes = {
+  isVisible: PropTypes.bool,
+  canInsert: PropTypes.bool,
+  files: PropTypes.arrayOf(PropTypes.shape(fileShape)).isRequired,
+  dynamicSearch: PropTypes.bool,
+  dynamicSearchActive: PropTypes.bool,
+  forImage: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isPersisting: PropTypes.bool,
+  isDeleting: PropTypes.bool,
+  hasNextPage: PropTypes.bool,
+  isPaginating: PropTypes.bool,
+  privateUpload: PropTypes.bool,
+  query: PropTypes.string,
+  selectedFile: PropTypes.oneOfType([PropTypes.shape(fileShape), PropTypes.shape({})]),
+  handleFilter: PropTypes.func.isRequired,
+  handleQuery: PropTypes.func.isRequired,
+  toTableData: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  handleSearchChange: PropTypes.func.isRequired,
+  handleSearchKeyDown: PropTypes.func.isRequired,
+  handlePersist: PropTypes.func.isRequired,
+  handleDelete: PropTypes.func.isRequired,
+  handleInsert: PropTypes.func.isRequired,
+  setScrollContainerRef: PropTypes.func.isRequired,
+  handleAssetClick: PropTypes.func.isRequired,
+  handleLoadMore: PropTypes.func.isRequired,
+  loadDisplayURL: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  displayURLs: PropTypes.instanceOf(Map).isRequired,
+};
+
+export default translate()(MediaLibraryModal);

package/src/components/MediaLibrary/MediaLibrarySearch.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Icon, lengths, colors, zIndex } from 'decap-cms-ui-default';
+
+const SearchContainer = styled.div`
+  height: 37px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 400px;
+`;
+
+const SearchInput = styled.input`
+  background-color: #eff0f4;
+  border-radius: ${lengths.borderRadius};
+
+  font-size: 14px;
+  padding: 10px 6px 10px 32px;
+  width: 100%;
+  position: relative;
+  z-index: ${zIndex.zIndex1};
+
+  &:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px ${colors.active};
+  }
+`;
+
+const SearchIcon = styled(Icon)`
+  position: absolute;
+  top: 50%;
+  left: 6px;
+  z-index: ${zIndex.zIndex2};
+  transform: translate(0, -50%);
+`;
+
+function MediaLibrarySearch({ value, onChange, onKeyDown, placeholder, disabled }) {
+  return (
+    <SearchContainer>
+      <SearchIcon type="search" size="small" />
+      <SearchInput
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+      />
+    </SearchContainer>
+  );
+}
+
+MediaLibrarySearch.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default MediaLibrarySearch;