mirror of https://github.com/tootsuite/mastodon
Rewrite Icon and IconWithBadge with typescript (#24747)
parent
c53fe9b753
commit
81f75b1e0e
|
@ -1,21 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
export default class Icon extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
id: PropTypes.string.isRequired,
|
|
||||||
className: PropTypes.string,
|
|
||||||
fixedWidth: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { id, className, fixedWidth, ...other } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
id: string;
|
||||||
|
className?: string;
|
||||||
|
fixedWidth?: boolean;
|
||||||
|
children?: never;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
|
||||||
|
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
|
||||||
|
|
||||||
|
export default Icon;
|
|
@ -1,22 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Icon from 'mastodon/components/icon';
|
|
||||||
|
|
||||||
const formatNumber = num => num > 40 ? '40+' : num;
|
|
||||||
|
|
||||||
const IconWithBadge = ({ id, count, issueBadge, className }) => (
|
|
||||||
<i className='icon-with-badge'>
|
|
||||||
<Icon id={id} fixedWidth className={className} />
|
|
||||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
|
|
||||||
{issueBadge && <i className='icon-with-badge__issue-badge' />}
|
|
||||||
</i>
|
|
||||||
);
|
|
||||||
|
|
||||||
IconWithBadge.propTypes = {
|
|
||||||
id: PropTypes.string.isRequired,
|
|
||||||
count: PropTypes.number.isRequired,
|
|
||||||
issueBadge: PropTypes.bool,
|
|
||||||
className: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IconWithBadge;
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Icon } from './icon';
|
||||||
|
|
||||||
|
const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
id: string;
|
||||||
|
count: number;
|
||||||
|
issueBadge: boolean;
|
||||||
|
className: string;
|
||||||
|
}
|
||||||
|
const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
|
||||||
|
<i className='icon-with-badge'>
|
||||||
|
<Icon id={id} fixedWidth className={className} />
|
||||||
|
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
|
||||||
|
{issueBadge && <i className='icon-with-badge__issue-badge' />}
|
||||||
|
</i>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default IconWithBadge;
|
Loading…
Reference in New Issue