cozy-ui-plus 1.1.0

package/dist/ContactsListModal/ContactsListModal.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var _Dialog = require("cozy-ui/transpiled/react/Dialog");
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
+
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
+
+var _useEventListener = _interopRequireDefault(require("cozy-ui/transpiled/react/hooks/useEventListener"));
+
+var _useRealtime = _interopRequireDefault(require("cozy-ui/transpiled/react/hooks/useRealtime"));
+
+var _Breakpoints = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/Breakpoints"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _AddContactDialog = _interopRequireDefault(require("./AddContact/AddContactDialog"));
+
+var _ContactsListContent = _interopRequireDefault(require("./ContactsListContent"));
+
+var _MobileHeader = _interopRequireDefault(require("./MobileHeader"));
+
+var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var styles = {
+  "ContactsListModal__addContactContainer": "styles__ContactsListModal__addContactContainer___3miFk"
+};
+
+var ContactsListModal = function ContactsListModal(_ref) {
+  var onItemClick = _ref.onItemClick,
+      placeholder = _ref.placeholder,
+      addContactLabel = _ref.addContactLabel,
+      emptyMessage = _ref.emptyMessage,
+      dismissAction = _ref.dismissAction,
+      contacts = _ref.contacts;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showAddDialog = _useState4[0],
+      setShowAddDialog = _useState4[1];
+
+  var _useBreakpoints = (0, _Breakpoints.default)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var _useCozyDialog = (0, _CozyDialogs.useCozyDialog)({
+    size: 'large',
+    open: true,
+    onClose: dismissAction
+  }),
+      dialogProps = _useCozyDialog.dialogProps,
+      dialogTitleProps = _useCozyDialog.dialogTitleProps;
+
+  var client = (0, _cozyClient.useClient)();
+  (0, _useRealtime.default)(client, {
+    'io.cozy.contacts': {
+      created: contacts.fetch,
+      updated: contacts.fetch
+    }
+  }, []);
+  (0, _useEventListener.default)(document, 'resume', contacts.fetch);
+
+  var handleFilterChange = function handleFilterChange(e) {
+    setFilter(e.target.value);
+  };
+
+  var selfAddContactLabel = addContactLabel !== null && addContactLabel !== void 0 ? addContactLabel : t('addContact');
+  var selfPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : t('searchContact');
+  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.TopAnchoredDialog, dialogProps, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
+    variant: isMobile ? 'inverted' : 'normal'
+  }, /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
+    onClick: dismissAction
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, (0, _extends2.default)({}, dialogTitleProps, {
+    className: (0, _classnames.default)(dialogTitleProps.className, {
+      'u-p-0 u-w-100': isMobile
+    })
+  }), isMobile ? /*#__PURE__*/_react.default.createElement(_MobileHeader.default, {
+    filter: filter,
+    placeholder: selfPlaceholder,
+    onChange: handleFilterChange,
+    onDismiss: dismissAction
+  }) : /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    variant: "outlined",
+    type: "text",
+    label: selfPlaceholder,
+    id: "contactsListModal-search-id",
+    fullWidth: true,
+    value: filter,
+    onChange: handleFilterChange,
+    autoFocus: true
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, {
+    className: "u-p-0"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogContentInner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.ContactsListModal__addContactContainer
+  }, /*#__PURE__*/_react.default.createElement(_Buttons.default, (0, _extends2.default)({
+    className: isMobile && 'u-mt-1',
+    variant: "secondary",
+    theme: "secondary",
+    label: selfAddContactLabel || /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _Plus.default
+    })
+  }, selfAddContactLabel && {
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _Plus.default
+    })
+  }, {
+    onClick: setShowAddDialog
+  }))), /*#__PURE__*/_react.default.createElement(_ContactsListContent.default, {
+    filter: filter,
+    contacts: contacts,
+    onItemClick: onItemClick,
+    emptyMessage: emptyMessage,
+    dismissAction: dismissAction
+  }))), showAddDialog && /*#__PURE__*/_react.default.createElement(_AddContactDialog.default, {
+    onListClose: dismissAction,
+    onCreate: onItemClick,
+    onClose: function onClose() {
+      return setShowAddDialog(false);
+    }
+  }));
+};
+
+ContactsListModal.propTypes = {
+  onItemClick: _propTypes.default.func,
+
+  /** Label to show in the search input */
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Label to show on the button to add a contact */
+  addContactLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Message to show when no result */
+  emptyMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  dismissAction: _propTypes.default.func,
+
+  /** Query state of contacts */
+  contacts: _propTypes.default.object
+};
+var _default = ContactsListModal;
+exports.default = _default;

