cozy-ui 127.11.0 → 127.13.0

package/transpiled/react/Contacts/Header/ImportDropdown.js

@@ -0,0 +1,88 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useRef } from 'react';
+import { useClient, generateWebLink } from 'cozy-client';
+import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact';
+import { locales } from "cozy-ui/transpiled/react/Contacts/Header/locales";
+import AppIcon from "cozy-ui/transpiled/react/AppIcon";
+import AppLinker from "cozy-ui/transpiled/react/AppLinker";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
+import TeamIcon from "cozy-ui/transpiled/react/Icons/Team";
+import Link from "cozy-ui/transpiled/react/Link";
+import ActionMenu, { ActionMenuItem } from "cozy-ui/transpiled/react/deprecated/ActionMenu";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var ImportDropdown = function ImportDropdown(_ref) {
+  var onContactImport = _ref.onContactImport;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var client = useClient();
+  var anchorRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var storeURL = generateWebLink({
+    cozyUrl: client.getStackClient().uri,
+    hash: "discover/?type=konnector&doctype=".concat(CONTACTS_DOCTYPE),
+    pathname: '/',
+    slug: 'store',
+    subDomainType: client.getInstanceOptions().subdomain
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: anchorRef,
+    variant: "secondary",
+    label: t('Contacts.Header.import.title'),
+    endIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: BottomIcon
+    }),
+    fullWidth: true,
+    onClick: function onClick() {
+      return setShowMenu(function (v) {
+        return !v;
+      });
+    }
+  }), showMenu && /*#__PURE__*/React.createElement(ActionMenu, {
+    anchorElRef: anchorRef,
+    popperOptions: {
+      placement: 'bottom-end'
+    },
+    onClose: function onClose() {
+      return setShowMenu(false);
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenuItem, {
+    left: /*#__PURE__*/React.createElement(Icon, {
+      icon: TeamIcon
+    }),
+    onClick: onContactImport
+  }, t('Contacts.Header.import.vcard')), /*#__PURE__*/React.createElement(AppLinker, {
+    app: {
+      slug: 'store'
+    },
+    href: storeURL
+  }, function (_ref2) {
+    var onClick = _ref2.onClick,
+        href = _ref2.href;
+    return /*#__PURE__*/React.createElement(ActionMenuItem, {
+      left: /*#__PURE__*/React.createElement(AppIcon, {
+        app: "store",
+        className: "u-h-1 u-w-1"
+      }),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Link, {
+      className: "u-p-0",
+      href: href,
+      style: {
+        color: 'var(--primaryTextColor)'
+      }
+    }, t('Contacts.Header.import.store')));
+  })));
+};
+
+export default ImportDropdown;

package/transpiled/react/Contacts/Header/SearchInput.d.ts

@@ -0,0 +1,4 @@
+export default SearchInput;
+declare function SearchInput({ setSearchValue }: {
+    setSearchValue: any;
+}): JSX.Element;

package/transpiled/react/Contacts/Header/SearchInput.js

