cozy-ui-plus 1.1.0

package/src/FilePicker/FilePickerBodyItem.jsx

@@ -0,0 +1,126 @@
+import cx from 'classnames'
+import filesize from 'filesize'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { models } from 'cozy-client'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileTypeFolder from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
+import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import { isValidFile, isValidFolder } from './helpers'
+import styles from './styles.styl'
+
+const {
+  file: { isDirectory, isFile }
+} = models
+
+const useStyles = makeStyles(() => ({
+  verticalDivider: {
+    height: '2rem',
+    display: 'flex',
+    alignSelf: 'auto',
+    alignItems: 'center',
+    marginLeft: '0.5rem'
+  }
+}))
+
+const FilePickerBodyItem = ({
+  item,
+  itemTypesAccepted,
+  multiple,
+  handleChoiceClick,
+  handleListItemClick,
+  itemsIdsSelected,
+  hasDivider
+}) => {
+  const classes = useStyles()
+  const { f } = useI18n()
+  const hasChoice =
+    isValidFile(item, itemTypesAccepted) ||
+    isValidFolder(item, itemTypesAccepted)
+
+  const Input = multiple ? Checkbox : Radio
+
+  const listItemSecondaryContent = isFile(item)
+    ? `${f(item.updated_at, 'dd LLL yyyy')} - ${filesize(item.size, {
+        base: 10
+      })}`
+    : null
+
+  return (
+    <>
+      <ListItem
+        disabled={!hasChoice && isFile(item)}
+        size="small"
+        button
+        data-testid="list-item"
+      >
+        <div
+          data-testid="listitem-onclick"
+          className={styles['filePickerBreadcrumb-wrapper']}
+          onClick={handleListItemClick(item)}
+        >
+          <ListItemIcon>
+            <Icon
+              icon={isDirectory(item) ? FileTypeFolder : FileTypeText}
+              width="32"
+              height="32"
+            />
+          </ListItemIcon>
+          <ListItemText
+            primary={item.name}
+            secondary={listItemSecondaryContent}
+          />
+        </div>
+        {isDirectory(item) && hasChoice && (
+          <Divider
+            orientation="vertical"
+            flexItem
+            className={classes.verticalDivider}
+          />
+        )}
+        <div
+          data-testid="choice-onclick"
+          className="u-pv-half u-h-2 u-flex u-flex-items-center"
+          onClick={hasChoice ? handleChoiceClick(item) : undefined}
+        >
+          <Input
+            data-testid={multiple ? 'checkbox-btn' : 'radio-btn'}
+            onChange={() => {
+              // handled by onClick on the container
+            }}
+            checked={itemsIdsSelected.includes(item._id)}
+            value={item._id}
+            className={cx('u-p-0', {
+              'u-o-100': hasChoice,
+              'u-o-0': !hasChoice
+            })}
+            disabled={!hasChoice}
+          />
+        </div>
+      </ListItem>
+      {hasDivider && <Divider component="li" />}
+    </>
+  )
+}
+
+FilePickerBodyItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired,
+  multiple: PropTypes.bool,
+  handleChoiceClick: PropTypes.func.isRequired,
+  handleListItemClick: PropTypes.func.isRequired,
+  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  hasDivider: PropTypes.bool.isRequired
+}
+
+export default FilePickerBodyItem

package/src/FilePicker/FilePickerBodyItem.spec.jsx

