Port CopyTextButton to TypeScript

packages/core/src/components/CopyTextButton/CopyTextButton.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useRef, FC } from 'react';
 import { IconButton, Tooltip, makeStyles } from '@material-ui/core';
 import CopyIcon from '@material-ui/icons/FileCopy';
+import { BackstageTheme } from '@backstage/theme';
 import { errorApiRef, useApi } from 'api';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   button: {
     '&:hover': {
       backgroundColor: theme.palette.highlight,
@@ -44,12 +44,24 @@ const useStyles = makeStyles(theme => ({
  * Example:
  *    <CopyTextButton text="My text that I want to be copied to the clipboard" />
  */
-const CopyTextButton = ({
-  text,
-  tooltipDelay = 1000,
-  tooltipText = 'Text copied to clipboard',
-}) => {
-  const classes = useStyles();
+type Props = {
+  text: string;
+  tooltipDelay?: number;
+  tooltipText?: string;
+};
+
+const defaultProps = {
+  tooltipDelay: 1000,
+  tooltipText: 'Text copied to clipboard',
+}
+
+const CopyTextButton: FC<Props> = props => {
+
+  const { text, tooltipDelay, tooltipText } = {
+    ...defaultProps,
+    ...props
+  };
+  const classes = useStyles(props);
   const errorApi = useApi(errorApiRef);
   const inputRef = useRef();
   const [open, setOpen] = useState(false);
@@ -90,10 +102,4 @@ const CopyTextButton = ({
   );
 };
 
-CopyTextButton.propTypes = {
-  text: PropTypes.string.isRequired,
-  tooltipDelay: PropTypes.number,
-  tooltipText: PropTypes.string,
-};
-
 export default CopyTextButton;