cozy-viewer 1.1.0

package/src/Footer/FooterContent.jsx

@@ -0,0 +1,102 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import BottomSheet, {
+  BottomSheetHeader
+} from 'cozy-ui/transpiled/react/BottomSheet'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import BottomSheetContent from './BottomSheetContent'
+import { extractChildrenCompByName } from './helpers'
+import PrintButton from '../components/PrintButton'
+import { isValidForPanel } from '../helpers'
+
+const FooterButtons = ({
+  file,
+  FooterActionButtonsWithFile = { FooterActionButtonsWithFile }
+}) => {
+  return (
+    <>
+      {FooterActionButtonsWithFile}
+      <PrintButton file={file} variant="button" />
+    </>
+  )
+}
+
+const useStyles = makeStyles(theme => ({
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'calc(100% - 2rem)',
+    height: '100%',
+    paddingLeft: '1rem',
+    paddingRight: '1rem',
+    borderTop: `1px solid ${theme.palette.divider}`,
+    columnGap: '0.5rem'
+  },
+  bottomSheetHeader: {
+    columnGap: '0.5rem'
+  }
+}))
+
+const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
+  const styles = useStyles()
+
+  const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
+
+  const FooterActionButtonsWithFile = extractChildrenCompByName({
+    children,
+    file,
+    name: 'FooterActionButtons'
+  })
+
+  const bottomSheetSettings = {
+    isOpenMin: isPublic ? true : false,
+    mediumHeightRatio: isPublic ? undefined : 0.5
+  }
+
+  if (isValidForPanel({ file })) {
+    return (
+      <BottomSheet
+        toolbarProps={toolbarProps}
+        portalProps={{ disablePortal: true }}
+        settings={bottomSheetSettings}
+      >
+        <BottomSheetHeader
+          className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}
+        >
+          <FooterButtons
+            file={file}
+            FooterActionButtonsWithFile={FooterActionButtonsWithFile}
+          />
+        </BottomSheetHeader>
+        <BottomSheetContent file={file} isPublic={isPublic} />
+      </BottomSheet>
+    )
+  }
+
+  // If `FooterActionButtons` hasn't children
+  if (!FooterActionButtonsWithFile) return null
+
+  return (
+    <div className={styles.footer}>
+      <FooterButtons
+        file={file}
+        FooterActionButtonsWithFile={FooterActionButtonsWithFile}
+      />
+    </div>
+  )
+}
+
+FooterContent.propTypes = {
+  file: PropTypes.object.isRequired,
+  toolbarRef: PropTypes.object,
+  isPublic: PropTypes.bool,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ])
+}
+
+export default FooterContent

package/src/Footer/ForwardButton.jsx

@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+import { getSharingLink } from 'cozy-client/dist/models/sharing'
+import { isIOS, isMobileApp } from 'cozy-device-helper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import ReplyIcon from 'cozy-ui/transpiled/react/Icons/Reply'
+import ShareIosIcon from 'cozy-ui/transpiled/react/Icons/ShareIos'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { exportFilesNative } from './helpers'
+
+const ForwardIcon = isIOS() ? ShareIosIcon : ReplyIcon
+
+const ForwardButton = ({ file, variant, onClick }) => {
+  const { t } = useI18n()
+  const client = useClient()
+
+  const icon = <Icon icon={ForwardIcon} />
+  const label = t('Viewer.actions.forward')
+
+  const onFileOpen = async file => {
+    if (isMobileApp()) {
+      try {
+        await exportFilesNative(client, [file])
+      } catch (error) {
+        Alerter.info(`Viewer.error.${error}`, { fileMime: file.mime })
+      }
+    } else {
+      try {
+        const url = await getSharingLink(client, [file.id])
+        const shareData = {
+          title: t('Viewer.share.title', { name: file.name }),
+          text: t('Viewer.share.text', { name: file.name }),
+          url
+        }
+        navigator.share(shareData)
+      } catch (error) {
+        Alerter.error('Viewer.share.error', { error: error })
+      }
+    }
+  }
+
+  const handleClick = () => {
+    if (onClick) onClick()
+    else onFileOpen(file)
+  }
+
+  if (variant === 'iconButton') {
+    return (
+      <IconButton className="u-white" aria-label={label} onClick={handleClick}>
+        {icon}
+      </IconButton>
+    )
+  }
+
+  if (variant === 'buttonIcon') {
+    return (
+      <Button
+        variant="secondary"
+        label={icon}
+        aria-label={label}
+        onClick={handleClick}
+      />
+    )
+  }
+
+  return (
+    <Button
+      fullWidth
+      variant="secondary"
+      startIcon={icon}
+      data-testid="openFileButton"
+      label={label}
+      onClick={handleClick}
+    />
+  )
+}
+
+ForwardButton.propTypes = {
+  file: PropTypes.object.isRequired,
+  variant: PropTypes.oneOf(['default', 'iconButton', 'buttonIcon']),
+  onClick: PropTypes.func
+}
+
+ForwardButton.defaultProptypes = {
+  variant: 'default'
+}
+
+export { exportFilesNative }
+export default ForwardButton

