cozy-ui 132.1.0 → 133.0.0

package/react/ListItem/ListItemBase/index.jsx

@@ -1,115 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
-
-import RenameInput from './Renaming/RenameInput'
-import ListItem from '..'
-import ActionsMenu from '../../ActionsMenu'
-import ActionsMenuMobileHeader from '../../ActionsMenu/ActionsMenuMobileHeader'
-import Checkbox from '../../Checkbox'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import DotsIcon from '../../Icons/Dots'
-import ListItemIcon from '../../ListItemIcon'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import ListItemText from '../../ListItemText'
-import ExpandedAttributes from '../ExpandedAttributes'
-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/react/ListItem/ListItemByDoc/index.jsx

@@ -1,103 +0,0 @@
-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/react/ListItem/ListItemContact/helpers.js

@@ -1,23 +0,0 @@
-import { divider, emailTo, smsTo, call } from '../../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
-}

package/react/ListItem/ListItemContact/helpers.spec.js

@@ -1,35 +0,0 @@
-import { makeOptionalActions } from './helpers'
-import { divider, emailTo, smsTo, call } from '../../ActionsMenu/Actions'
-
-describe('makeOptionalActions', () => {
-  it('should return divider, call, smsTo, emailTo', () => {
-    const res = makeOptionalActions({
-      email: [{ address: 'mail@cozy.com' }],
-      phone: [{ number: '123456' }]
-    })
-
-    expect(res).toStrictEqual([divider, call, smsTo, emailTo])
-  })
-
-  it('should return divider, emailTo', () => {
-    const res = makeOptionalActions({
-      email: [{ address: 'mail@cozy.com' }]
-    })
-
-    expect(res).toStrictEqual([divider, emailTo])
-  })
-
-  it('should return divider, call, smsTo', () => {
-    const res = makeOptionalActions({
-      phone: [{ number: '123456' }]
-    })
-
-    expect(res).toStrictEqual([divider, call, smsTo])
-  })
-
-  it('should empty array', () => {
-    const res = makeOptionalActions({})
-
-    expect(res).toStrictEqual([])
-  })
-})

package/react/ListItem/ListItemContact/index.jsx

