46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { useCallback } from 'react';
|
|
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
|
|
|
|
import { IconButton } from './icon_button';
|
|
|
|
const messages = defineMessages({
|
|
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
|
|
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
|
|
});
|
|
|
|
export const CollapseButton = ({ collapsed, setCollapsed }) => {
|
|
const intl = useIntl();
|
|
|
|
const handleCollapsedClick = useCallback((e) => {
|
|
if (e.button === 0) {
|
|
setCollapsed(!collapsed);
|
|
e.preventDefault();
|
|
}
|
|
}, [collapsed, setCollapsed]);
|
|
|
|
return (
|
|
<IconButton
|
|
className='status__collapse-button'
|
|
animate
|
|
active={collapsed}
|
|
title={
|
|
collapsed ?
|
|
intl.formatMessage(messages.uncollapse) :
|
|
intl.formatMessage(messages.collapse)
|
|
}
|
|
icon='angle-double-up'
|
|
iconComponent={ExpandLessIcon}
|
|
onClick={handleCollapsedClick}
|
|
/>
|
|
);
|
|
};
|
|
|
|
CollapseButton.propTypes = {
|
|
collapsed: PropTypes.bool,
|
|
setCollapsed: PropTypes.func.isRequired,
|
|
};
|