@@ -0,0 +1,164 @@
+import { render, fireEvent } from '@testing-library/react'
+import filesize from 'filesize'
+import React from 'react'
+
+import FilePickerBodyItem from './FilePickerBodyItem'
+import DemoProvider from './docs/DemoProvider'
+import { isValidFile, isValidFolder } from './helpers'
+
+const mockFile01 = {
+  _id: '001',
+  type: 'file',
+  name: 'Filename.pdf',
+  mime: 'application/pdf',
+  updated_at: '2021-01-01T12:00:00.000000+01:00'
+}
+const mockFolder01 = {
+  _id: '002',
+  type: 'directory',
+  name: 'Foldername',
+  updated_at: '2021-01-01T12:00:00.000000+01:00'
+}
+
+jest.mock('filesize', () => jest.fn())
+jest.mock('./helpers', () => ({
+  ...jest.requireActual('./helpers'),
+  isValidFile: jest.fn(),
+  isValidFolder: jest.fn()
+}))
+
+describe('FilePickerBodyItem components:', () => {
+  const mockHandleChoiceClick = jest.fn()
+  const mockHandleListItemClick = jest.fn()
+  filesize.mockReturnValue('111Ko')
+
+  const setup = ({
+    item = mockFile01,
+    multiple = false,
+    validFile = false,
+    validFolder = false
+  } = {}) => {
+    isValidFile.mockReturnValue(validFile)
+    isValidFolder.mockReturnValue(validFolder)
+
+    return render(
+      <DemoProvider>
+        <FilePickerBodyItem
+          item={item}
+          itemTypesAccepted={[]}
+          multiple={multiple}
+          handleChoiceClick={mockHandleChoiceClick}
+          handleListItemClick={mockHandleListItemClick}
+          itemsIdsSelected={[]}
+          hasDivider={false}
+        />
+      </DemoProvider>
+    )
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should be rendered correctly', () => {
+    const { container } = setup()
+
+    expect(container).toBeDefined()
+  })
+
+  it('should display filename', () => {
+    const { getByText } = setup()
+
+    expect(getByText('Filename.pdf'))
+  })
+
+  it('should display foldername', () => {
+    const { getByText } = setup({ item: mockFolder01 })
+
+    expect(getByText('Foldername'))
+  })
+
+  it("should item's line is not disabled when has not valid type & is File", () => {
+    const { getByTestId } = setup({
+      item: mockFile01,
+      validFile: false,
+      validFolder: false
+    })
+    const listItem = getByTestId('list-item')
+
+    expect(listItem).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it("should item's line is not disabled when has not valid type & is Folder", () => {
+    const { getByTestId } = setup({
+      item: mockFolder01,
+      validFile: false,
+      validFolder: false
+    })
+    const listItem = getByTestId('list-item')
+
+    expect(listItem).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  describe('Functions called', () => {
+    it('should call "handleChoiceClick" function when click on checkbox/radio area', () => {
+      const { getByTestId } = setup({ validFile: true })
+      fireEvent.click(getByTestId('choice-onclick'))
+
+      expect(mockHandleChoiceClick).toHaveBeenCalled()
+    })
+
+    it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is Folder & not accepted', () => {
+      const { getByTestId } = setup({
+        item: mockFolder01,
+        validFolder: false
+      })
+      fireEvent.click(getByTestId('choice-onclick'))
+
+      expect(mockHandleChoiceClick).not.toHaveBeenCalled()
+    })
+    it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is File & not accepted', () => {
+      const { getByTestId } = setup({ validFile: false })
+      fireEvent.click(getByTestId('choice-onclick'))
+
+      expect(mockHandleChoiceClick).not.toHaveBeenCalled()
+    })
+
+    it('should call "handleListItemClick" function when click on ListItem node', () => {
+      const { getByTestId } = setup()
+      fireEvent.click(getByTestId('listitem-onclick'))
+
+      expect(mockHandleListItemClick).toHaveBeenCalled()
+    })
+  })
+
+  describe('Attribute "multiple"', () => {
+    it('should radio button exists if "multiple" atribute is False', () => {
+      const { getByTestId } = setup()
+      const radioBtn = getByTestId('radio-btn')
+      expect(radioBtn).not.toBeNull()
+    })
+
+    it('should checkbox button exists if "multiple" atribute is True', () => {
+      const { getByTestId } = setup({ multiple: true })
+      const checkboxBtn = getByTestId('checkbox-btn')
+      expect(checkboxBtn).not.toBeNull()
+    })
+  })
+
+  describe('Radio/Checkbox button', () => {
+    it('should disable and not display the Radio button if it is a File and is not accepted', () => {
+      const { getByTestId } = setup({ validFile: false })
+      const radioBtn = getByTestId('radio-btn')
+
+      expect(radioBtn.getAttribute('disabled')).toBe(null)
+    })
+
+    it('should disable and not display the Radio button if it is a Folder and is not accepted', () => {
+      const { getByTestId } = setup({ item: mockFolder01 })
+      const radioBtn = getByTestId('radio-btn')
+
+      expect(radioBtn.getAttribute('disabled')).toBe(null)
+    })
+  })
+})

