cozy-sharing 31.0.2 → 31.2.0

package/dist/components/Sharetypeselect.js

@@ -1,104 +1,99 @@
-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; }
-
-import cx from 'classnames';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom';
-import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check';
-import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox';
+import React, { forwardRef, useRef, useState } from 'react';
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Radios from 'cozy-ui/transpiled/react/Radios';
 import logger from '../logger';
-var styles = {
-  "share-modal-content": "share__share-modal-content___1iqEq",
-  "coz-form": "share__coz-form___1ICST",
-  "coz-form-group": "share__coz-form-group___VsQp7",
-  "coz-form-desc": "share__coz-form-desc___2mYN4",
-  "coz-form-label": "share__coz-form-label___bogBw",
-  "coz-form-label--error": "share__coz-form-label--error___3YPkf",
-  "coz-form-errors": "share__coz-form-errors___2xYRz",
-  "coz-form-controls": "share__coz-form-controls___H8kGc",
-  "coz-form-controls--full": "share__coz-form-controls--full___1oQXF",
-  "coz-form-controls--dispatch": "share__coz-form-controls--dispatch___1zIxt",
-  "error": "share__error___pwqPO",
-  "share-byemail-onlybylink": "share__share-byemail-onlybylink___29W-t",
-  "aligned-dropdown-button": "share__aligned-dropdown-button___3crgG",
-  "share-type-control": "share__share-type-control___1YoRr",
-  "select-wrapper": "share__select-wrapper___3XBKC",
-  "select-option": "share__select-option___3Jp8_",
-  "select-option-label": "share__select-option-label___1BWz_",
-  "select-option-desc": "share__select-option-desc___3jOnr",
-  "share-details-created": "share__share-details-created___z3nvO",
-  "share-details-perm": "share__share-details-perm___3HjxK",
-  "share-details-perm-desc": "share__share-details-perm-desc___3HyHu"
-};
 
-var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Icon, {
-    icon: BottomIcon,
-    color: "var(--iconTextColor)"
-  }));
+var makeShareTypeAction = function makeShareTypeAction(_ref) {
+  var option = _ref.option,
+      isSelected = _ref.isSelected,
+      onSelect = _ref.onSelect;
+  var Component = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
+      ref: ref,
+      onClick: function onClick() {
+        return onSelect(option.value);
+      },
+      disabled: option.disabled
+    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radios, {
+      checked: isSelected
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: option.label
+    }));
+  });
+  Component.displayName = "ShareTypeAction-".concat(option.value);
+  return function () {
+    return {
+      name: "shareType-".concat(option.value),
+      label: option.label,
+      icon: null,
+      action: function action() {
+        return onSelect(option.value);
+      },
+      Component: Component
+    };
+  };
 };
 
-var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement("div", {
-    className: cx(styles['select-option'])
-  }, props.isSelected && /*#__PURE__*/React.createElement(Icon, {
-    icon: CheckIcon,
-    color: "var(--primaryColor)"
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-option-label']
-  }, props.label), /*#__PURE__*/React.createElement("div", {
-    className: styles['select-option-desc']
-  }, props.data.desc))));
-};
+var ShareTypeSelect = function ShareTypeSelect(_ref2) {
+  var _options$find;
 
-var customStyles = {
-  option: function option(base, state) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: 'var(--primaryTextColor)',
-      backgroundColor: state.isFocused ? 'var(--actionColorHover)' : null,
-      padding: 0,
-      borderBottom: state.options.findIndex(function (o) {
-        return o.value === state.value;
-      }) === 0 ? '1px solid var(--borderMainColor)' : null
-    });
-  },
-  menu: function menu(base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      backgroundColor: 'var(--paperBackgroundColor)',
-      width: '204%'
-    });
-  }
-};
+  var value = _ref2.value,
+      options = _ref2.options,
+      onChange = _ref2.onChange;
+  var buttonRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var open = function open() {
+    return setOpen(true);
+  };
+
+  var close = function close() {
+    return setOpen(false);
+  };
 
