cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/Accordion/Readme.md

@@ -1 +1,36 @@
 See [Material UI documentation](https://material-ui.com/demos/expansion-panels/) to learn more about Accordion.
+
+```jsx
+import Accordion from 'cozy-ui/transpiled/react/Accordion'
+import AccordionSummary from 'cozy-ui/transpiled/react/AccordionSummary'
+import AccordionDetails from 'cozy-ui/transpiled/react/AccordionDetails'
+
+;
+
+<>
+  <Accordion>
+    <AccordionSummary>
+      Click to expand/collapse the first item
+    </AccordionSummary>
+    <AccordionDetails>
+      <p className='u-mh-1'>Lorem ipsum dolor sit amet consectetur</p>
+    </AccordionDetails>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>
+      Click to expand/collapse the second item
+    </AccordionSummary>
+    <AccordionDetails>
+      <p className='u-mh-1'>Lorem ipsum dolor sit amet consectetur</p>
+    </AccordionDetails>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>
+      Click to expand/collapse the third item
+    </AccordionSummary>
+    <AccordionDetails>
+      <p className='u-mh-1'>Lorem ipsum dolor sit amet consectetur</p>
+    </AccordionDetails>
+  </Accordion>
+</>
+```

package/react/AccordionActions/index.js

@@ -0,0 +1,3 @@
+import MuiAccordionActions from '@material-ui/core/AccordionActions'
+
+export default MuiAccordionActions

package/react/AccordionDetails/index.js

@@ -0,0 +1,3 @@
+import AccordionDetails from '@material-ui/core/AccordionDetails'
+
+export default AccordionDetails

package/react/AccordionSummary/AccordionExpandIcon.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+import Icon from '../Icon'
+import BottomIcon from '../Icons/Bottom'
+
+const AccordionExpandIcon = () => <Icon icon={BottomIcon} width={12} />
+
+export default AccordionExpandIcon

package/react/AccordionSummary/index.js

@@ -0,0 +1,10 @@
+import AccordionSummary from '@material-ui/core/AccordionSummary'
+import React from 'react'
+
+import AccordionExpandIcon from './AccordionExpandIcon'
+
+AccordionSummary.defaultProps = {
+  expandIcon: <AccordionExpandIcon />
+}
+
+export default AccordionSummary

package/react/ActionsBar/Readme.md

@@ -0,0 +1,54 @@
+Use same actions as `<ActionsMenu />`.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
+import { makeActions, modify, emailTo, download, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+const selectedItem = {
+    _id: 1,
+    type: 'file'
+}
+
+const doc = {
+  _id: 'id01',
+  _type: 'io.cozy.contacts',
+  phone: [{ number: '0102030405' }],
+  email: [{ address: 'johndoe@cozy.cc' }],
+}
+
+initialState = { selected: isTesting() ? [doc, doc] : [] }
+
+const addSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.push(doc)
+    return { selected: arr }
+})
+
+const removeSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.pop()
+    return { selected: arr }
+})
+
+const actions = makeActions([ modify, call, download, smsTo, emailTo ])
+
+;
+
+<DemoProvider>
+  <Buttons label="Add a selected document" className="u-mb-1-s u-mr-1" onClick={addSelected} />
+  <Buttons label="Remove a selected document" onClick={removeSelected} />
+
+  {state.selected.length > 0 && (
+    <ActionsBar
+      actions={actions}
+      docs={state.selected}
+      onClose={() => setState({selected: []})}
+    />
+  )}
+</DemoProvider>
+```

package/react/ActionsBar/ResponsiveAction.jsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react'
+
+import Button from '../Buttons'
+import Icon from '../Icon'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+import { makeStyles } from '../styles'
+
+const useDesktopStyles = makeStyles({
+  root: {
+    border: 'none !important', // to force also on disabled status
+    '&:hover': {
+      border: 'none'
+    }
+  }
+})
+
+const useMobileStyles = makeStyles({
+  root: {
+    display: 'block',
+    height: '100%',
+    flex: '1 1 0',
+    padding: 0,
+    border: 'none !important', // to force also when disabled
+    '&:hover': {
+      border: 'none'
+    }
+  },
+  label: { textTransform: 'none' },
+  startIcon: {
+    marginRight: 0,
+    marginBottom: 2
+  }
+})
+
+const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
+  const { isMobile } = useBreakpoints()
+  const useStyles = isMobile ? useMobileStyles : useDesktopStyles
+  const styles = useStyles()
+
+  return (
+    <Button
+      ref={ref}
+      classes={styles}
+      variant="secondary"
+      startIcon={<Icon icon={action.icon} />}
+      label={
+        isMobile ? (
+          <Typography
+            variant="caption"
+            color={disabled ? 'inherit' : 'textPrimary'}
+          >
+            {action.label}
+          </Typography>
+        ) : (
+          action.label
+        )
+      }
+      disabled={disabled}
+      onClick={onClick}
+    />
+  )
+})
+
+ResponsiveAction.displayName = 'ResponsiveAction'
+
+export default ResponsiveAction

package/react/ActionsBar/index.jsx

@@ -0,0 +1,217 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState, useMemo } from 'react'
+
+import ResponsiveAction from './ResponsiveAction'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenu from '../ActionsMenu'
+import { makeActions, others } from '../ActionsMenu/Actions'
+import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
+import ActionsItems from '../ActionsMenu/ActionsItems'
+import AppBar from '../AppBar'
+import Box from '../Box'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import CheckCircleIcon from '../Icons/CheckCircle'
+import CrossIcon from '../Icons/Cross'
+import CrossCircleIcon from '../Icons/CrossCircle'
+import DotsIcon from '../Icons/Dots'
+import Toolbar from '../Toolbar'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+import CozyTheme from '../providers/CozyTheme'
+import { useI18n } from '../providers/I18n'
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles({
+  appBar: ({ isMobile }) => ({
+    width: !isMobile ? 'calc(100% - 44px)' : '100%',
+    right: !isMobile ? '22px' : '0',
+    height: isMobile ? '4rem' : '3rem',
+    top: isMobile ? 'auto' : 0,
+    bottom: isMobile ? 0 : undefined,
+    zIndex: 'var(--zIndex-selection)',
+    borderRadius: isMobile ? '16px 16px 0 0' : '0 0 16px 16px',
+    boxShadow: isMobile ? 'var(--shadow8)' : 'var(--shadow1)'
+  }),
+  toolbar: {
+    height: 'inherit'
+  },
+  selectedCount: ({ isMobile }) => ({
+    display: 'flex',
+    flexShrink: 0,
+    position: 'relative',
+    height: 'inherit',
+    minWidth: '2rem',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '0.5rem',
+    gap: !isMobile ? '1rem' : undefined,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      right: '-0.5rem',
+      borderTop: '0.5rem solid transparent',
+      borderBottom: '0.5rem solid transparent',
+      borderLeft: '0.5rem solid var(--primaryColor)'
+    }
+  }),
+  desktopCloseButton: {
+    position: 'absolute',
+    right: 0
+  },
+  actionsContainer: ({ isMobile }) => ({
+    display: 'flex',
+    height: '100%',
+    flexGrow: 1,
+    paddingRight: !isMobile ? 48 : 0,
+    alignItems: 'center',
+    justifyContent: !isMobile ? 'end' : 'center'
+  })
+})
+
+const SelectedCount = ({ docs, onClose }) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+
+  if (isMobile)
+    return (
+      <Box
+        className="u-flex u-flex-items-center u-h-100 u-pr-1"
+        borderRadius="15px 0 0 0"
+        bgcolor="primary.main"
+        color="primary.contrastText"
+      >
+        <IconButton color="inherit" onClick={onClose}>
+          <Icon icon={CrossCircleIcon} />
+        </IconButton>
+        {docs.length}
+      </Box>
+    )
+
+  return (
+    <div className="u-flex u-flex-items-center u-h-100 u-ph-1">
+      <Icon
+        className="u-mr-1"
+        icon={CheckCircleIcon}
+        color="var(--iconTextColor)"
+      />
+      <Typography variant="body1" component="span">
+        {t('selected_light', docs.length)}
+      </Typography>
+    </div>
+  )
+}
+
+const ActionsBar = ({
+  actions,
+  docs,
+  autoClose,
+  maxDesktopActions,
+  onClose
+}) => {
+  const { isMobile } = useBreakpoints()
+  const anchorRef = useRef()
+  const [showMenu, setShowMenu] = useState(false)
+  const styles = useStyles({ isMobile })
+
+  const showDesktopCloseButton = !!onClose && !isMobile
+  const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions
+
+  const cleanedActions = useMemo(
+    () => getOnlyNeededActions(actions, docs),
+    [actions, docs]
+  )
+
+  const countActionsToDisplay =
+    cleanedActions.length > maxActionsDisplayed
+      ? maxActionsDisplayed - 1
+      : maxActionsDisplayed
+  const SLICE_INDEX = Math.max(1, countActionsToDisplay)
+  const barActions = cleanedActions.slice(0, SLICE_INDEX)
+  const menuActions = cleanedActions.slice(SLICE_INDEX)
+  const otherAction = makeActions([others])
+
+  const handleClick = () => {
+    autoClose && onClose?.()
+  }
+
+  return (
+    <CozyTheme variant="inverted">
+      <AppBar className={styles.appBar} position="fixed" color="inherit">
+        <Toolbar
+          className={styles.toolbar}
+          variant={isMobile ? 'regular' : 'dense'}
+          disableGutters
+        >
+          {showDesktopCloseButton && (
+            <IconButton className={styles.desktopCloseButton} onClick={onClose}>
+              <Icon icon={CrossIcon} />
+            </IconButton>
+          )}
+          <SelectedCount docs={docs} onClose={onClose} />
+          <div className={styles.actionsContainer}>
+            {/* actions displayed in the bar itself */}
+            <ActionsItems
+              docs={docs}
+              component={ResponsiveAction}
+              actions={barActions}
+              onClick={handleClick}
+            />
+
+            {/* actions displayed in ActionsMenu */}
+            {menuActions.length > 0 && (
+              <>
+                {isMobile ? (
+                  <ActionsItems
+                    docs={docs}
+                    component={ResponsiveAction}
+                    actions={otherAction}
+                    onClick={() => setShowMenu(true)}
+                  />
+                ) : (
+                  <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
+                    <Icon icon={DotsIcon} />
+                  </IconButton>
+                )}
+                <ActionsMenu
+                  ref={anchorRef}
+                  open={showMenu}
+                  docs={docs}
+                  actions={menuActions}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                  }}
+                  componentsProps={{
+                    actionsItems: {
+                      onClick: handleClick
+                    }
+                  }}
+                  onClose={() => setShowMenu(false)}
+                />
+              </>
+            )}
+          </div>
+        </Toolbar>
+      </AppBar>
+    </CozyTheme>
+  )
+}
+
+ActionsBar.propTypes = {
+  /**
+   * A number corresponding to the display of the maximum number of items.
+   * The other actions will be displayed in an additional menu.
+   * Only works on desktop since maximum number is forced in mobile
+   */
+  maxDesktopActions: PropTypes.number,
+  autoClose: PropTypes.bool
+}
+
+ActionsBar.defaultProps = {
+  maxDesktopActions: 5,
+  autoClose: true
+}
+
+export default withActionsLocales(ActionsBar)

package/react/ActionsBar/locales/en.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} item selected |||| %{smart_count} items selected",
+  "selected_light": "%{smart_count} item |||| %{smart_count} items"
+}

package/react/ActionsBar/locales/fr.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés",
+  "selected_light": "%{smart_count} élément |||| %{smart_count} éléments"
+}

package/react/ActionsBar/locales/ru.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} элемент выбран |||| %{smart_count} элементов выбрано",
+  "selected_light": "%{smart_count} элемент |||| %{smart_count} элементов"
+}

package/react/ActionsBar/locales/vi.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} mục được chọn |||| %{smart_count} mục được chọn",
+  "selected_light": "%{smart_count} mục |||| %{smart_count} mục"
+}

package/react/ActionsBar/locales/withActionsLocales.jsx

@@ -0,0 +1,14 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}
+
+export default withOnlyLocales(locales)

package/react/ActionsMenu/Actions/addToFavorites.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import StarOutlineIcon from '../../Icons/StarOutline'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'addToFavorites'
+
+  return Component
+}
+
+export const addToFavorites = ({ showAlert }) => {
+  const { t } = getActionsI18n()
+  const icon = StarOutlineIcon
+  const label = t('favorites.add.label')
+
+  return {
+    name: 'addToFavorites',
+    icon,
+    label,
+    displayCondition: docs =>
+      docs.length > 0 && docs.every(doc => !doc.cozyMetadata?.favorite),
+    Component: makeComponent(label, icon),
+    action: async (docs, { client }) => {
+      try {
+        for (const doc of docs) {
+          await client.save({
+            ...doc,
+            cozyMetadata: {
+              ...doc.cozyMetadata,
+              favorite: true
+            }
+          })
+        }
+
+        const { filename } = splitFilename(docs[0])
+        showAlert({
+          message: t('favorites.add.success', {
+            filename,
+            smart_count: docs.length
+          }),
+          severity: 'success'
+        })
+      } catch (error) {
+        showAlert({ message: t('favorites.error'), severity: 'error' })
+      }
+    }
+  }
+}

package/react/ActionsMenu/Actions/call.js

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import TelephoneIcon from '../../Icons/Telephone'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+export const call = () => {
+  const { t } = getActionsI18n()
+  const icon = TelephoneIcon
+  const label = t('call')
+
+  return {
+    name: 'call',
+    icon,
+    label,
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
+      !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
+    },
+    Component: forwardRef((props, ref) => {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={icon} />
+          </ListItemIcon>
+          <ListItemText primary={label} />
+        </ActionsMenuItem>
+      )
+    })
+  }
+}

package/react/ActionsMenu/Actions/copyToClipboard.js

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import CopyIcon from '../../Icons/Copy'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'copyToClipboard'
+
+  return Component
+}
+
+export const copyToClipboard = () => {
+  const { t } = getActionsI18n()
+  const icon = CopyIcon
+  const label = t('copyToClipboard.copy')
+
+  return {
+    name: 'copyToClipboard',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    action: async (_, { showAlert, copyValue }) => {
+      if (!copyValue) return false
+      try {
+        await navigator.clipboard.writeText(copyValue)
+        showAlert({
+          message: t('copyToClipboard.success'),
+          severity: 'success',
+          variant: 'filled'
+        })
+      } catch (error) {
+        showAlert({
+          message: t('copyToClipboard.error'),
+          severity: 'error',
+          variant: 'filled'
+        })
+      }
+    }
+  }
+}

package/react/ActionsMenu/Actions/divider.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react'
+
+import Divider from '../../Divider'
+
+export const divider = () => {
+  return {
+    name: 'divider',
+    Component: forwardRef((props, ref) => {
+      return <Divider className="u-mv-half" ref={ref} />
+    })
+  }
+}

package/react/ActionsMenu/Actions/download.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react'
+
+import { downloadFile } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import DownloadIcon from '../../Icons/Download'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'download'
+
+  return Component
+}
+
+export const download = ({ encryptedUrl }) => {
+  const { t } = getActionsI18n()
+  const icon = DownloadIcon
+  const label = t('download')
+
+  return {
+    name: 'download',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    action: (docs, { client, webviewIntent, driveId }) =>
+      downloadFile({
+        client,
+        file: docs[0],
+        url: encryptedUrl,
+        webviewIntent,
+        driveId
+      })
+  }
+}