cozy-search
Version:
UI components about search bar and IA assistant
244 lines (212 loc) • 10.2 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 _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"
}; // Dummy children used to simulate that each folder holds more content.
var MY_DRIVE_SUBFOLDERS = ['Archive', 'Documents', 'Meetings'];
var SHARED_SUBFOLDERS = ['Documents', 'Reports', 'Archive'];
var makeChildren = function makeChildren(parentId, subfolderNames) {
return subfolderNames.map(function (name) {
return {
id: "".concat(parentId, "-").concat(name.toLowerCase()),
name: name
};
});
};
var makeFolders = function makeFolders(names, subfolderNames) {
var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
return names.map(function (name) {
var id = "".concat(prefix).concat(name.toLowerCase().replace(/\s+/g, '-'));
return {
id: id,
name: name,
children: makeChildren(id, subfolderNames)
};
});
};
var MY_DRIVE_FOLDERS = makeFolders(['Admin', 'Business', 'HR', 'Legal', 'Perso', 'Projects', 'Tech'], MY_DRIVE_SUBFOLDERS);
var SHARED_FOLDERS = makeFolders(['Design', 'Marketing', 'Sales'], SHARED_SUBFOLDERS, 'shared-');
var flattenIds = function flattenIds(nodes) {
return nodes.reduce(function (ids, node) {
return ids.concat(node.id, flattenIds(node.children || []));
}, []);
};
var DriveTreeItem = function DriveTreeItem(_ref) {
var item = _ref.item,
depth = _ref.depth,
selectedItems = _ref.selectedItems,
onToggleItem = _ref.onToggleItem;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var hasChildren = item.children && item.children.length > 0;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
button: true,
className: styles['drive-tree-item'],
style: {
paddingLeft: "".concat(2 + depth * 1.5, "rem")
},
onClick: function onClick() {
return onToggleItem([item.id]);
}
}, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
className: "u-c-pointer",
style: {
visibility: hasChildren ? 'visible' : 'hidden'
},
onClick: function onClick(e) {
e.stopPropagation();
if (hasChildren) setIsOpen(function (open) {
return !open;
});
}
}, /*#__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: selectedItems.includes(item.id),
tabIndex: -1,
disableRipple: true
})), /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
icon: _twakeIcons.FileTypeFolder,
color: "var(--primaryColor)"
})), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
primary: item.name
})), hasChildren && /*#__PURE__*/_react.default.createElement(_Collapse.default, {
in: isOpen,
unmountOnExit: true
}, /*#__PURE__*/_react.default.createElement(_List.default, {
component: "div",
disablePadding: true
}, item.children.map(function (child) {
return /*#__PURE__*/_react.default.createElement(DriveTreeItem, {
key: child.id,
item: child,
depth: depth + 1,
selectedItems: selectedItems,
onToggleItem: onToggleItem
});
}))));
};
var DriveSection = function DriveSection(_ref2) {
var title = _ref2.title,
folders = _ref2.folders,
selectedItems = _ref2.selectedItems,
onToggleItem = _ref2.onToggleItem,
onClearSection = _ref2.onClearSection;
var _useI18n = (0, _twakeI18n.useI18n)(),
t = _useI18n.t;
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isOpen = _useState4[0],
setIsOpen = _useState4[1];
var allIds = flattenIds(folders);
var selectedCount = allIds.filter(function (id) {
return selectedItems.includes(id);
}).length;
var allSelected = allIds.length > 0 && selectedCount === allIds.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: function onClick() {
return setIsOpen(function (open) {
return !open;
});
}
}, /*#__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: allSelected,
indeterminate: selectedCount > 0 && !allSelected,
onClick: function onClick() {
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: _twakeIcons.FileTypeFolder,
className: styles['section-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(allIds);
}
})), /*#__PURE__*/_react.default.createElement(_Collapse.default, {
in: isOpen
}, /*#__PURE__*/_react.default.createElement(_List.default, {
component: "div",
disablePadding: true
}, folders.map(function (folder) {
return /*#__PURE__*/_react.default.createElement(DriveTreeItem, {
key: folder.id,
item: folder,
depth: 0,
selectedItems: selectedItems,
onToggleItem: onToggleItem
});
}))));
};
var DriveKnowledge = function DriveKnowledge(_ref3) {
var selectedItems = _ref3.selectedItems,
onToggleItems = _ref3.onToggleItems,
onClearItems = _ref3.onClearItems;
var _useI18n2 = (0, _twakeI18n.useI18n)(),
t = _useI18n2.t;
return /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(DriveSection, {
title: t('assistant.twake_knowledges.my_drive'),
folders: MY_DRIVE_FOLDERS,
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}), /*#__PURE__*/_react.default.createElement(DriveSection, {
title: t('assistant.twake_knowledges.shared_with_me'),
folders: SHARED_FOLDERS,
selectedItems: selectedItems,
onToggleItem: onToggleItems,
onClearSection: onClearItems
}));
};
var _default = DriveKnowledge;
exports.default = _default;