cozy-sharing 5.0.0 → 6.0.1

package/src/components/Recipient/RecipientsAvatars.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import cx from 'classnames'
+import { useClient } from 'cozy-client'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
+
+import RecipientAvatar from './RecipientAvatar'
+import AvatarPlusX from './AvatarPlusX'
+import styles from './recipient.styl'
+import { getDisplayName } from '../../models'
+
+export const MAX_DISPLAYED_RECIPIENTS = 3
+
+/**
+ * Exclude me from the list of recipients.
+ * @typedef {object} Recipient
+ * @param {array<Recipient>} recipients - List of recipients
+ * @param {boolean} isOwner - Indicates if I'm the owner or not
+ * @param {object} client - CozyClient instance
+ * @returns {array<Recipient>} List of recipients without me if I'm the owner
+ */
+export const excludeMeAsOwnerFromRecipients = ({
+  recipients,
+  isOwner,
+  client
+}) => {
+  return recipients.filter(recipient => {
+    if (isOwner) {
+      return recipient.status !== 'owner'
+    }
+    return recipient.instance !== client.options.uri
+  })
+}
+
+const RecipientsAvatars = ({
+  recipients,
+  link,
+  size,
+  className,
+  onClick,
+  isOwner,
+  showMeAsOwner
+}) => {
+  const client = useClient()
+  const filteredRecipients = showMeAsOwner
+    ? recipients.slice().reverse() // we slice first to clone the original array because reverser() mutates it
+    : excludeMeAsOwnerFromRecipients({
+        recipients,
+        isOwner,
+        client
+      }).reverse()
+  // we reverse the recipients array because we use `flex-direction: row-reverse` to display them correctly
+
+  const isAvatarPlusX = filteredRecipients.length > MAX_DISPLAYED_RECIPIENTS
+  const extraRecipients = filteredRecipients
+    .slice(MAX_DISPLAYED_RECIPIENTS)
+    .map(recipient => getDisplayName(recipient))
+  const shownRecipients = filteredRecipients.slice(0, MAX_DISPLAYED_RECIPIENTS)
+
+  return (
+    <div
+      className={cx(
+        styles['recipients-avatars'],
+        {
+          [styles['--interactive']]: onClick
+        },
+        className
+      )}
+      onClick={onClick}
+    >
+      {link && (
+        <span data-testid="recipientsAvatars-link">
+          <Avatar
+            className={styles['recipients-avatars--link']}
+            icon={LinkIcon}
+            size={size}
+          />
+        </span>
+      )}
+      {isAvatarPlusX && (
+        <span data-testid="recipientsAvatars-plusX">
+          <AvatarPlusX
+            className={styles['recipients-avatars--plusX']}
+            extraRecipients={extraRecipients}
+            size={size}
+          />
+        </span>
+      )}
+      {shownRecipients.map((recipient, idx) => (
+        <span
+          data-testid={`recipientsAvatars-avatar${
+            recipient.status === 'owner' ? '-owner' : ''
+          }`}
+          key={idx}
+        >
+          <RecipientAvatar
+            recipient={recipient}
+            size={size}
+            className={cx(styles['recipients-avatars--avatar'])}
+          />
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export default RecipientsAvatars

package/src/components/{RecipientsAvatars.spec.jsx → Recipient/RecipientsAvatars.spec.jsx}

@@ -2,8 +2,11 @@ import React from 'react'
 import { createMockClient } from 'cozy-client'
 import { render } from '@testing-library/react'
 
-import { RecipientsAvatars, MAX_DISPLAYED_RECIPIENTS } from './Recipient'
-import AppLike from '../../test/AppLike'
+import RecipientsAvatars, {
+  MAX_DISPLAYED_RECIPIENTS,
+  excludeMeAsOwnerFromRecipients
+} from './RecipientsAvatars'
+import AppLike from '../../../test/AppLike'
 
 const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
   .fill(
@@ -113,3 +116,41 @@ describe('RecipientsAvatars', () => {
     expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
   })
 })
+
+describe('excludeMeAsOwnerFromRecipients', () => {
+  test('excludeMeAsOwnerFromRecipients behavior', () => {
+    const recipients = [
+      {
+        status: 'owner',
+        instance: 'http://foo1.cozy.bar'
+      },
+      { status: 'pending', instance: 'http://foo2.cozy.bar' },
+      {
+        status: 'pending',
+        instance: 'http://foo3.cozy.bar'
+      }
+    ]
+    const client = { options: { uri: 'http://foo2.cozy.bar' } }
+    expect(
+      excludeMeAsOwnerFromRecipients({ recipients, isOwner: true, client })
+    ).toEqual([
+      { status: 'pending', instance: 'http://foo2.cozy.bar' },
+      {
+        status: 'pending',
+        instance: 'http://foo3.cozy.bar'
+      }
+    ])
+    expect(
+      excludeMeAsOwnerFromRecipients({ recipients, isOwner: false, client })
+    ).toEqual([
+      {
+        status: 'owner',
+        instance: 'http://foo1.cozy.bar'
+      },
+      {
+        status: 'pending',
+        instance: 'http://foo3.cozy.bar'
+      }
+    ])
+  })
+})

package/src/components/{recipient.styl → Recipient/recipient.styl}

@@ -52,6 +52,11 @@
     .recipient-user
         font-size 1.125rem
 
+.link-recipient-icon-circle
+    border 1px solid var(--borderMainColor)
+    background-color unset
+    color unset
+
 .recipients-avatars
     display inline-flex
     flex-direction row-reverse
@@ -74,5 +79,4 @@
 
     &--plusX,
     &--avatar
-        margin-right -0.6rem
-
+        margin-right -0.6rem

package/src/components/ShareAutosuggest.jsx

@@ -1,14 +1,15 @@
-import React, { Component } from 'react'
+import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import Autosuggest from 'react-autosuggest'
 
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
 import palette from 'cozy-ui/transpiled/react/palette'
+import Chip from 'cozy-ui/transpiled/react/Chips'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import styles from './autosuggest.styl'
-import BoldCross from '../../assets/icons/icon-cross-bold.svg'
 
-import { getDisplayName, Contact } from '../models'
+import { getDisplayName, getInitials, Contact } from '../models'
 import {
   cozyUrlMatch,
   emailMatch,
@@ -18,24 +19,22 @@ import {
 import ContactSuggestion from './ContactSuggestion'
 import { extractEmails, validateEmail } from '../helpers/email'
 
-export default class ShareAutocomplete extends Component {
-  state = {
-    inputValue: '',
-    suggestions: []
-  }
-
-  componentDidUpdate(prevProps) {
-    if (
-      this.props.contactsAndGroups.length !== prevProps.contactsAndGroups.length
-    ) {
-      this.onSuggestionsFetchRequested({
-        value: this.state.inputValue
-      })
-    }
-  }
-
-  computeSuggestions(value) {
-    const { contactsAndGroups } = this.props
+const ShareAutocomplete = ({
+  loading,
+  contactsAndGroups,
+  recipients,
+  onFocus,
+  onPick,
+  onRemove,
+  placeholder
+}) => {
+  const [inputValue, setInputValue] = useState('')
+  const [suggestions, setSuggestions] = useState([])
+  const [isPasted, setIsPasted] = useState(false)
+
+  const autosuggestRef = useRef(null)
+
+  const computeSuggestions = value => {
     const inputValue = value.trim().toLowerCase()
 
     return inputValue.length === 0
@@ -49,154 +48,164 @@ export default class ShareAutocomplete extends Component {
         )
   }
 
-  onSuggestionsFetchRequested = ({ value }) => {
-    this.setState(state => ({
-      ...state,
-      suggestions: this.computeSuggestions(value)
-    }))
+  const onSuggestionsFetchRequested = ({ value }) => {
+    const computedSuggestions = computeSuggestions(value)
+
+    const newSuggestions =
+      computedSuggestions.length === 0 && validateEmail(value)
+        ? [
+            {
+              email: value,
+              _type: Contact.doctype
+            }
+          ]
+        : computedSuggestions
+
+    setSuggestions(newSuggestions)
   }
 
-  onSuggestionsClearRequested = () => {
-    this.setState(state => ({ ...state, suggestions: [] }))
+  const onSuggestionsClearRequested = () => {
+    setSuggestions([])
   }
-  onPaste = () => {
-    this.isPasted = true
+
+  const onAutosuggestPaste = () => {
+    setIsPasted(true)
   }
 
-  onChange = (event, { newValue, method }) => {
-    if (this.isPasted) {
+  const onAutosuggestChange = (event, { newValue, method }) => {
+    if (isPasted) {
       const emails = extractEmails(newValue)
       if (emails) {
         emails.map(email => {
-          this.onPick({ email })
+          onAutosuggestPick({ email })
         })
       }
-      this.isPasted = false
+      setIsPasted(false)
     } else {
       if (typeof newValue !== 'object') {
-        this.setState(state => ({ ...state, inputValue: newValue }))
+        setInputValue(newValue)
       } else if (method === 'click' || method === 'enter') {
         // A suggestion has been picked
-        this.onPick(newValue)
+        onAutosuggestPick(newValue)
       }
     }
   }
 
-  onKeyPress = event => {
+  const onKeyPress = event => {
     // The user wants to add an unknown email
     if (
       ((event.key === 'Enter' || event.keyCode === 13) &&
-        validateEmail(this.state.inputValue)) ||
+        validateEmail(inputValue)) ||
       ((event.key === 'Space' || event.keyCode === 32) &&
-        validateEmail(this.state.inputValue))
+        validateEmail(inputValue))
     ) {
-      this.onPick({ email: this.state.inputValue })
+      onAutosuggestPick({ email: inputValue })
     }
   }
 
-  onFocus = () => {
-    this.props.onFocus()
-  }
-
-  onBlur = (event, { highlightedSuggestion }) => {
-    if (highlightedSuggestion) {
-      this.props.onPick(highlightedSuggestion)
-      this.setState(state => ({ ...state, inputValue: '' }))
-    } else if (
-      this.state.inputValue !== '' &&
-      this.state.inputValue.match(/\S+@\S+/)
+  const onKeyUp = ({ key, keyCode }) => {
+    if (
+      recipients.length > 0 &&
+      inputValue === '' &&
+      (key === 'Backspace' ||
+        keyCode === 8 ||
+        key === 'Delete' ||
+        keyCode === 46)
     ) {
-      this.props.onPick({ email: this.state.inputValue })
-      this.setState(state => ({ ...state, inputValue: '' }))
+      document.getElementById(`recipient_${recipients.length - 1}`).focus()
     }
   }
 
-  onPick = value => {
-    this.props.onPick(value)
-    this.setState(state => ({ ...state, inputValue: '' }))
-    requestAnimationFrame(() => this.input && this.input.focus(), 1) // don't ask...
+  const onAutosuggestFocus = () => {
+    onFocus()
   }
 
-  onRemove = value => {
-    this.props.onRemove(value)
-    requestAnimationFrame(() => this.input && this.input.focus(), 1)
+  const onAutosuggestBlur = () => {
+    if (inputValue !== '' && inputValue.match(/\S+@\S+/)) {
+      onAutosuggestPick({ email: inputValue })
+    }
   }
 
-  renderInput(inputProps) {
-    const { loading, recipients } = this.props
-    return (
-      <div className={styles['recipientsContainer']}>
-        {recipients.map((recipient, idx) => {
-          const value = getDisplayName(recipient)
-          return (
-            <div
-              className={styles['recipientChip']}
-              key={`key_recipient_${idx}`}
-            >
-              <span>{value}</span>
-              <button
-                className={styles['removeRecipient']}
-                onClick={() => this.onRemove(recipient)}
-              >
-                <BoldCross />
-              </button>
-            </div>
-          )
-        })}
-        <input {...inputProps} onKeyPress={this.onKeyPress} />
-        {loading && (
-          <Spinner
-            color={palette.dodgerBlue}
-            className="u-flex u-flex-items-center"
-          />
-        )}
-      </div>
-    )
+  const onAutosuggestPick = value => {
+    onPick(value)
+    setInputValue('')
+    autosuggestRef?.current?.input?.focus()
   }
 
-  render() {
-    const { inputValue, suggestions } = this.state
-    const { contactsAndGroups, placeholder } = this.props
-    return (
-      <Autosuggest
-        ref={self => {
-          this.input = self ? self.input : null
-        }}
-        theme={styles}
-        suggestions={suggestions.slice(0, 20)}
-        getSuggestionValue={contact => contact}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        renderSuggestion={contactOrGroup => (
-          <ContactSuggestion
-            contacts={contactsAndGroups.filter(
-              item => item._type === Contact.doctype
-            )}
-            contactOrGroup={contactOrGroup}
-          />
-        )}
-        renderInputComponent={props => this.renderInput(props)}
-        highlightFirstSuggestion
-        inputProps={{
-          onFocus: this.onFocus,
-          onChange: this.onChange,
-          onPaste: this.onPaste,
-          onBlur: this.onBlur,
-          value: inputValue,
-          type: 'email',
-          placeholder
-        }}
-      />
-    )
+  const onAutosuggestRemove = value => {
+    onRemove(value)
+    autosuggestRef?.current?.input?.focus()
   }
+
+  const renderInput = inputProps => (
+    <div className={styles['recipientsContainer']}>
+      {recipients.map((recipient, idx) => {
+        const avatarText = getInitials(recipient)
+        const name = getDisplayName(recipient)
+        return (
+          <Chip
+            id={`recipient_${idx}`}
+            key={`key_recipient_${idx}`}
+            avatar={<Avatar text={avatarText} size="xsmall" />}
+            label={name}
+            onDelete={() => {
+              onAutosuggestRemove(recipient)
+            }}
+            className={styles['recipientChip']}
+          />
+        )
+      })}
+      <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
+      {loading && (
+        <Spinner
+          color={palette.dodgerBlue}
+          className="u-flex u-flex-items-center"
+        />
+      )}
+    </div>
+  )
+
+  const renderSuggestion = contactOrGroup => (
+    <ContactSuggestion
+      contacts={contactsAndGroups.filter(
+        item => item._type === Contact.doctype
+      )}
+      contactOrGroup={contactOrGroup}
+    />
+  )
+
+  return (
+    <Autosuggest
+      ref={autosuggestRef}
+      theme={styles}
+      suggestions={suggestions.slice(0, 20)}
+      getSuggestionValue={contact => contact}
+      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+      onSuggestionsClearRequested={onSuggestionsClearRequested}
+      renderSuggestion={renderSuggestion}
+      renderInputComponent={renderInput}
+      highlightFirstSuggestion
+      inputProps={{
+        onFocus: onAutosuggestFocus,
+        onChange: onAutosuggestChange,
+        onPaste: onAutosuggestPaste,
+        onBlur: onAutosuggestBlur,
+        value: inputValue,
+        type: 'email',
+        placeholder
+      }}
+    />
+  )
 }
 
 ShareAutocomplete.propTypes = {
+  loading: PropTypes.bool,
   contactsAndGroups: PropTypes.array,
-  placeholder: PropTypes.string,
+  recipients: PropTypes.array.isRequired,
   onFocus: PropTypes.func.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
-  recipients: PropTypes.array.isRequired
+  placeholder: PropTypes.string
 }
+
+export default ShareAutocomplete

package/src/components/ShareAutosuggest.spec.jsx

@@ -2,20 +2,24 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 import ShareAutosuggest from './ShareAutosuggest'
+import AppLike from '../../test/AppLike'
+
 describe('ShareAutosuggest', () => {
   it('tests if ShareAutosuggest calls onFocus and onPick', () => {
     const onPick = jest.fn()
     const onFocus = jest.fn()
     const onRemove = jest.fn()
     const { getByPlaceholderText } = render(
-      <ShareAutosuggest
-        contactsAndGroups={[]}
-        placeholder="myPlaceHolder"
-        onPick={onPick}
-        onFocus={onFocus}
-        recipients={[]}
-        onRemove={onRemove}
-      />
+      <AppLike>
+        <ShareAutosuggest
+          contactsAndGroups={[]}
+          placeholder="myPlaceHolder"
+          onPick={onPick}
+          onFocus={onFocus}
+          recipients={[]}
+          onRemove={onRemove}
+        />
+      </AppLike>
     )
     const inputNode = getByPlaceholderText('myPlaceHolder')
     inputNode.focus()