cozy-ui 111.20.0 → 112.0.0

package/react/Viewer/ViewersByFile/NoNetworkViewer.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-import styles from './styles.styl'
-import Icon from '../../Icon'
-import CloudBrokenIcon from '../../Icons/CloudBroken'
-import Button from '../../deprecated/Button'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const NoNetworkViewer = ({ t, onReload }) => (
-  <div className={styles['viewer-canceled']}>
-    <Icon icon={CloudBrokenIcon} width={160} height={140} />
-    <h2>{t('Viewer.error.network')}</h2>
-    <Button onClick={onReload} label={t('Viewer.retry')} />
-  </div>
-)
-
-export default withViewerLocales(NoNetworkViewer)

package/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Button from '../../deprecated/Button'
-import { FileDoctype } from '../../proptypes'
-import NoViewer from '../NoViewer'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const OnlyOfficeViewer = ({ file, onlyOfficeOpener, t }) => {
-  return (
-    <NoViewer
-      file={file}
-      renderFallbackExtraContent={() => (
-        <Button
-          label={t('Viewer.openInOnlyOffice')}
-          onClick={() => onlyOfficeOpener(file)}
-        />
-      )}
-    />
-  )
-}
-
-OnlyOfficeViewer.propTypes = {
-  file: FileDoctype,
-  onlyOfficeOpener: PropTypes.func.isRequired
-}
-
-export default withViewerLocales(OnlyOfficeViewer)

package/react/Viewer/ViewersByFile/PdfJsViewer.jsx

@@ -1,210 +0,0 @@
-import cx from 'classnames'
-import flow from 'lodash/flow'
-import throttle from 'lodash/throttle'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { Document, Page } from 'react-pdf'
-
-import styles from './styles.styl'
-import NoViewer from '../NoViewer'
-import ToolbarButton from '../components/PdfToolbarButton'
-import ViewerSpinner from '../components/ViewerSpinner'
-import withFileUrl from '../hoc/withFileUrl'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-export const MIN_SCALE = 0.25
-export const MAX_SCALE = 3
-export const MAX_PAGES = 3
-const KEY_CODE_UP = 38
-const KEY_CODE_DOWN = 40
-
-export class PdfJsViewer extends Component {
-  state = {
-    totalPages: 1,
-    scale: 1,
-    currentPage: 1,
-    loaded: false,
-    errored: false,
-    width: null,
-    renderAllPages: false
-  }
-
-  componentDidMount() {
-    this.setWrapperSize()
-    this.resizeListener = throttle(this.setWrapperSize, 500)
-    window.addEventListener('resize', this.resizeListener)
-    document.addEventListener('keyup', this.onKeyUp, false)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeListener)
-    document.removeEventListener('keyup', this.onKeyUp, false)
-  }
-
-  onKeyUp = e => {
-    if (e.keyCode === KEY_CODE_UP) this.previousPage()
-    else if (e.keyCode === KEY_CODE_DOWN) this.nextPage()
-  }
-
-  toggleGestures(enable) {
-    if (!this.props.gestures) return
-    this.props.gestures.get('swipe').set({ enable })
-    this.props.gestures.get('pan').set({ enable })
-  }
-
-  setWrapperSize = () => {
-    const width = this.wrapper
-      ? this.wrapper.getBoundingClientRect().width
-      : null
-    this.setState({ width })
-  }
-
-  onLoadSuccess = ({ numPages }) => {
-    this.setState({
-      totalPages: numPages,
-      renderAllPages: numPages <= MAX_PAGES,
-      loaded: true
-    })
-  }
-
-  onLoadError = error => {
-    // eslint-disable-next-line no-console
-    console.warn(error)
-    this.setState({
-      errored: true
-    })
-  }
-
-  nextPage = () => {
-    this.setState(state => ({
-      currentPage: Math.min(state.currentPage + 1, state.totalPages)
-    }))
-  }
-
-  previousPage = () => {
-    this.setState(state => ({
-      currentPage: Math.max(state.currentPage - 1, 1)
-    }))
-  }
-
-  scaleUp = () => {
-    this.setState(state => {
-      const previousScale = state.scale
-      const scale = Math.min(previousScale + 0.25, MAX_SCALE)
-      if (scale > 1 && previousScale <= 1) this.toggleGestures(false)
-      return {
-        scale
-      }
-    })
-  }
-
-  scaleDown = () => {
-    this.setState(state => {
-      const previousScale = state.scale
-      const scale = Math.max(previousScale - 0.25, MIN_SCALE)
-      if (scale <= 1 && previousScale > 1) this.toggleGestures(true)
-      return {
-        scale
-      }
-    })
-  }
-
-  render() {
-    const { url, file, renderFallbackExtraContent, t } = this.props
-    const {
-      loaded,
-      errored,
-      totalPages,
-      currentPage,
-      scale,
-      width,
-      renderAllPages
-    } = this.state
-    if (errored)
-      return (
-        <NoViewer
-          file={file}
-          renderFallbackExtraContent={renderFallbackExtraContent}
-        />
-      )
-    const pageWidth = width ? width * scale : null // newer versions of react-pdf do that automatically
-
-    return (
-      <div
-        className={styles['viewer-pdfviewer']}
-        ref={ref => (this.wrapper = ref)}
-      >
-        <Document
-          file={url}
-          onLoadSuccess={this.onLoadSuccess}
-          onLoadError={this.onLoadError}
-          className={styles['viewer-pdfviewer-pdf']}
-          loading={<ViewerSpinner />}
-        >
-          {renderAllPages ? (
-            [...Array(totalPages)].map((_, page) => (
-              <Page
-                key={page}
-                pageNumber={page + 1}
-                width={pageWidth}
-                renderAnnotations={false}
-                className={cx('u-mv-1', styles['viewer-pdfviewer-page'])}
-              />
-            ))
-          ) : (
-            <Page
-              pageNumber={currentPage}
-              width={pageWidth}
-              renderAnnotations={false}
-              className={styles['viewer-pdfviewer-page']}
-            />
-          )}
-        </Document>
-        {loaded && (
-          <div className={cx(styles['viewer-pdfviewer-toolbar'], 'u-p-half')}>
-            {!renderAllPages && (
-              <span className="u-mh-half">
-                <ToolbarButton
-                  icon="top"
-                  onClick={this.previousPage}
-                  disabled={currentPage === 1}
-                  label={t('Viewer.previous')}
-                />
-                {currentPage}/{totalPages}
-                <ToolbarButton
-                  icon="bottom"
-                  onClick={this.nextPage}
-                  disabled={currentPage === totalPages}
-                  label={t('Viewer.next')}
-                />
-              </span>
-            )}
-
-            <span className="u-mh-half">
-              <ToolbarButton
-                icon="dash"
-                onClick={this.scaleDown}
-                disabled={scale === MIN_SCALE}
-                label={t('Viewer.scaledown')}
-              />
-              <ToolbarButton
-                icon="plus"
-                onClick={this.scaleUp}
-                disabled={scale === MAX_SCALE}
-                label={t('Viewer.scaleup')}
-              />
-            </span>
-          </div>
-        )}
-      </div>
-    )
-  }
-}
-
-PdfJsViewer.propTypes = {
-  url: PropTypes.string.isRequired,
-  gestures: PropTypes.object,
-  renderFallbackExtraContent: PropTypes.func
-}
-
-export default flow(withFileUrl, withViewerLocales)(PdfJsViewer)

