Add count remaining files

Signed-off-by: soupette <cyril@strapi.io>

examples/getstarted/src/api/temp/content-types/temp/schema.json

@@ -45,6 +45,20 @@
           "localized": true
         }
       }
+    },
+    "multiple": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos"
+      ],
+      "type": "media",
+      "multiple": true,
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      }
     }
   }
 }

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Row } from '@strapi/parts/Row';
+import { TableLabel } from '@strapi/parts/Text';
+
+const Wrapper = styled(Row)`
+  position: relative;
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background: ${({ theme }) => theme.colors.neutral150};
+  padding-left: 1px;
+  z-index: ${({ hovering }) => (hovering ? 1 : undefined)};
+
+  span {
+    line-height: 0.6rem;
+    font-size: 0.6rem;
+  }
+`;
+
+const FileWrapper = ({ children, preview }) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+
+  return (
+    <Wrapper
+      justifyContent="center"
+      alignItems="center"
+      hovering={preview && previewVisible}
+      onMouseEnter={() => setPreviewVisible(true)}
+      onMouseLeave={() => setPreviewVisible(false)}
+    >
+      <TableLabel textColor="neutral600">{children}</TableLabel>
+    </Wrapper>
+  );
+};
+
+FileWrapper.defaultProps = {
+  preview: true,
+};
+
+FileWrapper.propTypes = {
+  children: PropTypes.string.isRequired,
+  preview: PropTypes.bool,
+};
+
+export default FileWrapper;

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/index.js

@@ -1,28 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Avatar } from '@strapi/parts/Avatar';
 import { Tooltip } from '@strapi/parts/Tooltip';
-import { TableLabel } from '@strapi/parts/Text';
-import { Row } from '@strapi/parts/Row';
-
 import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
-
-// TODO: this is very temporary until we get a design
-const FileWrapper = styled(Row)`
-  position: relative;
-  border-radius: 50%;
-  width: 26px;
-  height: 26px;
-  border: 1px solid ${({ theme }) => theme.colors.neutral200};
-  background: ${({ theme }) => theme.colors.neutral150};
-  padding-left: 1px;
-
-  span {
-    line-height: 0.6rem;
-    font-size: 0.6rem;
-  }
-`;
+import FileWrapper from './FileWrapper';
 
 const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
   const fileURL = prefixFileUrlWithBackendUrl(url);
@@ -39,9 +20,7 @@ const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
 
   return (
     <Tooltip description={fileName}>
-      <FileWrapper justifyContent="center" alignItems="center">
-        <TableLabel textColor="neutral600">{fileExtension}</TableLabel>
-      </FileWrapper>
+      <FileWrapper>{fileExtension}</FileWrapper>
     </Tooltip>
   );
 };

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { AvatarGroup } from '@strapi/parts/Avatar';
 import Media from './Media';
+import FileWrapper from './Media/FileWrapper';
 
 const MultipleMedia = ({ value }) => {
   return (
@@ -9,6 +10,20 @@ const MultipleMedia = ({ value }) => {
       {value.map((file, index) => {
         const key = `${file.id}${index}`;
 
+        if (index === 3) {
+          const remainingFiles = `+${value.length - 3}`;
+
+          return (
+            <FileWrapper key={key} preview={false}>
+              {remainingFiles}
+            </FileWrapper>
+          );
+        }
+
+        if (index > 3) {
+          return null;
+        }
+
         return <Media key={key} {...file} />;
       })}
     </AvatarGroup>