package/dist/ContactsListModal/ContactsListModalWithQuery.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _ContactsListModal = _interopRequireDefault(require("./ContactsListModal"));
+
+var _queries = require("./queries");
+
+var ContactsListModalWithQuery = function ContactsListModalWithQuery(props) {
+  var contactsQuery = (0, _queries.buildContactsQuery)();
+  var contacts = (0, _cozyClient.useQueryAll)(contactsQuery.definition, contactsQuery.options);
+  return /*#__PURE__*/_react.default.createElement(_ContactsListModal.default, (0, _extends2.default)({
+    contacts: contacts
+  }, props));
+};
+
+ContactsListModalWithQuery.propTypes = {
+  onItemClick: _propTypes.default.func,
+
+  /** Label to show in the search input */
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Label to show on the button to add a contact */
+  addContactLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Message to show when no result */
+  emptyMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  dismissAction: _propTypes.default.func
+};
+var _default = ContactsListModalWithQuery;
+exports.default = _default;

package/dist/ContactsListModal/EmptyMessage.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _excluded = ["className"];
+
+var EmptyMessage = function EmptyMessage(props) {
+  var className = props.className,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Typography.default, (0, _extends2.default)({
+    className: (0, _classnames.default)('u-ta-center u-pv-2', className)
+  }, rest, {
+    variant: "body1"
+  }));
+};
+
+var _default = EmptyMessage;
+exports.default = _default;

package/dist/ContactsListModal/MobileHeader.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Previous = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Previous"));
+
+var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/Input"));
+
+var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
+
+var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
+
+var barStyle = {
+  height: 48
+};
+
+var MobileHeader = function MobileHeader(_ref) {
+  var filter = _ref.filter,
+      placeholder = _ref.placeholder,
+      onChange = _ref.onChange,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
+    variant: "inverted"
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    square: true,
+    elevation: 0,
+    className: "u-flex u-flex-items-center u-pr-3 u-pl-half",
+    style: barStyle
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: "u-mr-half",
+    onClick: onDismiss,
+    size: "medium"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Previous.default
+  })), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    placeholder: placeholder,
+    id: placeholder,
+    value: filter,
+    onChange: onChange,
+    autoFocus: true,
+    fullWidth: true,
+    disableUnderline: true
+  })));
+};
+
+MobileHeader.propTypes = {
+  filter: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onDismiss: _propTypes.default.func
+};
+var _default = MobileHeader;
+exports.default = _default;

package/dist/ContactsListModal/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ContactsListModal = _interopRequireDefault(require("./ContactsListModal"));
+
+var _ContactsListModalWithQuery = _interopRequireDefault(require("./ContactsListModalWithQuery"));
+
+var _withContactsListLocales = require("./withContactsListLocales");
+
+var _excluded = ["contacts"];
+
+var ContactsListModalWrapper = function ContactsListModalWrapper(_ref) {
+  var contacts = _ref.contacts,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (contacts) {
+    return /*#__PURE__*/_react.default.createElement(_ContactsListModal.default, (0, _extends2.default)({
+      contacts: contacts
+    }, props));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_ContactsListModalWithQuery.default, props);
+};
+
+ContactsListModalWrapper.propTypes = {
+  onItemClick: _propTypes.default.func,
+
+  /** Label to show in the search input */
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Label to show on the button to add a contact */
+  addContactLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+
+  /** Message to show when no result */
+  emptyMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  dismissAction: _propTypes.default.func,
+
+  /** Query state of contacts */
+  contacts: _propTypes.default.object
+};
+
+var _default = (0, _withContactsListLocales.withContactsListLocales)(ContactsListModalWrapper);
+
+exports.default = _default;