diff options
author | Claire <claire.github-309c@sitedethib.com> | 2023-02-26 15:06:03 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-26 15:06:03 +0100 |
commit | 6a4be4e96677eb3e1303ddcab8f8b4bea7298453 (patch) | |
tree | 52627bf6dd64b0a33e280442b2de60b4e802a544 /app/javascript/flavours/glitch/features/notifications/components/overlay.jsx | |
parent | 45087c1092143e95dfcc85b6c9abc5c6c0a0a5c2 (diff) | |
parent | b91756fd4d475edff890e460c44b3a7245ad51e2 (diff) |
Merge pull request #2119 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/features/notifications/components/overlay.jsx')
-rw-r--r-- | app/javascript/flavours/glitch/features/notifications/components/overlay.jsx | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx new file mode 100644 index 000000000..21d3f8acf --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx @@ -0,0 +1,58 @@ +/** + * Notification overlay + */ + + +// Package imports. +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import Icon from 'flavours/glitch/components/icon'; + +const messages = defineMessages({ + markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' }, +}); + +export default @injectIntl +class NotificationOverlay extends ImmutablePureComponent { + + static propTypes = { + notification : ImmutablePropTypes.map.isRequired, + onMarkForDelete : PropTypes.func.isRequired, + show : PropTypes.bool.isRequired, + intl : PropTypes.object.isRequired, + }; + + onToggleMark = () => { + const mark = !this.props.notification.get('markedForDelete'); + const id = this.props.notification.get('id'); + this.props.onMarkForDelete(id, mark); + }; + + render () { + const { notification, show, intl } = this.props; + + const active = notification.get('markedForDelete'); + const label = intl.formatMessage(messages.markForDeletion); + + return show ? ( + <div + aria-label={label} + role='checkbox' + aria-checked={active} + tabIndex={0} + className={`notification__dismiss-overlay ${active ? 'active' : ''}`} + onClick={this.onToggleMark} + > + <div className='wrappy'> + <div className='ckbox' aria-hidden='true' title={label}> + {active ? (<Icon id='check' />) : ''} + </div> + </div> + </div> + ) : null; + } + +} |