package/src/FilePicker/FilePickerBreadcrumb.jsx

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types'
+import React, { Fragment, useCallback, memo } from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import styles from './styles.styl'
+
+const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
+  const { isMobile } = useBreakpoints()
+  const hasPath = path && path.length > 0
+
+  const navigateTo = useCallback(
+    folder => () => onBreadcrumbClick(folder),
+    [onBreadcrumbClick]
+  )
+
+  return (
+    <Typography variant="h4" className="u-flex u-flex-items-center">
+      {hasPath
+        ? isMobile
+          ? path[path.length - 1].name
+          : path.map((folder, idx) => {
+              if (idx < path.length - 1) {
+                return (
+                  <Fragment key={idx}>
+                    <span
+                      className={styles['filePickerBreadcrumb-previousPath']}
+                      onClick={navigateTo(folder)}
+                    >
+                      {folder.name}
+                    </span>
+                    <Icon
+                      icon={RightIcon}
+                      className={styles['filePickerBreadcrumb-icon']}
+                    />
+                  </Fragment>
+                )
+              } else {
+                return <span key={idx}>{folder.name}</span>
+              }
+            })
+        : null}
+    </Typography>
+  )
+}
+
+FilePickerBreadcrumb.propTypes = {
+  path: PropTypes.array,
+  onBreadcrumbClick: PropTypes.func
+}
+
+export default memo(FilePickerBreadcrumb)

