cozy-ui 127.10.1 → 127.12.0

package/react/ContactsList/ContactCell.jsx

@@ -0,0 +1,58 @@
+import React, { useRef, useState } from 'react'
+
+import ContactIdentity from './Contacts/ContactIdentity'
+import { locales } from './locales/withContactsListLocales'
+import ActionsMenu from '../ActionsMenu'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import DotsIcon from '../Icons/Dots'
+import ListItemIcon from '../ListItemIcon'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const Cell = ({ row, column, cell, actions }) => {
+  const [showActions, setShowActions] = useState(false)
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const actionsRef = useRef()
+
+  if (column.id === 'fullname') {
+    return <ContactIdentity contact={row} noWrapper />
+  }
+
+  if (column.id === 'actions') {
+    if (!actions) {
+      return null
+    }
+
+    return (
+      <>
+        <ListItemIcon>
+          <IconButton
+            ref={actionsRef}
+            arial-label={t('menu')}
+            onClick={() => setShowActions(true)}
+          >
+            <Icon icon={DotsIcon} />
+          </IconButton>
+        </ListItemIcon>
+        {showActions && (
+          <ActionsMenu
+            open
+            ref={actionsRef}
+            docs={[row]}
+            actions={actions}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right'
+            }}
+            onClose={() => setShowActions(false)}
+          />
+        )}
+      </>
+    )
+  }
+
+  return cell
+}
+
+export default React.memo(Cell)

package/react/ContactsList/helpers.js

