cozy-ui 111.20.0 → 112.0.0

package/react/Viewer/components/ViewerByFile.spec.jsx

@@ -1,100 +0,0 @@
-import { isMobile as isMobileDevice } from 'cozy-device-helper'
-
-import { getViewerComponentName } from './ViewerByFile'
-
-jest.mock('cozy-device-helper', () => ({
-  ...jest.requireActual('cozy-device-helper'),
-  isMobile: jest.fn()
-}))
-jest.mock('../ViewersByFile/ShortcutViewer', () => 'ShortcutViewer')
-jest.mock('../ViewersByFile/ImageViewer', () => 'ImageViewer')
-jest.mock('../ViewersByFile/AudioViewer', () => 'AudioViewer')
-jest.mock('../ViewersByFile/AudioViewer', () => 'AudioViewer')
-jest.mock('../ViewersByFile/VideoViewer', () => 'VideoViewer')
-jest.mock('../ViewersByFile/PdfJsViewer', () => 'PdfJsViewer')
-jest.mock('../ViewersByFile/PdfMobileViewer', () => 'PdfMobileViewer')
-jest.mock('../ViewersByFile/TextViewer', () => 'TextViewer')
-jest.mock('../ViewersByFile/OnlyOfficeViewer', () => 'OnlyOfficeViewer')
-jest.mock('../NoViewer', () => 'NoViewer')
-
-describe('getViewerComponentName', () => {
-  beforeEach(() => {
-    isMobileDevice.mockReturnValue(false)
-  })
-
-  it('should return the correct component', () => {
-    expect(getViewerComponentName({ file: { class: 'shortcut' } })).toBe(
-      'ShortcutViewer'
-    )
-    expect(getViewerComponentName({ file: { class: 'image' } })).toBe(
-      'ImageViewer'
-    )
-    expect(getViewerComponentName({ file: { class: 'audio' } })).toBe(
-      'AudioViewer'
-    )
-    expect(getViewerComponentName({ file: { class: 'video' } })).toBe(
-      'VideoViewer'
-    )
-    isMobileDevice.mockReturnValue(true)
-    expect(getViewerComponentName({ file: { class: 'video' } })).toBe(
-      'NoViewer'
-    )
-    isMobileDevice.mockReturnValue(false)
-    expect(
-      getViewerComponentName({ file: { class: 'pdf' }, isDesktop: false })
-    ).toBe('PdfMobileViewer')
-    expect(
-      getViewerComponentName({ file: { class: 'pdf' }, isDesktop: true })
-    ).toBe('PdfJsViewer')
-    expect(
-      getViewerComponentName({
-        file: {
-          class: 'text',
-          mime: 'text/plain',
-          name: 'test.txt'
-        }
-      })
-    ).toBe('TextViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'text', name: 'test.docx' },
-        isOnlyOfficeEnabled: true
-      })
-    ).toBe('OnlyOfficeViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'text', name: 'test.docx' },
-        isOnlyOfficeEnabled: false
-      })
-    ).toBe('NoViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'slide' },
-        isOnlyOfficeEnabled: true
-      })
-    ).toBe('OnlyOfficeViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'slide' },
-        isOnlyOfficeEnabled: false
-      })
-    ).toBe('NoViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'spreadsheet' },
-        isOnlyOfficeEnabled: true
-      })
-    ).toBe('OnlyOfficeViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'spreadsheet' },
-        isOnlyOfficeEnabled: false
-      })
-    ).toBe('NoViewer')
-    expect(
-      getViewerComponentName({
-        file: { class: 'notSupportedClass' }
-      })
-    ).toBe('NoViewer')
-  })
-})

package/react/Viewer/components/ViewerControls.jsx

