cozy-ui-plus 1.1.0

package/src/ListItem/ExpandedAttributes/helpers.spec.js

@@ -0,0 +1,175 @@
+import {
+  makeAttrsValues,
+  getAttrValue,
+  makeLabel,
+  normalizeExpandedAttribute
+} from './helpers'
+
+describe('makeAttrsValues', () => {
+  it('should return attributes names and values', () => {
+    const doc = { metadata: { number: '123', refTaxIncome: '400' } }
+    const res = makeAttrsValues(doc, [
+      'metadata.number',
+      'metadata.refTaxIncome'
+    ])
+
+    expect(res).toStrictEqual([
+      {
+        attrName: 'metadata.number',
+        attrValue: '123'
+      },
+      {
+        attrName: 'metadata.refTaxIncome',
+        attrValue: '400'
+      }
+    ])
+  })
+})
+
+describe('getAttrValue', () => {
+  it('should return the email value', () => {
+    const res = getAttrValue(
+      { email: [{ address: 'xx@yy.zz' }] },
+      'email[0].address'
+    )
+
+    expect(res).toBe('xx@yy.zz')
+  })
+
+  it('should return the primary email value', () => {
+    const res = getAttrValue(
+      {
+        email: [{ address: 'xx@yy.zz' }, { address: 'zz@yy.xx', primary: true }]
+      },
+      'email'
+    )
+
+    expect(res).toBe('zz@yy.xx')
+  })
+
+  it('should return the address value', () => {
+    const res = getAttrValue(
+      { address: [{ formattedAddress: 'baker street' }] },
+      'address[0].formattedAddress'
+    )
+
+    expect(res).toBe('baker street')
+  })
+
+  it('should return the primary address value', () => {
+    const res = getAttrValue(
+      {
+        address: [
+          { formattedAddress: 'baker street' },
+          { formattedAddress: 'street baker', primary: true }
+        ]
+      },
+      'address'
+    )
+
+    expect(res).toBe('street baker')
+  })
+
+  it('should return the phone number', () => {
+    const res = getAttrValue(
+      { phone: ['', { number: '0102030405' }] },
+      'phone[1].number'
+    )
+
+    expect(res).toBe('0102030405')
+  })
+
+  it('should return the primary phone number', () => {
+    const res = getAttrValue(
+      {
+        phone: [
+          { number: '0908070605', primary: true },
+          { number: '0102030405' }
+        ]
+      },
+      'phone'
+    )
+
+    expect(res).toBe('0908070605')
+  })
+
+  it('should return metadata number value', () => {
+    const res = getAttrValue({ metadata: { number: '123' } }, 'metadata.number')
+
+    expect(res).toBe('123')
+  })
+
+  it('should return an ISO string date', () => {
+    const res = getAttrValue(
+      { metadata: { date: '2023-03-08T12:48:18.000Z' } },
+      'metadata.date'
+    )
+
+    expect(res).toBe('2023-03-08T12:48:18.000Z')
+  })
+
+  it('should return the civility value', () => {
+    const res = getAttrValue({ civility: 'female' }, 'civility')
+
+    expect(res).toBe('female')
+  })
+})
+
+describe('normalizeExpandedAttribute', () => {
+  it('sould remove flexsearchProps and translated words', () => {
+    const res = normalizeExpandedAttribute(
+      'flexsearchProps:translated:qualificationLabel'
+    )
+
+    expect(res).toBe('qualificationLabel')
+  })
+
+  it('should keep metadata.x intact', () => {
+    const res = normalizeExpandedAttribute(
+      'flexsearchProps:translated:metadata.contractType'
+    )
+
+    expect(res).toBe('metadata.contractType')
+  })
+
+  it('should keep email[1] intact', () => {
+    const res = normalizeExpandedAttribute('flexsearchProps:email[1].address')
+
+    expect(res).toBe('email[1].address')
+  })
+
+  it('should replace : by .', () => {
+    const res = normalizeExpandedAttribute('metadata:number')
+
+    expect(res).toBe('metadata.number')
+  })
+
+  it('should do nothing for simple word', () => {
+    const res = normalizeExpandedAttribute('fullname')
+
+    expect(res).toBe('fullname')
+  })
+})
+
+describe('makeLabel', () => {
+  it('should', () => {
+    const res = makeLabel({
+      attrName: 'metadata.number',
+      qualificationLabel: 'driver_license',
+      t: x => x,
+      lang: 'fr'
+    })
+
+    expect(res).toBe('Numéro du permis')
+  })
+
+  it('should', () => {
+    const res = makeLabel({
+      attrName: 'birthday',
+      t: x => x,
+      lang: 'fr'
+    })
+
+    expect(res).toBe('ListItem.attributes.birthday')
+  })
+})