package/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx

@@ -1,160 +0,0 @@
-import { shallow } from 'enzyme'
-import React from 'react'
-
-import { PdfJsViewer, MIN_SCALE, MAX_SCALE, MAX_PAGES } from './PdfJsViewer'
-
-describe('PDFViewer', () => {
-  let component
-  const panGestureMock = jest.fn()
-  const swipeGestureMock = jest.fn()
-  const gesturesMock = {
-    get: jest.fn(type => ({
-      set: type === 'pan' ? panGestureMock : swipeGestureMock
-    }))
-  }
-  beforeEach(() => {
-    component = shallow(
-      <PdfJsViewer url="test" file={{}} gestures={gesturesMock} t={x => x} />
-    )
-  })
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('desture integration', () => {
-    let instance
-    beforeEach(() => {
-      instance = component.instance()
-    })
-
-    it('should disable gestures when zooming in', () => {
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
-      instance.scaleUp()
-      expect(panGestureMock).toHaveBeenCalledTimes(1)
-      expect(swipeGestureMock).toHaveBeenCalledTimes(1)
-    })
-
-    it('should leave gestures alone when zooming out', () => {
-      instance.scaleDown()
-      expect(component.state('scale')).toBeLessThan(1)
-      expect(panGestureMock).not.toHaveBeenCalled()
-      expect(swipeGestureMock).not.toHaveBeenCalled()
-    })
-
-    it('should re-enable gestures when zooming back out', () => {
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
-      instance.scaleDown()
-      expect(component.state('scale')).toBe(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: true })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: true })
-    })
-  })
-
-  describe('with a valid PDF', () => {
-    let instance
-    beforeEach(() => {
-      instance = component.instance()
-      instance.onLoadSuccess({ numPages: 3 })
-    })
-
-    it('should start with default options', () => {
-      expect(component.state('loaded')).toBe(true)
-      expect(component.state('totalPages')).toBe(3)
-      expect(component.state('currentPage')).toBe(1)
-      expect(component.state('scale')).toBe(1)
-    })
-
-    it('should flip to the next page while possible', () => {
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(2)
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(3)
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(3)
-    })
-
-    it('should flip to the previous page while possible', () => {
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(2)
-      instance.previousPage()
-      expect(component.state('currentPage')).toBe(1)
-      instance.previousPage()
-      expect(component.state('currentPage')).toBe(1)
-    })
-
-    it('should scale up to a certain point', () => {
-      const initialScale = component.state('scale')
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(initialScale)
-
-      for (let i = 0; i < 10; i++) instance.scaleUp()
-      expect(component.state('scale')).toEqual(MAX_SCALE)
-    })
-
-    it('should scale down to a certain point', () => {
-      const initialScale = component.state('scale')
-      instance.scaleDown()
-      expect(component.state('scale')).toBeLessThan(initialScale)
-
-      for (let i = 0; i < 10; i++) instance.scaleDown()
-      expect(component.state('scale')).toEqual(MIN_SCALE)
-    })
-  })
-
-  describe('a PDF with few pages', () => {
-    beforeEach(() => {
-      component.instance().onLoadSuccess({ numPages: MAX_PAGES })
-    })
-
-    it('should render all the pages', () => {
-      const pages = component.find('ForwardRef(Page)')
-      expect(pages.length).toEqual(MAX_PAGES)
-    })
-
-    it('should not show pagination controls', () => {
-      const pageUp = component.find({ icon: 'top' })
-      const pageDown = component.find({ icon: 'bottom' })
-      expect(pageUp.length).toEqual(0)
-      expect(pageDown.length).toEqual(0)
-    })
-  })
-
-  describe('a PDF with many pages', () => {
-    beforeEach(() => {
-      component.instance().onLoadSuccess({ numPages: MAX_PAGES + 1 })
-    })
-
-    it('should render only the current page', () => {
-      const pages = component.find('ForwardRef(Page)')
-      expect(pages.length).toEqual(1)
-    })
-
-    it('should show pagination controls', () => {
-      const pageUp = component.find({ icon: 'top' })
-      const pageDown = component.find({ icon: 'bottom' })
-      expect(pageUp.length).toEqual(1)
-      expect(pageDown.length).toEqual(1)
-    })
-  })
-
-  describe('with a pdf that does not load', () => {
-    beforeEach(() => {
-      jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-    afterEach(() => {
-      console.warn.mockRestore()
-    })
-    it('should show a fallback', () => {
-      component.instance().onLoadError('pdfviewer test error')
-      expect(component.state('errored')).toBe(true)
-      const noViewer = component.find('NoViewer')
-      expect(noViewer.length).toBe(1)
-    })
-  })
-})

