feat(ts): convert search-box to TypeScript (#4710)

* feat(ts): convert search-box to TypeScript

* Apply suggestions from code review

Co-authored-by: Haroen Viaene <hello@haroen.me>

* fixup! feat(ts): convert search-box to TypeScript

* fixup! feat(ts): convert search-box to TypeScript

* fixup! feat(ts): convert search-box to TypeScript

Co-authored-by: Haroen Viaene <hello@haroen.me>

Author: Yannick Croissant

src/components/SearchBox/SearchBox.js src/components/SearchBox/SearchBox.tsx

@@ -1,75 +1,81 @@
 /** @jsx h */
 
-import { h, Component } from 'preact';
-import PropTypes from 'prop-types';
+import { h, createRef, Component } from 'preact';
 import { noop } from '../../lib/utils';
 import Template from '../Template/Template';
-
-const SearchBoxCSSClasses = PropTypes.shape({
-  root: PropTypes.string.isRequired,
-  form: PropTypes.string.isRequired,
-  input: PropTypes.string.isRequired,
-  submit: PropTypes.string.isRequired,
-  submitIcon: PropTypes.string.isRequired,
-  reset: PropTypes.string.isRequired,
-  resetIcon: PropTypes.string.isRequired,
-  loadingIndicator: PropTypes.string.isRequired,
-  loadingIcon: PropTypes.string.isRequired,
-});
-
-class SearchBox extends Component {
-  static propTypes = {
-    placeholder: PropTypes.string.isRequired,
-    cssClasses: SearchBoxCSSClasses.isRequired,
-    templates: PropTypes.object.isRequired,
-    query: PropTypes.string,
-    showSubmit: PropTypes.bool,
-    showReset: PropTypes.bool,
-    showLoadingIndicator: PropTypes.bool,
-    refine: PropTypes.func,
-    autofocus: PropTypes.bool,
-    searchAsYouType: PropTypes.bool,
-    isSearchStalled: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onSubmit: PropTypes.func,
-    onReset: PropTypes.func,
-  };
-
-  static defaultProps = {
-    query: '',
-    showSubmit: true,
-    showReset: true,
-    showLoadingIndicator: true,
-    autofocus: false,
-    searchAsYouType: true,
-    isSearchStalled: false,
-    disabled: false,
-    onChange: noop,
-    onSubmit: noop,
-    onReset: noop,
-    refine: noop,
-  };
-
-  state = {
+import {
+  SearchBoxRendererCSSClasses,
+  SearchBoxTemplates,
+} from '../../widgets/search-box/search-box';
+
+type SearchBoxProps = {
+  placeholder?: string;
+  cssClasses: SearchBoxRendererCSSClasses;
+  templates?: SearchBoxTemplates;
+  query?: string;
+  showSubmit?: boolean;
+  showReset?: boolean;
+  showLoadingIndicator?: boolean;
+  refine?: (value: string) => void;
+  autofocus?: boolean;
+  searchAsYouType?: boolean;
+  isSearchStalled?: boolean;
+  disabled?: boolean;
+  onChange?: (event: Event) => void;
+  onSubmit?: (event: Event) => void;
+  onReset?: (event: Event) => void;
+};
+
+const defaultProps = {
+  query: '',
+  showSubmit: true,
+  showReset: true,
+  showLoadingIndicator: true,
+  autofocus: false,
+  searchAsYouType: true,
+  isSearchStalled: false,
+  disabled: false,
+  onChange: noop,
+  onSubmit: noop,
+  onReset: noop,
+  refine: noop,
+};
+
+type SearchBoxPropsWithDefaultProps = SearchBoxProps &
+  Readonly<typeof defaultProps>;
+
+type SearchBoxState = {
+  query: string;
+  focused: boolean;
+};
+
+class SearchBox extends Component<
+  SearchBoxPropsWithDefaultProps,
+  SearchBoxState
+> {
+  public static defaultProps = defaultProps;
+
+  public state = {
     query: this.props.query,
     focused: false,
   };
 
+  private input = createRef<HTMLInputElement>();
+
   /**
    * This public method is used in the RefinementList SFFV search box
    * to reset the input state when an item is selected.
    *
    * @see RefinementList#componentWillReceiveProps
    * @return {undefined}
    */
-  resetInput() {
+  public resetInput() {
     this.setState({ query: '' });
   }
 
-  onInput = event => {
+  private onInput = (event: Event) => {
     const { searchAsYouType, refine, onChange } = this.props;
-    const query = event.target.value;
+    const query = (event.target as HTMLInputElement).value;
 
     if (searchAsYouType) {
       refine(query);
@@ -79,7 +85,7 @@ class SearchBox extends Component {
     onChange(event);
   };
 
-  componentWillReceiveProps(nextProps) {
+  public componentWillReceiveProps(nextProps: SearchBoxPropsWithDefaultProps) {
     /**
      * when the user is typing, we don't want to replace the query typed
      * by the user (state.query) with the query exposed by the connector (props.query)
@@ -90,12 +96,14 @@ class SearchBox extends Component {
     }
   }
 
-  onSubmit = event => {
+  private onSubmit = (event: Event) => {
     const { searchAsYouType, refine, onSubmit } = this.props;
 
     event.preventDefault();
     event.stopPropagation();
-    this.input.blur();
+    if (this.input.current) {
+      this.input.current.blur();
+    }
 
     if (!searchAsYouType) {
       refine(this.state.query);
@@ -106,27 +114,29 @@ class SearchBox extends Component {
     return false;
   };
 
-  onReset = event => {
+  private onReset = (event: Event) => {
     const { refine, onReset } = this.props;
     const query = '';
 
-    this.input.focus();
+    if (this.input.current) {
+      this.input.current.focus();
+    }
 
     refine(query);
     this.setState({ query });
 
     onReset(event);
   };
 
-  onBlur = () => {
+  private onBlur = () => {
     this.setState({ focused: false });
   };
 
-  onFocus = () => {
+  private onFocus = () => {
     this.setState({ focused: true });
   };
 
-  render() {
+  public render() {
     const {
       cssClasses,
       placeholder,
@@ -146,10 +156,11 @@ class SearchBox extends Component {
           className={cssClasses.form}
           noValidate
           onSubmit={this.onSubmit}
+          // @ts-expect-error `onReset` attibute is missing in preact 10.0.0 JSX types
           onReset={this.onReset}
         >
           <input
-            ref={inputRef => (this.input = inputRef)}
+            ref={this.input}
             value={this.state.query}
             disabled={this.props.disabled}
             className={cssClasses.input}
@@ -158,6 +169,7 @@ class SearchBox extends Component {
             autoFocus={autofocus}
             autoComplete="off"
             autoCorrect="off"
+            // @ts-expect-error `autoCapitalize` attibute is missing in preact 10.0.0 JSX types
             autoCapitalize="off"
             spellCheck="false"
             maxLength={512}