Port 4534498a8e
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
0bfa4a990f
commit
55ea79165a
9 changed files with 54 additions and 62 deletions
@ -1,55 +0,0 @@ |
|||||||
import PropTypes from 'prop-types'; |
|
||||||
import { PureComponent } from 'react'; |
|
||||||
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl'; |
|
||||||
|
|
||||||
import { bannerSettings } from 'flavours/glitch/settings'; |
|
||||||
|
|
||||||
import { IconButton } from './icon_button'; |
|
||||||
|
|
||||||
const messages = defineMessages({ |
|
||||||
dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' }, |
|
||||||
}); |
|
||||||
|
|
||||||
class DismissableBanner extends PureComponent { |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
id: PropTypes.string.isRequired, |
|
||||||
children: PropTypes.node, |
|
||||||
intl: PropTypes.object.isRequired, |
|
||||||
}; |
|
||||||
|
|
||||||
state = { |
|
||||||
visible: !bannerSettings.get(this.props.id), |
|
||||||
}; |
|
||||||
|
|
||||||
handleDismiss = () => { |
|
||||||
const { id } = this.props; |
|
||||||
this.setState({ visible: false }, () => bannerSettings.set(id, true)); |
|
||||||
}; |
|
||||||
|
|
||||||
render () { |
|
||||||
const { visible } = this.state; |
|
||||||
|
|
||||||
if (!visible) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
const { children, intl } = this.props; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className='dismissable-banner'> |
|
||||||
<div className='dismissable-banner__message'> |
|
||||||
{children} |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className='dismissable-banner__action'> |
|
||||||
<IconButton icon='times' title={intl.formatMessage(messages.dismiss)} onClick={this.handleDismiss} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default injectIntl(DismissableBanner); |
|
@ -0,0 +1,47 @@ |
|||||||
|
import type { PropsWithChildren } from 'react'; |
||||||
|
import { useCallback, useState } from 'react'; |
||||||
|
|
||||||
|
import { defineMessages, useIntl } from 'react-intl'; |
||||||
|
|
||||||
|
import { bannerSettings } from 'flavours/glitch/settings'; |
||||||
|
|
||||||
|
import { IconButton } from './icon_button'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' }, |
||||||
|
}); |
||||||
|
|
||||||
|
interface Props { |
||||||
|
id: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({ |
||||||
|
id, |
||||||
|
children, |
||||||
|
}) => { |
||||||
|
const [visible, setVisible] = useState(!bannerSettings.get(id)); |
||||||
|
const intl = useIntl(); |
||||||
|
|
||||||
|
const handleDismiss = useCallback(() => { |
||||||
|
setVisible(false); |
||||||
|
bannerSettings.set(id, true); |
||||||
|
}, [id]); |
||||||
|
|
||||||
|
if (!visible) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='dismissable-banner'> |
||||||
|
<div className='dismissable-banner__message'>{children}</div> |
||||||
|
|
||||||
|
<div className='dismissable-banner__action'> |
||||||
|
<IconButton |
||||||
|
icon='times' |
||||||
|
title={intl.formatMessage(messages.dismiss)} |
||||||
|
onClick={handleDismiss} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
Loading…
Reference in new issue