@@ -1,190 +0,0 @@
-import cx from 'classnames'
-import Hammer from 'hammerjs'
-import flow from 'lodash/flow'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-
-import { infoWidth } from './InformationPanel'
-import Navigation from './Navigation'
-import Toolbar from './Toolbar'
-import styles from './styles.styl'
-import { toolbarPropsPropType } from '..'
-import withBreakpoints from '../../helpers/withBreakpoints'
-import { withStyles } from '../../styles'
-import { isValidForPanel } from '../helpers'
-
-const ACTIONS_HIDE_DELAY = 3000
-
-const customStyles = () => ({
-  viewerControlsWithInfo: {
-    width: `calc(100% - ${infoWidth}) !important`
-  }
-})
-
-class ViewerControls extends Component {
-  state = {
-    hidden: false,
-    gestures: null
-  }
-
-  _mounted = false
-
-  showControls = () => {
-    if (this._mounted) {
-      this.setState({ hidden: false })
-      this.hideAfterDelay()
-      document.removeEventListener('mousemove', this.showControls)
-      document.addEventListener('mousemove', this.hideAfterDelay)
-    }
-  }
-
-  hideControls = () => {
-    if (this._mounted) {
-      this.setState({ hidden: true })
-      document.removeEventListener('mousemove', this.hideAfterDelay)
-      document.addEventListener('mousemove', this.showControls)
-    }
-  }
-
-  hideAfterDelay = () => {
-    clearTimeout(this.hideTimeout)
-    this.hideTimeout = setTimeout(() => {
-      this.hideControls()
-    }, ACTIONS_HIDE_DELAY)
-  }
-
-  onSwipe = e => {
-    if (e.direction === Hammer.DIRECTION_LEFT) this.props.onNext()
-    else if (e.direction === Hammer.DIRECTION_RIGHT) this.props.onPrevious()
-  }
-
-  initGestures = () => {
-    const gestures = new Hammer(
-      this.wrapped,
-      this.props.breakpoints.isDesktop
-        ? {
-            cssProps: {
-              userSelect: 'auto'
-            }
-          }
-        : {}
-    )
-    if (!this.props.breakpoints.isDesktop) gestures.on('swipe', this.onSwipe)
-
-    return gestures
-  }
-
-  componentDidMount() {
-    this._mounted = true
-    clearTimeout(this.hideTimeout)
-    this.hideAfterDelay()
-    const gestures = this.initGestures()
-    this.setState({ gestures })
-  }
-
-  componentWillUnmount() {
-    this._mounted = false
-    clearTimeout(this.hideTimeout)
-    if (this.state.gestures) this.state.gestures.destroy()
-  }
-
-  renderChildren(children) {
-    if (!children) return null
-
-    return React.Children.map(children, child => {
-      if (
-        child?.type?.name === 'ViewerByFile' ||
-        child?.type?.displayName === 'ViewerByFile'
-      ) {
-        return React.cloneElement(child, {
-          gestures: this.state.gestures,
-          gesturesRef: this.wrapped,
-          onSwipe: this.onSwipe
-        })
-      }
-    })
-  }
-
-  render() {
-    const {
-      file,
-      onClose,
-      hasPrevious,
-      hasNext,
-      onPrevious,
-      onNext,
-      expanded,
-      toolbarProps,
-      showNavigation,
-      showInfoPanel,
-      children,
-      classes,
-      breakpoints: { isDesktop }
-    } = this.props
-    const { showToolbar, showClose, toolbarRef, showFilePath } = toolbarProps
-    const { hidden } = this.state
-
-    const shouldDisplayContentTop = isValidForPanel({ file })
-
-    return (
-      <div
-        className={cx(styles['viewer-controls'], {
-          [styles['viewer-controls--expanded']]: expanded,
-          [styles['viewer-controls--display-content-top']]:
-            shouldDisplayContentTop,
-          [classes.viewerControlsWithInfo]: showInfoPanel
-        })}
-        ref={wrapped => {
-          this.wrapped = wrapped
-        }}
-      >
-        {showToolbar && (
-          <Toolbar
-            toolbarRef={toolbarRef}
-            file={file}
-            showFilePath={showFilePath}
-            onMouseEnter={this.showControls}
-            onMouseLeave={this.hideControls}
-            onClose={showClose && onClose}
-          >
-            {children}
-          </Toolbar>
-        )}
-        {showNavigation && isDesktop && hasPrevious && (
-          <Navigation
-            className={styles['viewer-nav--previous']}
-            hidden={hidden}
-            onMouseEnter={this.showControls}
-            onMouseLeave={this.hideControls}
-            onClick={onPrevious}
-          />
-        )}
-        {this.renderChildren(children)}
-        {showNavigation && isDesktop && hasNext && (
-          <Navigation
-            className={styles['viewer-nav--next']}
-            hidden={hidden}
-            onMouseEnter={this.showControls}
-            onMouseLeave={this.hideControls}
-            onClick={onNext}
-          />
-        )}
-      </div>
-    )
-  }
-}
-
-ViewerControls.propTypes = {
-  file: PropTypes.object.isRequired,
-  onClose: PropTypes.func.isRequired,
-  hasPrevious: PropTypes.bool.isRequired,
-  hasNext: PropTypes.bool.isRequired,
-  onPrevious: PropTypes.func.isRequired,
-  onNext: PropTypes.func.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  toolbarProps: PropTypes.shape(toolbarPropsPropType),
-  showNavigation: PropTypes.bool.isRequired,
-  showInfoPanel: PropTypes.bool
-}
-
-export default flow(withBreakpoints(), withStyles(customStyles))(ViewerControls)