@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { getDisplayName } from 'cozy-client/dist/models/contact'
-
-import useActions from './useActions'
-import Filename from '../../Filename'
-import Icon from '../../Icon'
-import ContactsIcon from '../../Icons/Contacts'
-import ListItemBase from '../ListItemBase'
-
-const ListItemContact = ({
-  contact,
-  primary,
-  secondary,
-  icon,
-  actions,
-  selectProps,
-  expandedAttributesProps,
-  onClick
-}) => {
-  const defaultActions = useActions(contact)
-  const primaryText = primary || getDisplayName(contact)
-  const secondaryText = secondary || contact.email?.[0]?.address
-  const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
-
-  const itemActions = defaultActions.concat(actions)
-
-  return (
-    <ListItemBase
-      doc={contact}
-      primary={primaryText}
-      secondary={secondaryText}
-      icon={itemIcon}
-      actions={itemActions}
-      actionMenuComp={{
-        Header: <Filename icon={ContactsIcon} filename={primaryText} />
-      }}
-      selectProps={selectProps}
-      expandedAttributesProps={expandedAttributesProps}
-      onClick={onClick}
-    />
-  )
-}
-
-ListItemContact.defaultProps = {
-  actions: []
-}
-
-ListItemContact.propTypes = {
-  contact: 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 ListItemContact

package/react/ListItem/ListItemContact/useActions.jsx

@@ -1,17 +0,0 @@
-import { useMemo } from 'react'
-
-import { makeOptionalActions } from './helpers'
-import { makeActions, modify, viewInContacts } from '../../ActionsMenu/Actions'
-
-const useActions = contact => {
-  const optionalActions = useMemo(() => makeOptionalActions(contact), [contact])
-  const finalActions = useMemo(
-    () => [modify, viewInContacts].concat(optionalActions),
-    [optionalActions]
-  )
-  const actions = useMemo(() => makeActions(finalActions), [finalActions])
-
-  return actions
-}
-
-export default useActions

package/react/ListItem/ListItemFile/ExpirationAnnotation.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import {
-  computeExpirationDate,
-  isExpired,
-  makeExpiredMessage,
-  makeExpiresInMessage
-} from 'cozy-client/dist/models/paper'
-
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-import withListItemLocales from '../hoc/withListItemLocales'
-
-const ExpirationAnnotation = ({ file }) => {
-  const { lang } = useI18n()
-
-  if (isExpired(file)) {
-    return (
-      <Typography component="span" variant="inherit" color="error">
-        {makeExpiredMessage({ lang })}
-      </Typography>
-    )
-  }
-
-  const expirationDate = computeExpirationDate(file)
-
-  return (
-    <Typography component="span" variant="inherit" className="u-warning">
-      {makeExpiresInMessage(expirationDate, { lang })}
-    </Typography>
-  )
-}
-
-ExpirationAnnotation.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default withListItemLocales(ExpirationAnnotation)

package/react/ListItem/ListItemFile/ItemIcon.jsx

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { useClient } from 'cozy-client'
-import { isNote } from 'cozy-client/dist/models/file'
-
-import FileImageLoader from '../../FileImageLoader'
-import Icon from '../../Icon'
-import FiletypeNoteIcon from '../../Icons/FileTypeNote'
-import FiletypeTextIcon from '../../Icons/FileTypeText'
-import Skeleton from '../../Skeleton'
-import Thumbnail from '../../Thumbnail'
-
-const ItemIcon = ({ icon, file }) => {
-  const client = useClient()
-
-  if (icon) return icon
-
-  return (
-    <FileImageLoader
-      client={client}
-      file={file}
-      linkType="tiny"
-      render={src => {
-        return (
-          <Thumbnail>
-            {src ? (
-              <img src={src} alt="" />
-            ) : (
-              <Skeleton variant="rect" animation="wave" />
-            )}
-          </Thumbnail>
-        )
-      }}
-      renderFallback={() => (
-        <Thumbnail>
-          <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
-        </Thumbnail>
-      )}
-    />
-  )
-}
-
-ItemIcon.propTypes = {
-  icon: PropTypes.node,
-  file: PropTypes.object
-}
-
-export default ItemIcon

package/react/ListItem/ListItemFile/PrimaryText.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { splitFilename } from 'cozy-client/dist/models/file'
-
-import Filename from '../../Filename'
-import useBreakpoints from '../../providers/Breakpoints'
-
-const PrimaryText = ({ primary, file }) => {
-  const { isMobile } = useBreakpoints()
-
-  if (primary) return primary
-
-  return (
-    <Filename
-      variant="body1"
-      midEllipsis={isMobile}
-      filename={
-        splitFilename({
-          name: file.name,
-          type: 'file'
-        }).filename
-      }
-      extension={
-        splitFilename({
-          name: file.name,
-          type: 'file'
-        }).extension
-      }
-    />
-  )
-}
-
-PrimaryText.propTypes = {
-  primary: PropTypes.node,
-  file: PropTypes.object
-}
-
-export default PrimaryText

package/react/ListItem/ListItemFile/SecondaryText.jsx

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { isExpired, isExpiringSoon } from 'cozy-client/dist/models/paper'
-
-import ExpirationAnnotation from './ExpirationAnnotation'
-import { useI18n } from '../../providers/I18n'
-
-const SecondaryText = ({ secondary, file }) => {
-  const { f } = useI18n()
-
-  if (secondary) return secondary
-
-  const date = file?.metadata?.datetime
-    ? f(file?.metadata?.datetime, 'dd/LL/yyyy')
-    : null
-
-  return (
-    <>
-      {date ? date : ''}
-      {(isExpired(file) || isExpiringSoon(file)) && (
-        <>
-          {date ? ' · ' : ''}
-          <ExpirationAnnotation file={file} />
-        </>
-      )}
-    </>
-  )
-}
-
-SecondaryText.propTypes = {
-  secondary: PropTypes.node,
-  file: PropTypes.object
-}
-
-export default SecondaryText

package/react/ListItem/ListItemFile/index.jsx

@@ -1,75 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { splitFilename } from 'cozy-client/dist/models/file'
-
-import ItemIcon from './ItemIcon'
-import PrimaryText from './PrimaryText'
-import SecondaryText from './SecondaryText'
-import Filename from '../../Filename'
-import FiletypePdfIcon from '../../Icons/FileTypePdf'
-import ListItemBase from '../ListItemBase'
-
-const ListItemFile = ({
-  file,
-  primary,
-  secondary,
-  icon,
-  actions,
-  selectProps,
-  expandedAttributesProps,
-  onClick
-}) => {
-  const { filename, extension } = splitFilename({
-    name: file.name,
-    type: 'file'
-  })
-
-  return (
-    <ListItemBase
-      doc={file}
-      primary={<PrimaryText primary={primary} file={file} />}
-      secondary={<SecondaryText secondary={secondary} file={file} />}
-      icon={<ItemIcon icon={icon} file={file} />}
-      actions={actions}
-      actionMenuComp={{
-        Header: (
-          <Filename
-            icon={FiletypePdfIcon}
-            filename={filename}
-            extension={extension}
-          />
-        )
-      }}
-      selectProps={selectProps}
-      expandedAttributesProps={expandedAttributesProps}
-      onClick={onClick}
-    />
-  )
-}
-
-ListItemFile.defaultProps = {
-  expandedAttributesProps: {
-    isExpandedAttributesActive: false
-  }
-}
-
-ListItemFile.propTypes = {
-  file: 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 ListItemFile

package/react/ListItem/hoc/withListItemLocales.jsx

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

package/react/ListItem/locales/en.json

@@ -1,75 +0,0 @@
-{
-  "common": {
-    "day": "%{smart_count} day |||| %{smart_count} days"
-  },
-  "ListItem": {
-    "attributes": {
-      "birthday": "Birthday",
-      "birthcity": "Birth city",
-      "address": "Address",
-      "email": "Email address",
-      "phone": "Phone number",
-      "company": "Company",
-      "jobTitle": "Job title",
-      "metadata": {
-        "datetime": "Added on",
-        "issueDate": "Delivered on",
-        "expirationDate": "Expiration date",
-        "referencedDate": "Referenced date",
-        "shootingDate": "Shooting date",
-        "obtentionDate": "Date obtained",
-        "date": "Document date",
-        "country": "Country of delivery",
-        "refTaxIncome": "Reference tax income",
-        "contractType": "Contract type",
-        "noticePeriod": "Expiration alert",
-        "cafFileNumber": "CAF file number",
-        "vinNumber": "Vehicle registration number (VIN)",
-        "cardNumber": "National ID card number",
-        "ibanNumber": "IBAN number",
-        "bicNumber": "BIC number",
-        "passportNumber": "Passport number",
-        "netSocialAmount": "Net social amount",
-        "vehicle": {
-          "licenseNumber": "Vehicle registration number",
-          "confidentialNumber": "Confidential vehicle registration code"
-        },
-        "number": {
-          "pay_sheet": "Gross remuneration",
-          "tax_return": "Reference tax number",
-          "tax_notice": "Reference tax number",
-          "real_estate_tax": "Reference tax number",
-          "tax_timetable": "Reference tax number",
-          "fine": "Amount of the fine",
-          "fidelity_card": "Card number",
-          "driver_license": "License number",
-          "caf": "CAF file number",
-          "payment_proof_family_allowance": "CAF file number",
-          "vehicle_registration": "Vehicle registration number (VIN)",
-          "national_id_card": "National ID card number",
-          "bank_details": "IBAN number",
-          "passport": "Passport number",
-          "residence_permit": "License number"
-        }
-      }
-    },
-    "file": {
-      "page": {
-        "back": "Back side",
-        "front": "Front side"
-      }
-    },
-    "snackbar": {
-      "copyToClipboard": {
-        "success": "Copied to clipboard",
-        "error": "Cannot copy to clipboard"
-      }
-    },
-    "renameModal": {
-      "title": "Rename",
-      "content": "You are about to change the file extension. Do you want to continue?",
-      "cancel": "Cancel",
-      "submit": "Continue"
-    }
-  }
-}