@@ -0,0 +1,24 @@
+import debounce from 'lodash/debounce';
+import React, { useMemo } from 'react';
+import SearchBar from "cozy-ui/transpiled/react/SearchBar";
+
+var SearchInput = function SearchInput(_ref) {
+  var setSearchValue = _ref.setSearchValue;
+  var delayedSetSearchValue = useMemo(function () {
+    return debounce(function (searchValue) {
+      return setSearchValue(searchValue);
+    }, 375);
+  }, [setSearchValue]);
+
+  var handleOnChange = function handleOnChange(ev) {
+    delayedSetSearchValue(ev.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(SearchBar, {
+    size: "small",
+    elevation: 0,
+    onChange: handleOnChange
+  });
+};
+
+export default SearchInput;

package/transpiled/react/Contacts/Header/index.d.ts

@@ -0,0 +1,26 @@
+export default Header;
+declare function Header({ allGroups, onContactCreate, onContactImport, onSearch, onGroupCreate, onGroupDelete, onGroupUpdate }: {
+    allGroups: any;
+    onContactCreate: any;
+    onContactImport: any;
+    onSearch: any;
+    onGroupCreate: any;
+    onGroupDelete: any;
+    onGroupUpdate: any;
+}): JSX.Element;
+declare namespace Header {
+    namespace propTypes {
+        const allGroups: PropTypes.Requireable<any[]>;
+        const onContactCreate: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContactImport: PropTypes.Requireable<(...args: any[]) => any>;
+        const onSearch: PropTypes.Requireable<(...args: any[]) => any>;
+        const onGroupCreate: PropTypes.Requireable<(...args: any[]) => any>;
+        const onGroupUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        const onGroupDelete: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        const allGroups_1: never[];
+        export { allGroups_1 as allGroups };
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/Contacts/Header/index.js

@@ -0,0 +1,72 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import GroupsSelection from "cozy-ui/transpiled/react/Contacts/Header/GroupsSelection";
+import ImportDropdown from "cozy-ui/transpiled/react/Contacts/Header/ImportDropdown";
+import SearchInput from "cozy-ui/transpiled/react/Contacts/Header/SearchInput";
+import { locales } from "cozy-ui/transpiled/react/Contacts/Header/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import PersonAddIcon from "cozy-ui/transpiled/react/Icons/PersonAdd";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var Header = function Header(_ref) {
+  var allGroups = _ref.allGroups,
+      onContactCreate = _ref.onContactCreate,
+      onContactImport = _ref.onContactImport,
+      onSearch = _ref.onSearch,
+      onGroupCreate = _ref.onGroupCreate,
+      onGroupDelete = _ref.onGroupDelete,
+      onGroupUpdate = _ref.onGroupUpdate;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: !isMobile ? 'u-flex u-flex-justify-between' : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-flex-items-center u-w-auto-s u-w-5 u-maw-6', {
+      'u-mb-1': isMobile,
+      'u-mr-1': !isMobile
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "u-mr-half",
+    variant: "ghost",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: PersonAddIcon
+    }),
+    label: t('Contacts.Header.create'),
+    fullWidth: true,
+    onClick: onContactCreate
+  }), /*#__PURE__*/React.createElement(ImportDropdown, {
+    onContactImport: onContactImport
+  })), /*#__PURE__*/React.createElement("div", {
+    className: !isMobile ? 'u-flex u-flex-items-center u-flex-justify-end u-flex-grow-1 u-maw-7' : undefined
+  }, /*#__PURE__*/React.createElement(GroupsSelection, {
+    allGroups: allGroups,
+    onGroupCreate: onGroupCreate,
+    onGroupUpdate: onGroupUpdate,
+    onGroupDelete: onGroupDelete
+  }), /*#__PURE__*/React.createElement(SearchInput, {
+    setSearchValue: onSearch
+  })));
+};
+
+Header.propTypes = {
+  allGroups: PropTypes.array,
+  onContactCreate: PropTypes.func,
+  onContactImport: PropTypes.func,
+  onSearch: PropTypes.func,
+  onGroupCreate: PropTypes.func,
+  onGroupUpdate: PropTypes.func,
+  onGroupDelete: PropTypes.func
+};
+Header.defaultProps = {
+  allGroups: []
+};
+export default Header;

package/transpiled/react/Contacts/Header/locales/index.d.ts

@@ -0,0 +1,6 @@
+export namespace locales {
+    export { en };
+    export { fr };
+}
+import en from "./en.json";
+import fr from "./fr.json";

package/transpiled/react/Contacts/Header/locales/index.js