package/react/Viewer/ViewersByFile/PdfMobileViewer.jsx

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-
-import { useClient } from 'cozy-client'
-
-import styles from './styles.styl'
-import FileImageLoader from '../../FileImageLoader'
-import Spinner from '../../Spinner'
-import { FileDoctype } from '../../proptypes'
-import { useAlert } from '../../providers/Alert'
-import NoViewer from '../NoViewer'
-import DownloadButton from '../NoViewer/DownloadButton'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-export const PdfMobileViewer = ({ file, url, t, gestures }) => {
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(false)
-  const imgRef = useRef(null)
-  const { showAlert } = useAlert()
-
-  const client = useClient()
-
-  const onImageError = () => {
-    setLoading(false)
-    setError(true)
-  }
-
-  const onImageLoad = () => {
-    setLoading(false)
-  }
-
-  const handleOnClick = useCallback(
-    async file => {
-      try {
-        await client.collection('io.cozy.files').download(file)
-      } catch (error) {
-        showAlert({
-          message: t('Viewer.error.generic'),
-          severity: 'error',
-          variant: 'filled',
-          icon: false
-        })
-      }
-    },
-    [client, showAlert, t]
-  )
-
-  useEffect(() => {
-    if (gestures) {
-      gestures.get('pinch').set({ enable: true })
-      gestures.on('pinchend tap', evt => {
-        if (
-          (evt.type === 'pinchend' || evt.tapCount === 1) &&
-          evt.target === imgRef.current
-        ) {
-          handleOnClick(file)
-        }
-      })
-
-      return () => {
-        gestures.off('pinchend tap')
-      }
-    }
-  }, [client, gestures, file, handleOnClick])
-
-  if (error) {
-    return (
-      <NoViewer
-        file={file}
-        renderFallbackExtraContent={file => <DownloadButton file={file} />}
-      />
-    )
-  }
-
-  return (
-    <div className={styles['viewer-pdfMobile']}>
-      {loading && <Spinner size="xxlarge" middle noMargin />}
-      {file && (
-        <FileImageLoader
-          file={file}
-          url={url}
-          linkType="medium"
-          onError={onImageError}
-          key={file.id}
-          render={src => (
-            <img
-              ref={imgRef}
-              className={styles['viewer-pdfMobile--image']}
-              alt={file.name}
-              src={src}
-              onLoad={onImageLoad}
-            />
-          )}
-        />
-      )}
-    </div>
-  )
-}
-
-PdfMobileViewer.prototype = {
-  file: FileDoctype.isRequired,
-  url: PropTypes.string,
-  gestures: PropTypes.object
-}
-
-export default withViewerLocales(PdfMobileViewer)

