diff --git a/app/javascript/flavours/glitch/blurhash.ts b/app/javascript/flavours/glitch/blurhash.ts index cb1c3b2c82..dadf2b7f2c 100644 --- a/app/javascript/flavours/glitch/blurhash.ts +++ b/app/javascript/flavours/glitch/blurhash.ts @@ -98,9 +98,9 @@ export const decode83 = (str: string) => { }; export const intToRGB = (int: number) => ({ - r: Math.max(0, (int >> 16)), + r: Math.max(0, int >> 16), g: Math.max(0, (int >> 8) & 255), - b: Math.max(0, (int & 255)), + b: Math.max(0, int & 255), }); export const getAverageFromBlurhash = (blurhash: string) => { diff --git a/app/javascript/flavours/glitch/compare_id.ts b/app/javascript/flavours/glitch/compare_id.ts index 3ddfb76351..30b0572481 100644 --- a/app/javascript/flavours/glitch/compare_id.ts +++ b/app/javascript/flavours/glitch/compare_id.ts @@ -1,4 +1,4 @@ -export function compareId (id1: string, id2: string) { +export function compareId(id1: string, id2: string) { if (id1 === id2) { return 0; } diff --git a/app/javascript/flavours/glitch/components/animated_number.tsx b/app/javascript/flavours/glitch/components/animated_number.tsx index 20ffa1a4d0..f6c77d35ff 100644 --- a/app/javascript/flavours/glitch/components/animated_number.tsx +++ b/app/javascript/flavours/glitch/components/animated_number.tsx @@ -16,13 +16,10 @@ const obfuscatedCount = (count: number) => { type Props = { value: number; obfuscate?: boolean; -} -export const AnimatedNumber: React.FC = ({ - value, - obfuscate, -})=> { +}; +export const AnimatedNumber: React.FC = ({ value, obfuscate }) => { const [previousValue, setPreviousValue] = useState(value); - const [direction, setDirection] = useState<1|-1>(1); + const [direction, setDirection] = useState<1 | -1>(1); if (previousValue !== value) { setPreviousValue(value); @@ -30,24 +27,45 @@ export const AnimatedNumber: React.FC = ({ } const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); - const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]); + const willLeave = useCallback( + () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), + [direction] + ); if (reduceMotion) { - return obfuscate ? <>{obfuscatedCount(value)} : ; + return obfuscate ? ( + <>{obfuscatedCount(value)} + ) : ( + + ); } - const styles = [{ - key: `${value}`, - data: value, - style: { y: spring(0, { damping: 35, stiffness: 400 }) }, - }]; + const styles = [ + { + key: `${value}`, + data: value, + style: { y: spring(0, { damping: 35, stiffness: 400 }) }, + }, + ]; return ( - - {items => ( + + {(items) => ( {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } + 0 ? 'absolute' : 'static', + transform: `translateY(${style.y * 100}%)`, + }} + > + {obfuscate ? obfuscatedCount(data) : } + ))} )} diff --git a/app/javascript/flavours/glitch/components/avatar.tsx b/app/javascript/flavours/glitch/components/avatar.tsx index c2f44706c9..1bd7739f5f 100644 --- a/app/javascript/flavours/glitch/components/avatar.tsx +++ b/app/javascript/flavours/glitch/components/avatar.tsx @@ -10,7 +10,7 @@ type Props = { size: number; style?: React.CSSProperties; inline?: boolean; -} +}; export const Avatar: React.FC = ({ account, @@ -19,7 +19,8 @@ export const Avatar: React.FC = ({ inline = false, style: styleFromParent, }) => { - const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif); + const { hovering, handleMouseEnter, handleMouseLeave } = + useHovering(autoPlayGif); const style = { ...styleFromParent, @@ -29,12 +30,18 @@ export const Avatar: React.FC = ({ }; if (account) { - style.backgroundImage = `url(${account.get(hovering ? 'avatar' : 'avatar_static')})`; + style.backgroundImage = `url(${account.get( + hovering ? 'avatar' : 'avatar_static' + )})`; } return (
= ({ hash, width = 32, diff --git a/app/javascript/flavours/glitch/components/gifv.tsx b/app/javascript/flavours/glitch/components/gifv.tsx index 5d9f235e11..72914ba741 100644 --- a/app/javascript/flavours/glitch/components/gifv.tsx +++ b/app/javascript/flavours/glitch/components/gifv.tsx @@ -8,7 +8,7 @@ type Props = { width: number; height: number; onClick?: () => void; -} +}; export const GIFV: React.FC = ({ src, @@ -17,19 +17,23 @@ export const GIFV: React.FC = ({ width, height, onClick, -})=> { +}) => { const [loading, setLoading] = useState(true); - const handleLoadedData: React.ReactEventHandler = useCallback(() => { - setLoading(false); - }, [setLoading]); + const handleLoadedData: React.ReactEventHandler = + useCallback(() => { + setLoading(false); + }, [setLoading]); - const handleClick: React.MouseEventHandler = useCallback((e) => { - if (onClick) { - e.stopPropagation(); - onClick(); - } - }, [onClick]); + const handleClick: React.MouseEventHandler = useCallback( + (e) => { + if (onClick) { + e.stopPropagation(); + onClick(); + } + }, + [onClick] + ); return (
diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx index f74437b555..4eb948dc76 100644 --- a/app/javascript/flavours/glitch/components/icon.tsx +++ b/app/javascript/flavours/glitch/components/icon.tsx @@ -7,6 +7,15 @@ type Props = { fixedWidth?: boolean; children?: never; [key: string]: any; -} -export const Icon: React.FC = ({ id, className, fixedWidth, ...other }) => - ; +}; +export const Icon: React.FC = ({ + id, + className, + fixedWidth, + ...other +}) => ( + +); diff --git a/app/javascript/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx index d3d0609718..80b20ae1b0 100644 --- a/app/javascript/flavours/glitch/components/icon_button.tsx +++ b/app/javascript/flavours/glitch/components/icon_button.tsx @@ -26,13 +26,12 @@ type Props = { obfuscateCount?: boolean; href?: string; ariaHidden: boolean; -} +}; type States = { - activate: boolean, - deactivate: boolean, -} + activate: boolean; + deactivate: boolean; +}; export class IconButton extends React.PureComponent { - static defaultProps = { size: 18, active: false, @@ -48,7 +47,7 @@ export class IconButton extends React.PureComponent { deactivate: false, }; - UNSAFE_componentWillReceiveProps (nextProps: Props) { + UNSAFE_componentWillReceiveProps(nextProps: Props) { if (!nextProps.animate) return; if (this.props.active && !nextProps.active) { @@ -58,7 +57,7 @@ export class IconButton extends React.PureComponent { } } - handleClick: React.MouseEventHandler = (e) => { + handleClick: React.MouseEventHandler = (e) => { e.preventDefault(); if (!this.props.disabled && this.props.onClick != null) { @@ -84,7 +83,7 @@ export class IconButton extends React.PureComponent { } }; - render () { + render() { // Hack required for some icons which have an overriden size let containerSize = '1.28571429em'; if (this.props.style?.fontSize) { @@ -120,10 +119,7 @@ export class IconButton extends React.PureComponent { ariaHidden, } = this.props; - const { - activate, - deactivate, - } = this.state; + const { activate, deactivate } = this.state; const classes = classNames(className, 'icon-button', { active, @@ -141,7 +137,12 @@ export class IconButton extends React.PureComponent { let contents = ( - ); @@ -174,5 +175,4 @@ export class IconButton extends React.PureComponent { ); } - } diff --git a/app/javascript/flavours/glitch/components/icon_with_badge.tsx b/app/javascript/flavours/glitch/components/icon_with_badge.tsx index a4af86ca9b..bf86814c03 100644 --- a/app/javascript/flavours/glitch/components/icon_with_badge.tsx +++ b/app/javascript/flavours/glitch/components/icon_with_badge.tsx @@ -1,18 +1,25 @@ import React from 'react'; import { Icon } from './icon'; -const formatNumber = (num: number): number | string => num > 40 ? '40+' : num; +const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num); type Props = { id: string; count: number; issueBadge: boolean; className: string; -} -export const IconWithBadge: React.FC = ({ id, count, issueBadge, className }) => ( +}; +export const IconWithBadge: React.FC = ({ + id, + count, + issueBadge, + className, +}) => ( - {count > 0 && {formatNumber(count)}} + {count > 0 && ( + {formatNumber(count)} + )} {issueBadge && } ); diff --git a/app/javascript/flavours/glitch/components/image.tsx b/app/javascript/flavours/glitch/components/image.tsx index b332d4115b..490543424a 100644 --- a/app/javascript/flavours/glitch/components/image.tsx +++ b/app/javascript/flavours/glitch/components/image.tsx @@ -7,9 +7,14 @@ type Props = { srcSet?: string; blurhash?: string; className?: string; -} +}; -export const Image: React.FC = ({ src, srcSet, blurhash, className }) => { +export const Image: React.FC = ({ + src, + srcSet, + blurhash, + className, +}) => { const [loaded, setLoaded] = useState(false); const handleLoad = useCallback(() => { @@ -17,7 +22,10 @@ export const Image: React.FC = ({ src, srcSet, blurhash, className }) => }, [setLoaded]); return ( -
+
{blurhash && }
diff --git a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx index 3bfee6ae91..53945d6a7a 100644 --- a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx +++ b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx @@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl'; export const NotSignedInIndicator: React.FC = () => (
- +
); diff --git a/app/javascript/flavours/glitch/components/radio_button.tsx b/app/javascript/flavours/glitch/components/radio_button.tsx index 194b67afe1..829f471747 100644 --- a/app/javascript/flavours/glitch/components/radio_button.tsx +++ b/app/javascript/flavours/glitch/components/radio_button.tsx @@ -9,7 +9,13 @@ type Props = { label: React.ReactNode; }; -export const RadioButton: React.FC = ({ name, value, checked, onChange, label }) => { +export const RadioButton: React.FC = ({ + name, + value, + checked, + onChange, + label, +}) => { return (