@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/components/InputMedia/CardControlWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const CardControlWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 1;
+  opacity: 0;
+`;
+
+export default CardControlWrapper;

package/admin/src/components/InputMedia/CardPreviewWrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import CardControlWrapper from './CardControlWrapper';
+
+const CardPreviewWrapper = styled.div`
+  position: relative;
+  height: 20rem;
+  &:hover ${CardControlWrapper} {
+    opacity: 1;
+  }
+`;
+
+export default CardPreviewWrapper;

package/admin/src/components/InputMedia/Chevron/Wrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  z-index: 1;
+  padding: 1rem;
+  background-color: ${({ theme }) => theme.main.colors['gray-dark']};
+  cursor: pointer;
+`;
+
+export default Wrapper;

package/admin/src/components/InputMedia/Chevron/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+
+import Wrapper from './Wrapper';
+
+const Chevron = ({ side, onClick }) => (
+  <Wrapper onClick={onClick}>
+    <FontAwesomeIcon color="white" icon={`chevron-${side}`} />
+  </Wrapper>
+);
+
+Chevron.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  side: PropTypes.string,
+};
+Chevron.defaultProps = {
+  side: 'right',
+};
+
+export default Chevron;

package/admin/src/components/InputMedia/EmptyInputMedia.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils';
+import IconUpload from './IconUpload';
+
+const EmptyInputMediaWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  background-color: ${({ theme, isInDropZone }) =>
+    isInDropZone ? '#515764' : theme.main.colors.black};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+  & * {
+    pointer-events: none;
+  }
+`;
+
+const EmptyInputMedia = ({ children, ...props }) => {
+  const { formatMessage } = useIntl();
+
+  const [isInDropZone, setIsInDropZone] = useState(false);
+
+  const handleDragEnter = () => setIsInDropZone(true);
+  const handleResetDropZone = () => setIsInDropZone(false);
+
+  const titleSvgTranslate = formatMessage({ id: getTrad('input.placeholder.icon') });
+
+  return (
+    <EmptyInputMediaWrapper
+      {...props}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleResetDropZone}
+      onDrop={handleResetDropZone}
+      isInDropZone={isInDropZone}
+    >
+      <IconUpload title={titleSvgTranslate} />
+      {isInDropZone ? null : children}
+    </EmptyInputMediaWrapper>
+  );
+};
+
+EmptyInputMedia.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+EmptyInputMedia.defaultProps = {
+  disabled: false,
+};
+
+export default EmptyInputMedia;

package/admin/src/components/InputMedia/EmptyText.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import IntlText from '../IntlText';
+
+const EmptyText = styled(IntlText)`
+  position: absolute;
+  width: 17rem;
+  margin-top: -0.3rem;
+  line-height: 1.8rem;
+  text-align: center;
+  color: ${({ theme }) => theme.main.colors.white};
+`;
+
+export default EmptyText;

package/admin/src/components/InputMedia/ErrorMessage.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { colors } from '@buffetjs/styles';
+
+const ErrorMessage = styled.p`
+  font-size: 1.3rem !important;
+  padding-top: 5px;
+  margin: 0;
+  color: ${colors.darkOrange};
+`;
+
+export default ErrorMessage;

package/admin/src/components/InputMedia/IconUpload.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IconUpload = ({ title, ...props }) => {
+  return (
+    <svg
+      width="105"
+      height="84"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      {...props}
+    >
+      <title>{title}</title>
+      <defs>
+        <rect id="a" y="1.354" width="77.333" height="62.292" rx="4" />
+        <rect id="b" y="1.354" width="77.333" height="62.292" rx="4" />
+      </defs>
+      <g fill="none" fillRule="evenodd" opacity=".05">
+        <g transform="rotate(-12 75.8 12.214)">
+          <use fill="#FAFAFB" xlinkHref="#a" />
+          <rect stroke="#979797" x=".5" y="1.854" width="76.333" height="61.292" rx="4" />
+        </g>
+        <path
+          d="M74.255 36.05l3.942 18.544-57.385 12.198-1.689-7.948L29.35 42.827l7.928 5.236 16.363-25.628L74.255 36.05zM71.974 6.078l-65.21 13.86a1.272 1.272 0 0 0-.833.589 1.311 1.311 0 0 0-.19 1.014l10.7 50.334c.076.358.27.641.584.849.314.207.648.273 1.001.198l65.21-13.86c.353-.076.63-.272.833-.589.203-.317.266-.655.19-1.014l-10.7-50.334a1.311 1.311 0 0 0-.584-.849 1.272 1.272 0 0 0-1.001-.198zm6.803-.061L89.475 56.35c.387 1.822.08 3.517-.921 5.085-1.001 1.568-2.399 2.543-4.192 2.924L19.152 78.22c-1.793.381-3.466.06-5.019-.966-1.552-1.026-2.522-2.45-2.91-4.27L.525 22.65c-.387-1.822-.08-3.517.921-5.085 1.001-1.568 2.399-2.543 4.192-2.924L70.848.78c1.793-.381 3.466-.06 5.019.966 1.552 1.026 2.522 2.45 2.91 4.27z"
+          fill="#333740"
+          fillRule="nonzero"
+        />
+        <g>
+          <g transform="rotate(15 7.723 110.16)">
+            <use fill="#FAFAFB" xlinkHref="#b" />
+            <rect stroke="#979797" x=".5" y="1.854" width="76.333" height="61.292" rx="4" />
+          </g>
+          <path
+            d="M49.626 26.969c-.584 2.18-1.832 3.832-3.744 4.955-1.911 1.123-3.94 1.398-6.086.822-2.147-.575-3.767-1.827-4.86-3.755-1.094-1.929-1.35-3.983-.765-6.163.584-2.18 1.832-3.832 3.743-4.955 1.912-1.124 3.94-1.398 6.087-.823s3.767 1.827 4.86 3.756c1.094 1.928 1.349 3.983.765 6.163zm37.007 26.74L81.726 72.02 25.058 56.836l2.103-7.848 16.384-9.63 4.687 8.266 26.214-15.406 12.187 21.49zm11.574-27.742L33.812 8.712a1.272 1.272 0 0 0-1.01.146c-.324.19-.533.463-.628.817L18.855 59.38c-.095.354-.05.695.136 1.022.186.327.453.538.802.631l64.395 17.255c.349.093.685.045 1.01-.146.324-.19.533-.463.628-.817L99.145 27.62c.095-.354.05-.695-.136-1.022a1.272 1.272 0 0 0-.802-.631zm6.09 3.033l-13.32 49.705c-.481 1.799-1.524 3.17-3.128 4.112-1.605.943-3.292 1.177-5.063.703L18.39 66.265c-1.771-.474-3.115-1.52-4.033-3.14-.918-1.618-1.136-3.327-.654-5.125L27.022 8.295c.482-1.799 1.525-3.17 3.13-4.112 1.604-.943 3.291-1.177 5.062-.703L99.61 20.735c1.771.474 3.115 1.52 4.033 3.14.918 1.618 1.136 3.327.654 5.125z"
+            fill="#333740"
+            fillRule="nonzero"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+IconUpload.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default IconUpload;

package/admin/src/components/InputMedia/InputFilePreview.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import { Flex } from '@buffetjs/core';
+
+import CardPreview from '../CardPreview';
+import Chevron from './Chevron';
+
+const InputFilePreview = ({ file, onClick, isSlider }) => {
+  const fileUrl = prefixFileUrlWithBackendUrl(get(file, ['formats', 'small', 'url'], file.url));
+
+  return (
+    <Flex
+      key={file.id}
+      style={{ height: '100%' }}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      {isSlider && <Chevron side="left" onClick={() => onClick(false)} />}
+      <CardPreview hasIcon url={fileUrl} type={file.mime} />
+      {isSlider && <Chevron side="right" onClick={() => onClick(true)} />}
+    </Flex>
+  );
+};
+
+InputFilePreview.propTypes = {
+  file: PropTypes.object,
+  isSlider: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};
+InputFilePreview.defaultProps = {
+  isSlider: false,
+  file: null,
+};
+
+export default InputFilePreview;

package/admin/src/components/InputMedia/Name.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Label } from '@buffetjs/core';
+
+const Name = styled(Label)`
+  display: block;
+  text-transform: none;
+  margin-bottom: 1rem;
+`;
+
+export default Name;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: ${({ hasError }) => (hasError ? '1.7rem' : '2.3rem')};
+`;
+
+Wrapper.defaultProps = {
+  hasError: false,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,238 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { get, isEmpty } from 'lodash';
+import {
+  CheckPermissions,
+  LabelIconWrapper,
+  prefixFileUrlWithBackendUrl,
+} from 'strapi-helper-plugin';
+import pluginPermissions from '../../permissions';
+import { getTrad, formatFileForEditing } from '../../utils';
+import CardControl from '../CardControl';
+import CardControlWrapper from './CardControlWrapper';
+import CardPreviewWrapper from './CardPreviewWrapper';
+import EmptyInputMedia from './EmptyInputMedia';
+import EmptyText from './EmptyText';
+import InputFilePreview from './InputFilePreview';
+import InputModalStepper from '../../containers/InputModalStepper';
+import Name from './Name';
+import Wrapper from './Wrapper';
+import Input from '../Input';
+import ErrorMessage from './ErrorMessage';
+
+const InputMedia = ({
+  disabled,
+  label,
+  onChange,
+  name,
+  attribute,
+  value,
+  type,
+  id,
+  error,
+  labelIcon,
+}) => {
+  const [modal, setModal] = useState({
+    isOpen: false,
+    step: 'list',
+    fileToEdit: null,
+    isDisplayed: false,
+  });
+  const [fileToDisplay, setFileToDisplay] = useState(0);
+  const hasNoValue = !!value && Array.isArray(value) && value.length === 0;
+  const currentFile = attribute.multiple ? value[fileToDisplay] : value;
+  const fileURL = get(currentFile, ['url'], null);
+  const prefixedFileURL = fileURL ? prefixFileUrlWithBackendUrl(fileURL) : null;
+  const displaySlidePagination =
+    attribute.multiple && value.length > 1 ? ` (${fileToDisplay + 1}/${value.length})` : '';
+  const inputId = id || name;
+  const errorId = `error-${inputId}`;
+
+  useEffect(() => {
+    setFileToDisplay(0);
+  }, [modal.isOpen]);
+
+  const handleClickToggleModal = () => {
+    if (!disabled) {
+      setModal(prev => ({
+        isDisplayed: true,
+        step: 'list',
+        isOpen: !prev.isOpen,
+        fileToEdit: null,
+      }));
+    }
+  };
+
+  const handleClosed = () => setModal(prev => ({ ...prev, isDisplayed: false }));
+
+  const handleChange = v => {
+    onChange({ target: { name, type, value: v } });
+  };
+
+  const handleFilesNavigation = displayNext => {
+    if (attribute.multiple) {
+      if (displayNext && fileToDisplay === value.length - 1) {
+        setFileToDisplay(0);
+
+        return;
+      }
+
+      if (!displayNext && fileToDisplay === 0) {
+        setFileToDisplay(value.length - 1);
+      } else {
+        setFileToDisplay(prev => (displayNext ? prev + 1 : prev - 1));
+      }
+    }
+  };
+
+  const handleRemoveFile = () => {
+    const newValue = attribute.multiple
+      ? value.filter((file, index) => index !== fileToDisplay)
+      : null;
+
+    if (Array.isArray(newValue) && fileToDisplay === newValue.length) {
+      setFileToDisplay(fileToDisplay > 0 ? fileToDisplay - 1 : fileToDisplay);
+    }
+
+    handleChange(newValue);
+  };
+
+  const handleEditFile = () => {
+    setModal(() => ({
+      isDisplayed: true,
+      isOpen: true,
+      step: 'edit',
+      fileToEdit: formatFileForEditing(currentFile),
+    }));
+  };
+
+  const handleCopy = () => {
+    strapi.notification.toggle({
+      type: 'info',
+      message: { id: 'notification.link-copied' },
+    });
+  };
+
+  const handleAllowDrop = e => e.preventDefault();
+
+  const handleDrop = e => {
+    e.preventDefault();
+    e.persist();
+
+    if (e.dataTransfer) {
+      setModal(() => ({
+        isDisplayed: true,
+        isOpen: true,
+        step: 'upload',
+        filesToUpload: e.dataTransfer.files,
+      }));
+    }
+  };
+
+  return (
+    <Wrapper hasError={!isEmpty(error)}>
+      <Name htmlFor={name}>
+        <span>{`${label}${displaySlidePagination}`}</span>
+        {labelIcon && <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>}
+      </Name>
+
+      <CardPreviewWrapper onDragOver={handleAllowDrop} onDrop={handleDrop}>
+        <CardControlWrapper>
+          {!disabled && (
+            <CardControl
+              small
+              title="add"
+              color="#9EA7B8"
+              type="plus"
+              onClick={handleClickToggleModal}
+            />
+          )}
+          {!hasNoValue && !disabled && (
+            <>
+              <CheckPermissions permissions={pluginPermissions.update}>
+                <CardControl
+                  small
+                  title="edit"
+                  color="#9EA7B8"
+                  type="pencil"
+                  onClick={handleEditFile}
+                />
+              </CheckPermissions>
+              <CheckPermissions permissions={pluginPermissions.copyLink}>
+                <CopyToClipboard onCopy={handleCopy} text={prefixedFileURL}>
+                  <CardControl small title="copy-link" color="#9EA7B8" type="link" />
+                </CopyToClipboard>
+              </CheckPermissions>
+              <CardControl
+                small
+                title="delete"
+                color="#9EA7B8"
+                type="trash-alt"
+                onClick={handleRemoveFile}
+              />
+            </>
+          )}
+        </CardControlWrapper>
+        {hasNoValue ? (
+          <EmptyInputMedia onClick={handleClickToggleModal} disabled={disabled}>
+            <EmptyText id={getTrad('input.placeholder')} />
+          </EmptyInputMedia>
+        ) : (
+          <InputFilePreview
+            isSlider={attribute.multiple && value.length > 1}
+            file={currentFile}
+            onClick={handleFilesNavigation}
+          />
+        )}
+        <Input type="file" name={name} />
+      </CardPreviewWrapper>
+      {modal.isDisplayed && (
+        <InputModalStepper
+          isOpen={modal.isOpen}
+          onClosed={handleClosed}
+          step={modal.step}
+          fileToEdit={modal.fileToEdit}
+          filesToUpload={modal.filesToUpload}
+          multiple={attribute.multiple}
+          onInputMediaChange={handleChange}
+          selectedFiles={value}
+          onToggle={handleClickToggleModal}
+          allowedTypes={attribute.allowedTypes}
+        />
+      )}
+      {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}
+    </Wrapper>
+  );
+};
+
+InputMedia.propTypes = {
+  attribute: PropTypes.shape({
+    allowedTypes: PropTypes.arrayOf(PropTypes.string),
+    multiple: PropTypes.bool,
+    required: PropTypes.bool,
+    type: PropTypes.string,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.string,
+  }),
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  type: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+InputMedia.defaultProps = {
+  disabled: false,
+  id: null,
+  error: null,
+  label: '',
+  labelIcon: null,
+  value: null,
+};
+
+export default InputMedia;

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import ContainerFluid from '../ContainerFluid';
+
+const Wrapper = styled(ContainerFluid)`
+  margin-bottom: 0.3rem;
+  padding-top: 2.3rem;
+
+  textarea {
+    height: 10.1rem;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Inputs } from '@buffetjs/custom';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import PropTypes from 'prop-types';
+import Wrapper from './Wrapper';
+import { getTrad } from '../../utils';
+
+const InputUploadURL = ({ errors, onChange, value }) => {
+  const { formatMessage } = useGlobalContext();
+  const label = formatMessage({ id: getTrad('input.url.label') });
+  const description = formatMessage({ id: getTrad('input.url.description') });
+  const error = errors ? formatMessage({ id: errors.id }, { number: errors.number }) : null;
+
+  return (
+    <Wrapper>
+      <div className="row">
+        <div className="col-12">
+          <Inputs
+            autoFocus
+            error={error}
+            type="textarea"
+            name="url"
+            onChange={onChange}
+            label={label}
+            description={description}
+            value={value.join('\n')}
+          />
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+InputUploadURL.defaultProps = {
+  errors: null,
+  onChange: () => {},
+  value: [],
+};
+
+InputUploadURL.propTypes = {
+  errors: PropTypes.object,
+  onChange: PropTypes.func,
+  value: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default InputUploadURL;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { Text } from '@buffetjs/core';
+
+const IntlText = ({ id, defaultMessage, values, ...textProps }) => (
+  <FormattedMessage id={id} defaultMessage={defaultMessage} values={values}>
+    {msg => <Text {...textProps}>{msg}</Text>}
+  </FormattedMessage>
+);
+
+IntlText.defaultProps = {
+  id: 'app.utils.defaultMessage',
+  defaultMessage: '',
+  values: {},
+};
+
+IntlText.propTypes = {
+  id: PropTypes.string,
+  defaultMessage: PropTypes.string,
+  values: PropTypes.object,
+  // TODO - textProps type to specify
+};
+
+export default IntlText;

package/admin/src/components/List/ListCell.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const ListCell = styled.div`
+  width: 100%;
+  display: inline-block;
+  padding-left: 15px;
+  padding-right: 15px;
+  @media only screen and (min-width: 768px) {
+    width: 50%;
+  }
+  @media only screen and (min-width: 1024px) {
+    width: 25%;
+  }
+  @media only screen and (min-width: 1280px) {
+    max-width: 248px;
+  }
+`;
+
+export default ListCell;

package/admin/src/components/List/ListRow.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Row } from 'reactstrap';
+
+const ListRow = styled(Row)`
+  padding-top: 13px;
+`;
+
+export default ListRow;