mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-12-05 20:39:04 +01:00
5f50b634cf
* 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
45 lines
1.1 KiB
JavaScript
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,
|
|
};
|