diff --git a/src/components/common/CollapseButton.js b/src/components/common/CollapseButton.js
new file mode 100644
index 000000000..b5c91a0b7
--- /dev/null
+++ b/src/components/common/CollapseButton.js
@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { useMutation } from '../../config/queryClient';
+import { COLLAPSE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { BUTTON_TYPES } from '../../config/constants';
+
+const CollapseButton = ({ item, type, onClick }) => {
+ const { t } = useTranslation();
+
+ const editItem = useMutation(MUTATION_KEYS.EDIT_ITEM);
+ const [isCollapsible, setIsCollapsible] = useState(item?.settings?.isCollapsible);
+
+ const handleCollapse = () => {
+ setIsCollapsible(!isCollapsible);
+
+ editItem.mutate({
+ id: item.id,
+ name: item.name,
+ settings: {
+ isCollapsible: !isCollapsible,
+ },
+ });
+ onClick?.();
+ };
+
+ const icon = isCollapsible ? : ;
+ const text = isCollapsible ? t('Uncollapse') : t('Collapse');
+
+ switch (type) {
+ case BUTTON_TYPES.MENU_ITEM:
+ return (
+
+ );
+ default:
+ case BUTTON_TYPES.ICON_BUTTON:
+ return (
+
+
+ {icon}
+
+
+ );
+ }
+};
+
+CollapseButton.propTypes = {
+ item: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string,
+ settings: PropTypes.shape({
+ isCollapsible: PropTypes.bool,
+ }),
+ }),
+ type: PropTypes.string,
+ onClick: PropTypes.func,
+};
+
+CollapseButton.defaultProps = {
+ item: {
+ settings: {
+ isCollapsible: false,
+ },
+ },
+ type: BUTTON_TYPES.ICON_BUTTON,
+ onClick: null,
+};
+
+export default CollapseButton;
diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
index 352d3887e..9392c53d3 100644
--- a/src/components/item/settings/ItemSettings.js
+++ b/src/components/item/settings/ItemSettings.js
@@ -15,7 +15,7 @@ import { useMutation } from '../../../config/queryClient';
import {
SETTINGS_CHATBOX_TOGGLE_ID,
SETTINGS_PINNED_TOGGLE_ID,
- SETTINGS_EXPANDABLE_TOGGLE_ID,
+ SETTINGS_COLLAPSE_TOGGLE_ID,
} from '../../../config/selectors';
import ThumbnailSetting from './ThumbnailSetting';
import CCLicenseSelection from '../publish/CCLicenseSelection';
@@ -61,12 +61,12 @@ const ItemSettings = ({ item }) => {
});
};
- const handleExpandable = (event) => {
+ const handleCollapse = (event) => {
editItem.mutate({
id: item.get('id'),
name: item.get('name'),
settings: {
- isExpandable: event.target.checked,
+ isCollapsible: event.target.checked,
},
});
};
@@ -95,16 +95,16 @@ const ItemSettings = ({ item }) => {
return ;
};
- const renderExpandableSetting = () => {
+ const renderCollapseSetting = () => {
const control = (
);
- return ;
+ return ;
};
return (
@@ -116,7 +116,7 @@ const ItemSettings = ({ item }) => {
{renderPinSetting()}
{renderChatSetting()}
- {renderExpandableSetting()}
+ {renderCollapseSetting()}
diff --git a/src/components/main/ItemMenu.js b/src/components/main/ItemMenu.js
index 60e004038..75a5b99eb 100644
--- a/src/components/main/ItemMenu.js
+++ b/src/components/main/ItemMenu.js
@@ -22,6 +22,7 @@ import CopyButton from './CopyButton';
import RecycleButton from '../common/RecycleButton';
import HideButton from '../common/HideButton';
import PinButton from '../common/PinButton';
+import CollapseButton from '../common/CollapseButton';
import FavoriteButton from '../common/FavoriteButton';
import { BUTTON_TYPES } from '../../config/constants';
import { CurrentUserContext } from '../context/CurrentUserContext';
@@ -65,6 +66,7 @@ const ItemMenu = ({ item, canEdit }) => {
/>,
,
,
+ ,
`itemsTable-${id}`;
export const SETTINGS_PINNED_TOGGLE_ID = 'settingsPinnedToggle';
export const SETTINGS_CHATBOX_TOGGLE_ID = 'settingsChatboxToggle';
-export const SETTINGS_EXPANDABLE_TOGGLE_ID = 'settingsExpandableToggle';
+export const SETTINGS_COLLAPSE_TOGGLE_ID = 'settingsCollapseToggle';
export const ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID =
'itemsTableRestoreSelectedItems';
diff --git a/src/langs/en.json b/src/langs/en.json
index 259a477dd..2b00e6ee6 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -134,7 +134,9 @@
"Pin": "Pin this item",
"Unpin": "Unpin this item",
"Show Chat": "Show Chat",
- "Expandable item": "Set as expandable item",
+ "Collapsible item": "Set as collapsible item",
+ "Collapse": "Collapse",
+ "Uncollapse": "Uncollapse",
"Write the folder decription here…": "Write the folder decription here…",
"This item is accessible if the visitor provides a ": "This item is accessible if the visitor provides a ",
"This item is public. Anyone can access it.": "This item is public. Anyone can access it.",
diff --git a/src/langs/fr.json b/src/langs/fr.json
index 397615964..673b9879b 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -135,7 +135,9 @@
"Pin": "Epingler",
"Unpin": "Détacher",
"Show Chat": "Afficher le chat",
- "Expandable item": "Définir comme élément extensible",
+ "Collapsible item": "Définir comme élément pliant",
+ "Collapse": "Collapse",
+ "Uncollapse": "Uncollapse",
"Write the folder decription here…": "Entrer la description du dossier ici…",
"Information": "Informations",
"Save": "Sauvegarder",