-var ShareTypeSelect = function ShareTypeSelect(_ref) {
-  var options = _ref.options,
-      _onChange = _ref.onChange;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['select-wrapper']
-  }, /*#__PURE__*/React.createElement(SelectBox, {
-    name: "select",
-    classNamePrefix: "needsclick react-select",
-    components: {
-      DropdownIndicator: DropdownIndicator,
-      Option: Option
-    },
-    styles: customStyles,
-    defaultValue: options[0],
-    isSearchable: false,
-    onChange: function onChange(option) {
-      _onChange(option.value);
-    },
-    options: options,
-    menuPosition: "fixed"
+  var onSelect = function onSelect(nextValue) {
+    onChange(nextValue);
+    setOpen(false);
+  };
+
+  var selectedOption = (_options$find = options.find(function (option) {
+    return option.value === value;
+  })) !== null && _options$find !== void 0 ? _options$find : options[0];
+  var actions = makeActions(options.map(function (option) {
+    return makeShareTypeAction({
+      option: option,
+      isSelected: option.value === selectedOption.value,
+      onSelect: onSelect
+    });
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    onClick: open,
+    textVariant: "body2",
+    size: "small"
+  }, selectedOption.label), /*#__PURE__*/React.createElement(ActionsMenu, {
+    ref: buttonRef,
+    open: isOpen,
+    actions: actions,
+    autoClose: true,
+    onClose: close
   }));
 };
 
 ShareTypeSelect.propTypes = {
+  value: PropTypes.string,
   onChange: PropTypes.func,
   options: PropTypes.array.isRequired
 };

package/dist/hooks/usePendingRecipients.js

@@ -0,0 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+export var usePendingRecipients = function usePendingRecipients() {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      pendingRecipients = _useState2[0],
+      setPendingRecipients = _useState2[1];
+
+  var _useState3 = useState('readWrite'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
+  return {
+    pendingRecipients: pendingRecipients,
+    setPendingRecipients: setPendingRecipients,
+    selectedOption: selectedOption,
+    setSelectedOption: setSelectedOption
+  };
+};

package/dist/hooks/usePendingRecipients.spec.js

@@ -0,0 +1,30 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { usePendingRecipients } from './usePendingRecipients';
+describe('usePendingRecipients', function () {
+  it('starts with empty recipients and readWrite option', function () {
+    var _renderHook = renderHook(function () {
+      return usePendingRecipients();
+    }),
+        result = _renderHook.result;
+
+    expect(result.current.pendingRecipients).toEqual([]);
+    expect(result.current.selectedOption).toBe('readWrite');
+  });
+  it('exposes setters that update state', function () {
+    var _renderHook2 = renderHook(function () {
+      return usePendingRecipients();
+    }),
+        result = _renderHook2.result;
+
+    act(function () {
+      result.current.setPendingRecipients([{
+        email: 'a@b.c'
+      }]);
+      result.current.setSelectedOption('readOnly');
+    });
+    expect(result.current.pendingRecipients).toEqual([{
+      email: 'a@b.c'
+    }]);
+    expect(result.current.selectedOption).toBe('readOnly');
+  });
+});

package/dist/styles/autosuggest.styl

@@ -5,7 +5,7 @@
     box-sizing border-box
     position absolute
     top 100%
-    margin-top .25rem
+    margin-top .5rem
     z-index var(--zIndex-alertMobile)
     width 100%
     overflow hidden
@@ -37,12 +37,13 @@
     display flex
     flex-wrap wrap
     align-items center
-    padding .25rem .5rem
+    padding .25rem 3.5rem .25rem .5rem
     border-radius .25rem
     border 1px solid var(--borderMainColor)
     min-height 2.5rem
     max-height 6.75rem
     overflow auto
+    position relative
 
     &:hover
         border 1px solid var(--borderMainColor)
@@ -69,3 +70,8 @@
             font-size 1rem
 .recipientChip
   margin .25rem .5rem .25rem 0
+
+.endAdornment
+    position absolute
+    top .75rem
+    right 1rem

package/dist/styles/share.styl

@@ -38,45 +38,6 @@
     .coz-form-desc
         color var(--secondaryTextColor)
 
-.share-type-control
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding .5rem 0 0
-
-    .select-wrapper
-        flex 0 0 49%
-        position relative
-
-        .select-option
-            padding .5rem 1.5rem .5rem 3rem
-            position relative
-
-            svg
-                position absolute
-                left 1rem
-                top 1rem
-
-
-        .select-option-label
-            line-height 2
-
-        .select-option-desc
-            line-height 1.5
-            font-size   .8125rem
-            color var(--secondaryTextColor)
-
-
-
-    button
-        flex 0 0 49%
-        margin 0
-
-:global
-    // dirty hack for react-select: its API doesn't allow to make change to active styles
-    .react-select__option:active
-        background-color var(--defaultBackgroundColor) !important
-
 input[type=text]
     width 100%
 

package/dist/stylesheet.css

@@ -312,40 +312,6 @@
 .share__coz-form-group___VsQp7 .share__coz-form-desc___2mYN4 {
   color: var(--secondaryTextColor);
 }
-.share__share-type-control___1YoRr {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0.5rem 0 0;
-}
-.share__share-type-control___1YoRr .share__select-wrapper___3XBKC {
-  flex: 0 0 49%;
-  position: relative;
-}
-.share__share-type-control___1YoRr .share__select-wrapper___3XBKC .share__select-option___3Jp8_ {
-  padding: 0.5rem 1.5rem 0.5rem 3rem;
-  position: relative;
-}
-.share__share-type-control___1YoRr .share__select-wrapper___3XBKC .share__select-option___3Jp8_ svg {
-  position: absolute;
-  left: 1rem;
-  top: 1rem;
-}
-.share__share-type-control___1YoRr .share__select-wrapper___3XBKC .share__select-option-label___1BWz_ {
-  line-height: 2;
-}
-.share__share-type-control___1YoRr .share__select-wrapper___3XBKC .share__select-option-desc___3jOnr {
-  line-height: 1.5;
-  font-size: 0.8125rem;
-  color: var(--secondaryTextColor);
-}
-.share__share-type-control___1YoRr button {
-  flex: 0 0 49%;
-  margin: 0;
-}
-.react-select__option:active {
-  background-color: var(--defaultBackgroundColor) !important;
-}
 input[type=text] {
   width: 100%;
 }
@@ -380,7 +346,7 @@ input[type=text] {
   box-sizing: border-box;
   position: absolute;
   top: 100%;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   z-index: var(--zIndex-alertMobile);
   width: 100%;
   overflow: hidden;
@@ -412,12 +378,13 @@ input[type=text] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem 3.5rem 0.25rem 0.5rem;
   border-radius: 0.25rem;
   border: 1px solid var(--borderMainColor);
   min-height: 2.5rem;
   max-height: 6.75rem;
   overflow: auto;
+  position: relative;
 }
 .autosuggest__recipientsContainer___1JYxA:hover {
   border: 1px solid var(--borderMainColor);
@@ -449,6 +416,11 @@ input[type=text] {
 .autosuggest__recipientChip___d5I3R {
   margin: 0.25rem 0.5rem 0.25rem 0;
 }
+.autosuggest__endAdornment___2EwTN {
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+}
 /*  imported from button.styl  */
 
 .button__coz-btn-shared___9MFbY {

package/locales/en.json

@@ -14,12 +14,8 @@
       "unregistered": "Error"
     },
     "type": {
-      "one-way": "Can view",
-      "two-way": "Can change",
-      "desc": {
-        "one-way": "Contacts can view, download, and add the content to their Twake. If they add the content to their Twake, they will get updates you make to the content, but they won't be able to update it.",
-        "two-way": "Contacts can update, delete and add the content to their Twake. Updates on the content will be seen on other Cozies."
-      }
+      "one-way": "Viewer",
+      "two-way": "Editor"
     },
     "locked-type-file": "Coming soon: you will be able to change permissions you grant on the file.",
     "locked-type-folder": "Coming soon: you will be able to change permissions you grant on the folder.",
@@ -35,6 +31,7 @@
       "count": "%{smart_count} member |||| %{smart_count} members",
       "others": "and 1 other… |||| and %{smart_count} others…",
       "otherContacts": "other contact |||| other contacts",
+      "revoke": "Remove from sharing",
       "error": {
         "changePermission": "An error occurred while changing the permissions. Please try again."
       }
@@ -105,8 +102,8 @@
       "details": {
         "title": "Sharing details",
         "createdAt": "On %{date}",
-        "ro": "Can read",
-        "rw": "Can change",
+        "ro": "Viewer",
+        "rw": "Editor",
         "desc": {
           "ro": "You can view, download, and add this content to your Twake. You will get updates by the owner, but you won't be able to update this content yourself.",
           "rw": "You can view, update, delete and add this content to your Twake. Updates you make will be seen on other Cozies."
@@ -130,7 +127,7 @@
       "shareByEmail": {
         "subtitle": "By email",
         "emailPlaceholder": "Add contacts",
-        "send": "Send",
+        "send": "Share",
         "singleContactSuccess": "You sent an invite to %{email}.",
         "contactSuccess": "You sent an invite to %{smart_count} contact. |||| You sent an invite to %{smart_count} contacts.",
         "singleGroupSuccess": "You sent an invite to the members of the %{groupName} group.",
@@ -174,8 +171,8 @@
       "details": {
         "title": "Sharing details",
         "createdAt": "On %{date}",
-        "ro": "Can read",
-        "rw": "Can change",
+        "ro": "Viewer",
+        "rw": "Editor",
         "desc": {
           "ro": "You can view, download, and add this content to your Twake. You will get updates by the owner, but you won't be able to update this content yourself.",
           "rw": "You can view, update, delete and add this content to your Twake. Updates you make will be seen on other Cozies."
@@ -198,7 +195,7 @@
         "subtitle": "By email",
         "email": "To:",
         "emailPlaceholder": "Enter the email address or name of the recipient",
-        "send": "Send",
+        "send": "Share",
         "singleContactSuccess": "You sent an invite to %{email}.",
         "contactSuccess": "You sent an invite to %{smart_count} contact. |||| You sent an invite to %{smart_count} contacts.",
         "singleGroupSuccess": "You sent an invite to the members of the %{groupName} group.",
@@ -267,7 +264,7 @@
         "subtitle": "By email",
         "email": "email",
         "emailPlaceholder": "Enter the email address or name of the recipient",
-        "send": "Send",
+        "send": "Share",
         "singleContactSuccess": "You sent an invite to %{email}.",
         "contactSuccess": "You sent an invite to %{smart_count} contact. |||| You sent an invite to %{smart_count} contacts.",
         "singleGroupSuccess": "You sent an invite to the members of the %{groupName} group.",
@@ -306,8 +303,8 @@
       "details": {
         "title": "Sharing details",
         "createdAt": "On %{date}",
-        "ro": "Can read",
-        "rw": "Can change",
+        "ro": "Viewer",
+        "rw": "Editor",
         "desc": {
           "ro": "You can view, download, and add this content to your Twake. You will get updates by the owner, but you won't be able to update this content yourself.",
           "rw": "You can view, update, delete and add this content to your Twake. Updates you make will be seen on other Cozies."
@@ -331,7 +328,7 @@
         "subtitle": "By email",
         "email": "Send to:",
         "emailPlaceholder": "Enter the email address or name of the recipient",
-        "send": "Send",
+        "send": "Share",
         "error": {
           "addingRecipient": "An error occurred while adding the recipient. Please try again."
         },
@@ -384,37 +381,10 @@
     "content": "You cannot share %{documentName} with more than %{limit} members.",
     "confirm": "I understand"
   },
-  "RevokeMemberItem": {
-    "revoke": {
-      "title": "Remove from sharing",
-      "desc": "This contact will keep a copy but the changes won't be synchrnoized anymore.",
-      "sharedDriveDesc": "Your contact will no longer be able to access the data."
-    },
-    "revokeSelf": {
-      "title": "Remove me from sharing",
-      "desc": "You keep the content but it won't be updated between your Twake anymore."
-    }
-  },
-  "RevokeSharedDriveMemberItem": {
-    "revoke": {
-      "title": "Remove"
-    }
-  },
   "GroupRecipient": {
     "secondary": "%{memberCount} member |||| %{memberCount} members",
     "secondary_you": "including you"
   },
-  "RevokeGroupItem": {
-    "revoke": {
-      "title": "Remove group from sharing",
-      "desc": "Group members will keep a copy but the changes won't be synchrnoized anymore.",
-      "sharedDriveDesc": "Group members will no longer be able to access the data."
-    },
-    "revokeSelf": {
-      "title": "Remove me from sharing",
-      "desc": "You keep the content but it won't be updated between your Twake anymore."
-    }
-  },
   "GroupRecipientDetail": {
     "subtitle": "Managed by %{ownerName}",
     "empty": {
@@ -480,7 +450,7 @@
       "cancel": "Cancel",
       "create": "Create",
       "save": "Save",
-      "addPeople": "Add people to the shared drive",
+      "addPeople": "Add users",
       "successNotification": "Shared drive has been added",
       "errorNotification": "Error during shared drive creation",
       "successNotificationUpdate": "Your shared drive has been modified",