cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/Field/styles.styl

@@ -1,41 +0,0 @@
-@require 'components/forms'
-@require 'settings/breakpoints'
-@require 'settings/spaces'
-
-.o-field
-    @extend $field
-
-.o-field--inline
-    @extend $field-inline
-    margin 0
-
-    label
-        flex-basis rem(128)
-        flex-shrink 0
-        flex-grow 0
-        padding spacing_values.m 0
-
-        +small-screen()
-            flex-basis auto
-
-    > *
-        flex-grow 1
-
-.o-field-input
-    position relative
-    max-width rem(512)
-
-.o-side
-    position absolute
-    top 0.5rem
-    right 0
-    cursor pointer
-    text-transform uppercase
-
-.o-side-fullwidth
-    max-width 100%
-
-.o-field-input-action
-    @extend .o-side
-    top -1.5rem
-    text-transform uppercase

package/react/FileImageLoader/Readme.md

@@ -1,112 +0,0 @@
-### FileImageLoader
-
-A component to get the image in `links` prop of a file, according to its class (could be `image` or `pdf`).
-
-```jsx
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
-import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
-import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
-import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
-
-const demoTextFileResponse = {
-  text: () => new Promise(resolve => resolve('Hello World !'))
-}
-
-const demoFilesByClass = {
-  pdf: 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf',
-  audio: 'https://viewerdemo.cozycloud.cc/Z.mp3',
-  video: 'https://viewerdemo.cozycloud.cc/Nextcloud.mp4',
-  text: 'https://viewerdemo.cozycloud.cc/notes.md'
-}
-
-const mockClient = {
-  plugins: {
-    realtime: {
-      subscribe: () => {},
-      unsubscribe: () => {},
-      unsubscribeAll: () => {}
-    }
-  },
-  on: () => {},
-  collection: () => ({
-    getDownloadLinkById: id =>
-      new Promise(resolve => resolve(demoFilesByClass[id])),
-    download: () =>
-      alert(
-        "This is a demo, there's no actual Cozy to download the file from ¯\\_(ツ)_/¯"
-      ),
-    get: () =>
-      new Promise(resolve =>
-        resolve({
-          data: {
-            links: {
-              large: CloudWallpaper
-            }
-          }
-        })
-      )
-  }),
-  getStackClient: () => ({
-    uri: '',
-    fetch: () => new Promise(resolve => resolve(demoTextFileResponse))
-  }),
-  getClient: () => mockClient,
-  store: {
-    getState: () => {},
-    subscribe: () => {},
-    unsubscribe: () => {}
-  },
-  getQueryFromState: queryName => {
-    if (queryName === 'io.cozy.files/parent_folder') {
-      return {
-        data: {
-          _id: 'parent_id',
-          path: '/Parent'
-        }
-      }
-    }
-  },
-  query: () => ({
-    data: [{ attributes: { slug: 'mespapiers' }, links: { related: '' } }]
-  }),
-  getInstanceOptions: () => ({ app: { slug: 'mespapiers' }, subdomain: 'flat' })
-}
-
-const file = {
-  _id: 'image',
-  class: 'image',
-  name: 'Demo.img',
-  mime: 'application/jpeg',
-  links: {
-    large: CloudWallpaper
-  }
-}
-
-const onImageError = () => console.info('image errored')
-const onImageLoad = () => console.info('image loaded!')
-const FallbackComp = () => {
-  return (
-    <div>fallback component</div>
-  )
-}
-
-;
-
-<DemoProvider client={mockClient}>
-  <FileImageLoader
-    file={file}
-    linkType="large"
-    onError={onImageError}
-    render={src => (
-      <img
-        src={src}
-        height={300}
-        onLoad={onImageLoad}
-      />
-    )}
-    renderFallback={() => <FallbackComp />}
-  />
-</DemoProvider>
-```

package/react/FileImageLoader/checkImageSource.js

@@ -1,29 +0,0 @@
-/**
- * @param {string} src - Image source
- * @returns {Promise<void>}
- */
-export const checkImageSource = async src => {
-  const TTL = 10000
-  let timeout = null
-  let img = null
-
-  const cleanImageLoader = () => {
-    clearTimeout(timeout)
-    img.onload = img.onerror = null
-    img.src = ''
-    img = null
-  }
-
-  return new Promise((resolve, reject) => {
-    img = new Image()
-    img.onload = resolve
-    img.onerror = reject
-    img.src = src
-    timeout = setTimeout(
-      () => reject(new Error('Loading image took too long')),
-      TTL
-    )
-  }).then(() => {
-    return cleanImageLoader()
-  })
-}

