Merge commit 'bc75e62ca6' into kb_migration

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap

@@ -3,6 +3,8 @@
 exports[`<AvatarOverlay renders a overlay avatar 1`] = `
 <div
   className="account__avatar-overlay"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   style={
     {
       "height": 46,
@@ -15,8 +17,6 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
   >
     <div
       className="account__avatar"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       style={
         {
           "height": "36px",
@@ -35,8 +35,6 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
   >
     <div
       className="account__avatar"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       style={
         {
           "height": "24px",

app/javascript/mastodon/components/animated_number.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ShortNumber from 'mastodon/components/short_number';
-import TransitionMotion from 'react-motion/lib/TransitionMotion';
-import spring from 'react-motion/lib/spring';
-import { reduceMotion } from 'mastodon/initial_state';
-
-const obfuscatedCount = count => {
-  if (count < 0) {
-    return 0;
-  } else if (count <= 1) {
-    return count;
-  } else {
-    return '1+';
-  }
-};
-
-export default class AnimatedNumber extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.number.isRequired,
-    obfuscate: PropTypes.bool,
-  };
-
-  state = {
-    direction: 1,
-  };
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.value > this.props.value) {
-      this.setState({ direction: 1 });
-    } else if (nextProps.value < this.props.value) {
-      this.setState({ direction: -1 });
-    }
-  }
-
-  willEnter = () => {
-    const { direction } = this.state;
-
-    return { y: -1 * direction };
-  };
-
-  willLeave = () => {
-    const { direction } = this.state;
-
-    return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) };
-  };
-
-  render () {
-    const { value, obfuscate } = this.props;
-    const { direction } = this.state;
-
-    if (reduceMotion) {
-      return obfuscate ? obfuscatedCount(value) : <ShortNumber value={value} />;
-    }
-
-    const styles = [{
-      key: `${value}`,
-      data: value,
-      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-    }];
-
-    return (
-      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
-        {items => (
-          <span className='animated-number'>
-            {items.map(({ key, data, style }) => (
-              <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
-            ))}
-          </span>
-        )}
-      </TransitionMotion>
-    );
-  }
-
-}

app/javascript/mastodon/components/animated_number.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback, useState } from 'react';
+import ShortNumber from './short_number';
+import { TransitionMotion, spring } from 'react-motion';
+import { reduceMotion } from '../initial_state';
+
+const obfuscatedCount = (count: number) => {
+  if (count < 0) {
+    return 0;
+  } else if (count <= 1) {
+    return count;
+  } else {
+    return '1+';
+  }
+};
+
+type Props = {
+  value: number;
+  obfuscate?: boolean;
+}
+export const AnimatedNumber: React.FC<Props> = ({
+  value,
+  obfuscate,
+})=> {
+  const [previousValue, setPreviousValue] = useState(value);
+  const [direction, setDirection] = useState<1|-1>(1);
+
+  if (previousValue !== value) {
+    setPreviousValue(value);
+    setDirection(value > previousValue ? 1 : -1);
+  }
+
+  const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
+  const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]);
+
+  if (reduceMotion) {
+    return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />;
+  }
+
+  const styles = [{
+    key: `${value}`,
+    data: value,
+    style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+  }];
+
+  return (
+    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
+      {items => (
+        <span className='animated-number'>
+          {items.map(({ key, data, style }) => (
+            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
+          ))}
+        </span>
+      )}
+    </TransitionMotion>
+  );
+};
+
+export default AnimatedNumber;

app/javascript/mastodon/components/avatar_overlay.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from '../initial_state';
-import Avatar from './avatar';
-
-export default class AvatarOverlay extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    friend: ImmutablePropTypes.map.isRequired,
-    animate: PropTypes.bool,
-    size: PropTypes.number,
-    baseSize: PropTypes.number,
-    overlaySize: PropTypes.number,
-  };
-
-  static defaultProps = {
-    animate: autoPlayGif,
-    size: 46,
-    baseSize: 36,
-    overlaySize: 24,
-  };
-
-  state = {
-    hovering: false,
-  };
-
-  handleMouseEnter = () => {
-    if (this.props.animate) return;
-    this.setState({ hovering: true });
-  };
-
-  handleMouseLeave = () => {
-    if (this.props.animate) return;
-    this.setState({ hovering: false });
-  };
-
-  render() {
-    const { account, friend, animate, size, baseSize, overlaySize } = this.props;
-    const { hovering } = this.state;
-
-    return (
-      <div className='account__avatar-overlay' style={{ width: size, height: size }}>
-        <div className='account__avatar-overlay-base'><Avatar animate={hovering || animate} account={account} size={baseSize} /></div>
-        <div className='account__avatar-overlay-overlay'><Avatar animate={hovering || animate} account={friend} size={overlaySize} /></div>
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { Account } from '../../types/resources';
+import { useHovering } from '../../hooks/useHovering';
+import { autoPlayGif } from '../initial_state';
+
+type Props = {
+  account: Account;
+  friend: Account;
+  size?: number;
+  baseSize?: number;
+  overlaySize?: number;
+};
+
+export const AvatarOverlay: React.FC<Props> = ({
+  account,
+  friend,
+  size = 46,
+  baseSize = 36,
+  overlaySize = 24,
+}) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
+  const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static');
+  const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static');
+
+  return (
+    <div
+      className='account__avatar-overlay' style={{ width: size, height: size }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='account__avatar-overlay-base'>
+        <div
+          className='account__avatar'
+          style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
+        >
+          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+        </div>
+      </div>
+      <div className='account__avatar-overlay-overlay'>
+        <div
+          className='account__avatar'
+          style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
+        >
+          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AvatarOverlay;

app/javascript/mastodon/features/ui/components/filter_modal.jsx

@@ -131,4 +131,4 @@ class FilterModal extends ImmutablePureComponent {
 
 }
 
-export default connect(injectIntl(FilterModal));
+export default connect()(injectIntl(FilterModal));