@pranaysahith/decap-cms-core 3.9.1

package/src/components/MediaLibrary/MediaLibraryTop.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+
+import MediaLibrarySearch from './MediaLibrarySearch';
+import MediaLibraryHeader from './MediaLibraryHeader';
+import {
+  UploadButton,
+  DeleteButton,
+  DownloadButton,
+  CopyToClipBoardButton,
+  InsertButton,
+} from './MediaLibraryButtons';
+
+const LibraryTop = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+
+const RowContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ButtonsContainer = styled.div`
+  flex-shrink: 0;
+`;
+
+function MediaLibraryTop({
+  t,
+  onClose,
+  privateUpload,
+  forImage,
+  onDownload,
+  onUpload,
+  query,
+  onSearchChange,
+  onSearchKeyDown,
+  searchDisabled,
+  onDelete,
+  canInsert,
+  onInsert,
+  hasSelection,
+  isPersisting,
+  isDeleting,
+  selectedFile,
+}) {
+  const shouldShowButtonLoader = isPersisting || isDeleting;
+  const uploadEnabled = !shouldShowButtonLoader;
+  const deleteEnabled = !shouldShowButtonLoader && hasSelection;
+
+  const uploadButtonLabel = isPersisting
+    ? t('mediaLibrary.mediaLibraryModal.uploading')
+    : t('mediaLibrary.mediaLibraryModal.upload');
+  const deleteButtonLabel = isDeleting
+    ? t('mediaLibrary.mediaLibraryModal.deleting')
+    : t('mediaLibrary.mediaLibraryModal.deleteSelected');
+  const downloadButtonLabel = t('mediaLibrary.mediaLibraryModal.download');
+  const insertButtonLabel = t('mediaLibrary.mediaLibraryModal.chooseSelected');
+
+  return (
+    <LibraryTop>
+      <RowContainer>
+        <MediaLibraryHeader
+          onClose={onClose}
+          title={`${privateUpload ? t('mediaLibrary.mediaLibraryModal.private') : ''}${
+            forImage
+              ? t('mediaLibrary.mediaLibraryModal.images')
+              : t('mediaLibrary.mediaLibraryModal.mediaAssets')
+          }`}
+          isPrivate={privateUpload}
+        />
+        <ButtonsContainer>
+          <CopyToClipBoardButton
+            disabled={!hasSelection}
+            path={selectedFile.path}
+            name={selectedFile.name}
+            draft={selectedFile.draft}
+            t={t}
+          />
+          <DownloadButton onClick={onDownload} disabled={!hasSelection}>
+            {downloadButtonLabel}
+          </DownloadButton>
+          <UploadButton
+            label={uploadButtonLabel}
+            imagesOnly={forImage}
+            onChange={onUpload}
+            disabled={!uploadEnabled}
+          />
+        </ButtonsContainer>
+      </RowContainer>
+      <RowContainer>
+        <MediaLibrarySearch
+          value={query}
+          onChange={onSearchChange}
+          onKeyDown={onSearchKeyDown}
+          placeholder={t('mediaLibrary.mediaLibraryModal.search')}
+          disabled={searchDisabled}
+        />
+        <ButtonsContainer>
+          <DeleteButton onClick={onDelete} disabled={!deleteEnabled}>
+            {deleteButtonLabel}
+          </DeleteButton>
+          {!canInsert ? null : (
+            <InsertButton onClick={onInsert} disabled={!hasSelection}>
+              {insertButtonLabel}
+            </InsertButton>
+          )}
+        </ButtonsContainer>
+      </RowContainer>
+    </LibraryTop>
+  );
+}
+
+MediaLibraryTop.propTypes = {
+  t: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  privateUpload: PropTypes.bool,
+  forImage: PropTypes.bool,
+  onDownload: PropTypes.func.isRequired,
+  onUpload: PropTypes.func.isRequired,
+  query: PropTypes.string,
+  onSearchChange: PropTypes.func.isRequired,
+  onSearchKeyDown: PropTypes.func.isRequired,
+  searchDisabled: PropTypes.bool.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  canInsert: PropTypes.bool,
+  onInsert: PropTypes.func.isRequired,
+  hasSelection: PropTypes.bool.isRequired,
+  isPersisting: PropTypes.bool,
+  isDeleting: PropTypes.bool,
+  selectedFile: PropTypes.oneOfType([
+    PropTypes.shape({
+      path: PropTypes.string.isRequired,
+      draft: PropTypes.bool.isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+    PropTypes.shape({}),
+  ]),
+};
+
+export default MediaLibraryTop;

package/src/components/MediaLibrary/__tests__/MediaLibraryButtons.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CopyToClipBoardButton } from '../MediaLibraryButtons';
+
+describe('CopyToClipBoardButton', () => {
+  const props = {
+    disabled: false,
+    t: jest.fn(key => key),
+  };
+
+  it('should use copy text when no path is defined', () => {
+    const { container } = render(<CopyToClipBoardButton {...props} />);
+
+    expect(container).toHaveTextContent('mediaLibrary.mediaLibraryCard.copy');
+  });
+
+  it('should use copyUrl text when path is absolute and is draft', () => {
+    const { container } = render(
+      <CopyToClipBoardButton {...props} path="https://www.images.com/image.png" draft />,
+    );
+
+    expect(container).toHaveTextContent('mediaLibrary.mediaLibraryCard.copyUrl');
+  });
+
+  it('should use copyUrl text when path is absolute and is not draft', () => {
+    const { container } = render(
+      <CopyToClipBoardButton {...props} path="https://www.images.com/image.png" />,
+    );
+
+    expect(container).toHaveTextContent('mediaLibrary.mediaLibraryCard.copyUrl');
+  });
+
+  it('should use copyName when path is not absolute and is draft', () => {
+    const { container } = render(<CopyToClipBoardButton {...props} path="image.png" draft />);
+
+    expect(container).toHaveTextContent('mediaLibrary.mediaLibraryCard.copyName');
+  });
+
+  it('should use copyPath when path is not absolute and is not draft', () => {
+    const { container } = render(<CopyToClipBoardButton {...props} path="image.png" />);
+
+    expect(container).toHaveTextContent('mediaLibrary.mediaLibraryCard.copyPath');
+  });
+});

package/src/components/MediaLibrary/__tests__/MediaLibraryCard.spec.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Map } from 'immutable';
+import { render } from '@testing-library/react';
+
+import MediaLibraryCard from '../MediaLibraryCard';
+
+describe('MediaLibraryCard', () => {
+  const props = {
+    displayURL: Map({ url: 'url' }),
+    text: 'image.png',
+    onClick: jest.fn(),
+    draftText: 'Draft',
+    width: '100px',
+    height: '240px',
+    margin: '10px',
+    isViewableImage: true,
+    loadDisplayURL: jest.fn(),
+  };
+
+  it('should match snapshot for non draft image', () => {
+    const { asFragment, queryByTestId } = render(<MediaLibraryCard {...props} />);
+
+    expect(queryByTestId('draft-text')).toBeNull();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should match snapshot for draft image', () => {
+    const { asFragment, getByTestId } = render(<MediaLibraryCard {...props} isDraft={true} />);
+    expect(getByTestId('draft-text')).toHaveTextContent('Draft');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should match snapshot for non viewable image', () => {
+    const { asFragment, getByTestId } = render(
+      <MediaLibraryCard {...props} isViewableImage={false} type="Not Viewable" />,
+    );
+    expect(getByTestId('card-file-icon')).toHaveTextContent('Not Viewable');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should call loadDisplayURL on mount when url is empty', () => {
+    const loadDisplayURL = jest.fn();
+    render(
+      <MediaLibraryCard {...props} loadDisplayURL={loadDisplayURL} displayURL={Map({ url: '' })} />,
+    );
+
+    expect(loadDisplayURL).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap

@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100px;
+  height: 240px;
+  margin: 10px;
+  border: solid 2px #dfdfe3;
+  border-radius: 5px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-2 {
+  height: 162px;
+  background-color: #f2f2f2;
+  -webkit-background-size: 16px 16px;
+  background-size: 16px 16px;
+  -webkit-background-position: 0 0,8px 8px;
+  background-position: 0 0,8px 8px;
+  background-image: linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      ),linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      );
+  box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
+  border-bottom: solid 2px #dfdfe3;
+  position: relative;
+}
+
+.emotion-4 {
+  color: #70399f;
+  background-color: #f6d8ff;
+  position: absolute;
+  padding: 8px;
+  border-radius: 5px 0 5px 0;
+}
+
+.emotion-6 {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  border-radius: 2px 2px 0 0;
+}
+
+.emotion-8 {
+  color: #798291;
+  padding: 8px;
+  margin-top: 20px;
+  overflow-wrap: break-word;
+  line-height: 1.3!important;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    height="240px"
+    tabindex="-1"
+    width="100px"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <p
+        class="emotion-4 emotion-5"
+        data-testid="draft-text"
+      >
+        Draft
+      </p>
+      <img
+        class="emotion-6 emotion-7"
+        loading="lazy"
+        src="url"
+      />
+    </div>
+    <p
+      class="emotion-8 emotion-9"
+    >
+      image.png
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100px;
+  height: 240px;
+  margin: 10px;
+  border: solid 2px #dfdfe3;
+  border-radius: 5px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-2 {
+  height: 162px;
+  background-color: #f2f2f2;
+  -webkit-background-size: 16px 16px;
+  background-size: 16px 16px;
+  -webkit-background-position: 0 0,8px 8px;
+  background-position: 0 0,8px 8px;
+  background-image: linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      ),linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      );
+  box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
+  border-bottom: solid 2px #dfdfe3;
+  position: relative;
+}
+
+.emotion-4 {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  border-radius: 2px 2px 0 0;
+}
+
+.emotion-6 {
+  color: #798291;
+  padding: 8px;
+  margin-top: 20px;
+  overflow-wrap: break-word;
+  line-height: 1.3!important;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    height="240px"
+    tabindex="-1"
+    width="100px"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <img
+        class="emotion-4 emotion-5"
+        loading="lazy"
+        src="url"
+      />
+    </div>
+    <p
+      class="emotion-6 emotion-7"
+    >
+      image.png
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MediaLibraryCard should match snapshot for non viewable image 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100px;
+  height: 240px;
+  margin: 10px;
+  border: solid 2px #dfdfe3;
+  border-radius: 5px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-2 {
+  height: 162px;
+  background-color: #f2f2f2;
+  -webkit-background-size: 16px 16px;
+  background-size: 16px 16px;
+  -webkit-background-position: 0 0,8px 8px;
+  background-position: 0 0,8px 8px;
+  background-image: linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      ),linear-gradient(
+        45deg,
+        #e6e6e6 25%,
+        transparent 25%,
+        transparent 75%,
+        #e6e6e6 75%,
+        #e6e6e6
+      );
+  box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
+  border-bottom: solid 2px #dfdfe3;
+  position: relative;
+}
+
+.emotion-4 {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 2px 2px 0 0;
+  padding: 1em;
+  font-size: 3em;
+}
+
+.emotion-6 {
+  color: #798291;
+  padding: 8px;
+  margin-top: 20px;
+  overflow-wrap: break-word;
+  line-height: 1.3!important;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    height="240px"
+    tabindex="-1"
+    width="100px"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-4 emotion-5"
+        data-testid="card-file-icon"
+      >
+        Not Viewable
+      </div>
+    </div>
+    <p
+      class="emotion-6 emotion-7"
+    >
+      image.png
+    </p>
+  </div>
+</DocumentFragment>
+`;

package/src/components/UI/DragDrop.js

@@ -0,0 +1,66 @@
+import { HTML5Backend as ReactDNDHTML5Backend } from 'react-dnd-html5-backend';
+import {
+  DndProvider as ReactDNDProvider,
+  DragSource as ReactDNDDragSource,
+  DropTarget as ReactDNDDropTarget,
+} from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function DragSource({ namespace, ...props }) {
+  const DragComponent = ReactDNDDragSource(
+    namespace,
+    {
+      // eslint-disable-next-line no-unused-vars
+      beginDrag({ children, isDragging, connectDragComponent, ...ownProps }) {
+        // We return the rest of the props as the ID of the element being dragged.
+        return ownProps;
+      },
+    },
+    connect => ({
+      connectDragComponent: connect.dragSource(),
+    }),
+  )(({ children, connectDragComponent }) => children(connectDragComponent));
+
+  return React.createElement(DragComponent, props, props.children);
+}
+
+DragSource.propTypes = {
+  namespace: PropTypes.any.isRequired,
+  children: PropTypes.func.isRequired,
+};
+
+export function DropTarget({ onDrop, namespace, ...props }) {
+  const DropComponent = ReactDNDDropTarget(
+    namespace,
+    {
+      drop(ownProps, monitor) {
+        onDrop(monitor.getItem());
+      },
+    },
+    (connect, monitor) => ({
+      connectDropTarget: connect.dropTarget(),
+      isHovered: monitor.isOver(),
+    }),
+  )(({ children, connectDropTarget, isHovered }) => children(connectDropTarget, { isHovered }));
+
+  return React.createElement(DropComponent, props, props.children);
+}
+
+DropTarget.propTypes = {
+  onDrop: PropTypes.func.isRequired,
+  namespace: PropTypes.any.isRequired,
+  children: PropTypes.func.isRequired,
+};
+
+export function HTML5DragDrop(WrappedComponent) {
+  return class HTML5DragDrop extends React.Component {
+    render() {
+      return (
+        <ReactDNDProvider backend={ReactDNDHTML5Backend}>
+          <WrappedComponent {...this.props} />
+        </ReactDNDProvider>
+      );
+    }
+  };
+}