package/react/Viewer/components/ViewerControls.spec.jsx

@@ -1,54 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-
-import ViewerByFile from './ViewerByFile'
-import ViewerControls from './ViewerControls'
-
-jest.mock('../ViewersByFile/AudioViewer', () => () => <div>AudioViewer</div>)
-jest.mock('../providers/EncryptedProvider', () => ({
-  useEncrypted: () => ({ url: 'random' })
-}))
-
-describe('ViewerControls', () => {
-  const file = {
-    _id: 'audio',
-    class: 'audio',
-    mime: 'audio/mp3',
-    name: 'sample.mp3'
-  }
-
-  const setup = ({ children } = {}) => {
-    render(
-      <ViewerControls
-        file={file}
-        onClose={() => {}}
-        hasPrevious={false}
-        hasNext={false}
-        onPrevious={() => {}}
-        onNext={() => {}}
-        expanded={false}
-        toolbarProps={{
-          showToolbar: false,
-          showClose: false,
-          showFilePath: false,
-          toolbarRef: undefined
-        }}
-        showNavigation={false}
-      >
-        {children}
-      </ViewerControls>
-    )
-  }
-
-  it('should only render children if they are ViewerByFile', () => {
-    setup({
-      children: [
-        undefined,
-        <div key="notViewer">not ViewerByFile</div>,
-        <ViewerByFile key="viewer" file={file} onClose={() => {}} />
-      ]
-    })
-    expect(screen.queryByText('not ViewerByFile')).not.toBeInTheDocument()
-    expect(screen.getByText('AudioViewer')).toBeInTheDocument()
-  })
-})

package/react/Viewer/components/ViewerSpinner.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-import Spinner from '../../Spinner'
-import withBreakpoints from '../../helpers/withBreakpoints'
-
-const ViewerSpinner = ({ breakpoints: { isDesktop } }) => {
-  return (
-    <Spinner
-      size="xxlarge"
-      middle
-      noMargin
-      {...(isDesktop && { color: 'white' })}
-    />
-  )
-}
-
-export default withBreakpoints()(ViewerSpinner)

package/react/Viewer/components/styles.styl

@@ -1,93 +0,0 @@
-@require 'components/selectionbar.styl'
-@require 'settings/breakpoints.styl'
-
-@require '../vars.styl'
-
-.viewer-nav
-    position absolute
-    top $toolbarHeight
-    bottom 0
-    z-index var(--zIndex-modal-toolbar)
-    width 20%
-    cursor pointer
-    background-color transparent
-    transition .4s opacity ease-out
-    opacity 0
-    display flex
-    align-items center
-    justify-content center
-    flex-direction column
-
-    &--visible:hover
-        opacity 1
-        transition none
-
-    &--previous
-        left 0
-        .viewer-nav-arrow
-            align-self flex-start
-            margin-left 2.5rem
-            transform rotate(180deg)
-
-    &--next
-        right 0
-        .viewer-nav-arrow
-            align-self flex-end
-            margin-right 2.5rem
-
-    +medium-screen()
-        display none
-
-.viewer-nav-arrow
-    opacity .7
-
-.viewer-controls
-    position relative
-    display flex
-    flex-direction column
-    justify-content center
-    align-items center
-    width 100%
-    height 100%
-
-.viewer-controls.--expanded .viewer-nav
-    margin-top 0
-    width 40%
-
-.viewer-controls--display-content-top
-    +medium-screen()
-        justify-content flex-start
-        padding-top $toolbarHeightMedium - $viewerMarginTopMedium + 1rem
-
-.viewer-toolbar
-    position absolute
-    top 0
-    z-index var(--zIndex-modal-toolbar)
-    display flex
-    flex-shrink 0
-    width calc(100% - 1rem)
-    padding 0 0.5rem
-    height $toolbarHeight
-    transition .4s opacity ease-out
-    background linear-gradient(to bottom, var(--charcoalGrey), rgba(50, 54, 63, 0))
-    justify-content flex-start
-    align-items center
-
-    &--hidden
-        opacity 0
-
-    +medium-screen()
-        height $toolbarHeightMedium
-        width 100%
-        padding var(--flagship-top-height) 1rem 0 0
-        background var(--paperBackgroundColor)
-        border-bottom 1px solid var(--dividerColor)
-
-.viewer-footer
-    position fixed
-    bottom 0
-    z-index var(--zIndex-modal-footer)
-    width 100%
-    height $footerHeight
-    padding-bottom var(--flagship-bottom-height, env(safe-area-inset-bottom))
-    background var(--paperBackgroundColor)