@@ -1,3 +1,5 @@
+import get from 'lodash/get'
+
 export function buildLastNameFirst(contact) {
   const givenName =
     contact.name && contact.name.givenName
@@ -36,15 +38,39 @@ const makeHeader = (contact, t) => {
   return name[0] || t('empty')
 }
 
+/**
+ * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+const makeHeaderForIndexedContacts = (contact, t) => {
+  if (contact.me) return t('me')
+  if (contact.cozyMetadata?.favorite) return t('favorite')
+
+  const index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '')
+  const hasIndex = index !== null && index.length > 0
+
+  if (hasIndex) {
+    const firstLetterWithoutAccent = index[0]
+      .normalize('NFD')
+      .replace(/\p{Diacritic}/gu, '')
+    return firstLetterWithoutAccent
+  }
+
+  return t('empty')
+}
+
 /**
  * @typedef {Object.<string, Object>} CategorizedContactsResult
  */
 
 /**
  * Categorize contacts by first letter of last name
+ * Expl.: all contacts with A as first letter will be in A category
  * @param {object[]} contacts io.cozy.contacts documents
  * @param {function} t translation function
- * @returns {CategorizedContactsResult}
+ * @returns {CategorizedContactsResult} Categorized contacts
  */
 export const categorizeContacts = (contacts, t) =>
   contacts.reduce((acc, contact) => {
@@ -81,3 +107,26 @@ export const sortHeaders = (categorized, t) => {
 
   return headersSorted.concat(notEmptyAndMyselfSorted)
 }
+
+/**
+ * Counts how many contacts are categorized by first letter and store it in `groupCounts`
+ * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
+ * Also store first letters and store them in `groupLabels`
+ * @param {array} contacts - Array of io.cozy.contact documents
+ * @returns {object}
+ */
+export const makeGroupLabelsAndCounts = (contacts, t) => {
+  return contacts.reduce(
+    (acc, contact) => {
+      const header = makeHeaderForIndexedContacts(contact, t)
+      if (!acc.groupLabels.includes(header)) {
+        acc.groupLabels.push(header)
+      }
+      const idx = acc.groupLabels.indexOf(header)
+      const val = acc.groupCounts[idx] || 0
+      acc.groupCounts[idx] = val + 1
+      return acc
+    },
+    { groupLabels: [], groupCounts: [] }
+  )
+}

package/react/ContactsList/helpers.spec.js

@@ -1,4 +1,11 @@
-import { sortLastNameFirst, sortHeaders } from './helpers'
+import {
+  sortLastNameFirst,
+  sortHeaders,
+  makeGroupLabelsAndCounts
+} from './helpers'
+
+const t = x => x
+
 describe('Sort contacts', () => {
   describe('By Last Name', () => {
     it('should sort contact by last name', () => {
@@ -99,3 +106,45 @@ describe('sortHeaders', () => {
     expect(sortedHeaders).toEqual(['me', 'empty', 'B', 'F', 'H'])
   })
 })
+
+describe('makeGroupLabelsAndCounts', () => {
+  it('should returns labels and counts', () => {
+    const contacts = [
+      { name: 'Alex', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Alan', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Cleo', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Cloé', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Clotilde', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Constant', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      {
+        name: 'Christophe',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' }
+      },
+      { name: 'Bernard', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Baptiste', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Xavier', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'X' } },
+      { name: 'Zorro', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Z' } },
+      { name: '', indexes: { byFamilyNameGivenNameEmailCozyUrl: '' } },
+      { name: {}, indexes: { byFamilyNameGivenNameEmailCozyUrl: {} } },
+      { name: 'John', indexes: { byFamilyNameGivenNameEmailCozyUrl: null } },
+      {
+        name: 'Connor',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: undefined }
+      },
+      { name: 'Àlbert', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'À' } },
+      {
+        name: 'Alice',
+        me: true,
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Alice' }
+      },
+      { name: 'Èllen', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'È' } }
+    ]
+
+    const res = makeGroupLabelsAndCounts(contacts, t)
+
+    expect(res).toStrictEqual({
+      groupLabels: ['A', 'C', 'B', 'X', 'Z', 'empty', 'me', 'E'],
+      groupCounts: [3, 5, 2, 1, 1, 4, 1, 1]
+    })
+  })
+})

package/react/ContactsList/locales/en.json

@@ -1,4 +1,6 @@
 {
   "empty": "EMPTY",
-  "me": "ME"
+  "me": "me",
+  "favorite": "favorites",
+  "menu": "Menu"
 }

package/react/ContactsList/locales/fr.json

@@ -1,4 +1,6 @@
 {
   "empty": "VIDE",
-  "me": "MOI"
+  "me": "moi",
+  "favorite": "favoris",
+  "menu": "Menu"
 }

package/react/providers/Selection/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+
+const Component = () => {
+  const { selectedItemsId, addSelectedItem, removeSelectedItem } = useSelection()
+
+  return (
+    <>
+      <Typography>selectedItemsId : {JSON.stringify(selectedItemsId)}</Typography>
+      <Button label="Add Item" onClick={() => addSelectedItem({ _id: '01' })} />
+      <Button label="Remove Item" onClick={() => removeSelectedItem({ _id: '01' })} />
+  </>
+  )
+}
+
+;
+
+<DemoProvider>
+  <SelectionProvider>
+    <Component />
+  </SelectionProvider>
+</DemoProvider>
+```

package/react/providers/Selection/index.jsx

@@ -0,0 +1,85 @@
+import isEqual from 'lodash/isEqual'
+import React, { createContext, useContext, useState } from 'react'
+
+const SelectionContext = createContext()
+
+export const useSelection = () => {
+  const context = useContext(SelectionContext)
+
+  if (!context) {
+    throw new Error('useSelection must be used within a SelectionProvider')
+  }
+  return context
+}
+
+/**
+ * This provider allows you to manage item selection
+ */
+const SelectionProvider = ({ children }) => {
+  const [selectedItemsId, setSelectedItemsId] = useState([])
+
+  const isSelectedItem = item => {
+    return selectedItemsId.some(selectedItemId => selectedItemId === item._id)
+  }
+
+  const isSelectionEnabled = selectedItemsId.length > 0
+
+  const addSelectedItem = item => {
+    setSelectedItemsId(prev => [...prev, item._id])
+  }
+
+  const removeSelectedItem = item => {
+    setSelectedItemsId(prev => prev.filter(el => el !== item._id))
+  }
+
+  const toggleSelectedItem = item => {
+    if (isSelectedItem(item)) {
+      removeSelectedItem(item)
+    } else {
+      addSelectedItem(item)
+    }
+  }
+
+  const selectAll = items => {
+    const ids = items.map(item => item._id)
+    setSelectedItemsId(ids)
+  }
+
+  const unselectAll = () => {
+    setSelectedItemsId([])
+  }
+
+  const isSelectedAllItems = items => {
+    const a = selectedItemsId.sort()
+    const b = items.map(item => item._id).sort()
+    return isEqual(a, b)
+  }
+
+  const toggleSelectAllItems = items => {
+    if (isSelectedAllItems(items)) {
+      unselectAll()
+    } else {
+      selectAll(items)
+    }
+  }
+
+  return (
+    <SelectionContext.Provider
+      value={{
+        selectedItemsId,
+        addSelectedItem,
+        removeSelectedItem,
+        toggleSelectedItem,
+        selectAll,
+        toggleSelectAllItems,
+        isSelectedItem,
+        isSelectionEnabled,
+        isSelectedAllItems
+      }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  )
+}
+
+export default React.memo(SelectionProvider)

package/transpiled/react/Contacts/GroupsSelect/GroupCreation.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default _default;
+import React from "react";

package/transpiled/react/Contacts/GroupsSelect/GroupCreation.js

@@ -0,0 +1,133 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+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 classNames from 'classnames';
+import React, { Component } from 'react';
+var styles = {};
+import Icon from "cozy-ui/transpiled/react/Icon";
+import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
+import Input from "cozy-ui/transpiled/react/Input";
+import { translate } from "cozy-ui/transpiled/react/providers/I18n";
+
+var normalizeGroupData = function normalizeGroupData(name) {
+  return {
+    name: name,
+    metadata: {
+      version: 1
+    }
+  };
+};
+
+var GroupCreation = /*#__PURE__*/function (_Component) {
+  _inherits(GroupCreation, _Component);
+
+  var _super = _createSuper(GroupCreation);
+
+  function GroupCreation(props) {
+    var _this;
+
+    _classCallCheck(this, GroupCreation);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isInputDisplayed: false,
+      groupName: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      _this.setState({
+        isInputDisplayed: !_this.state.isInputDisplayed
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
+      e.stopPropagation();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
+      e.stopPropagation();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "keyPress", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (e.keyCode == 13) {
+                  _this.props.createGroup(normalizeGroupData(e.target.value));
+
+                  _this.textInput.current.value = '';
+                }
+
+                e.stopPropagation();
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
+      e.stopPropagation();
+    });
+
+    _this.textInput = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+
+  _createClass(GroupCreation, [{
+    key: "render",
+    value: function render() {
+      var isInputDisplayed = this.state.isInputDisplayed;
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: styles['contact-group-creation-divider']
+      }), /*#__PURE__*/React.createElement("div", {
+        className: classNames('u-ml-half', 'u-mr-half', 'u-c-pointer', styles['container'])
+      }, !isInputDisplayed && /*#__PURE__*/React.createElement("div", {
+        onClick: this.handleClick,
+        className: styles['contact-group-create-div-icon']
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: PlusIcon
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "u-pl-half"
+      }, t('Contacts.GroupsSelect.create'))), isInputDisplayed && /*#__PURE__*/React.createElement(Input, {
+        id: "createGroupInput",
+        ref: this.textInput,
+        type: "text",
+        placeholder: t('Contacts.GroupsSelect.name'),
+        onClick: this.onClick,
+        onFocus: this.onFocus,
+        onKeyDown: this.keyPress,
+        size: "tiny",
+        autoComplete: "off",
+        autoFocus: true,
+        onMouseDown: this.onMouseDown
+      })));
+    }
+  }]);
+
+  return GroupCreation;
+}(Component);
+
+export default translate()(GroupCreation);

package/transpiled/react/Contacts/GroupsSelect/GroupsSelect.d.ts

@@ -0,0 +1,56 @@
+export function GroupsSelect({ allGroups, closeMenuOnSelect, value, styles, isMulti, noOptionsMessage, withCheckbox, components, onGroupCreated, onChange, onGroupCreate, onGroupUpdate, onGroupDelete, menuPosition }: {
+    allGroups: any;
+    closeMenuOnSelect: any;
+    value: any;
+    styles: any;
+    isMulti: any;
+    noOptionsMessage: any;
+    withCheckbox: any;
+    components: any;
+    onGroupCreated: any;
+    onChange: any;
+    onGroupCreate: any;
+    onGroupUpdate: any;
+    onGroupDelete: any;
+    menuPosition: any;
+}): JSX.Element;
+export namespace GroupsSelect {
+    const propTypes: {
+        allGroups: PropTypes.Validator<any[]>;
+        styles: PropTypes.Requireable<object>;
+        value: PropTypes.Validator<object>;
+        components: PropTypes.Requireable<object>;
+        isMulti: PropTypes.Requireable<boolean>;
+        noOptionsMessage: PropTypes.Requireable<(...args: any[]) => any>;
+        withCheckbox: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onGroupCreated: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupCreate: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        closeMenuOnSelect: PropTypes.Requireable<boolean>;
+        menuPosition: PropTypes.Requireable<string>;
+    } | {
+        allGroups: PropTypes.Validator<any[]>;
+        onGroupCreate: PropTypes.Validator<(...args: any[]) => any>;
+        onGroupUpdate: PropTypes.Validator<(...args: any[]) => any>;
+        onGroupDelete: PropTypes.Validator<(...args: any[]) => any>;
+        styles?: undefined;
+        value?: undefined;
+        components?: undefined;
+        isMulti?: undefined;
+        noOptionsMessage?: undefined;
+        withCheckbox?: undefined;
+        onChange?: undefined;
+        onGroupCreated?: undefined;
+        closeMenuOnSelect?: undefined;
+        menuPosition?: undefined;
+    };
+    namespace defaultProps {
+        const isMulti: boolean;
+        const components: {};
+        const closeMenuOnSelect: boolean;
+    }
+}
+export default GroupsSelect;
+import PropTypes from "prop-types";