~cytrogen/masto-fe

6746e5d4309fa8022e8a84674b85251543a31317 — たいち ひ 2 years ago 892b3c1
[Glitch] Rewrite `<Skeleton/>` as FC and TS

Port 8066118d1f558ed9c53d1c775a78553c6167161b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
M app/javascript/flavours/glitch/components/account.jsx => app/javascript/flavours/glitch/components/account.jsx +1 -1
@@ 9,7 9,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from 'flavours/glitch/initial_state';
import { RelativeTimestamp } from './relative_timestamp';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';

const messages = defineMessages({
  follow: { id: 'account.follow', defaultMessage: 'Follow' },

M app/javascript/flavours/glitch/components/admin/Counter.jsx => app/javascript/flavours/glitch/components/admin/Counter.jsx +1 -1
@@ 4,7 4,7 @@ import api from 'flavours/glitch/api';
import { FormattedNumber } from 'react-intl';
import { Sparklines, SparklinesCurve } from 'react-sparklines';
import classNames from 'classnames';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';

const percIncrease = (a, b) => {
  let percent;

M app/javascript/flavours/glitch/components/admin/Dimension.jsx => app/javascript/flavours/glitch/components/admin/Dimension.jsx +1 -1
@@ 3,7 3,7 @@ import PropTypes from 'prop-types';
import api from 'flavours/glitch/api';
import { FormattedNumber } from 'react-intl';
import { roundTo10 } from 'flavours/glitch/utils/numbers';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';

export default class Dimension extends React.PureComponent {


M app/javascript/flavours/glitch/components/display_name.tsx => app/javascript/flavours/glitch/components/display_name.tsx +1 -1
@@ 8,7 8,7 @@ import type { Account } from 'flavours/glitch/types/resources';

import { autoPlayGif } from '../initial_state';

import Skeleton from './skeleton';
import { Skeleton } from './skeleton';

interface Props {
  account: Account;

M app/javascript/flavours/glitch/components/hashtag.jsx => app/javascript/flavours/glitch/components/hashtag.jsx +1 -1
@@ 6,7 6,7 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from './permalink';
import ShortNumber from 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import classNames from 'classnames';

class SilentErrorBoundary extends React.Component {

M app/javascript/flavours/glitch/components/server_banner.jsx => app/javascript/flavours/glitch/components/server_banner.jsx +1 -1
@@ 4,7 4,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { fetchServer } from 'flavours/glitch/actions/server';
import ShortNumber from 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import Account from 'flavours/glitch/containers/account_container';
import { domain } from 'flavours/glitch/initial_state';
import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';

D app/javascript/flavours/glitch/components/skeleton.jsx => app/javascript/flavours/glitch/components/skeleton.jsx +0 -11
@@ 1,11 0,0 @@
import React from 'react';
import PropTypes from 'prop-types';

const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>&zwnj;</span>;

Skeleton.propTypes = {
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

export default Skeleton;

A app/javascript/flavours/glitch/components/skeleton.tsx => app/javascript/flavours/glitch/components/skeleton.tsx +12 -0
@@ 0,0 1,12 @@
import React from 'react';

interface Props {
  width?: number | string;
  height?: number | string;
}

export const Skeleton: React.FC<Props> = ({ width, height }) => (
  <span className='skeleton' style={{ width, height }}>
    &zwnj;
  </span>
);

M app/javascript/flavours/glitch/features/about/index.jsx => app/javascript/flavours/glitch/features/about/index.jsx +1 -1
@@ 8,7 8,7 @@ import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
import { Helmet } from 'react-helmet';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
import Account from 'flavours/glitch/containers/account_container';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import { Icon } from 'flavours/glitch/components/icon';
import classNames from 'classnames';
import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';

M app/javascript/flavours/glitch/features/explore/components/story.jsx => app/javascript/flavours/glitch/features/explore/components/story.jsx +1 -1
@@ 3,7 3,7 @@ import PropTypes from 'prop-types';
import { Blurhash } from 'flavours/glitch/components/blurhash';
import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
import ShortNumber from 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import classNames from 'classnames';

export default class Story extends React.PureComponent {

M app/javascript/flavours/glitch/features/privacy_policy/index.jsx => app/javascript/flavours/glitch/features/privacy_policy/index.jsx +1 -1
@@ 4,7 4,7 @@ import { Helmet } from 'react-helmet';
import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
import Column from 'flavours/glitch/components/column';
import api from 'flavours/glitch/api';
import Skeleton from 'flavours/glitch/components/skeleton';
import { Skeleton } from 'flavours/glitch/components/skeleton';

const messages = defineMessages({
  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },