cozy-ui 111.21.0 → 112.0.0

package/react/Viewer/components/ExpirationAlert.jsx

@@ -1,86 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import { useClient } from 'cozy-client'
-import {
-  isForeignPaper,
-  computeExpirationDate,
-  computeExpirationNoticeLink,
-  makeExpirationDescription
-} from 'cozy-client/dist/models/paper'
-
-import Alert from '../../Alert'
-import Button from '../../Buttons'
-import Link from '../../Link'
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const FILES_DOCTYPE = 'io.cozy.files'
-
-const ExpirationAlert = ({ file }) => {
-  const { t, lang } = useI18n()
-  const client = useClient()
-  const [isBusy, setIsBusy] = useState(false)
-
-  const handleClose = async () => {
-    setIsBusy(true)
-    await client.collection(FILES_DOCTYPE).updateMetadataAttribute(file.id, {
-      ...file.metadata,
-      hideExpirationAlert: true
-    })
-    setIsBusy(false)
-  }
-
-  const expirationDate = computeExpirationDate(file)
-  const expirationNoticeLink = !isForeignPaper(file)
-    ? computeExpirationNoticeLink(file)
-    : null
-
-  return (
-    <Alert
-      severity="warning"
-      block
-      action={
-        <Button
-          color="warning"
-          variant="text"
-          size="small"
-          busy={isBusy}
-          label={t('Viewer.panel.expiration.dismiss')}
-          onClick={handleClose}
-        />
-      }
-      className="u-mt-1 u-mh-1"
-    >
-      <Typography component="span" variant="inherit">
-        <Typography component="span" variant="inherit">
-          {makeExpirationDescription(expirationDate, {
-            lang
-          })}
-        </Typography>
-        {expirationNoticeLink && (
-          <>
-            <Typography component="span" variant="inherit">
-              {' : '}
-            </Typography>
-            <Link
-              href={expirationNoticeLink}
-              rel="noreferrer"
-              target="_blank"
-              className="u-warning"
-            >
-              {new URL(expirationNoticeLink).hostname}
-            </Link>
-          </>
-        )}
-      </Typography>
-    </Alert>
-  )
-}
-
-ExpirationAlert.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default withViewerLocales(ExpirationAlert)

package/react/Viewer/components/ExpirationAnnotation.jsx

@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { models } from 'cozy-client'
-
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-
-const {
-  computeExpirationDate,
-  isExpired,
-  makeExpiredMessage,
-  makeExpiresInMessage
-} = models.paper
-
-const ExpirationAnnotation = ({ file }) => {
-  const { lang } = useI18n()
-
-  if (isExpired(file)) {
-    return (
-      <Typography component="span" variant="inherit" color="error">
-        {makeExpiredMessage({ lang })}
-      </Typography>
-    )
-  }
-
-  const expirationDate = computeExpirationDate(file)
-
-  return (
-    <Typography component="span" variant="inherit" className="u-warning">
-      {makeExpiresInMessage(expirationDate, { lang })}
-    </Typography>
-  )
-}
-
-ExpirationAnnotation.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default ExpirationAnnotation

package/react/Viewer/components/Footer.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-import styles from './styles.styl'
-import useBreakpoints from '../../providers/Breakpoints'
-
-const Footer = ({ children }) => {
-  const { isDesktop } = useBreakpoints()
-
-  if (isDesktop) return null
-  return <div className={styles['viewer-footer']}>{children}</div>
-}
-
-export default Footer

package/react/Viewer/components/InformationPanel.jsx

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-export const infoWidth = '22rem'
-
-const styles = {
-  panel: {
-    width: infoWidth,
-    backgroundColor: 'var(--defaultBackgroundColor)'
-  }
-}
-
-const InformationPanel = ({ children }) => {
-  return (
-    <div style={styles.panel} className="u-h-100 u-ov-auto">
-      {children}
-    </div>
-  )
-}
-
-InformationPanel.propTypes = {
-  classes: PropTypes.object,
-  children: PropTypes.element
-}
-
-export default InformationPanel

package/react/Viewer/components/Navigation.jsx