package/react/FileImageLoader/index.jsx

@@ -1,185 +0,0 @@
-import PropTypes from 'prop-types'
-import { Component } from 'react'
-
-import { withClient } from 'cozy-client'
-import { isEncrypted } from 'cozy-client/dist/models/file'
-import logger from 'cozy-logger'
-
-const PENDING = 'PENDING'
-const LOADING_LINK = 'LOADING_LINK'
-const LOADING_FALLBACK = 'LOADING_FALLBACK'
-const LOADED = 'LOADED'
-const FAILED = 'FAILED'
-const GET_LINK = 'GET_LINK'
-
-import { checkImageSource } from './checkImageSource'
-import { EncryptedContext } from '../providers/Encrypted'
-
-export class FileImageLoader extends Component {
-  state = {
-    src: null
-  }
-  static contextType = EncryptedContext
-  _mounted = false
-
-  componentDidMount() {
-    const { client } = this.props
-
-    this._mounted = true
-    this.status = PENDING
-    this.loadNextSrc()
-    this.realtime = client.plugins.realtime
-    this.type = 'io.cozy.files.thumbnails'
-    this.realtime.subscribe('created', this.type, this.handleCreate)
-  }
-
-  componentWillUnmount() {
-    this._mounted = false
-    if (this.img) {
-      this.img.onload = this.img.onerror = null
-      this.img.src = ''
-    }
-    this.realtime &&
-      this.realtime.unsubscribe('created', this.type, this.handleCreate)
-  }
-
-  /**
-   * Reload the link when realtime tell us that the
-   * thumbnail is created. By default linkType === small
-   */
-  handleCreate = doc => {
-    const { file, linkType } = this.props
-    if (file._id === doc._id && doc.format === linkType) {
-      this.loadLink()
-    }
-  }
-
-  getFileId(file) {
-    return file.id || file._id
-  }
-
-  loadNextSrc(lastError = null) {
-    const { file } = this.props
-    if (isEncrypted(file)) {
-      // No link available for encrypted files
-      return
-    }
-    if (this.status === PENDING) this.getLink()
-    else if (this.status === GET_LINK) this.loadLink()
-    else if (this.status === LOADING_LINK) this.loadFallback()
-    else if (this.status === LOADING_FALLBACK) {
-      logger.warn('failed loading thumbnail', lastError)
-      this.setState({ status: FAILED })
-      this.props.onError(lastError)
-    }
-  }
-
-  async fetchFileLinks(file) {
-    const response = await this.props.client
-      .collection('io.cozy.files')
-      .get(this.getFileId(file))
-
-    if (!response.data.links) throw new Error('Could not fetch file links')
-    return response.data.links
-  }
-
-  async getLink() {
-    this.status = GET_LINK
-    const { file, linkType, client } = this.props
-
-    try {
-      const link = file.links ? file.links[linkType] : false
-
-      if (!link) throw new Error(`${linkType} link is not available`)
-
-      const src = client.getStackClient().uri + link
-      await checkImageSource(src)
-      if (this._mounted) {
-        this.status = LOADED
-        this.setState({
-          src
-        })
-      }
-    } catch (e) {
-      this.loadNextSrc(e)
-    }
-  }
-
-  async loadLink() {
-    this.status = LOADING_LINK
-    const { file, linkType, client } = this.props
-
-    try {
-      const links = await this.fetchFileLinks(file)
-      const link = links[linkType]
-
-      if (!link) throw new Error(`${linkType} link is not available`)
-
-      const src = client.getStackClient().uri + link
-      await checkImageSource(src)
-      if (this._mounted) {
-        this.status = LOADED
-        this.setState({
-          src
-        })
-      }
-    } catch (e) {
-      logger.error(e)
-      this.loadNextSrc(e)
-    }
-  }
-
-  async loadFallback() {
-    this.status = LOADING_FALLBACK
-    const { file, client } = this.props
-
-    try {
-      // FileImageLoader can also be used for pdf files, because on mobile a preview image is
-      // generated and the pdf is therefore treated as an image.
-      // But the fallback allows to display the original file as an image if there is an error
-      // during the preview recovery. This principle is not possible with a pdf file.
-      if (file.class === 'pdf') {
-        throw new Error('No pdf files fallback')
-      }
-      const src = await client
-        .collection('io.cozy.files', { driveId: file.driveId })
-        .getDownloadLinkById(this.getFileId(file), file.name)
-      await checkImageSource(src)
-      if (this._mounted) {
-        this.status = LOADED
-        this.setState({
-          src
-        })
-      }
-    } catch (e) {
-      this.loadNextSrc(e)
-    }
-  }
-
-  render() {
-    const { src } = this.state
-
-    const { render, renderFallback } = this.props
-    if (this.context && this.context.url) {
-      return render(this.context.url)
-    }
-    if (src) return render(src)
-    else if (renderFallback) return renderFallback()
-    else return null
-  }
-}
-
-FileImageLoader.propTypes = {
-  file: PropTypes.object.isRequired,
-  render: PropTypes.func.isRequired,
-  linkType: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'icon']),
-  onError: PropTypes.func,
-  renderFallback: PropTypes.func
-}
-
-FileImageLoader.defaultProps = {
-  linkType: 'small',
-  onError: () => {}
-}
-
-export default withClient(FileImageLoader)

