From 63c5fdf5da073fdeeff245839fb63db1955df9f3 Mon Sep 17 00:00:00 2001 From: "M. L. Giannotta" Date: Thu, 8 Jun 2023 15:06:17 +0300 Subject: [PATCH 1/3] Convert `ClipboardButton` to TypeScript --- .../clipboard-button/{index.js => index.tsx} | 28 ++++++++----------- .../components/src/clipboard-button/types.ts | 11 ++++++++ 2 files changed, 22 insertions(+), 17 deletions(-) rename packages/components/src/clipboard-button/{index.js => index.tsx} (63%) create mode 100644 packages/components/src/clipboard-button/types.ts diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.tsx similarity index 63% rename from packages/components/src/clipboard-button/index.js rename to packages/components/src/clipboard-button/index.tsx index 9cce2dbefa9a79..ded4e9ad45d1a6 100644 --- a/packages/components/src/clipboard-button/index.js +++ b/packages/components/src/clipboard-button/index.tsx @@ -14,17 +14,11 @@ 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, @@ -32,18 +26,18 @@ export default function ClipboardButton( { onFinishCopy, text, ...buttonProps -} ) { +}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) { deprecated( 'wp.components.ClipboardButton', { since: '5.8', alternative: 'wp.compose.useCopyToClipboard', } ); - /** @type {import('react').MutableRefObject | 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 ); @@ -51,8 +45,9 @@ export default function ClipboardButton( { } ); 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} */ - 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 new file mode 100644 index 00000000000000..7987230598fbbb --- /dev/null +++ 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; +} From b2e601db2203e440f55f24051bb20811b8080ae0 Mon Sep 17 00:00:00 2001 From: "M. L. Giannotta" Date: Thu, 8 Jun 2023 16:33:13 +0300 Subject: [PATCH 2/3] Add changelog entry --- packages/components/CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 87396d36138cd8..d598f801316f8b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,9 +22,13 @@ ### 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)). +### Internal + +- `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)). + ## 25.0.0 (2023-05-24) ### Breaking Changes From c48829b3b373706d79c8bbb2bf36ec222878370b Mon Sep 17 00:00:00 2001 From: Lucio Giannotta Date: Sun, 11 Jun 2023 18:07:54 +0300 Subject: [PATCH 3/3] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d598f801316f8b..dc7cd0c23d016d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)). + ## 25.1.0 (2023-06-07) ### Enhancements @@ -25,10 +29,6 @@ - `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)). -### Internal - -- `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)). - ## 25.0.0 (2023-05-24) ### Breaking Changes