package/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx

@@ -1,76 +0,0 @@
-import { render, waitFor } from '@testing-library/react'
-import React from 'react'
-
-import { CozyProvider, createMockClient } from 'cozy-client'
-import logger from 'cozy-logger'
-
-import { PdfMobileViewer } from './PdfMobileViewer'
-import { I18n } from '../../providers/I18n'
-import EncryptedProvider from '../providers/EncryptedProvider'
-
-logger.error = logger.warn = jest.fn()
-
-const client = createMockClient({})
-client.collection = jest.fn(() => ({
-  getDownloadLinkById: jest.fn()
-}))
-client.plugins.realtime = {
-  subscribe: jest.fn(),
-  unsubscribe: jest.fn(),
-  unsubscribeAll: jest.fn()
-}
-jest.mock('../../providers/Alert', () => ({
-  useAlert: jest.fn().mockReturnValue({ showAlert: jest.fn() })
-}))
-
-const file = {
-  _id: 'pdf',
-  class: 'pdf',
-  name: 'Demo.pdf',
-  mime: 'application/pdf',
-  links: {
-    medium: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
-  }
-}
-
-const setup = ({ file }) => {
-  const root = render(
-    <CozyProvider client={client}>
-      <I18n lang="en" dictRequire={() => ''}>
-        <EncryptedProvider>
-          <PdfMobileViewer file={file} t={x => x} />
-        </EncryptedProvider>
-      </I18n>
-    </CozyProvider>
-  )
-
-  return { root }
-}
-
-describe('PdfMobileViewer', () => {
-  it('should show a spinner if image is not loaded', () => {
-    const { root } = setup({ file })
-    const { getByRole } = root
-
-    expect(getByRole('progressbar'))
-  })
-
-  describe('errors if file as no medium or failed to download', () => {
-    let fileWithoutLinks = file
-
-    beforeAll(() => {
-      fileWithoutLinks.links = undefined
-    })
-
-    it('should show "download" button on browser', async () => {
-      const { root } = setup({ file: fileWithoutLinks })
-      const { getByText, queryByRole } = root
-
-      await waitFor(() => {
-        expect(queryByRole('progressbar')).toBeFalsy()
-        expect(getByText('Viewer.download'))
-        expect(getByText(file.name))
-      })
-    })
-  })
-})

package/react/Viewer/ViewersByFile/ShortcutViewer.jsx

@@ -1,38 +0,0 @@
-import get from 'lodash/get'
-import React from 'react'
-
-import { useClient, useFetchShortcut } from 'cozy-client'
-
-import OpenwithIcon from '../../Icons/Openwith'
-import { ButtonLink } from '../../deprecated/Button'
-import { FileDoctype } from '../../proptypes'
-import NoViewer from '../NoViewer'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const ShortcutViewer = ({ t, file }) => {
-  const client = useClient()
-  const { shortcutInfos } = useFetchShortcut(client, file.id)
-  let url = ''
-  if (shortcutInfos) {
-    url = new URL(get(shortcutInfos, 'data.attributes.url'))
-  }
-  return (
-    <NoViewer
-      file={file}
-      renderFallbackExtraContent={() => (
-        <ButtonLink
-          label={`${t('Viewer.goto', { url: get(url, 'origin', '') })}`}
-          icon={OpenwithIcon}
-          href={`${get(url, 'origin', '')}`}
-          target="_blank"
-        />
-      )}
-    />
-  )
-}
-
-ShortcutViewer.propTypes = {
-  file: FileDoctype.isRequired
-}
-
-export default withViewerLocales(ShortcutViewer)

package/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx

@@ -1,32 +0,0 @@
-import { render, waitFor } from '@testing-library/react'
-import React from 'react'
-
-import CozyClient, { CozyProvider } from 'cozy-client'
-
-import ShortcutViewer from './ShortcutViewer'
-import I18n from '../../providers/I18n'
-import en from '../locales/en.json'
-
-export const locales = {
-  en
-}
-
-const setup = () => {
-  const client = new CozyClient({})
-  return (
-    <CozyProvider client={client}>
-      <I18n lang="en" dictRequire={() => locales['en']}>
-        <ShortcutViewer file={{ id: '1' }} />
-      </I18n>
-    </CozyProvider>
-  )
-}
-
-describe('Shortcutviewer', () => {
-  it('renders the component', async () => {
-    const { container } = render(setup())
-    await waitFor(() => {
-      expect(container).toMatchSnapshot()
-    })
-  })
-})