@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/components/ModalTab/index.js

@@ -0,0 +1,60 @@
+/**
+ *
+ * ModalTab
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded } from '@buffetjs/core';
+
+import { getTrad } from '../../utils';
+import Wrapper from './Wrapper';
+import IntlText from '../IntlText';
+import Count from './Count';
+
+const ModalTab = ({ isDisabled, label, to, isActive, onClick, count }) => {
+  const handleClick = e => {
+    if (isDisabled) {
+      e.preventDefault();
+
+      return;
+    }
+
+    onClick(to);
+  };
+
+  return (
+    <Padded right size="lg">
+      <Wrapper isActive={isActive} isDisabled={isDisabled} onClick={handleClick}>
+        <Flex>
+          <IntlText
+            id={getTrad(`modal.nav.${label}`)}
+            textTransform="uppercase"
+            fontWeight={isActive ? 'bold' : 'semiBold'}
+            color={isActive ? 'mediumBlue' : 'grey'}
+          />
+          {typeof count === 'number' && <Count count={count} isActive={isActive} />}
+        </Flex>
+      </Wrapper>
+    </Padded>
+  );
+};
+
+ModalTab.defaultProps = {
+  count: null,
+  isActive: false,
+  isDisabled: false,
+  onClick: () => {},
+};
+
+ModalTab.propTypes = {
+  count: PropTypes.number,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  to: PropTypes.string.isRequired,
+};
+
+export default ModalTab;

package/admin/src/components/PlayIcon/Play.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Play = ({ fill, ...rest }) => (
+  <svg width="48px" height="52px" viewBox="0 0 48 52" {...rest} xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <filter
+        x="-1.7%"
+        y="-2.1%"
+        width="103.5%"
+        height="104.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+        <feColorMatrix
+          values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        />
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </defs>
+    <g id="Prototype---Media-library" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Media-Library-/-Single-view-/-Media-Video"
+        transform="translate(-545.000000, -435.000000)"
+        fill={fill}
+        fillRule="nonzero"
+      >
+        <g
+          id="Modal---Upload-from-Unsplash"
+          filter="url(#filter-1)"
+          transform="translate(323.000000, 182.000000)"
+        >
+          <g id="Video" transform="translate(25.000000, 79.000000)">
+            <g id="Group-17" transform="translate(169.000000, 151.000000)">
+              <g id="play" transform="translate(32.000000, 25.000000)">
+                <path
+                  d="M39.3461265,22.97086 L1.5920398,43.9516702 C1.15612414,44.1980573 0.781805259,44.2264866 0.469083156,44.0369581 C0.156361052,43.8474295 0,43.5062781 0,43.0135039 L0,1.16560057 C0,0.672826344 0.156361052,0.331674959 0.469083156,0.142146411 C0.781805259,-0.0473821369 1.15612414,-0.0189528548 1.5920398,0.227434257 L39.3461265,21.2082445 C39.7820422,21.4546316 40,21.7484009 40,22.0895522 C40,22.4307036 39.7820422,22.7244729 39.3461265,22.97086 Z"
+                  id="Path"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+Play.defaultProps = {
+  fill: '#fff',
+};
+
+Play.propTypes = {
+  fill: PropTypes.string,
+};
+
+export default Play;

package/admin/src/components/PlayIcon/Wrapper.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: ${({ small }) => (small ? '45px' : '94px')};
+  height: ${({ small }) => (small ? '45px' : '94px')};
+  padding-left: ${({ small }) => (small ? '5px' : '9px')};
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+`;
+
+Wrapper.defaultProps = {
+  small: false,
+};
+
+Wrapper.propTypes = {
+  small: PropTypes.bool,
+};
+
+export default Wrapper;

package/admin/src/components/PlayIcon/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Wrapper from './Wrapper';
+import Play from './Play';
+
+const PlayIcon = ({ small }) => {
+  return (
+    <Wrapper small={small}>
+      <Play fill="#000000" width={small ? '23px' : '49px'} height={small ? '25px' : '52px'} />
+    </Wrapper>
+  );
+};
+
+PlayIcon.defaultProps = {
+  small: false,
+};
+
+PlayIcon.propTypes = {
+  small: PropTypes.bool,
+};
+
+export default PlayIcon;

package/admin/src/components/SelectAll/Wrapper.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 30px;
+  width: 35px;
+  background: #ffffff;
+  border: 1px solid #e3e9f3;
+  border-radius: 2px;
+  > div {
+    margin: auto;
+    > label {
+      margin-left: 0;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/SelectAll/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const SelectAll = ({ checked, onChange, someChecked }) => {
+  return (
+    <Wrapper>
+      <Checkbox name="selectAll" onChange={onChange} value={checked} someChecked={someChecked} />
+    </Wrapper>
+  );
+};
+
+SelectAll.defaultProps = {
+  checked: false,
+  onChange: () => {},
+  someChecked: false,
+};
+
+SelectAll.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  someChecked: PropTypes.bool,
+};
+
+export default SelectAll;

package/admin/src/components/SelectedAssets/DraggableCard.js

@@ -0,0 +1,149 @@
+import React, { useRef, useEffect } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import PropTypes from 'prop-types';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { Flex } from '@buffetjs/core';
+import { getFileExtension } from 'strapi-helper-plugin';
+import { formatBytes, getType, ItemTypes } from '../../utils';
+
+import Border from '../CardBorder';
+import CardImgWrapper from '../CardImgWrapper';
+import CardPreview from '../CardPreview';
+import ErrorMessage from '../CardErrorMessage';
+import FileInfos from '../FileInfos';
+import Title from '../CardTitle';
+import Tag from '../Tag';
+import Wrapper from '../CardWrapper';
+
+const DraggableCard = ({
+  id,
+  checked,
+  children,
+  errorMessage,
+  ext,
+  hasError,
+  index,
+  isDraggable,
+  mime,
+  moveAsset,
+  name,
+  onClick,
+  size,
+  type,
+  url,
+  withFileCaching,
+}) => {
+  const ref = useRef(null);
+  // Adapted from https://react-dnd.github.io/react-dnd/examples/sortable/simple
+  const [, drop] = useDrop({
+    accept: ItemTypes.MEDIA_CARD,
+    hover(item) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Directly move the asset for faster reorder
+      // It doing so makes lot of computations though
+      moveAsset(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+  });
+
+  const fileSize = formatBytes(size, 0);
+  const fileType = mime || type;
+
+  const [{ isDragging }, drag, preview] = useDrag({
+    item: { type: ItemTypes.MEDIA_CARD, id, index, checked, url, fileType },
+    canDrag: () => isDraggable,
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  // Remove the default preview when the item is being dragged
+  // The preview is handled by the DragLayer
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  const opacity = isDragging ? 0.2 : 1;
+
+  const handleClick = () => {
+    onClick(id);
+  };
+
+  drag(drop(ref));
+
+  return (
+    <Wrapper onClick={handleClick} isDraggable={isDraggable} ref={ref} style={{ opacity }}>
+      <CardImgWrapper checked={checked} small>
+        <CardPreview
+          extension={getFileExtension(ext)}
+          hasError={hasError}
+          url={url}
+          type={fileType}
+          withFileCaching={withFileCaching}
+        />
+        <Border color={hasError ? 'orange' : 'mediumBlue'} shown={checked || hasError} />
+        {children}
+      </CardImgWrapper>
+      <Flex>
+        <Title>{name}</Title>
+        <Tag label={getType(fileType)} />
+      </Flex>
+      <FileInfos extension={getFileExtension(ext)} size={fileSize} />
+      {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
+    </Wrapper>
+  );
+};
+
+DraggableCard.defaultProps = {
+  checked: false,
+  children: null,
+  errorMessage: null,
+  ext: null,
+  id: null,
+  index: 0,
+  isDraggable: false,
+  hasError: false,
+  mime: null,
+  moveAsset: () => {},
+  name: null,
+  onClick: () => {},
+  size: 0,
+  type: null,
+  url: null,
+  withFileCaching: true,
+};
+
+DraggableCard.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+  errorMessage: PropTypes.string,
+  ext: PropTypes.string,
+  hasError: PropTypes.bool,
+  index: PropTypes.number,
+  isDraggable: PropTypes.bool,
+  mime: PropTypes.string,
+  moveAsset: PropTypes.func,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.number,
+  type: PropTypes.string,
+  url: PropTypes.string,
+  withFileCaching: PropTypes.bool,
+};
+
+export default DraggableCard;

package/admin/src/components/SelectedAssets/ListTitleWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ListTitleWrapper = styled.div`
+  margin-top: 23px;
+`;
+
+export default ListTitleWrapper;

package/admin/src/components/SelectedAssets/ListWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  margin-top: 1.5rem;
+`;
+
+export default ListWrapper;

package/admin/src/components/SelectedAssets/SortableList.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import { get } from 'lodash';
+import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import DraggableCard from './DraggableCard';
+import CardControlsWrapper from '../CardControlsWrapper';
+import ListWrapper from '../ListWrapper';
+import CardControl from '../CardControl';
+
+const SortableList = ({
+  allowedActions,
+  canSelect,
+  data,
+  moveAsset,
+  noNavigation,
+  onChange,
+  onClickEditFile,
+  selectedItems,
+}) => {
+  const handleClick = e => {
+    e.stopPropagation();
+  };
+
+  return (
+    <ListWrapper small>
+      <div className="row">
+        {data.map((item, index) => {
+          const { id } = item;
+          const url = get(item, ['formats', 'thumbnail', 'url'], item.url);
+          const checked = selectedItems.findIndex(file => file.id === id) !== -1;
+          const fileUrl = prefixFileUrlWithBackendUrl(url);
+          const handleEditClick = e => {
+            e.stopPropagation();
+            onClickEditFile(id);
+          };
+
+          return (
+            <div className="col-xs-12 col-md-6 col-xl-3" key={id || index}>
+              <DraggableCard
+                checked={checked}
+                {...item}
+                url={fileUrl}
+                moveAsset={moveAsset}
+                isDraggable
+                index={index}
+              >
+                {(checked || canSelect) && (
+                  <CardControlsWrapper leftAlign displayed className="card-control-wrapper">
+                    <Checkbox
+                      name={`${id}`}
+                      onChange={onChange}
+                      onClick={handleClick}
+                      value={checked}
+                    />
+                  </CardControlsWrapper>
+                )}
+                {!noNavigation && allowedActions.canUpdate && (
+                  <CardControlsWrapper className="card-control-wrapper card-control-wrapper-hidden">
+                    <CardControl
+                      small
+                      title="edit"
+                      color="#9EA7B8"
+                      type="pencil"
+                      onClick={e => handleEditClick(e)}
+                    />
+                  </CardControlsWrapper>
+                )}
+              </DraggableCard>
+            </div>
+          );
+        })}
+      </div>
+    </ListWrapper>
+  );
+};
+
+SortableList.defaultProps = {
+  allowedActions: {
+    canUpdate: false,
+  },
+  canSelect: true,
+  data: [],
+  moveAsset: () => {},
+  noNavigation: false,
+  onChange: () => {},
+  onClickEditFile: () => {},
+  selectedItems: [],
+};
+
+SortableList.propTypes = {
+  allowedActions: PropTypes.object,
+  canSelect: PropTypes.bool,
+  data: PropTypes.array,
+  moveAsset: PropTypes.func,
+  noNavigation: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClickEditFile: PropTypes.func,
+  selectedItems: PropTypes.array,
+};
+
+export default SortableList;

package/admin/src/components/SelectedAssets/Wrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
+export default Wrapper;

package/admin/src/components/SelectedAssets/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Flex } from '@buffetjs/core';
+
+import { getTrad } from '../../utils';
+import IntlText from '../IntlText';
+import ListTitle from '../UploadList/ListTitle';
+import useModalContext from '../../hooks/useModalContext';
+import SortableList from './SortableList';
+import Wrapper from './Wrapper';
+import ListTitleWrapper from './ListTitleWrapper';
+import ListWrapper from './ListWrapper';
+
+const SelectedAssets = () => {
+  const {
+    allowedActions,
+    selectedFiles,
+    handleFileSelection,
+    handleGoToEditFile,
+    moveAsset,
+    noNavigation,
+  } = useModalContext();
+  const filesToUploadLength = selectedFiles.length;
+  const titleId = `modal.upload-list.sub-header-title.${
+    filesToUploadLength > 1 ? 'plural' : 'singular'
+  }`;
+
+  return (
+    <Wrapper>
+      <Flex justifyContent="space-between">
+        <ListTitleWrapper>
+          <ListTitle id={getTrad(titleId)} values={{ number: filesToUploadLength }} />
+          <IntlText
+            id={getTrad('modal.upload-list.sub-header-subtitle')}
+            values={{ number: filesToUploadLength }}
+            fontSize="sm"
+            color="grey"
+          />
+        </ListTitleWrapper>
+      </Flex>
+      <ListWrapper>
+        <SortableList
+          allowedActions={allowedActions}
+          data={selectedFiles}
+          moveAsset={moveAsset}
+          noNavigation={noNavigation}
+          onChange={handleFileSelection}
+          onClickEditFile={handleGoToEditFile}
+          selectedItems={selectedFiles}
+        />
+      </ListWrapper>
+    </Wrapper>
+  );
+};
+
+export default SelectedAssets;

package/admin/src/components/SortList/Wrapper.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+import { Text } from '@buffetjs/core';
+
+const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
+  margin-bottom: 0;
+  padding: 0;
+  min-width: 230px;
+  list-style-type: none;
+  background-color: ${({ theme }) => theme.main.colors.white};
+`;
+
+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
+export default Wrapper;

package/admin/src/components/SortList/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Wrapper from './Wrapper';
+import SortListItem from '../SortListItem';
+
+const SortList = ({ list, onClick, selectedItem }) => {
+  return (
+    <Wrapper>
+      {Object.keys(list).map(item => {
+        return (
+          <SortListItem
+            key={item}
+            label={item}
+            value={list[item]}
+            onClick={onClick}
+            selectedItem={selectedItem}
+          />
+        );
+      })}
+    </Wrapper>
+  );
+};
+
+SortList.defaultProps = {
+  list: {},
+  onClick: () => {},
+  selectedItem: null,
+};
+
+SortList.propTypes = {
+  list: PropTypes.object,
+  onClick: PropTypes.func,
+  selectedItem: PropTypes.string,
+};
+
+export default SortList;

package/admin/src/components/SortListItem/Wrapper.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const SortListItem = styled.li`
+  padding: 0 14px;
+  height: 27px;
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+  }
+  ${({ isActive, theme }) =>
+  isActive &&
+    `
+    background-color: ${theme.main.colors.mediumGrey};
+  `}
+`;
+
+SortListItem.defaultProps = {
+  isActive: false,
+};
+
+SortListItem.propTypes = {
+  isActive: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default SortListItem;

package/admin/src/components/SortListItem/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getTrad } from '../../utils';
+
+import Wrapper from './Wrapper';
+import IntlText from '../IntlText';
+
+const SortListItem = ({ onClick, selectedItem, label, value }) => {
+  const handleClick = () => {
+    onClick({ target: { name: '_sort', value } });
+  };
+
+  return (
+    <Wrapper isActive={selectedItem === value} onClick={handleClick}>
+      <IntlText id={getTrad(`sort.${label}`)} lineHeight="27px" />
+    </Wrapper>
+  );
+};
+
+SortListItem.defaultProps = {
+  selectedItem: null,
+  label: '',
+  onClick: () => {},
+  value: null,
+};
+
+SortListItem.propTypes = {
+  selectedItem: PropTypes.string,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default SortListItem;