package/src/Footer/ForwardButton.spec.jsx

@@ -0,0 +1,87 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import { getSharingLink } from 'cozy-client/dist/models/sharing'
+import { isMobileApp } from 'cozy-device-helper'
+
+import ForwardButton from './ForwardButton'
+import { exportFilesNative } from './helpers'
+import DemoProvider from '../docs/DemoProvider'
+
+jest.mock('cozy-device-helper')
+jest.mock('cozy-client/dist/models/sharing', () => ({
+  ...jest.requireActual('cozy-client/dist/models/sharing'),
+  getSharingLink: jest.fn()
+}))
+jest.mock('./helpers')
+
+const file = {
+  _id: '123',
+  name: 'filename.pdf'
+}
+
+const setup = ({ isMobileApplication, onClick }) => {
+  isMobileApp.mockReturnValue(isMobileApplication)
+  return render(
+    <DemoProvider>
+      <ForwardButton file={file} onClick={onClick} />
+    </DemoProvider>
+  )
+}
+
+describe('ForwardButton', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  describe('exportFilesNative', () => {
+    it('should call it if is on native app', async () => {
+      const { findByTestId } = setup({ isMobileApplication: true })
+
+      const btn = await findByTestId('openFileButton')
+      fireEvent.click(btn)
+
+      expect(exportFilesNative).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call it if is on web app', async () => {
+      const { findByTestId } = setup({ isMobileApplication: false })
+
+      const btn = await findByTestId('openFileButton')
+      fireEvent.click(btn)
+
+      expect(exportFilesNative).toHaveBeenCalledTimes(0)
+    })
+  })
+
+  describe('getSharingLink', () => {
+    it('should not call it if is on native app', async () => {
+      const { findByTestId } = setup({ isMobileApplication: true })
+
+      const btn = await findByTestId('openFileButton')
+      fireEvent.click(btn)
+
+      expect(getSharingLink).toHaveBeenCalledTimes(0)
+    })
+
+    it('should not call it if the "onClick" prop is passed', async () => {
+      const onClick = jest.fn()
+      const { findByTestId } = setup({ isMobileApplication: true, onClick })
+
+      const btn = await findByTestId('openFileButton')
+      fireEvent.click(btn)
+
+      expect(getSharingLink).toHaveBeenCalledTimes(0)
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call it if is on web app', async () => {
+      const { findByTestId } = setup({ isMobileApplication: false })
+
+      const btn = await findByTestId('openFileButton')
+      fireEvent.click(btn)
+
+      expect(getSharingLink).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/Footer/ForwardOrDownloadButton.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+
+import DownloadButton from './DownloadButton'
+import ForwardButton from './ForwardButton'
+import { shouldBeForwardButton } from './helpers'
+
+const ForwardOrDownloadButton = ({ file, ...props }) => {
+  const client = useClient()
+
+  const FileActionButton = shouldBeForwardButton(client)
+    ? ForwardButton
+    : DownloadButton
+
+  return <FileActionButton file={file} {...props} />
+}
+
+ForwardOrDownloadButton.propTypes = {
+  file: PropTypes.object
+}
+
+export default ForwardOrDownloadButton

package/src/Footer/Sharing.jsx

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import { ShareModal, ShareButton } from 'cozy-sharing'
+import { SharingProvider } from 'cozy-sharing/dist/SharingProvider'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+
+const Sharing = ({ file, variant }) => {
+  const client = useClient()
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const SharingButton =
+    variant === 'iconButton' ? (
+      <IconButton className="u-white" onClick={() => setShowShareModal(true)}>
+        <Icon icon={ShareIcon} />
+      </IconButton>
+    ) : (
+      <ShareButton
+        fullWidth
+        useShortLabel
+        docId={file.id}
+        onClick={() => setShowShareModal(true)}
+      />
+    )
+
+  return (
+    <>
+      <SharingProvider
+        client={client}
+        doctype="io.cozy.files"
+        documentType="Files"
+      >
+        {showShareModal && (
+          <ShareModal
+            document={file}
+            documentType="Files"
+            sharingDesc={file.name}
+            onClose={() => setShowShareModal(false)}
+          />
+        )}
+        {SharingButton}
+      </SharingProvider>
+    </>
+  )
+}
+
+Sharing.propTypes = {
+  file: PropTypes.object,
+  variant: PropTypes.oneOf(['default', 'iconButton'])
+}
+
+Sharing.defaultProptypes = {
+  variant: 'default'
+}
+
+export default Sharing

package/src/Footer/helpers.js

@@ -0,0 +1,106 @@
+import { isValidElement, Children, cloneElement } from 'react'
+
+import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative'
+import { isIOS, isMobileApp } from 'cozy-device-helper'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+
+export const shouldBeForwardButton = client => {
+  const isDrive = client?.appMetadata?.slug === 'drive'
+  if (isMobileApp() || (navigator.share && !isDrive)) return true
+  return false
+}
+
+const isMissingFileError = error => error.status === 404
+const downloadFileError = error => {
+  return isMissingFileError(error)
+    ? 'Viewer.error.downloadFile.missing'
+    : 'Viewer.error.missing'
+}
+
+/**
+ * exportFilesNative - Triggers a prompt to download a file on mobile devices
+ *
+ * @param {CozyClient} client
+ * @param {array} files    One or more files to download
+ * @param {string} filename The name of the file that will be saved
+ */
+export const exportFilesNative = async (client, files, filename) => {
+  const downloadAllFiles = files.map(async file => {
+    const response = await client
+      .collection('io.cozy.files')
+      .fetchFileContentById(file.id)
+
+    const blob = await response.blob()
+    const filenameToUse = filename ? filename : file.name
+    const localFile = await saveFileWithCordova(blob, filenameToUse)
+    return localFile.nativeURL
+  })
+
+  try {
+    Alerter.info('Viewer.alert.preparing', {
+      duration: Math.min(downloadAllFiles.length * 2000, 6000)
+    })
+
+    const urls = await Promise.all(downloadAllFiles)
+    if (urls.length === 1 && isIOS()) {
+      // TODO
+      // It seems that files: is not well supported on iOS. url seems to work well
+      // at with one file. Need to check when severals
+      window.plugins.socialsharing.shareWithOptions(
+        {
+          url: urls[0]
+        },
+        result => {
+          if (result.completed === true) {
+            Alerter.success('Viewer.share.success')
+          }
+        },
+        error => {
+          throw error
+        }
+      )
+    } else {
+      window.plugins.socialsharing.shareWithOptions(
+        {
+          files: urls
+        },
+        null,
+        error => {
+          throw error
+        }
+      )
+    }
+  } catch (error) {
+    Alerter.error(downloadFileError(error))
+  }
+}
+
+export const mapToAllChildren = (children, cb) => {
+  return Children.map(children, child => {
+    if (!isValidElement(child)) return child
+
+    const grandchildren = child.props.children
+    if (grandchildren) {
+      return cloneElement(child, {
+        children: mapToAllChildren(grandchildren, cb)
+      })
+    }
+
+    return cb(child)
+  })
+}
+
+export const extractChildrenCompByName = ({ children, file, name }) => {
+  const ChildrenComp =
+    Children.toArray(children).find(child => {
+      return child.type.name === name || child.type.displayName === name
+    }) || null
+
+  const ChildrenCompWithFile = isValidElement(ChildrenComp)
+    ? cloneElement(ChildrenComp, {
+        file
+      })
+    : null
+
+  return ChildrenCompWithFile
+}

package/src/Footer/helpers.spec.js

@@ -0,0 +1,77 @@
+import { isMobileApp } from 'cozy-device-helper'
+
+import { shouldBeForwardButton } from './helpers'
+
+jest.mock('cozy-device-helper')
+
+describe('shouldBeForwardButton', () => {
+  const setup = ({ isMobileApplication = false, appSlug = '' }) => {
+    const mockClient = { appMetadata: { slug: appSlug } }
+    isMobileApp.mockReturnValue(isMobileApplication)
+
+    return mockClient
+  }
+
+  describe('Mobile native', () => {
+    it('should be true if the mobile native application is "Drive"', () => {
+      global.navigator.share = null
+      const mockClient = setup({
+        appSlug: 'drive',
+        isMobileApplication: true
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(true)
+    })
+    it('should be true if the mobile native application is not "Drive"', () => {
+      global.navigator.share = null
+      const mockClient = setup({
+        appSlug: 'other',
+        isMobileApplication: true
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(true)
+    })
+  })
+
+  describe('Mobile web', () => {
+    it('should be false if the mobile web application is "Drive"', () => {
+      global.navigator.share = () => {}
+      const mockClient = setup({
+        appSlug: 'drive',
+        isMobileApplication: false
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(false)
+    })
+    it('should be true if the mobile web application is not "Drive"', () => {
+      global.navigator.share = () => {}
+      const mockClient = setup({
+        appSlug: 'other',
+        isMobileApplication: false
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(true)
+    })
+  })
+
+  describe('Desktop', () => {
+    it('should be false if the desktop application is "Drive"', () => {
+      global.navigator.share = null
+      const mockClient = setup({
+        appSlug: 'drive',
+        isMobileApplication: false
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(false)
+    })
+    it('should be false if the desktop application is not "Drive"', () => {
+      global.navigator.share = null
+      const mockClient = setup({
+        appSlug: 'other',
+        isMobileApplication: false
+      })
+
+      expect(shouldBeForwardButton(mockClient)).toBe(false)
+    })
+  })
+})

package/src/NoViewer/DownloadButton.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { withClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { downloadFile } from '../helpers'
+
+const DownloadButton = ({ client, file, url }) => {
+  const { t } = useI18n()
+
+  return (
+    <Button
+      onClick={() => downloadFile({ client, file, url })}
+      label={t('Viewer.download')}
+    />
+  )
+}
+
+DownloadButton.propTypes = {
+  client: PropTypes.object.isRequired,
+  file: FileDoctype,
+  url: PropTypes.string
+}
+
+export default withClient(DownloadButton)

package/src/NoViewer/FileIcon.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileTypeBinIcon from 'cozy-ui/transpiled/react/Icons/FileTypeBin'
+import FileTypeCodeIcon from 'cozy-ui/transpiled/react/Icons/FileTypeCode'
+import FileTypeFilesIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFiles'
+import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
+import FileTypeSheetIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSheet'
+import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
+import FileTypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import FileTypeZipIcon from 'cozy-ui/transpiled/react/Icons/FileTypeZip'
+
+const FileIcon = ({ type }) => {
+  let icon
+
+  switch (type) {
+    case 'bin':
+      icon = FileTypeBinIcon
+      break
+    case 'code':
+      icon = FileTypeCodeIcon
+      break
+    case 'spreadsheet':
+      icon = FileTypeSheetIcon
+      break
+    case 'slide':
+      icon = FileTypeSlideIcon
+      break
+    case 'text':
+      icon = FileTypeTextIcon
+      break
+    case 'zip':
+      icon = FileTypeZipIcon
+      break
+    case 'pdf':
+      icon = FileTypePdfIcon
+      break
+    default:
+      icon = FileTypeFilesIcon
+      break
+  }
+
+  return <Icon icon={icon} width={160} height={140} />
+}
+
+export default FileIcon

package/src/NoViewer/NoViewer.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
+
+import DownloadButton from './DownloadButton'
+import FileIcon from './FileIcon'
+import styles from '../ViewersByFile/styles.styl'
+
+const NoViewer = ({ file, url, renderFallbackExtraContent }) => (
+  <div className={styles['viewer-noviewer']}>
+    <FileIcon type={file.class} />
+    <p className={styles['viewer-filename']}>{file.name}</p>
+    {renderFallbackExtraContent(file, url)}
+  </div>
+)
+
+NoViewer.propTypes = {
+  file: FileDoctype.isRequired,
+  renderFallbackExtraContent: PropTypes.func,
+  url: PropTypes.string
+}
+
+NoViewer.defaultProps = {
+  renderFallbackExtraContent: (file, url) => (
+    <DownloadButton file={file} url={url} />
+  )
+}
+
+export default NoViewer