diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-05-23 01:35:22 +0200 |
---|---|---|
committer | multiple creatures <dev@multiple-creature.party> | 2020-02-22 01:20:15 -0600 |
commit | 687fa7b9edd6a8b46eb6f12d7db8abde76e1eaf2 (patch) | |
tree | 1425400adff34864d76984e7722eb88fa285c9bf /app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js | |
parent | e67f7b213055f996de7ab8c80ec19ee4a6dc3b51 (diff) |
port glitch-soc@`610b4b4` to monsterfork: [Glitch] Add single-column mode
Port 9ddeb30f90f9402eb567c88354d4956fcfdf0361 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js new file mode 100644 index 000000000..137658b94 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import Icon from 'flavours/glitch/components/icon'; + +const mapStateToProps = state => ({ + count: state.getIn(['notifications', 'unread']), + showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), +}); + +const formatNumber = num => num > 99 ? '99+' : num; + +const NotificationsCounterIcon = ({ count, showBadge }) => ( + <i className='icon-with-badge'> + <Icon icon='bell' fixedWidth /> + {showBadge && count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} + </i> +); + +NotificationsCounterIcon.propTypes = { + count: PropTypes.number.isRequired, +}; + +export default connect(mapStateToProps)(NotificationsCounterIcon); |