@@ -0,0 +1,34 @@
+var en = {
+  Contacts: {
+    Header: {
+      create: "Create",
+      filter: {
+        "no-group": "Create contact groups to facilitate filing and sharing!"
+      },
+      "import": {
+        title: "Import",
+        store: "From other sources",
+        vcard: "From a vCard file"
+      }
+    }
+  }
+};
+var fr = {
+  Contacts: {
+    Header: {
+      create: "Cr\xE9er",
+      filter: {
+        "no-group": "Cr\xE9er des groupes de contacts pour faciliter leur classement et le partage !"
+      },
+      "import": {
+        title: "Importer",
+        store: "Depuis d'autres sources",
+        vcard: "Depuis un fichier vCard"
+      }
+    }
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};

package/transpiled/react/ContactsList/ContactCell.js

@@ -41,7 +41,7 @@ var Cell = function Cell(_ref) {
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(IconButton, {
       ref: actionsRef,
-      "arial-label": t('menu'),
+      "arial-label": t('ContactsList.menu'),
       onClick: function onClick() {
         return setShowActions(true);
       }

package/transpiled/react/ContactsList/Contacts/ContactIdentity.js

@@ -28,7 +28,7 @@ var MyselfMarker = function MyselfMarker() {
 
   return /*#__PURE__*/React.createElement("span", {
     className: "".concat(styles['contact-myself'])
-  }, "(", t('me'), ")");
+  }, "(", t('ContactsList.me'), ")");
 };
 
 var ContactIdentity = function ContactIdentity(_ref) {

package/transpiled/react/ContactsList/ContactsList.js

@@ -5,17 +5,20 @@ import React from 'react';
 import ContactRow from "cozy-ui/transpiled/react/ContactsList/ContactRow";
 import { sortContacts, categorizeContacts, sortHeaders } from "cozy-ui/transpiled/react/ContactsList/helpers";
 import withContactsListLocales from "cozy-ui/transpiled/react/ContactsList/locales/withContactsListLocales";
+import { locales } from "cozy-ui/transpiled/react/ContactsList/locales/withContactsListLocales";
 import List from "cozy-ui/transpiled/react/List";
 import ListSubheader from "cozy-ui/transpiled/react/ListSubheader";
 import { Table } from "cozy-ui/transpiled/react/deprecated/Table";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
 
 var ContactsList = function ContactsList(_ref) {
   var contacts = _ref.contacts,
       onItemClick = _ref.onItemClick,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  useExtendI18n(locales);
+
   var _useI18n = useI18n(),
       t = _useI18n.t;
 

package/transpiled/react/ContactsList/helpers.js

@@ -25,9 +25,9 @@ export var sortContacts = function sortContacts(contacts) {
  */
 
 var makeHeader = function makeHeader(contact, t) {
-  if (contact.me) return t('me');
+  if (contact.me) return t('ContactsList.me');
   var name = buildLastNameFirst(contact);
-  return name[0] || t('empty');
+  return name[0] || t('ContactsList.empty');
 };
 /**
  * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
@@ -40,8 +40,8 @@ var makeHeader = function makeHeader(contact, t) {
 var makeHeaderForIndexedContacts = function makeHeaderForIndexedContacts(contact, t) {
   var _contact$cozyMetadata;
 
-  if (contact.me) return t('me');
-  if ((_contact$cozyMetadata = contact.cozyMetadata) !== null && _contact$cozyMetadata !== void 0 && _contact$cozyMetadata.favorite) return t('favorite');
+  if (contact.me) return t('ContactsList.me');
+  if ((_contact$cozyMetadata = contact.cozyMetadata) !== null && _contact$cozyMetadata !== void 0 && _contact$cozyMetadata.favorite) return t('ContactsList.favorite');
   var index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '');
   var hasIndex = index !== null && index.length > 0;
 
@@ -50,7 +50,7 @@ var makeHeaderForIndexedContacts = function makeHeaderForIndexedContacts(contact
     return firstLetterWithoutAccent;
   }
 
-  return t('empty');
+  return t('ContactsList.empty');
 };
 /**
  * @typedef {Object.<string, Object>} CategorizedContactsResult
@@ -83,7 +83,7 @@ export var categorizeContacts = function categorizeContacts(contacts, t) {
 export var sortHeaders = function sortHeaders(categorized, t) {
   var headers = Object.keys(categorized);
   var notEmptyAndMyselfHeaders = headers.filter(function (header) {
-    return header !== t('empty') && header !== t('me');
+    return header !== t('ContactsList.empty') && header !== t('ContactsList.me');
   });
   var notEmptyAndMyselfSorted = notEmptyAndMyselfHeaders.slice().sort();
 
@@ -93,12 +93,12 @@ export var sortHeaders = function sortHeaders(categorized, t) {
 
   var headersSorted = [];
 
-  if (headers.includes(t('me'))) {
-    headersSorted.push(t('me'));
+  if (headers.includes(t('ContactsList.me'))) {
+    headersSorted.push(t('ContactsList.me'));
   }
 
-  if (headers.includes(t('empty'))) {
-    headersSorted.push(t('empty'));
+  if (headers.includes(t('ContactsList.empty'))) {
+    headersSorted.push(t('ContactsList.empty'));
   }
 
   return headersSorted.concat(notEmptyAndMyselfSorted);

package/transpiled/react/ContactsList/locales/withContactsListLocales.js

@@ -1,14 +1,18 @@
 var en = {
-  empty: "EMPTY",
-  me: "me",
-  favorite: "favorites",
-  menu: "Menu"
+  ContactsList: {
+    empty: "EMPTY",
+    me: "me",
+    favorite: "favorites",
+    menu: "Menu"
+  }
 };
 var fr = {
-  empty: "VIDE",
-  me: "moi",
-  favorite: "favoris",
-  menu: "Menu"
+  ContactsList: {
+    empty: "VIDE",
+    me: "moi",
+    favorite: "favoris",
+    menu: "Menu"
+  }
 };
 import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
 export var locales = {