ReplyIndicator: convert to TSX

app/soapbox/components/ui/text/text.tsx

@@ -9,6 +9,7 @@ type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'
 type Families = 'sans' | 'mono'
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
+type Directions = 'ltr' | 'rtl'
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
@@ -64,6 +65,8 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   align?: Alignments,
   /** Extra class names for the outer element. */
   className?: string,
+  /** Text direction. */
+  direction?: Directions,
   /** Typeface of the text. */
   family?: Families,
   /** The "for" attribute specifies which form element a label is bound to. */
@@ -90,6 +93,7 @@ const Text: React.FC<IText> = React.forwardRef(
     const {
       align,
       className,
+      direction,
       family = 'sans',
       size = 'md',
       tag = 'p',
@@ -109,7 +113,10 @@ const Text: React.FC<IText> = React.forwardRef(
       <Comp
         {...filteredProps}
         ref={ref}
-        style={tag === 'abbr' ? { textDecoration: 'underline dotted' } : undefined}
+        style={{
+          textDecoration: tag === 'abbr' ? 'underline dotted' : undefined,
+          direction,
+        }}
         className={classNames({
           'cursor-default': tag === 'abbr',
           truncate: truncate,

app/soapbox/features/compose/components/reply_indicator.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-
-import { isRtl } from '../../../rtl';
-
-export default class ReplyIndicator extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record,
-    onCancel: PropTypes.func.isRequired,
-    hideActions: PropTypes.bool,
-  };
-
-  handleClick = () => {
-    this.props.onCancel();
-  }
-
-  render() {
-    const { status, hideActions } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const style = {
-      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
-    };
-
-    let actions = {};
-    if (!hideActions) {
-      actions = {
-        onActionClick: this.handleClick,
-        actionIcon: require('@tabler/icons/icons/x.svg'),
-        actionAlignment: 'top',
-        actionTitle: 'Dismiss',
-      };
-    }
-
-    return (
-      <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
-        <AccountContainer
-          {...actions}
-          id={status.getIn(['account', 'id'])}
-          timestamp={status.get('created_at')}
-          showProfileHoverCard={false}
-        />
-
-        <Text
-          size='sm'
-          dangerouslySetInnerHTML={{ __html: status.get('contentHtml') }}
-          style={style}
-        />
-
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentThumbs
-            media={status.get('media_attachments')}
-            sensitive={status.get('sensitive')}
-          />
-        )}
-      </Stack>
-    );
-  }
-
-}

app/soapbox/features/compose/components/reply_indicator.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import { Stack, Text } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+
+import { isRtl } from '../../../rtl';
+
+import type { Status } from 'soapbox/types/entities';
+
+interface IReplyIndicator {
+  status?: Status,
+  onCancel: () => void,
+  hideActions: boolean,
+}
+
+const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
+  const handleClick = () => {
+    onCancel();
+  };
+
+
+  if (!status) {
+    return null;
+  }
+
+  let actions = {};
+  if (!hideActions) {
+    actions = {
+      onActionClick: handleClick,
+      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionAlignment: 'top',
+      actionTitle: 'Dismiss',
+    };
+  }
+
+  return (
+    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+      <AccountContainer
+        {...actions}
+        id={status.getIn(['account', 'id']) as string}
+        timestamp={status.created_at}
+        showProfileHoverCard={false}
+      />
+
+      <Text
+        size='sm'
+        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}
+      />
+
+      {status.media_attachments.size > 0 && (
+        <AttachmentThumbs
+          media={status.media_attachments}
+          sensitive={status.sensitive}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default ReplyIndicator;