package/react/Viewer/helpers.js

@@ -1,131 +0,0 @@
-import { generateWebLink } from 'cozy-client'
-import {
-  isEncrypted,
-  isFromKonnector,
-  hasQualifications,
-  hasCertifications,
-  normalize
-} from 'cozy-client/dist/models/file'
-import {
-  KNOWN_DATE_METADATA_NAMES,
-  KNOWN_INFORMATION_METADATA_NAMES,
-  KNOWN_BILLS_ATTRIBUTES_NAMES
-} from 'cozy-client/dist/models/paper'
-
-export const getCurrentModel = metadataName => {
-  if (
-    KNOWN_DATE_METADATA_NAMES.includes(metadataName) ||
-    KNOWN_INFORMATION_METADATA_NAMES.includes(metadataName) ||
-    KNOWN_BILLS_ATTRIBUTES_NAMES.includes(metadataName)
-  ) {
-    return 'information'
-  }
-  if (metadataName === 'contact') return 'contact'
-  if (metadataName === 'page') return 'page'
-}
-
-/**
- * @typedef {object} Reference
- * @property {string} id - id of the document
- * @property {string} type - doctype of the document
- */
-
-/**
- * Checks if the file matches one of the following conditions:
- * - Is certified
- * - Is Qualified
- * - From a Connector
- *
- * @param {object} param
- * @param {IOCozyFile} param.file
- * @returns {boolean}
- */
-export const isValidForPanel = ({ file }) => {
-  return (
-    hasCertifications(file) || hasQualifications(file) || isFromKonnector(file)
-  )
-}
-
-export const downloadFile = async ({ client, file, url }) => {
-  if (isEncrypted(file)) {
-    return client.collection('io.cozy.files').forceFileDownload(url, file.name)
-  }
-  return client.collection('io.cozy.files').download(file)
-}
-
-export const isFileEncrypted = file => isEncrypted(file)
-
-export const formatDate = ({ f, lang, date }) => {
-  if (lang === 'en') {
-    return f(date, 'MM/DD/YYYY')
-  }
-  return f(date, 'DD/MM/YYYY')
-}
-
-/**
- * @param {{ information: string, page: string }} editPathByModelProps
- * @param {string} currentModel
- * @param {string} name
- * @returns {string}
- */
-export const buildEditAttributePath = (
-  editPathByModelProps,
-  currentModel,
-  name
-) => {
-  const currentPath = editPathByModelProps[currentModel]
-  return currentPath?.replace(/__NAME__/, name) ?? ''
-}
-
-export const isEditableAttribute = (name, file) => {
-  const isNotEditableAttributes = ['datetime', 'qualification']
-
-  return (
-    !isNotEditableAttributes.includes(name) &&
-    ((name === 'issueDate' && !isFromKonnector(file)) || name !== 'issueDate')
-  )
-}
-
-export const normalizeAndSpreadAttributes = rawFile => {
-  const normalizedFile = normalize(rawFile)
-
-  return {
-    ...normalizedFile,
-    ...normalizedFile?.attributes
-  }
-}
-
-/**
- * Return a web link to an application in the Cozy environment with the specified path
- * @param {object} param
- * @param {CozyClient} param.client - Instance of CozyClient
- * @param {string} param.slug - Slug of the application
- * @param {string} param.path - Path into the application
- * @returns {string} web link
- */
-export const makeWebLink = ({ client, slug, path }) => {
-  try {
-    const cozyURL = new URL(client.getStackClient().uri)
-    const { subdomain: subDomainType } = client.getInstanceOptions()
-
-    return generateWebLink({
-      pathname: '/',
-      cozyUrl: cozyURL.origin,
-      slug,
-      hash: path,
-      subDomainType
-    })
-  } catch (e) {
-    return null
-  }
-}
-
-/**
- * Remove the file name at the end of a path
- * @param {string} path
- * @returns {string} new path
- */
-export const removeFilenameFromPath = path => {
-  const newPath = path.substring(0, path.lastIndexOf('/'))
-  return newPath === '' ? '/' : newPath
-}