cozy-search
Version:
UI components about search bar and IA assistant
230 lines (188 loc) • 10.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _twakeIcons = require("@linagora/twake-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
var _Dialog = _interopRequireDefault(require("cozy-ui/transpiled/react/Dialog"));
var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/SearchBar"));
var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
var _twakeI18n = require("twake-i18n");
var _AssistantProvider = require("../AssistantProvider");
var _ChatKnowledge = _interopRequireDefault(require("./ChatKnowledge"));
var _DriveKnowledge = _interopRequireDefault(require("./DriveKnowledge"));
var _MailKnowledge = _interopRequireDefault(require("./MailKnowledge"));
var _tchat = _interopRequireDefault(require("../../assets/tchat.png"));
var _tdrive = _interopRequireDefault(require("../../assets/tdrive.png"));
var _tmail = _interopRequireDefault(require("../../assets/tmail.png"));
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; }
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) { (0, _defineProperty2.default)(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; }
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 PANEL_CONFIG = {
drive: {
title: 'assistant.twake_knowledges.title_drive',
desc: 'assistant.twake_knowledges.desc_drive',
icon: _tdrive.default,
Component: _DriveKnowledge.default,
actionLabel: 'assistant.twake_knowledges.select_folders'
},
mail: {
title: 'assistant.twake_knowledges.title_mail',
desc: 'assistant.twake_knowledges.desc_mail',
icon: _tmail.default,
Component: _MailKnowledge.default,
actionLabel: 'assistant.twake_knowledges.select_emails'
},
chat: {
title: 'assistant.twake_knowledges.title_chat',
desc: 'assistant.twake_knowledges.desc_chat',
icon: _tchat.default,
Component: _ChatKnowledge.default,
actionLabel: 'assistant.twake_knowledges.select_messages'
}
};
var TwakeKnowledgePanelContainer = function TwakeKnowledgePanelContainer(_ref) {
var children = _ref.children,
isMobile = _ref.isMobile;
return !isMobile ? /*#__PURE__*/_react.default.createElement(_Paper.default, {
elevation: 0,
square: true,
className: (0, _classnames.default)(styles['source-panel'], 'u-h-100')
}, children) : /*#__PURE__*/_react.default.createElement(_Dialog.default, {
fullScreen: true,
open: true
}, children);
};
var TwakeKnowledgePanel = function TwakeKnowledgePanel(_ref2) {
var onClose = _ref2.onClose;
var _useI18n = (0, _twakeI18n.useI18n)(),
t = _useI18n.t;
var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
isMobile = _useBreakpoints.isMobile;
var _useAssistant = (0, _AssistantProvider.useAssistant)(),
openedKnowledgePanel = _useAssistant.openedKnowledgePanel,
selectedTwakeKnowledge = _useAssistant.selectedTwakeKnowledge,
setSelectedTwakeKnowledge = _useAssistant.setSelectedTwakeKnowledge;
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
selectedItems = _useState2[0],
setSelectedItems = _useState2[1];
(0, _react.useEffect)(function () {
// eslint-disable-next-line react-hooks/set-state-in-effect
setSelectedItems(selectedTwakeKnowledge[openedKnowledgePanel] || []);
}, [openedKnowledgePanel, selectedTwakeKnowledge]);
var handleToggleItems = function handleToggleItems(ids) {
var allSelected = ids.every(function (id) {
return selectedItems.includes(id);
});
if (allSelected) {
setSelectedItems(function (prev) {
return prev.filter(function (id) {
return !ids.includes(id);
});
});
} else {
setSelectedItems(function (prev) {
return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(prev), (0, _toConsumableArray2.default)(ids))));
});
}
};
var handleClearItems = function handleClearItems(ids) {
setSelectedItems(function (prev) {
return prev.filter(function (id) {
return !ids.includes(id);
});
});
};
var handleClearAll = function handleClearAll() {
setSelectedItems([]);
};
var handleConfirm = function handleConfirm() {
setSelectedTwakeKnowledge(_objectSpread(_objectSpread({}, selectedTwakeKnowledge), {}, (0, _defineProperty2.default)({}, openedKnowledgePanel, selectedItems)));
onClose();
};
var config = PANEL_CONFIG[openedKnowledgePanel];
if (!openedKnowledgePanel || !config) return null;
var title = config.title,
desc = config.desc,
IconImg = config.icon,
Component = config.Component,
actionLabel = config.actionLabel;
if (!openedKnowledgePanel) return null;
return /*#__PURE__*/_react.default.createElement(TwakeKnowledgePanelContainer, {
isMobile: isMobile
}, /*#__PURE__*/_react.default.createElement("div", {
className: styles['source-panel-header']
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "h4",
className: "u-flex u-flex-items-center"
}, /*#__PURE__*/_react.default.createElement("img", {
src: IconImg,
alt: "",
className: "u-mr-1"
}), t(title)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: onClose
}, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: _twakeIcons.Cross
}))), /*#__PURE__*/_react.default.createElement("div", {
className: styles['source-panel-description']
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "body2",
color: "textSecondary"
}, t(desc))), /*#__PURE__*/_react.default.createElement("div", {
className: styles['source-panel-search']
}, /*#__PURE__*/_react.default.createElement(_SearchBar.default, {
placeholder: t('assistant.twake_knowledges.search_placeholder'),
size: "small"
})), /*#__PURE__*/_react.default.createElement("div", {
className: styles['source-panel-content']
}, /*#__PURE__*/_react.default.createElement(Component, {
selectedItems: selectedItems,
onToggleItems: handleToggleItems,
onClearItems: handleClearItems
})), /*#__PURE__*/_react.default.createElement("div", {
className: styles['source-panel-footer']
}, /*#__PURE__*/_react.default.createElement("div", {
className: "u-flex u-flex-justify-end u-flex-items-center"
}, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
className: "u-mr-half",
variant: "secondary",
label: selectedItems.length > 0 ? t('assistant.twake_knowledges.clear_all') : t('assistant.twake_knowledges.cancel'),
onClick: selectedItems.length > 0 ? handleClearAll : onClose
}), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
variant: "primary",
label: t(actionLabel),
onClick: handleConfirm,
disabled: selectedItems.length === 0
}))));
};
var _default = TwakeKnowledgePanel;
exports.default = _default;