cozy-ui-plus 1.1.0

package/src/Field/styles.styl

@@ -0,0 +1,41 @@
+@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/src/FileImageLoader/Readme.md

@@ -0,0 +1,112 @@
+### 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/src/FileImageLoader/checkImageSource.js

@@ -0,0 +1,29 @@
+/**
+ * @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/src/FileImageLoader/index.jsx

@@ -0,0 +1,186 @@
+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 { EncryptedContext } from 'cozy-ui/transpiled/react/providers/Encrypted'
+
+import { checkImageSource } from './checkImageSource'
+
+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/src/FileImageLoader/index.spec.jsx

@@ -0,0 +1,176 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { createMockClient } from 'cozy-client'
+import logger from 'cozy-logger'
+import EncryptedProvider from 'cozy-ui/transpiled/react/providers/Encrypted'
+
+import { FileImageLoader } from '.'
+import { checkImageSource } from './checkImageSource'
+
+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/src/FilePicker/FilePickerBody.jsx

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types'
+import React, { useCallback } from 'react'
+
+import { models, useQuery } from 'cozy-client'
+import List from 'cozy-ui/transpiled/react/List'
+
+import FilePickerBodyItem from './FilePickerBodyItem'
+import { buildContentFolderQuery } from './queries'
+import LoadMore from '../LoadMore'
+import { isValidFile } from './helpers'
+
+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