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 ( + + {icon} + {text} + + ); + 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",