Warning: convert to TSX

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

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import spring from 'react-motion/lib/spring';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class Warning extends React.PureComponent {
-
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-  };
-
-  render() {
-    const { message } = this.props;
-
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
-            {message}
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { spring } from 'react-motion';
+
+import Motion from '../../ui/util/optional_motion';
+
+interface IWarning {
+  message: React.ReactNode,
+}
+
+/** Warning message displayed in ComposeForm. */
+const Warning: React.FC<IWarning> = ({ message }) => (
+  <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+    {({ opacity, scaleX, scaleY }) => (
+      <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+        {message}
+      </div>
+    )}
+  </Motion>
+);
+
+export default Warning;