Convert ClipboardButton to TypeScript (WordPress#51334)

* Convert `ClipboardButton` to TypeScript * Add changelog entry * Update CHANGELOG.md --------- Co-authored-by: Lena Morita <[email protected]>
pewresearch · Jul 13, 2023 · 0bc1a65 · 0bc1a65
1 parent ff8ddd9
commit 0bc1a65
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
 
+### Internal
+
+-   `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)).
+
 ## 25.1.0 (2023-06-07)
 
 ### Enhancements
@@ -27,7 +31,7 @@
 ### Experimental
 
 -   `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967), [#51097](https://github.com/WordPress/gutenberg/pull/51097)).
--   `DropdownMenu` v2: change default placement to match the legacy `DropdownMenu` component  ([#51133](https://github.com/WordPress/gutenberg/pull/51133)).
+-   `DropdownMenu` v2: change default placement to match the legacy `DropdownMenu` component ([#51133](https://github.com/WordPress/gutenberg/pull/51133)).
 -   `DropdownMenu` v2: Render in the default `Popover.Slot` ([#51046](https://github.com/WordPress/gutenberg/pull/51046)).
 
 ## 25.0.0 (2023-05-24)

diff --git a/.../components/src/clipboard-button/index.js → ...components/src/clipboard-button/index.tsx b/.../components/src/clipboard-button/index.js → ...components/src/clipboard-button/index.tsx
@@ -14,45 +14,40 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import type { ClipboardButtonProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const TIMEOUT = 4000;
 
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 export default function ClipboardButton( {
 	className,
 	children,
 	onCopy,
 	onFinishCopy,
 	text,
 	...buttonProps
-} ) {
+}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {
 	deprecated( 'wp.components.ClipboardButton', {
 		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timeoutId = useRef();
+	const timeoutId = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 
 		if ( onFinishCopy ) {
 			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
 		}
 	} );
 
 	useEffect( () => {
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 	}, [] );
 
 	const classes = classnames( 'components-clipboard-button', className );
@@ -62,8 +57,7 @@ export default function ClipboardButton( {
 	// This causes documentHasSelection() in the copy-handler component to
 	// mistakenly override the ClipboardButton, and copy a serialized string
 	// of the current block instead.
-	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-	const focusOnCopyEventTarget = ( event ) => {
+	const focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {
 		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
 		event.target.focus();
 	};

diff --git a/packages/components/src/clipboard-button/types.ts b/packages/components/src/clipboard-button/types.ts
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export interface ClipboardButtonProps {
+	children: ReactNode;
+	onCopy: () => void;
+	onFinishCopy?: () => void;
+	text: string;
+}