Rewrite Icon and IconWithBadge with typescript (#24747)
This commit is contained in:
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} />
|
||||
);
|
||||
}
|
||||
|
||||
}
|
14
app/javascript/mastodon/components/icon.tsx
Normal file
14
app/javascript/mastodon/components/icon.tsx
Normal file
@ -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;
|
20
app/javascript/mastodon/components/icon_with_badge.tsx
Normal file
20
app/javascript/mastodon/components/icon_with_badge.tsx
Normal file
@ -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
Block a user