@@ -1,39 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import styles from './styles.styl'
-import Icon from '../../Icon'
-import { default as ArrowIcon } from '../../Icons/DropdownClose'
-
-const Navigation = ({
-  className,
-  hidden,
-  onMouseEnter,
-  onMouseLeave,
-  onClick
-}) => {
-  return (
-    <div
-      role="button"
-      className={cx(className, styles['viewer-nav'], {
-        [styles['viewer-nav--visible']]: !hidden
-      })}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <Icon icon={ArrowIcon} size="32" className={styles['viewer-nav-arrow']} />
-    </div>
-  )
-}
-
-Navigation.propTypes = {
-  className: PropTypes.string.isRequired,
-  hidden: PropTypes.bool.isRequired,
-  onMouseEnter: PropTypes.func.isRequired,
-  onMouseLeave: PropTypes.func.isRequired,
-  onClick: PropTypes.func.isRequired
-}
-
-export default Navigation

package/react/Viewer/components/PdfToolbarButton.jsx

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Button from '../../deprecated/Button'
-
-const PdfToolbarButton = ({ icon, onClick, disabled, label }) => (
-  <Button
-    iconOnly
-    subtle
-    theme="secondary"
-    className="u-p-half u-m-half"
-    icon={icon}
-    onClick={onClick}
-    disabled={disabled}
-    label={label}
-  />
-)
-
-PdfToolbarButton.propTypes = {
-  icon: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired
-}
-
-export default PdfToolbarButton

package/react/Viewer/components/PrintButton.jsx

@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState, useEffect, forwardRef } from 'react'
-
-import { useWebviewIntent } from 'cozy-intent'
-
-import { makeActions } from '../../ActionsMenu/Actions/helpers'
-import { print } from '../../ActionsMenu/Actions/print'
-import ActionsItems, {
-  actionsItemsComponentPropTypes
-} from '../../ActionsMenu/ActionsItems'
-import Button from '../../Buttons'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-
-const ActionComponent = forwardRef(({ action, variant, onClick }, ref) => {
-  const { label, icon } = action
-
-  if (variant === 'button') {
-    return (
-      <Button
-        ref={ref}
-        variant="secondary"
-        aria-label={label}
-        label={<Icon icon={icon} />}
-        onClick={onClick}
-      />
-    )
-  }
-
-  return (
-    <IconButton
-      ref={ref}
-      className="u-white"
-      aria-label={label}
-      onClick={onClick}
-    >
-      <Icon icon={icon} />
-    </IconButton>
-  )
-})
-
-ActionComponent.displayName = 'ActionComponent'
-
-ActionComponent.propTypes = {
-  ...actionsItemsComponentPropTypes,
-  variant: PropTypes.oneOf(['default', 'button'])
-}
-
-const PrintButton = ({ file, variant }) => {
-  const [isPrintAvailable, setIsPrintAvailable] = useState(false)
-  const webviewIntent = useWebviewIntent()
-
-  const isPDFDoc = file.mime === 'application/pdf'
-  const showPrintButton = isPDFDoc && isPrintAvailable
-
-  useEffect(() => {
-    const init = async () => {
-      const isAvailable =
-        (await webviewIntent?.call('isAvailable', 'print')) ?? true
-
-      setIsPrintAvailable(isAvailable)
-    }
-
-    init()
-  }, [webviewIntent])
-
-  if (!showPrintButton) return null
-
-  const actions = makeActions([print])
-
-  return (
-    <ActionsItems
-      docs={[file]}
-      actions={actions}
-      component={ActionComponent}
-      variant={variant}
-    />
-  )
-}
-
-PrintButton.propTypes = {
-  file: PropTypes.object.isRequired,
-  variant: PropTypes.oneOf(['default', 'button'])
-}
-
-PrintButton.defaultProps = {
-  variant: 'default'
-}
-
-export default PrintButton

package/react/Viewer/components/Toolbar.jsx

