cozy-sharing 5.0.0 → 6.0.0

package/dist/components/ShareAutosuggest.js

@@ -1,25 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { Component } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
 var styles = {
   "CozyTheme--inverted": "autosuggest__CozyTheme--inverted___QJCUa",
   "CozyTheme--normal": "autosuggest__CozyTheme--normal___1-_dN",
@@ -28,268 +15,205 @@ var styles = {
   "suggestionsContainerOpen": "autosuggest__suggestionsContainerOpen___LO5cw",
   "input": "autosuggest__input___3b74d",
   "suggestionsList": "autosuggest__suggestionsList___211Pt",
-  "suggestion": "autosuggest__suggestion___NZSt5",
   "suggestionHighlighted": "autosuggest__suggestionHighlighted___MbW8F",
   "recipientsContainer": "autosuggest__recipientsContainer___15b1_",
-  "recipientChip": "autosuggest__recipientChip___oRxU-",
-  "removeRecipient": "autosuggest__removeRecipient___2wV6s"
-};
-
-var BoldCross = function BoldCross(props) {
-  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
-    fill: "#32363F",
-    d: "M8 6.586l5.293-5.293a1 1 0 0 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 1 1 1.414-1.414L8 6.586z"
-  }));
-};
-
-BoldCross.defaultProps = {
-  width: "16",
-  height: "16",
-  xmlns: "http://www.w3.org/2000/svg"
+  "recipientChip": "autosuggest__recipientChip___oRxU-"
 };
-import { getDisplayName, Contact } from '../models';
+import { getDisplayName, getInitials, Contact } from '../models';
 import { cozyUrlMatch, emailMatch, groupNameMatch, fullnameMatch } from '../suggestionMatchers';
 import ContactSuggestion from './ContactSuggestion';
 import { extractEmails, validateEmail } from '../helpers/email';
 
