withFallbackStyles: Convert to TypeScript (#48720)

* withFallbackStyles: Convert to TypeScript * Update changelog
WordPress · Mar 3, 2023 · 0016e83 · 0016e83 · github-actions · Mar 3, 2023
1 parent 45e038e
commit 0016e83
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Guide`: Convert to TypeScript ([#47493](https://github.com/WordPress/gutenberg/pull/47493)).
 -   `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)).
+-   `withFallbackStyles` HOC: Convert to TypeScript ([#48720](https://github.com/WordPress/gutenberg/pull/48720)).
 -   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
 
 ## 23.5.0 (2023-03-01)

diff --git a/...igher-order/with-fallback-styles/index.js → ...gher-order/with-fallback-styles/index.tsx b/...igher-order/with-fallback-styles/index.js → ...gher-order/with-fallback-styles/index.tsx
@@ -9,11 +9,28 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 import { Component } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
-export default ( mapNodeToProps ) =>
+type Props = {
+	node?: HTMLElement;
+	[ key: string ]: any;
+};
+
+type State = {
+	fallbackStyles?: { [ key: string ]: any };
+	grabStylesCompleted: boolean;
+};
+
+export default (
+	mapNodeToProps: (
+		node: HTMLElement,
+		props: Props
+	) => { [ key: string ]: any }
+) =>
 	createHigherOrderComponent( ( WrappedComponent ) => {
-		return class extends Component {
-			constructor() {
-				super( ...arguments );
+		return class extends Component< Props, State > {
+			nodeRef?: HTMLElement;
+
+			constructor( props: Props ) {
+				super( props );
 				this.nodeRef = this.props.node;
 				this.state = {
 					fallbackStyles: undefined,
@@ -23,7 +40,7 @@ export default ( mapNodeToProps ) =>
 				this.bindRef = this.bindRef.bind( this );
 			}
 
-			bindRef( node ) {
+			bindRef( node: HTMLDivElement ) {
 				if ( ! node ) {
 					return;
 				}

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -49,7 +49,6 @@
 		"src/dimension-control",
 		"src/duotone-picker",
 		"src/gradient-picker",
-		"src/higher-order/with-fallback-styles",
 		"src/higher-order/with-filters",
 		"src/higher-order/with-focus-return",
 		"src/higher-order/with-notices",