package/react/FileImageLoader/index.spec.jsx

@@ -1,176 +0,0 @@
-import { render, waitFor } from '@testing-library/react'
-import React from 'react'
-
-import { createMockClient } from 'cozy-client'
-import logger from 'cozy-logger'
-
-import { FileImageLoader } from '.'
-import { checkImageSource } from './checkImageSource'
-import EncryptedProvider from '../providers/Encrypted'
-
-jest.mock('./checkImageSource', () => ({
-  ...jest.requireActual('./checkImageSource'),
-  checkImageSource: jest.fn()
-}))
-
-logger.error = logger.warn = jest.fn()
-
-const client = createMockClient({})
-const getMock = jest.fn()
-const getDownloadLinkByIdMock = jest.fn()
-client.collection = jest.fn(() => ({
-  getDownloadLinkById: getDownloadLinkByIdMock,
-  get: getMock
-}))
-client.plugins.realtime = {
-  subscribe: jest.fn(),
-  unsubscribe: jest.fn(),
-  unsubscribeAll: jest.fn()
-}
-
-const file = {
-  _id: 'image',
-  class: 'image',
-  name: 'Demo.img',
-  mime: 'application/jpeg',
-  links: {
-    large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
-  }
-}
-
-const setup = ({ file, url }) => {
-  const root = render(
-    <EncryptedProvider url={url}>
-      <FileImageLoader
-        file={file}
-        linkType="large"
-        key={file.id}
-        render={src => (
-          <img alt={file.name} src={src} data-testid="img_image" />
-        )}
-        renderFallback={() => (
-          <img
-            alt="render fallback"
-            src="http://url.img_image_render_fallback/"
-            data-testid="img_image_renderFallback"
-          />
-        )}
-        client={client}
-      />
-    </EncryptedProvider>
-  )
-
-  return { root }
-}
-
-describe('FileImageLoader', () => {
-  afterEach(() => {
-    jest.restoreAllMocks()
-  })
-
-  it('should set the source of image to links.large if no error', async () => {
-    const { root } = setup({ file })
-    const { getByTestId } = root
-
-    checkImageSource.mockResolvedValue('ok')
-    await waitFor(() => getByTestId('img_image'))
-
-    const img = getByTestId('img_image')
-    expect(img.src).toEqual(file.links.large)
-  })
-
-  it('should use URL when set', async () => {
-    const url = 'blob:http://theimageblob'
-    const { root } = setup({ file, url })
-    const { getByTestId } = root
-    checkImageSource.mockResolvedValue('ok')
-    await waitFor(() => getByTestId('img_image'))
-
-    const img = getByTestId('img_image')
-    expect(img.src).toEqual(url)
-    expect(getMock).not.toHaveBeenCalled()
-  })
-
-  it('should makes a request to fetch links if the links is not right anymore', async () => {
-    const file = {
-      _id: 'image',
-      class: 'image',
-      name: 'Demo.img',
-      mime: 'application/jpeg',
-      links: {
-        large: 'https://url.not.valid.anymore'
-      }
-    }
-
-    checkImageSource.mockRejectedValueOnce('KO')
-    const { root } = setup({ file })
-    const { getByTestId } = root
-    getMock.mockResolvedValue({
-      data: {
-        links: {
-          large: 'http://urlvalid'
-        }
-      }
-    })
-    checkImageSource.mockResolvedValueOnce('OK')
-    await waitFor(() => getByTestId('img_image'))
-
-    const img = getByTestId('img_image')
-    expect(img.src).toEqual('http://urlvalid/')
-    expect(getMock).toHaveBeenCalled()
-  })
-
-  it('should fallback to fallback if other request failed ', async () => {
-    const file = {
-      _id: 'image',
-      class: 'image',
-      name: 'Demo.img',
-      mime: 'application/jpeg',
-      links: {
-        large: 'https://url.not.valid.anymore'
-      }
-    }
-    checkImageSource.mockRejectedValueOnce('KO')
-    const { root } = setup({ file })
-    const { getByTestId } = root
-    getMock.mockResolvedValue({
-      data: {
-        links: {
-          large: 'http://urlnotvalidneither'
-        }
-      }
-    })
-    checkImageSource.mockRejectedValueOnce('KO')
-    getDownloadLinkByIdMock.mockResolvedValue('http://valid/')
-    await waitFor(() => getByTestId('img_image'))
-
-    const img = getByTestId('img_image')
-    expect(img.src).toEqual('http://valid/')
-  })
-
-  it('should render fallback component if other request failed & file is a PDF', async () => {
-    const file = {
-      _id: 'pdf',
-      class: 'pdf',
-      name: 'Demo.pdf',
-      mime: 'application/pdf',
-      links: {
-        icon: 'https://url.not.valid.anymore'
-      }
-    }
-    checkImageSource.mockRejectedValueOnce('KO')
-    const { root } = setup({ file })
-    const { getByTestId } = root
-    getMock.mockResolvedValue({
-      data: {
-        links: {
-          icon: 'http://urlnotvalidneither'
-        }
-      }
-    })
-    await waitFor(() => getByTestId('img_image_renderFallback'))
-
-    const img = getByTestId('img_image_renderFallback')
-    expect(img.src).toEqual('http://url.img_image_render_fallback/')
-  })
-})