-var ShareAutocomplete = /*#__PURE__*/function (_Component) {
-  _inherits(ShareAutocomplete, _Component);
-
-  var _super = _createSuper(ShareAutocomplete);
-
-  function ShareAutocomplete() {
-    var _this;
-
-    _classCallCheck(this, ShareAutocomplete);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      inputValue: '',
-      suggestions: []
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref) {
-      var value = _ref.value;
-
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          suggestions: _this.computeSuggestions(value)
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSuggestionsClearRequested", function () {
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          suggestions: []
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onPaste", function () {
-      _this.isPasted = true;
+var ShareAutocomplete = function ShareAutocomplete(_ref) {
+  var loading = _ref.loading,
+      contactsAndGroups = _ref.contactsAndGroups,
+      recipients = _ref.recipients,
+      onFocus = _ref.onFocus,
+      onPick = _ref.onPick,
+      onRemove = _ref.onRemove,
+      placeholder = _ref.placeholder;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      suggestions = _useState4[0],
+      setSuggestions = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPasted = _useState6[0],
+      setIsPasted = _useState6[1];
+
+  var autosuggestRef = useRef(null);
+
+  var computeSuggestions = function computeSuggestions(value) {
+    var inputValue = value.trim().toLowerCase();
+    return inputValue.length === 0 ? [] : contactsAndGroups.filter(function (contactOrGroup) {
+      return groupNameMatch(inputValue, contactOrGroup) || fullnameMatch(inputValue, contactOrGroup) || emailMatch(inputValue, contactOrGroup) || cozyUrlMatch(inputValue, contactOrGroup);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (event, _ref2) {
-      var newValue = _ref2.newValue,
-          method = _ref2.method;
-
-      if (_this.isPasted) {
-        var emails = extractEmails(newValue);
-
-        if (emails) {
-          emails.map(function (email) {
-            _this.onPick({
-              email: email
-            });
-          });
-        }
-
-        _this.isPasted = false;
-      } else {
-        if (typeof newValue !== 'object') {
-          _this.setState(function (state) {
-            return _objectSpread(_objectSpread({}, state), {}, {
-              inputValue: newValue
-            });
+  };
+
+  var onSuggestionsFetchRequested = function onSuggestionsFetchRequested(_ref2) {
+    var value = _ref2.value;
+    var computedSuggestions = computeSuggestions(value);
+    var newSuggestions = computedSuggestions.length === 0 && validateEmail(value) ? [{
+      email: value,
+      _type: Contact.doctype
+    }] : computedSuggestions;
+    setSuggestions(newSuggestions);
+  };
+
+  var onSuggestionsClearRequested = function onSuggestionsClearRequested() {
+    setSuggestions([]);
+  };
+
+  var onAutosuggestPaste = function onAutosuggestPaste() {
+    setIsPasted(true);
+  };
+
+  var onAutosuggestChange = function onAutosuggestChange(event, _ref3) {
+    var newValue = _ref3.newValue,
+        method = _ref3.method;
+
+    if (isPasted) {
+      var emails = extractEmails(newValue);
+
+      if (emails) {
+        emails.map(function (email) {
+          onAutosuggestPick({
+            email: email
           });
-        } else if (method === 'click' || method === 'enter') {
-          // A suggestion has been picked
-          _this.onPick(newValue);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
-      // The user wants to add an unknown email
-      if ((event.key === 'Enter' || event.keyCode === 13) && validateEmail(_this.state.inputValue) || (event.key === 'Space' || event.keyCode === 32) && validateEmail(_this.state.inputValue)) {
-        _this.onPick({
-          email: _this.state.inputValue
         });
       }
-    });
 
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
-      _this.props.onFocus();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function (event, _ref3) {
-      var highlightedSuggestion = _ref3.highlightedSuggestion;
-
-      if (highlightedSuggestion) {
-        _this.props.onPick(highlightedSuggestion);
-
-        _this.setState(function (state) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            inputValue: ''
-          });
-        });
-      } else if (_this.state.inputValue !== '' && _this.state.inputValue.match(/\S+@\S+/)) {
-        _this.props.onPick({
-          email: _this.state.inputValue
-        });
-
-        _this.setState(function (state) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            inputValue: ''
-          });
-        });
+      setIsPasted(false);
+    } else {
+      if (typeof newValue !== 'object') {
+        setInputValue(newValue);
+      } else if (method === 'click' || method === 'enter') {
+        // A suggestion has been picked
+        onAutosuggestPick(newValue);
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onPick", function (value) {
-      _this.props.onPick(value);
+    }
+  };
 
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          inputValue: ''
-        });
+  var onKeyPress = function onKeyPress(event) {
+    // The user wants to add an unknown email
+    if ((event.key === 'Enter' || event.keyCode === 13) && validateEmail(inputValue) || (event.key === 'Space' || event.keyCode === 32) && validateEmail(inputValue)) {
+      onAutosuggestPick({
+        email: inputValue
       });
+    }
+  };
 
-      requestAnimationFrame(function () {
-        return _this.input && _this.input.focus();
-      }, 1); // don't ask...
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRemove", function (value) {
-      _this.props.onRemove(value);
+  var onKeyUp = function onKeyUp(_ref4) {
+    var key = _ref4.key,
+        keyCode = _ref4.keyCode;
 
-      requestAnimationFrame(function () {
-        return _this.input && _this.input.focus();
-      }, 1);
-    });
+    if (recipients.length > 0 && inputValue === '' && (key === 'Backspace' || keyCode === 8 || key === 'Delete' || keyCode === 46)) {
+      document.getElementById("recipient_".concat(recipients.length - 1)).focus();
+    }
+  };
 
-    return _this;
-  }
+  var onAutosuggestFocus = function onAutosuggestFocus() {
+    onFocus();
+  };
 
-  _createClass(ShareAutocomplete, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.contactsAndGroups.length !== prevProps.contactsAndGroups.length) {
-        this.onSuggestionsFetchRequested({
-          value: this.state.inputValue
-        });
-      }
-    }
-  }, {
-    key: "computeSuggestions",
-    value: function computeSuggestions(value) {
-      var contactsAndGroups = this.props.contactsAndGroups;
-      var inputValue = value.trim().toLowerCase();
-      return inputValue.length === 0 ? [] : contactsAndGroups.filter(function (contactOrGroup) {
-        return groupNameMatch(inputValue, contactOrGroup) || fullnameMatch(inputValue, contactOrGroup) || emailMatch(inputValue, contactOrGroup) || cozyUrlMatch(inputValue, contactOrGroup);
+  var onAutosuggestBlur = function onAutosuggestBlur() {
+    if (inputValue !== '' && inputValue.match(/\S+@\S+/)) {
+      onAutosuggestPick({
+        email: inputValue
       });
     }
-  }, {
-    key: "renderInput",
-    value: function renderInput(inputProps) {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          loading = _this$props.loading,
-          recipients = _this$props.recipients;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles['recipientsContainer']
-      }, recipients.map(function (recipient, idx) {
-        var value = getDisplayName(recipient);
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles['recipientChip'],
-          key: "key_recipient_".concat(idx)
-        }, /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement("button", {
-          className: styles['removeRecipient'],
-          onClick: function onClick() {
-            return _this2.onRemove(recipient);
-          }
-        }, /*#__PURE__*/React.createElement(BoldCross, null)));
-      }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
-        onKeyPress: this.onKeyPress
-      })), loading && /*#__PURE__*/React.createElement(Spinner, {
-        color: palette.dodgerBlue,
-        className: "u-flex u-flex-items-center"
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$state = this.state,
-          inputValue = _this$state.inputValue,
-          suggestions = _this$state.suggestions;
-      var _this$props2 = this.props,
-          contactsAndGroups = _this$props2.contactsAndGroups,
-          placeholder = _this$props2.placeholder;
-      return /*#__PURE__*/React.createElement(Autosuggest, {
-        ref: function ref(self) {
-          _this3.input = self ? self.input : null;
+  };
+
+  var onAutosuggestPick = function onAutosuggestPick(value) {
+    var _autosuggestRef$curre, _autosuggestRef$curre2;
+
+    onPick(value);
+    setInputValue('');
+    autosuggestRef === null || autosuggestRef === void 0 ? void 0 : (_autosuggestRef$curre = autosuggestRef.current) === null || _autosuggestRef$curre === void 0 ? void 0 : (_autosuggestRef$curre2 = _autosuggestRef$curre.input) === null || _autosuggestRef$curre2 === void 0 ? void 0 : _autosuggestRef$curre2.focus();
+  };
+
+  var onAutosuggestRemove = function onAutosuggestRemove(value) {
+    var _autosuggestRef$curre3, _autosuggestRef$curre4;
+
+    onRemove(value);
+    autosuggestRef === null || autosuggestRef === void 0 ? void 0 : (_autosuggestRef$curre3 = autosuggestRef.current) === null || _autosuggestRef$curre3 === void 0 ? void 0 : (_autosuggestRef$curre4 = _autosuggestRef$curre3.input) === null || _autosuggestRef$curre4 === void 0 ? void 0 : _autosuggestRef$curre4.focus();
+  };
+
+  var renderInput = function renderInput(inputProps) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles['recipientsContainer']
+    }, recipients.map(function (recipient, idx) {
+      var avatarText = getInitials(recipient);
+      var name = getDisplayName(recipient);
+      return /*#__PURE__*/React.createElement(Chip, {
+        id: "recipient_".concat(idx),
+        key: "key_recipient_".concat(idx),
+        avatar: /*#__PURE__*/React.createElement(Avatar, {
+          text: avatarText,
+          size: "xsmall"
+        }),
+        label: name,
+        onDelete: function onDelete() {
+          onAutosuggestRemove(recipient);
         },
-        theme: styles,
-        suggestions: suggestions.slice(0, 20),
-        getSuggestionValue: function getSuggestionValue(contact) {
-          return contact;
-        },
-        onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
-        onSuggestionsClearRequested: this.onSuggestionsClearRequested,
-        renderSuggestion: function renderSuggestion(contactOrGroup) {
-          return /*#__PURE__*/React.createElement(ContactSuggestion, {
-            contacts: contactsAndGroups.filter(function (item) {
-              return item._type === Contact.doctype;
-            }),
-            contactOrGroup: contactOrGroup
-          });
-        },
-        renderInputComponent: function renderInputComponent(props) {
-          return _this3.renderInput(props);
-        },
-        highlightFirstSuggestion: true,
-        inputProps: {
-          onFocus: this.onFocus,
-          onChange: this.onChange,
-          onPaste: this.onPaste,
-          onBlur: this.onBlur,
-          value: inputValue,
-          type: 'email',
-          placeholder: placeholder
-        }
+        className: styles['recipientChip']
       });
+    }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+      onKeyPress: onKeyPress,
+      onKeyUp: onKeyUp
+    })), loading && /*#__PURE__*/React.createElement(Spinner, {
+      color: palette.dodgerBlue,
+      className: "u-flex u-flex-items-center"
+    }));
+  };
+
+  var renderSuggestion = function renderSuggestion(contactOrGroup) {
+    return /*#__PURE__*/React.createElement(ContactSuggestion, {
+      contacts: contactsAndGroups.filter(function (item) {
+        return item._type === Contact.doctype;
+      }),
+      contactOrGroup: contactOrGroup
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(Autosuggest, {
+    ref: autosuggestRef,
+    theme: styles,
+    suggestions: suggestions.slice(0, 20),
+    getSuggestionValue: function getSuggestionValue(contact) {
+      return contact;
+    },
+    onSuggestionsFetchRequested: onSuggestionsFetchRequested,
+    onSuggestionsClearRequested: onSuggestionsClearRequested,
+    renderSuggestion: renderSuggestion,
+    renderInputComponent: renderInput,
+    highlightFirstSuggestion: true,
+    inputProps: {
+      onFocus: onAutosuggestFocus,
+      onChange: onAutosuggestChange,
+      onPaste: onAutosuggestPaste,
+      onBlur: onAutosuggestBlur,
+      value: inputValue,
+      type: 'email',
+      placeholder: placeholder
     }
-  }]);
-
-  return ShareAutocomplete;
-}(Component);
+  });
+};
 
-export { ShareAutocomplete as default };
 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/dist/components/ShareAutosuggest.spec.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ShareAutosuggest from './ShareAutosuggest';
+import AppLike from '../../test/AppLike';
 describe('ShareAutosuggest', function () {
   it('tests if ShareAutosuggest calls onFocus and onPick', function () {
     var onPick = jest.fn();
     var onFocus = jest.fn();
     var onRemove = jest.fn();
 
-    var _render = render( /*#__PURE__*/React.createElement(ShareAutosuggest, {
+    var _render = render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(ShareAutosuggest, {
       contactsAndGroups: [],
       placeholder: "myPlaceHolder",
       onPick: onPick,
       onFocus: onFocus,
       recipients: [],
       onRemove: onRemove
-    })),
+    }))),
         getByPlaceholderText = _render.getByPlaceholderText;
 
     var inputNode = getByPlaceholderText('myPlaceHolder');