package/src/ListItem/ExpandedAttributes/index.jsx

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ExpandedAttribute from './ExpandedAttribute'
+import { makeAttrsLabelAndFormattedValue } from './helpers'
+import withListItemLocales from '../hoc/withListItemLocales'
+
+const ExpandedAttributes = ({ doc, expandedAttributes }) => {
+  const { t, f, lang } = useI18n()
+  const [alertProps, setAlertProps] = useState({
+    open: false,
+    severity: 'primary',
+    message: ''
+  })
+
+  const attrsLabelAndFormattedValue = makeAttrsLabelAndFormattedValue({
+    doc,
+    expandedAttributes,
+    t,
+    f,
+    lang
+  })
+
+  const handleClose = () => setAlertProps({ open: false })
+
+  return (
+    <>
+      {attrsLabelAndFormattedValue.map(({ label, value }, index) => {
+        return (
+          <ExpandedAttribute
+            key={index}
+            label={label}
+            value={value}
+            setAlertProps={setAlertProps}
+          />
+        )
+      })}
+      {alertProps.open && (
+        <Snackbar open onClose={handleClose}>
+          <Alert
+            variant="filled"
+            severity={alertProps.severity}
+            onClose={handleClose}
+          >
+            {alertProps.message}
+          </Alert>
+        </Snackbar>
+      )}
+    </>
+  )
+}
+
+ExpandedAttributes.propTypes = {
+  doc: PropTypes.object,
+  expandedAttributes: PropTypes.array
+}
+
+export default withListItemLocales(ExpandedAttributes)

package/src/ListItem/ListItemBase/Renaming/RenameDialog.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import withListItemLocales from '../../hoc/withListItemLocales'
+
+const RenameDialog = ({ onSubmit, onCancel }) => {
+  const { t } = useI18n()
+
+  return (
+    <ConfirmDialog
+      open
+      title={t('ListItem.renameModal.title')}
+      content={t('ListItem.renameModal.content')}
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('ListItem.renameModal.cancel')}
+            onClick={onCancel}
+          />
+          <Button label={t('ListItem.renameModal.submit')} onClick={onSubmit} />
+        </>
+      }
+      onClose={onCancel}
+    />
+  )
+}
+
+RenameDialog.propTypes = {
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func
+}
+
+export default withListItemLocales(RenameDialog)

package/src/ListItem/ListItemBase/Renaming/RenameInput.jsx