@@ -1,111 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { useClient } from 'cozy-client'
-
-import PrintButton from './PrintButton'
-import { ToolbarFilePath } from './ToolbarFilePath'
-import styles from './styles.styl'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import DownloadIcon from '../../Icons/Download'
-import PreviousIcon from '../../Icons/Previous'
-import MidEllipsis from '../../MidEllipsis'
-import Typography from '../../Typography'
-import withBreakpoints from '../../helpers/withBreakpoints'
-import { useI18n } from '../../providers/I18n'
-import { makeStyles } from '../../styles'
-import { extractChildrenCompByName } from '../Footer/helpers'
-import { downloadFile } from '../helpers'
-import { useEncrypted } from '../providers/EncryptedProvider'
-
-const useClasses = makeStyles(theme => ({
-  iconButton: {
-    [theme.breakpoints.down('md')]: {
-      marginLeft: '0.25rem'
-    }
-  }
-}))
-
-const Toolbar = ({
-  hidden,
-  onMouseEnter,
-  onMouseLeave,
-  file,
-  onClose,
-  toolbarRef,
-  breakpoints: { isDesktop },
-  children,
-  showFilePath
-}) => {
-  const client = useClient()
-  const classes = useClasses()
-  const { t } = useI18n()
-
-  const { url } = useEncrypted()
-
-  const ToolbarButtons = extractChildrenCompByName({
-    children,
-    file,
-    name: 'ToolbarButtons'
-  })
-
-  return (
-    <div
-      ref={toolbarRef}
-      data-testid="viewer-toolbar"
-      className={cx(styles['viewer-toolbar'], {
-        [styles['viewer-toolbar--hidden']]: hidden
-      })}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      {onClose && (
-        <IconButton
-          className={cx(classes.iconButton, { 'u-white': isDesktop })}
-          onClick={onClose}
-        >
-          <Icon icon={PreviousIcon} />
-        </IconButton>
-      )}
-      <div className="u-pl-half u-ov-auto u-w-100">
-        <Typography
-          variant="h3"
-          color={isDesktop ? 'inherit' : 'textPrimary'}
-          noWrap
-        >
-          <MidEllipsis text={file.name} />
-        </Typography>
-        {showFilePath ? <ToolbarFilePath file={file} /> : null}
-      </div>
-
-      <div className="u-flex">
-        {isDesktop && (
-          <>
-            {ToolbarButtons}
-            <PrintButton file={file} />
-            <IconButton
-              className="u-white"
-              aria-label={t('Viewer.download')}
-              onClick={() => downloadFile({ client, file, url })}
-            >
-              <Icon icon={DownloadIcon} />
-            </IconButton>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-Toolbar.propTypes = {
-  hidden: PropTypes.bool,
-  onMouseEnter: PropTypes.func.isRequired,
-  onMouseLeave: PropTypes.func.isRequired,
-  file: PropTypes.object.isRequired,
-  onClose: PropTypes.func,
-  showFilePath: PropTypes.bool
-}
-
-export default withBreakpoints()(Toolbar)

package/react/Viewer/components/ToolbarButtons.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-import FooterActionButtons from '../Footer/FooterActionButtons'
-
-const ToolbarButtons = props => {
-  return <FooterActionButtons {...props} />
-}
-
-ToolbarButtons.displayName = 'ToolbarButtons'
-
-export default ToolbarButtons

package/react/Viewer/components/ToolbarFilePath.jsx

@@ -1,61 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { useClient, useQuery, models } from 'cozy-client'
-
-import AppLinker from '../../AppLinker'
-import FilePath from '../../FilePath'
-import Link from '../../Link'
-import useBreakpoints from '../../providers/Breakpoints'
-import {
-  makeWebLink,
-  normalizeAndSpreadAttributes,
-  removeFilenameFromPath
-} from '../helpers'
-import { buildFileByIdQuery } from '../queries'
-
-const { ensureFilePath } = models.file
-
-const ToolbarFilePath = ({ file }) => {
-  const client = useClient()
-  const { isDesktop } = useBreakpoints()
-
-  const normalizeFile = normalizeAndSpreadAttributes(file)
-
-  const parentQuery = buildFileByIdQuery(normalizeFile.dir_id)
-  const parentResult = useQuery(parentQuery.definition, {
-    ...parentQuery.options,
-    enabled: !!normalizeFile.dir_id
-  })
-
-  const fileWithPath = useMemo(
-    () =>
-      parentResult.data
-        ? ensureFilePath(normalizeFile, parentResult.data)
-        : undefined,
-    [normalizeFile, parentResult.data]
-  )
-
-  if (fileWithPath) {
-    const appSlug = 'drive'
-    const nativePath = `/folder/${fileWithPath.dir_id}`
-    const path = removeFilenameFromPath(fileWithPath.path)
-    const link = makeWebLink({ client, path: nativePath, slug: appSlug })
-
-    if (isDesktop && link) {
-      return (
-        <AppLinker app={{ slug: appSlug }} nativePath={nativePath} href={link}>
-          {({ href, onClick }) => (
-            <Link href={href} onClick={onClick} color="inherit">
-              <FilePath className="u-white">{path}</FilePath>
-            </Link>
-          )}
-        </AppLinker>
-      )
-    }
-    return <FilePath className={isDesktop ? 'u-white' : null}>{path}</FilePath>
-  }
-
-  return null
-}
-
-export { ToolbarFilePath }

package/react/Viewer/components/ViewerByFile.jsx

@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
-
-import { isPlainText } from 'cozy-client/dist/models/file'
-import { isMobile as isMobileDevice } from 'cozy-device-helper'
-
-import withBreakpoints from '../../helpers/withBreakpoints'
-import { FileDoctype } from '../../proptypes'
-import NoViewer from '../NoViewer'
-import AudioViewer from '../ViewersByFile/AudioViewer'
-import BlankPaperViewer from '../ViewersByFile/BlankPaperViewer'
-import ImageViewer from '../ViewersByFile/ImageViewer'
-import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
-import PdfJsViewer from '../ViewersByFile/PdfJsViewer'
-import PdfMobileViewer from '../ViewersByFile/PdfMobileViewer'
-import ShortcutViewer from '../ViewersByFile/ShortcutViewer'
-import TextViewer from '../ViewersByFile/TextViewer'
-import VideoViewer from '../ViewersByFile/VideoViewer'
-import { useEncrypted } from '../providers/EncryptedProvider'
-
-const isBlankPaper = doc => doc.metadata?.paperProps?.isBlank
-
-export const getViewerComponentName = ({
-  file,
-  isDesktop,
-  isOnlyOfficeEnabled
-}) => {
-  switch (file.class) {
-    case 'shortcut':
-      return ShortcutViewer
-    case 'image':
-      return ImageViewer
-    case 'audio':
-      return AudioViewer
-    case 'video':
-      return isMobileDevice() ? NoViewer : VideoViewer
-    case 'pdf':
-      return isBlankPaper(file)
-        ? BlankPaperViewer
-        : isDesktop
-        ? PdfJsViewer
-        : PdfMobileViewer
-    case 'text':
-      return isPlainText(file.mime, file.name)
-        ? TextViewer
-        : isOnlyOfficeEnabled
-        ? OnlyOfficeViewer
-        : NoViewer
-    case 'slide':
-      return isOnlyOfficeEnabled ? OnlyOfficeViewer : NoViewer
-    case 'spreadsheet':
-      return isOnlyOfficeEnabled ? OnlyOfficeViewer : NoViewer
-    default:
-      return NoViewer
-  }
-}
-
-const ViewerByFile = withBreakpoints()(
-  ({
-    file,
-    onClose,
-    renderFallbackExtraContent,
-    gestures,
-    gesturesRef,
-    onSwipe,
-    breakpoints: { isDesktop },
-    componentsProps
-  }) => {
-    const isOnlyOfficeEnabled = componentsProps?.OnlyOfficeViewer?.isEnabled
-    const onlyOfficeOpener = componentsProps?.OnlyOfficeViewer?.opener
-
-    const { url } = useEncrypted()
-
-    const ComponentName = useMemo(
-      () =>
-        getViewerComponentName({
-          file,
-          isDesktop,
-          isOnlyOfficeEnabled
-        }),
-      [file, isDesktop, isOnlyOfficeEnabled]
-    )
-
-    return (
-      <ComponentName
-        file={file}
-        url={url}
-        onClose={onClose}
-        renderFallbackExtraContent={renderFallbackExtraContent}
-        gestures={gestures}
-        gesturesRef={gesturesRef}
-        onSwipe={onSwipe}
-        onlyOfficeOpener={onlyOfficeOpener}
-      />
-    )
-  }
-)
-
-ViewerByFile.propTypes = {
-  file: FileDoctype.isRequired,
-  onClose: PropTypes.func.isRequired,
-  renderFallbackExtraContent: PropTypes.func,
-  // gestures, gesturesRef and onSwipe are got from ViewerControls
-  gestures: PropTypes.object,
-  gesturesRef: PropTypes.object,
-  onSwipe: PropTypes.func,
-  componentsProps: PropTypes.object
-}
-
-ViewerByFile.displayName = 'ViewerByFile'
-
-export default ViewerByFile