~cytrogen/masto-fe

81f75b1e0ecaa3c7a13f75188497be8b0f716dea — fusagiko / takayamaki 2 years ago c53fe9b
Rewrite Icon and IconWithBadge with typescript (#24747)

4 files changed, 34 insertions(+), 43 deletions(-)

D app/javascript/mastodon/components/icon.jsx
A app/javascript/mastodon/components/icon.tsx
D app/javascript/mastodon/components/icon_with_badge.jsx
A app/javascript/mastodon/components/icon_with_badge.tsx
D app/javascript/mastodon/components/icon.jsx => app/javascript/mastodon/components/icon.jsx +0 -21
@@ 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} />
    );
  }

}

A app/javascript/mastodon/components/icon.tsx => app/javascript/mastodon/components/icon.tsx +14 -0
@@ 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;

D app/javascript/mastodon/components/icon_with_badge.jsx => app/javascript/mastodon/components/icon_with_badge.jsx +0 -22
@@ 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;

A app/javascript/mastodon/components/icon_with_badge.tsx => app/javascript/mastodon/components/icon_with_badge.tsx +20 -0
@@ 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;