@@ -0,0 +1,134 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useReducer, useRef, useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import { splitFilename } from 'cozy-client/dist/models/file'
+import InputGroup from 'cozy-ui/transpiled/react/InputGroup'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Input from 'cozy-ui/transpiled/react/legacy/Input'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import RenameDialog from './RenameDialog'
+import { renameFile } from './helpers'
+
+const KEYS = {
+  ESCAPE: 'Escape',
+  ENTER: 'Enter'
+}
+
+const useStyles = makeStyles({
+  inputGroup: {
+    maxWidth: 'none',
+    height: '2rem',
+    margin: '1rem 1rem 1rem 0',
+    '& > div': {
+      display: 'flex'
+    },
+    '& input': {
+      maxWidth: 'none',
+      padding: '.3125rem'
+    }
+  },
+  spinner: {
+    margin: '.4375rem'
+  }
+})
+
+const RenameInput = ({ file, onClose }) => {
+  const client = useClient()
+  const styles = useStyles()
+  const textInput = useRef()
+  const [isBusy, toggleBusy] = useReducer(prev => !prev, false)
+  const [isModalOpened, setIsModalOpened] = useState(false)
+  const defaultValue = file.name
+
+  const check = async () => {
+    const { value } = textInput.current
+    if (value === '' || value === '.' || value === '..') {
+      await submit()
+      return
+    }
+    const oldExtension = splitFilename({
+      name: defaultValue,
+      type: 'file'
+    }).extension
+    const newExtension = splitFilename({
+      name: value,
+      type: 'file'
+    }).extension
+    if (oldExtension === newExtension) {
+      await submit()
+      return
+    }
+    setIsModalOpened(true)
+  }
+
+  const submit = async () => {
+    const { value } = textInput.current
+    await close(value)
+  }
+
+  const cancel = async () => {
+    await close(defaultValue)
+  }
+
+  const close = async value => {
+    toggleBusy()
+    if (value !== defaultValue) {
+      await renameFile(client, file, value)
+    }
+    onClose()
+  }
+
+  const handleKeyDown = async event => {
+    if (event.key === KEYS.ENTER) {
+      await check()
+    } else if (event.key === KEYS.ESCAPE) {
+      await cancel()
+    }
+  }
+
+  const handleBlur = async () => {
+    // On top of "normal" blurs, the event happens all the time after a submit or a cancel, because this component is removed from the DOM while having the focus.
+    // we want to do things only on "normal" blurs, *not* after a cancel
+    if (!isModalOpened && !isBusy) {
+      await check()
+    }
+  }
+
+  const handleFocus = () => {
+    const { length } = splitFilename({
+      name: defaultValue,
+      type: 'file'
+    }).filename
+
+    textInput.current.setSelectionRange(0, length)
+  }
+
+  useEffect(() => {
+    textInput.current.focus()
+  }, [])
+
+  return (
+    <InputGroup className={styles.inputGroup}>
+      <Input
+        ref={textInput}
+        type="text"
+        defaultValue={defaultValue}
+        disabled={isModalOpened || isBusy}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+      />
+      {(isModalOpened || isBusy) && <Spinner className={styles.spinner} />}
+      {isModalOpened && <RenameDialog onSubmit={submit} onCancel={cancel} />}
+    </InputGroup>
+  )
+}
+
+RenameInput.propTypes = {
+  file: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default RenameInput

package/src/ListItem/ListItemBase/Renaming/helpers.js

@@ -0,0 +1,35 @@
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+
+export const renameFile = async (client, file, name) => {
+  try {
+    return await client.save({
+      ...file,
+      name
+    })
+  } catch (error) {
+    if (error.message.includes('Missing name argument')) {
+      Alerter.error('RenameInput.filenameMissing')
+    } else if (error.message.includes('Invalid filename:')) {
+      Alerter.error('RenameInput.filenameIllegalName', {
+        name
+      })
+    } else if (
+      error.message.includes(
+        'Invalid filename containing illegal character(s):'
+      )
+    ) {
+      Alerter.error(
+        'RenameInput.filenameIllegalCharacters',
+        {
+          name,
+          characters: error.message.split(
+            'Invalid filename containing illegal character(s): '
+          )[1]
+        },
+        { duration: 2000 }
+      )
+    } else {
+      Alerter.error('RenameInput.fileExisting', { name })
+    }
+  }
+}

package/src/ListItem/ListItemBase/index.jsx

@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import ListItem from '..'
+import ExpandedAttributes from '../ExpandedAttributes'
+import RenameInput from './Renaming/RenameInput'
+import withListItemLocales from '../hoc/withListItemLocales'
+
+const ListItemBase = ({
+  doc,
+  primary,
+  secondary,
+  icon,
+  actions,
+  actionMenuComp,
+  expandedAttributesProps: { isExpandedAttributesActive, expandedAttributes },
+  selectProps: { isSelectActive, isSelected, isChecked },
+  onClick
+}) => {
+  const [showActionMenu, setShowActionMenu] = useState(false)
+  const [isRenaming, setIsRenaming] = useState(false)
+  const anchorRef = useRef()
+
+  const toggleMenu = () => setShowActionMenu(v => !v)
+
+  const showActionMenuHeader = actionMenuComp?.Header
+  const isButton = !isRenaming && !!onClick
+  const handleClick =
+    !isRenaming && !isSelected && onClick ? onClick : undefined
+
+  return (
+    <>
+      <ListItem button={isButton} disabled={isSelected} onClick={handleClick}>
+        {isSelectActive && (
+          <Checkbox
+            className="u-p-0"
+            value={doc._id}
+            checked={isChecked}
+            disabled={isSelected}
+          />
+        )}
+        <ListItemIcon>{icon}</ListItemIcon>
+        {isRenaming ? (
+          <RenameInput file={doc} onClose={() => setIsRenaming(false)} />
+        ) : (
+          <ListItemText primary={primary} secondary={secondary} />
+        )}
+        {actions && !isSelectActive && (
+          <ListItemSecondaryAction>
+            <IconButton ref={anchorRef} onClick={toggleMenu}>
+              <Icon icon={DotsIcon} />
+            </IconButton>
+          </ListItemSecondaryAction>
+        )}
+      </ListItem>
+      {isExpandedAttributesActive && (
+        <ExpandedAttributes doc={doc} expandedAttributes={expandedAttributes} />
+      )}
+      {showActionMenu && (
+        <ActionsMenu
+          open
+          ref={anchorRef}
+          docs={[doc]}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          componentsProps={{
+            actionsItems: { actionOptions: { setIsRenaming } }
+          }}
+          onClose={() => setShowActionMenu(false)}
+        >
+          {showActionMenuHeader && (
+            <ActionsMenuMobileHeader>
+              {actionMenuComp.Header}
+            </ActionsMenuMobileHeader>
+          )}
+        </ActionsMenu>
+      )}
+    </>
+  )
+}
+
+ListItemBase.propTypes = {
+  doc: PropTypes.object,
+  primary: PropTypes.node,
+  secondary: PropTypes.node,
+  icon: PropTypes.node,
+  actions: PropTypes.array,
+  actionMenuComp: PropTypes.shape({
+    Header: PropTypes.node
+  }),
+  selectProps: PropTypes.shape({
+    isSelectActive: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    isChecked: PropTypes.bool
+  }),
+  expandedAttributesProps: PropTypes.shape({
+    isExpandedAttributesActive: PropTypes.bool,
+    expandedAttributes: PropTypes.array
+  }),
+  onClick: PropTypes.func
+}
+
+export default withListItemLocales(ListItemBase)

package/src/ListItem/ListItemByDoc/index.jsx

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { makeDefaultExpandedAttributes } from '../ExpandedAttributes/helpers'
+import ListItemContact from '../ListItemContact'
+import ListItemFile from '../ListItemFile'
+
+const ListItemByDoc = ({
+  doc,
+  primary,
+  secondary,
+  icon,
+  actions,
+  selectProps,
+  expandedAttributesProps: { isExpandedAttributesActive, expandedAttributes },
+
+  onClick
+}) => {
+  const itemExpandedAttributes = makeDefaultExpandedAttributes(
+    doc,
+    expandedAttributes
+  )
+
+  switch (doc._type) {
+    case 'io.cozy.contacts':
+      return (
+        <ListItemContact
+          contact={doc}
+          primary={primary}
+          secondary={secondary}
+          icon={icon}
+          actions={actions}
+          selectProps={selectProps}
+          expandedAttributesProps={{
+            isExpandedAttributesActive,
+            expandedAttributes: itemExpandedAttributes
+          }}
+          onClick={onClick}
+        />
+      )
+
+    case 'io.cozy.files':
+      return (
+        <ListItemFile
+          file={doc}
+          primary={primary}
+          secondary={secondary}
+          icon={icon}
+          actions={actions}
+          selectProps={selectProps}
+          expandedAttributesProps={{
+            isExpandedAttributesActive,
+            expandedAttributes: itemExpandedAttributes
+          }}
+          onClick={onClick}
+        />
+      )
+
+    default:
+      return (
+        <ListItemFile
+          file={doc}
+          primary={primary}
+          secondary={secondary}
+          icon={icon}
+          actions={actions}
+          selectProps={selectProps}
+          expandedAttributesProps={{
+            isExpandedAttributesActive,
+            expandedAttributes: itemExpandedAttributes
+          }}
+          onClick={onClick}
+        />
+      )
+  }
+}
+
+ListItemByDoc.defaultProps = {
+  selectProps: { isSelectActive: false, isSelected: false, isChecked: false },
+  expandedAttributesProps: {
+    isExpandedAttributesActive: false
+  }
+}
+
+ListItemByDoc.propTypes = {
+  doc: PropTypes.object,
+  primary: PropTypes.node,
+  secondary: PropTypes.node,
+  icon: PropTypes.node,
+  actions: PropTypes.array,
+  selectProps: PropTypes.shape({
+    isSelectActive: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    isChecked: PropTypes.bool
+  }),
+  expandedAttributesProps: PropTypes.shape({
+    isExpandedAttributesActive: PropTypes.bool,
+    expandedAttributes: PropTypes.array
+  }),
+  onClick: PropTypes.func
+}
+
+export default ListItemByDoc

package/src/ListItem/ListItemContact/helpers.js

@@ -0,0 +1,28 @@
+import {
+  divider,
+  emailTo,
+  smsTo,
+  call
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+export const makeOptionalActions = contact => {
+  const hasPhoneAction = contact.phone?.length > 0
+  const hasEmailAction = contact.email?.length > 0
+  const hasMessageActions = hasPhoneAction || hasEmailAction
+
+  const actionsAndOptions = [
+    { action: divider, condition: hasMessageActions },
+    { action: call, condition: hasPhoneAction },
+    { action: smsTo, condition: hasPhoneAction },
+    { action: emailTo, condition: hasEmailAction }
+  ]
+
+  const filteredOptionalActions = actionsAndOptions.reduce((acc, curr) => {
+    if (curr.condition) {
+      acc.push(curr.action)
+    }
+    return acc
+  }, [])
+
+  return filteredOptionalActions
+}