feat(mespapiers): Replace Thumbnail by cozy-ui one

cozy · Jun 1, 2023 · dd25050 · dd25050
1 parent c9b017d
commit dd25050
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 332 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/Papers/CategoryItemByPaper.jsx b/packages/cozy-mespapiers-lib/src/components/Papers/CategoryItemByPaper.jsx
@@ -4,13 +4,15 @@ import React from 'react'
 import { useClient } from 'cozy-client'
 import { FileImageLoader } from 'cozy-ui/transpiled/react/FileImageLoader'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
+import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
 
 import { useScannerI18n } from '../Hooks/useScannerI18n'
-import Thumbnail from '../Thumbnail'
 
 const CategoryItemByPaper = ({ papers, category, isLast, onClick }) => {
   const client = useClient()
@@ -26,9 +28,21 @@ const CategoryItemByPaper = ({ papers, category, isLast, onClick }) => {
             file={papers[0]}
             linkType="tiny"
             render={src => {
-              return <Thumbnail image={src} isStacked={isStacked} />
+              return (
+                <Thumbnail isStacked={isStacked}>
+                  {src ? (
+                    <img src={src} alt="" />
+                  ) : (
+                    <Skeleton variant="rect" animation="wave" />
+                  )}
+                </Thumbnail>
+              )
             }}
-            renderFallback={() => <Thumbnail isStacked={isStacked} />}
+            renderFallback={() => (
+              <Thumbnail>
+                <Icon icon={FiletypeTextIcon} />
+              </Thumbnail>
+            )}
           />
         </ListItemIcon>
         <ListItemText

diff --git a/packages/cozy-mespapiers-lib/src/components/Papers/PaperItem.jsx b/packages/cozy-mespapiers-lib/src/components/Papers/PaperItem.jsx
@@ -7,18 +7,21 @@ import { models, useClient } from 'cozy-client'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
+import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
+import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
 import ExpirationAnnotation from './ExpirationAnnotation'
 import RenameInput from './Renaming/RenameInput'
 import { useMultiSelection } from '../Hooks/useMultiSelection'
-import Thumbnail from '../Thumbnail'
 
 const { isExpired, isExpiringSoon } = models.paper
 
@@ -130,9 +133,21 @@ const PaperItem = ({
             file={paper}
             linkType="tiny"
             render={src => {
-              return <Thumbnail image={src} />
+              return (
+                <Thumbnail>
+                  {src ? (
+                    <img src={src} alt="" />
+                  ) : (
+                    <Skeleton variant="rect" animation="wave" />
+                  )}
+                </Thumbnail>
+              )
             }}
-            renderFallback={() => <Thumbnail />}
+            renderFallback={() => (
+              <Thumbnail>
+                <Icon icon={FiletypeTextIcon} />
+              </Thumbnail>
+            )}
           />
         </ListItemIcon>
         {isRenaming ? (

diff --git a/packages/cozy-mespapiers-lib/src/components/Thumbnail/Thumbnail.spec.jsx b/packages/cozy-mespapiers-lib/src/components/Thumbnail/Thumbnail.spec.jsx
diff --git a/packages/cozy-mespapiers-lib/src/components/Thumbnail/Thumbnail.styl b/packages/cozy-mespapiers-lib/src/components/Thumbnail/Thumbnail.styl