From e750cdbf027a36574f43196e4df8c21f42b10709 Mon Sep 17 00:00:00 2001 From: Himanshu Mishra Date: Wed, 22 Apr 2020 00:36:52 +0900 Subject: [PATCH 1/3] Port CopyTextButton to TypeScript --- ...Button.test.js => CopyTextButton.test.tsx} | 0 .../{CopyTextButton.js => CopyTextButton.tsx} | 36 +++++++++++-------- .../CopyTextButton/{index.ts => index.tsx} | 0 3 files changed, 21 insertions(+), 15 deletions(-) rename packages/core/src/components/CopyTextButton/{CopyTextButton.test.js => CopyTextButton.test.tsx} (100%) rename packages/core/src/components/CopyTextButton/{CopyTextButton.js => CopyTextButton.tsx} (81%) rename packages/core/src/components/CopyTextButton/{index.ts => index.tsx} (100%) diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.js b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx similarity index 100% rename from packages/core/src/components/CopyTextButton/CopyTextButton.test.js rename to packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.js b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx similarity index 81% rename from packages/core/src/components/CopyTextButton/CopyTextButton.js rename to packages/core/src/components/CopyTextButton/CopyTextButton.tsx index 2df978ab2d..719a872361 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.js +++ b/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(theme => ({ button: { '&:hover': { backgroundColor: theme.palette.highlight, @@ -44,12 +44,24 @@ const useStyles = makeStyles(theme => ({ * Example: * */ -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 => { + + 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; diff --git a/packages/core/src/components/CopyTextButton/index.ts b/packages/core/src/components/CopyTextButton/index.tsx similarity index 100% rename from packages/core/src/components/CopyTextButton/index.ts rename to packages/core/src/components/CopyTextButton/index.tsx From d454803525c9ba439293158dc5e4b6644c70113c Mon Sep 17 00:00:00 2001 From: Himanshu Mishra Date: Wed, 22 Apr 2020 02:35:54 +0900 Subject: [PATCH 2/3] Use HTMLInputElement when calling useRef Run prettier on the file --- .../CopyTextButton/CopyTextButton.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx index 719a872361..c88ab7221e 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import React, { useState, useRef, FC } from 'react'; -import { IconButton, Tooltip, makeStyles } from '@material-ui/core'; +import React, { FC, useRef, useState } from 'react'; +import { IconButton, makeStyles, Tooltip } from '@material-ui/core'; import CopyIcon from '@material-ui/icons/FileCopy'; import { BackstageTheme } from '@backstage/theme'; import { errorApiRef, useApi } from 'api'; @@ -53,17 +53,16 @@ type Props = { const defaultProps = { tooltipDelay: 1000, tooltipText: 'Text copied to clipboard', -} +}; const CopyTextButton: FC = props => { - const { text, tooltipDelay, tooltipText } = { ...defaultProps, - ...props + ...props, }; const classes = useStyles(props); const errorApi = useApi(errorApiRef); - const inputRef = useRef(); + const inputRef = useRef(null); const [open, setOpen] = useState(false); const handleCopyClick = e => { @@ -71,8 +70,10 @@ const CopyTextButton: FC = props => { setOpen(true); try { - inputRef.current.select(); - document.execCommand('copy'); + if (inputRef.current) { + inputRef.current.select(); + document.execCommand('copy'); + } } catch (error) { errorApi.post(error); } From 219f058f029ea1c0c560e064e2904f9a3bd23925 Mon Sep 17 00:00:00 2001 From: Himanshu Mishra Date: Wed, 22 Apr 2020 03:17:33 +0900 Subject: [PATCH 3/3] Add type check to core component since they will be used in JS --- .../core/src/components/CopyTextButton/CopyTextButton.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx index c88ab7221e..86c3778d26 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx @@ -16,6 +16,7 @@ import React, { FC, useRef, useState } from 'react'; import { IconButton, makeStyles, Tooltip } from '@material-ui/core'; +import PropTypes from 'prop-types'; import CopyIcon from '@material-ui/icons/FileCopy'; import { BackstageTheme } from '@backstage/theme'; import { errorApiRef, useApi } from 'api'; @@ -103,4 +104,11 @@ const CopyTextButton: FC = props => { ); }; +// Type check for the JS files using this core component +CopyTextButton.propTypes = { + text: PropTypes.string.isRequired, + tooltipDelay: PropTypes.number, + tooltipText: PropTypes.string, +}; + export default CopyTextButton;