moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pass iconset into IconButton, IconWithCounter

This commit is contained in:
Alex Gleason 2021-09-12 19:45:17 -05:00
parent 7de9fbcda8
commit d6201905c8
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/icon_button.js
View File

@ -12,6 +12,7 @@ export default class IconButton extends React.PureComponent {
className: PropTypes.string, className: PropTypes.string,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
iconset: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
onMouseDown: PropTypes.func, onMouseDown: PropTypes.func,
onKeyUp: PropTypes.func, onKeyUp: PropTypes.func,
@ -97,6 +98,7 @@ export default class IconButton extends React.PureComponent {
disabled, disabled,
expanded, expanded,
icon, icon,
iconset,
inverted, inverted,
overlay, overlay,
pressed, pressed,
@ -136,7 +138,7 @@ export default class IconButton extends React.PureComponent {
<div style={style}> <div style={style}>
{emoji {emoji
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' /> ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
: <Icon id={icon} fixedWidth aria-hidden='true' />} : <Icon id={icon} iconset={iconset} fixedWidth aria-hidden='true' />}
</div> </div>
{text && <span className='icon_button__text'>{text}</span>} {text && <span className='icon_button__text'>{text}</span>}
</button> </button>
@ -165,7 +167,7 @@ export default class IconButton extends React.PureComponent {
<div style={style}> <div style={style}>
{emoji {emoji
? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' /> ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
: <Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />} : <Icon id={icon} iconset={iconset} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
</div> </div>
{text && <span className='icon_button__text'>{text}</span>} {text && <span className='icon_button__text'>{text}</span>}
</button> </button>

5
app/soapbox/components/icon_with_counter.js
View File

@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import { shortNumberFormat } from 'soapbox/utils/numbers';
const IconWithCounter = ({ icon, count, fixedWidth }) => { const IconWithCounter = ({ icon, count, ...rest }) => {
return ( return (
<div className='icon-with-counter'> <div className='icon-with-counter'>
<Icon id={icon} fixedWidth={fixedWidth} /> <Icon id={icon} {...rest} />
{count > 0 && <i className='icon-with-counter__counter'> {count > 0 && <i className='icon-with-counter__counter'>
{shortNumberFormat(count)} {shortNumberFormat(count)}
</i>} </i>}
@ -17,7 +17,6 @@ const IconWithCounter = ({ icon, count, fixedWidth }) => {
IconWithCounter.propTypes = { IconWithCounter.propTypes = {
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
count: PropTypes.number.isRequired, count: PropTypes.number.isRequired,
fixedWidth: PropTypes.bool,
}; };
export default IconWithCounter; export default IconWithCounter;