chuckya/app/javascript/flavours/glitch/components/collapse_button.jsx
Claire 5f50b634cf
Further reduce CSS and markup differences with upstream (#2635)
* Further reduce CSS differences with upstream

* Reduce differences in markup and CSS with upstream

* Redo collapsible post notifications

* Reduce CSS differences further

* Reduce differences with upstream regarding `.status` and `.status__wrapper`

* Further reduce differences with upstream

* Reduce differences with upstream in DisplayName
2024-02-20 18:49:59 +01:00

45 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,
};