cozy-ui 111.21.0 → 112.1.0

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,99 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
-
-import BottomSheetContent from './BottomSheetContent'
-import { extractChildrenCompByName } from './helpers'
-import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
-import { makeStyles } from '../../styles'
-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/react/Viewer/Footer/ForwardButton.jsx

@@ -1,95 +0,0 @@
-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 { exportFilesNative } from './helpers'
-import Button from '../../Buttons'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import ReplyIcon from '../../Icons/Reply'
-import ShareIosIcon from '../../Icons/ShareIos'
-import Alerter from '../../deprecated/Alerter'
-import { useI18n } from '../../providers/I18n'
-
-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/react/Viewer/Footer/ForwardButton.spec.jsx

@@ -1,87 +0,0 @@
-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/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -1,24 +0,0 @@
-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/react/Viewer/Footer/Sharing.jsx

@@ -1,60 +0,0 @@
-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 '../../Icon'
-import IconButton from '../../IconButton'
-import ShareIcon from '../../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/react/Viewer/Footer/helpers.js

@@ -1,107 +0,0 @@
-import { isValidElement, Children, cloneElement } from 'react'
-
-import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative'
-import { isIOS, isMobileApp } from 'cozy-device-helper'
-
-import Alerter from '../../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/react/Viewer/Footer/helpers.spec.js

@@ -1,77 +0,0 @@
-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/react/Viewer/NoViewer/DownloadButton.jsx

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { withClient } from 'cozy-client'
-
-import Button from '../../deprecated/Button'
-import { FileDoctype } from '../../proptypes'
-import { useI18n } from '../../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/react/Viewer/NoViewer/FileIcon.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-
-import Icon from '../../Icon'
-import FileTypeBinIcon from '../../Icons/FileTypeBin'
-import FileTypeCodeIcon from '../../Icons/FileTypeCode'
-import FileTypeFilesIcon from '../../Icons/FileTypeFiles'
-import FileTypePdfIcon from '../../Icons/FileTypePdf'
-import FileTypeSheetIcon from '../../Icons/FileTypeSheet'
-import FileTypeSlideIcon from '../../Icons/FileTypeSlide'
-import FileTypeTextIcon from '../../Icons/FileTypeText'
-import FileTypeZipIcon from '../../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/react/Viewer/NoViewer/NoViewer.jsx

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import DownloadButton from './DownloadButton'
-import FileIcon from './FileIcon'
-import { FileDoctype } from '../../proptypes'
-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

package/react/Viewer/NoViewer/NoViewer.spec.jsx

@@ -1,44 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import NoViewer from './NoViewer'
-import DemoProvider from '../docs/DemoProvider'
-
-const file = {
-  _id: 'notSupported',
-  class: 'notSupported',
-  mime: 'notSupported',
-  name: 'notSupported.xyz'
-}
-
-const setup = ({ renderFallbackExtraContent } = {}) => {
-  const root = render(
-    <DemoProvider>
-      <NoViewer
-        file={file}
-        renderFallbackExtraContent={renderFallbackExtraContent}
-      />
-    </DemoProvider>
-  )
-
-  return { root }
-}
-
-describe('NoViewer', () => {
-  it('should render the viewer', () => {
-    const { root } = setup()
-    const { container } = root
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should render the viewer with specific extra content', () => {
-    const renderFallbackExtraContent = () => (
-      <div>with specific extra content</div>
-    )
-    const { root } = setup({ renderFallbackExtraContent })
-    const { container } = root
-
-    expect(container).toMatchSnapshot()
-  })
-})