cozy-search
Version:
UI components about search bar and IA assistant
264 lines (237 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _twakeIcons = require("@linagora/twake-icons");
var _react = _interopRequireWildcard(require("react"));
var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
var _Checkbox = _interopRequireDefault(require("cozy-ui/transpiled/react/Checkbox"));
var _Collapse = _interopRequireDefault(require("cozy-ui/transpiled/react/Collapse"));
var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
var _twakeI18n = require("twake-i18n");
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 = {
"source-panel": "styles__source-panel___1r13x",
"source-panel-header": "styles__source-panel-header___2i_pd",
"source-panel-description": "styles__source-panel-description___JL2br",
"source-panel-search": "styles__source-panel-search___2_jsF",
"source-panel-content": "styles__source-panel-content___1YU9a",
"source-panel-footer": "styles__source-panel-footer___i_u77",
"section-header": "styles__section-header___3qiTb",
"nested-item": "styles__nested-item___1Guh8",
"drive-tree-item": "styles__drive-tree-item___30uL0",
"clear-all-button": "styles__clear-all-button___2lTyP",
"date-label": "styles__date-label___3gPZY",
"mail-preview": "styles__mail-preview___Vm-RW",
"chat-header-actions": "styles__chat-header-actions___2nLD5",
"header-clear-all": "styles__header-clear-all___3dOMJ",
"knowledge-chips-icon": "styles__knowledge-chips-icon___2AIB6"
};
var MailSection = function MailSection(_ref) {
var title = _ref.title,
icon = _ref.icon,
items = _ref.items,
selectedItems = _ref.selectedItems,
onToggleItem = _ref.onToggleItem,
onClearSection = _ref.onClearSection,
showSeeMore = _ref.showSeeMore;
var _useI18n = (0, _twakeI18n.useI18n)(),
t = _useI18n.t;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var handleToggleSection = function handleToggleSection() {
setIsOpen(!isOpen);
};
var selectedCount = items.filter(function (item) {
return selectedItems.includes(item.id);
}).length;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
className: styles['section-header']
}, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
className: "u-c-pointer",
onClick: handleToggleSection
}, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: isOpen ? _twakeIcons.Dropdown : _twakeIcons.Right
})), /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
checked: items.length > 0 && items.every(function (item) {
return selectedItems.includes(item.id);
}),
indeterminate: selectedCount > 0 && selectedCount < items.length,
onClick: function onClick() {
var allIds = items.map(function (i) {
return i.id;
});
var allSelected = allIds.every(function (id) {
return selectedItems.includes(id);
});
if (allSelected) {
onClearSection(allIds);
} else {
onToggleItem(allIds.filter(function (id) {
return !selectedItems.includes(id);
}));
}
}
})), /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: icon
})), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
primary: title
}), selectedCount > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.default, {
className: styles['clear-all-button'],
variant: "text",
size: "small",
label: t('assistant.twake_knowledges.clear_all'),
onClick: function onClick(e) {
e.stopPropagation();
onClearSection(items.map(function (i) {
return i.id;
}));
}
})), /*#__PURE__*/_react.default.createElement(_Collapse.default, {
in: isOpen
}, /*#__PURE__*/_react.default.createElement(_List.default, {
component: "div",
disablePadding: true
}, items.map(function (item) {
return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
key: item.id,
className: styles['nested-item'],
button: true,
onClick: function onClick() {
return onToggleItem([item.id]);
}
}, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
checked: selectedItems.includes(item.id),
tabIndex: -1,
disableRipple: true
})), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
primary: item.subject,
primaryTypographyProps: {
noWrap: true
},
secondaryTypographyProps: {
component: 'div'
},
secondary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "caption",
className: "u-db",
noWrap: true
}, item.from), /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "body2",
color: "textSecondary",
className: styles['mail-preview'],
noWrap: true
}, item.preview))
}), /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "caption",
color: "textSecondary",
className: styles['date-label']
}, item.date));
}), showSeeMore && /*#__PURE__*/_react.default.createElement(_ListItem.default, {
className: styles['nested-item']
}, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
variant: "text",
size: "small",
label: t('assistant.twake_knowledges.see_more')
})))));
};
var MailKnowledge = function MailKnowledge(_ref2) {
var selectedItems = _ref2.selectedItems,
onToggleItems = _ref2.onToggleItems,
onClearItems = _ref2.onClearItems;
var _useI18n2 = (0, _twakeI18n.useI18n)(),
t = _useI18n2.t,
lang = _useI18n2.lang;
var today = new Date().toLocaleDateString(lang, {
month: 'short',
day: 'numeric'
});
var inboxItems = [{
id: 'inbox-1',
subject: 'Project timeline update',
from: 'pm@twake.app',
preview: 'The project timeline have been updated',
date: today
}, {
id: 'inbox-2',
subject: 'Your meeting transcript is ready!',
from: 'noreply@linagora.com',
preview: 'The transcript and summary of your visio meeting is ready',
date: today
}, {
id: 'inbox-3',
subject: 'New event from Isabelle Moreau',
from: 'imoreau@linagora.com',
preview: 'Isabelle Moreau has invited you',
date: today
}, {
id: 'inbox-4',
subject: 'Recap hebdomadaire OSSA',
from: 'ossa@linagora.com',
preview: 'Bulletin hebdomadaire OSSA',
date: today
}];
var starredItems = [{
id: 'mail4',
subject: 'Important: Security Update',
from: 'security@twake.app',
preview: 'Please update your password',
date: today
}];
return /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.inbox'),
icon: _twakeIcons.Email,
items: inboxItems,
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems,
showSeeMore: true
}), /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.starred'),
icon: _twakeIcons.Star,
items: starredItems,
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}), /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.sent'),
icon: _twakeIcons.Paperplane,
items: [],
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}), /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.draft'),
icon: _twakeIcons.File,
items: [],
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}), /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.outbox'),
icon: _twakeIcons.Upload,
items: [],
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}), /*#__PURE__*/_react.default.createElement(MailSection, {
title: t('assistant.twake_knowledges.spam'),
icon: _twakeIcons.Warn,
items: [],
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}));
};
var _default = MailKnowledge;
exports.default = _default;