package/src/FilePicker/FilePickerFooter.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React, { memo } from 'react'
+
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import { createUseI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
+
+const locales = { en, fr, ru, vi }
+const useI18n = createUseI18n(locales)
+
+const FilePickerFooter = ({ onConfirm, onClose, disabledConfirm }) => {
+  const { t } = useI18n()
+
+  return (
+    <>
+      <Button
+        data-testid="close-btn"
+        label={t('footer.buttons.cancel')}
+        theme="secondary"
+        onClick={onClose}
+      />
+      <Button
+        data-testid="confirm-btn"
+        label={t('footer.buttons.confirm')}
+        onClick={onConfirm}
+        disabled={disabledConfirm}
+      />
+    </>
+  )
+}
+
+FilePickerFooter.propTypes = {
+  onConfirm: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  disabledConfirm: PropTypes.bool.isRequired
+}
+
+export default memo(FilePickerFooter)

package/src/FilePicker/FilePickerFooter.spec.jsx

@@ -0,0 +1,41 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import FilePickerFooter from './FilePickerFooter'
+import DemoProvider from './docs/DemoProvider'
+
+describe('FilePickerFooter components:', () => {
+  const mockOnConfirm = jest.fn()
+  const mockOnClose = jest.fn()
+
+  const setup = (disabledConfirm = false) => {
+    return render(
+      <DemoProvider>
+        <FilePickerFooter
+          onConfirm={mockOnConfirm}
+          onClose={mockOnClose}
+          disabledConfirm={disabledConfirm}
+        />
+      </DemoProvider>
+    )
+  }
+  it('should be rendered correctly', () => {
+    const { container } = setup()
+
+    expect(container).toBeDefined()
+  })
+
+  it('should confirm button have been called', () => {
+    const { getByTestId } = setup()
+    fireEvent.click(getByTestId('confirm-btn'))
+
+    expect(mockOnConfirm).toHaveBeenCalled()
+  })
+
+  it('should close button have been called', () => {
+    const { getByTestId } = setup()
+    fireEvent.click(getByTestId('close-btn'))
+
+    expect(mockOnClose).toHaveBeenCalled()
+  })
+})

package/src/FilePicker/FilePickerHeader.jsx

@@ -0,0 +1,89 @@
+import get from 'lodash/get'
+import uniqBy from 'lodash/uniqBy'
+import PropTypes from 'prop-types'
+import React, { useCallback, memo } from 'react'
+
+import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import { ROOT_DIR_ID } from '.'
+import FilePickerBreadcrumb from './FilePickerBreadcrumb'
+import { buildCurrentFolderQuery } from './queries'
+
+/**
+ * @param {IOCozyFolder} displayedFolder - An io.cozy.files folder
+ * @returns {{id: string, name: string}[]}
+ */
+const getBreadcrumbPath = displayedFolder => {
+  return uniqBy(
+    [
+      {
+        id: ROOT_DIR_ID
+      },
+      {
+        id: get(displayedFolder, 'dir_id')
+      },
+      {
+        id: displayedFolder.id,
+        name: displayedFolder.name
+      }
+    ],
+    'id'
+  )
+    .filter(({ id }) => Boolean(id))
+    .map(breadcrumb => ({
+      id: breadcrumb.id,
+      name: breadcrumb.name || (breadcrumb.id === ROOT_DIR_ID ? 'Drive' : '…')
+    }))
+}
+
+const FilePickerHeader = ({ navigateTo, folderId, onClose }) => {
+  const { isMobile } = useBreakpoints()
+
+  const currentFolderQuery = buildCurrentFolderQuery(folderId)
+  const { data: currentFolder, ...restCurrentFolder } = useQuery(
+    currentFolderQuery.definition,
+    currentFolderQuery.options
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const path = hasQueryBeenLoaded(restCurrentFolder)
+    ? getBreadcrumbPath(currentFolder[0])
+    : []
+
+  const onBack = useCallback(path => navigateTo(path), [navigateTo])
+
+  const handleClick = useCallback(() => {
+    path.length > 1 && isMobile ? onBack(path[path.length - 2]) : onClose()
+  }, [isMobile, path, onBack, onClose])
+
+  return (
+    <div className="u-flex u-flex-items-center">
+      {isMobile && (
+        <IconButton
+          onClick={handleClick}
+          className="u-p-0 u-pr-1"
+          size="medium"
+        >
+          <Icon icon={Previous} />
+        </IconButton>
+      )}
+      <FilePickerBreadcrumb
+        path={path}
+        onBreadcrumbClick={navigateTo}
+        opening={false}
+        inlined
+      />
+    </div>
+  )
+}
+
+FilePickerHeader.propTypes = {
+  folderId: PropTypes.string.isRequired,
+  navigateTo: PropTypes.func.isRequired
+}
+
+export default memo(FilePickerHeader)

package/src/FilePicker/Readme.md

@@ -0,0 +1,50 @@
+FilePicker allows you to select a file or folder in Drive
+
+```jsx
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import FilePicker from 'cozy-ui/transpiled/react/FilePicker'
+import Variants from 'cozy-ui/docs/components/Variants'
+import DemoProvider from './docs/DemoProvider';
+
+initialState = {
+  filePickerOpened: isTesting()
+};
+
+const initialVariants = [
+  { acceptFileTXT: false, acceptFileMD: false, acceptFolder: false, multiple: false }
+];
+
+const toggleFilePicker = () => setState({ filePickerOpened: !state.filePickerOpened });
+const onChange = (fileId) => alert(`ID of file selected : [${fileId}]`);
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => {
+      const acceptRule = []
+      if (variant.acceptFileMD) {
+        acceptRule.push('.md')
+      }
+      if (variant.acceptFileTXT) {
+        acceptRule.push('.txt')
+      }
+      if (variant.acceptFolder) {
+        acceptRule.push('folder')
+      }
+
+      return (
+        <>
+          <button onClick={toggleFilePicker}>Open FilePicker</button>
+          {state.filePickerOpened && (
+            <FilePicker
+              onClose={toggleFilePicker}
+              onChange={onChange}
+              accept={acceptRule.toString()}
+              multiple={variant.multiple}
+            />
+          )}
+        </>
+      )
+    }}
+  </Variants>
+</DemoProvider>
+```