package/react/FilePicker/FilePickerBody.jsx

@@ -1,111 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useCallback } from 'react'
-
-import { models, useQuery } from 'cozy-client'
-
-import FilePickerBodyItem from './FilePickerBodyItem'
-import { buildContentFolderQuery } from './queries'
-import List from '../List'
-import LoadMore from '../LoadMore'
-import { isValidFile } from '../helpers/acceptedTypes'
-
-const {
-  file: { isDirectory }
-} = models
-
-const FilePickerBody = ({
-  navigateTo,
-  folderId,
-  onSelectItemId,
-  itemsIdsSelected,
-  itemTypesAccepted,
-  multiple
-}) => {
-  const contentFolderQuery = buildContentFolderQuery(folderId)
-  const {
-    data: contentFolder,
-    hasMore,
-    fetchMore
-  } = useQuery(contentFolderQuery.definition, contentFolderQuery.options)
-
-  const onCheck = useCallback(
-    itemId => {
-      const isChecked = itemsIdsSelected.some(
-        fileIdSelected => fileIdSelected === itemId
-      )
-      if (isChecked) {
-        onSelectItemId(
-          itemsIdsSelected.filter(fileIdSelected => fileIdSelected !== itemId)
-        )
-      } else onSelectItemId(prev => [...prev, itemId])
-    },
-    [itemsIdsSelected, onSelectItemId]
-  )
-
-  // When click on checkbox/radio area...
-  const handleChoiceClick = useCallback(
-    item => () => {
-      if (multiple) onCheck(item._id)
-      else onSelectItemId(item._id)
-    },
-    [multiple, onCheck, onSelectItemId]
-  )
-
-  // ...when click anywhere on the rest of the line
-  const handleListItemClick = useCallback(
-    item => () => {
-      if (isDirectory(item)) {
-        navigateTo(contentFolder.find(it => it._id === item._id))
-      }
-
-      if (isValidFile(item, itemTypesAccepted)) {
-        if (multiple) onCheck(item._id)
-        else onSelectItemId(item._id)
-      }
-    },
-    [
-      contentFolder,
-      itemTypesAccepted,
-      multiple,
-      navigateTo,
-      onCheck,
-      onSelectItemId
-    ]
-  )
-
-  return (
-    <List>
-      {contentFolder &&
-        contentFolder.map((item, idx) => {
-          const hasDivider = contentFolder
-            ? idx !== contentFolder.length - 1
-            : false
-
-          return (
-            <FilePickerBodyItem
-              key={item._id}
-              item={item}
-              itemTypesAccepted={itemTypesAccepted}
-              multiple={multiple}
-              handleChoiceClick={handleChoiceClick}
-              handleListItemClick={handleListItemClick}
-              onCheck={onCheck}
-              itemsIdsSelected={itemsIdsSelected}
-              hasDivider={hasDivider}
-            />
-          )
-        })}
-      {hasMore && <LoadMore label="loadMore" fetchMore={fetchMore} />}
-    </List>
-  )
-}
-
-FilePickerBody.propTypes = {
-  onSelectItemId: PropTypes.func.isRequired,
-  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
-  folderId: PropTypes.string.isRequired,
-  navigateTo: PropTypes.func.isRequired,
-  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired
-}
-
-export default FilePickerBody