feat(ts): convert RefinementList component to TypeScript (#4702)

* feat(ts): convert rating-menu to TypeScript

* feat(ts): convert RefinementList to TypeScript

* fixup! feat(ts): convert RefinementList to TypeScript

* fixup! feat(ts): convert RefinementList to TypeScript

* fixup! fixup! feat(ts): convert RefinementList to TypeScript

* Update src/components/RefinementList/RefinementList.tsx

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

* fixup! feat(ts): convert RefinementList to TypeScript

* fixup! feat(ts): convert RefinementList to TypeScript

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

Author: Yannick Croissant

src/components/RefinementList/RefinementList.js src/components/RefinementList/RefinementList.tsx

@@ -1,37 +1,102 @@
 /** @jsx h */
 
-import { h, Component } from 'preact';
-import PropTypes from 'prop-types';
+import { h, createRef, Component } from 'preact';
 import cx from 'classnames';
 import { isSpecialClick, isEqual } from '../../lib/utils';
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 import Template from '../Template/Template';
 import RefinementListItem from './RefinementListItem';
 import SearchBox from '../SearchBox/SearchBox';
+import { RefinementListItem as TRefinementListItem } from '../../connectors/refinement-list/connectRefinementList';
+import { SearchBoxTemplates } from '../../widgets/search-box/types';
+import { CreateURL, Templates } from '../../types';
 
-class RefinementList extends Component {
-  constructor(props) {
+type CSSClasses = {
+  searchable?: Record<string, string>;
+  [key: string]: any;
+};
+
+export type RefinementListProps<
+  TTemplates extends Templates,
+  TCSSClasses extends CSSClasses
+> = {
+  createURL: CreateURL<string>;
+  cssClasses: TCSSClasses;
+  depth?: number;
+  facetValues?: TRefinementListItem[];
+  attribute?: string;
+  templateProps?: PreparedTemplateProps<TTemplates>;
+  searchBoxTemplateProps?: PreparedTemplateProps<SearchBoxTemplates>;
+  toggleRefinement: (value: string) => void;
+  searchFacetValues?: (query: string) => void;
+  searchPlaceholder?: string;
+  isFromSearch?: boolean;
+  showMore?: boolean;
+  toggleShowMore?: () => void;
+  isShowingMore?: boolean;
+  hasExhaustiveItems?: boolean;
+  canToggleShowMore?: boolean;
+  searchIsAlwaysActive?: boolean;
+  className?: string;
+  children?: h.JSX.Element;
+};
+
+const defaultProps = {
+  cssClasses: {},
+  depth: 0,
+};
+
+type RefinementListPropsWithDefaultProps<
+  TTemplates extends Templates,
+  TCSSClasses extends CSSClasses
+> = RefinementListProps<TTemplates, TCSSClasses> &
+  Readonly<typeof defaultProps>;
+
+type RefinementListItemTemplateData<
+  TTemplates extends Templates,
+  TCSSClasses extends CSSClasses
+> = TRefinementListItem & {
+  url: string;
+} & Pick<
+    RefinementListProps<TTemplates, TCSSClasses>,
+    'attribute' | 'cssClasses' | 'isFromSearch'
+  >;
+
+class RefinementList<
+  TTemplates extends Templates,
+  TCSSClasses extends CSSClasses
+> extends Component<
+  RefinementListPropsWithDefaultProps<TTemplates, TCSSClasses>
+> {
+  public static defaultProps = defaultProps;
+
+  private searchBox = createRef<SearchBox>();
+
+  public constructor(
+    props: RefinementListPropsWithDefaultProps<TTemplates, TCSSClasses>
+  ) {
     super(props);
     this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    const isStateDifferent = this.state !== nextState;
+  public shouldComponentUpdate(
+    nextProps: RefinementListPropsWithDefaultProps<TTemplates, TCSSClasses>
+  ) {
     const areFacetValuesDifferent = !isEqual(
       this.props.facetValues,
       nextProps.facetValues
     );
 
-    return isStateDifferent || areFacetValuesDifferent;
+    return areFacetValuesDifferent;
   }
 
-  refine(facetValueToRefine, isRefined) {
-    this.props.toggleRefinement(facetValueToRefine, isRefined);
+  private refine(facetValueToRefine: string) {
+    this.props.toggleRefinement(facetValueToRefine);
   }
 
-  _generateFacetItem(facetValue) {
+  private _generateFacetItem(facetValue: TRefinementListItem) {
     let subItems;
-    const hasChildren = facetValue.data && facetValue.data.length > 0;
-    if (hasChildren) {
+    if (facetValue.data && facetValue.data.length > 0) {
       const { root, ...cssClasses } = this.props.cssClasses;
       subItems = (
         <RefinementList
@@ -46,7 +111,10 @@ class RefinementList extends Component {
     }
 
     const url = this.props.createURL(facetValue.value);
-    const templateData = {
+    const templateData: RefinementListItemTemplateData<
+      TTemplates,
+      TCSSClasses
+    > = {
       ...facetValue,
       url,
       attribute: this.props.attribute,
@@ -63,18 +131,21 @@ class RefinementList extends Component {
       key += `/${facetValue.count}`;
     }
 
+    const refinementListItemClassName = cx(this.props.cssClasses.item, {
+      [this.props.cssClasses.selectedItem]: facetValue.isRefined,
+      [this.props.cssClasses.disabledItem]: !facetValue.count,
+      [this.props.cssClasses.parentItem]:
+        facetValue.data && facetValue.data.length > 0,
+    });
+
     return (
       <RefinementListItem
         templateKey="item"
         key={key}
         facetValueToRefine={facetValue.value}
         handleClick={this.handleItemClick}
         isRefined={facetValue.isRefined}
-        className={cx(this.props.cssClasses.item, {
-          [this.props.cssClasses.selectedItem]: facetValue.isRefined,
-          [this.props.cssClasses.disabledItem]: !facetValue.count,
-          [this.props.cssClasses.parentItem]: hasChildren,
-        })}
+        className={refinementListItemClassName}
         subItems={subItems}
         templateData={templateData}
         templateProps={this.props.templateProps}
@@ -97,13 +168,28 @@ class RefinementList extends Component {
   //
   // Finally, we always stop propagation of the event to avoid multiple levels RefinementLists to fail: click
   // on child would click on parent also
-  handleItemClick({ facetValueToRefine, originalEvent, isRefined }) {
+  private handleItemClick({
+    facetValueToRefine,
+    isRefined,
+    originalEvent,
+  }: {
+    facetValueToRefine: string;
+    isRefined: boolean;
+    originalEvent: MouseEvent;
+  }) {
     if (isSpecialClick(originalEvent)) {
       // do not alter the default browser behavior
       // if one special key is down
       return;
     }
 
+    if (
+      !(originalEvent.target instanceof HTMLElement) ||
+      !(originalEvent.target.parentNode instanceof HTMLElement)
+    ) {
+      return;
+    }
+
     if (
       isRefined &&
       originalEvent.target.parentNode.querySelector(
@@ -115,7 +201,7 @@ class RefinementList extends Component {
     }
 
     if (originalEvent.target.tagName === 'INPUT') {
-      this.refine(facetValueToRefine, isRefined);
+      this.refine(facetValueToRefine);
       return;
     }
 
@@ -130,39 +216,35 @@ class RefinementList extends Component {
         return;
       }
 
-      if (parent.tagName === 'A' && parent.href) {
+      if (parent.tagName === 'A' && (parent as HTMLAnchorElement).href) {
         originalEvent.preventDefault();
       }
 
-      parent = parent.parentNode;
+      parent = parent.parentNode as HTMLElement;
     }
 
     originalEvent.stopPropagation();
 
-    this.refine(facetValueToRefine, isRefined);
+    this.refine(facetValueToRefine);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.searchBox && !nextProps.isFromSearch) {
-      this.searchBox.resetInput();
+  public componentWillReceiveProps(
+    nextProps: RefinementListPropsWithDefaultProps<TTemplates, TCSSClasses>
+  ) {
+    if (this.searchBox.current && !nextProps.isFromSearch) {
+      this.searchBox.current.resetInput();
     }
   }
 
-  refineFirstValue() {
-    const firstValue = this.props.facetValues[0];
+  private refineFirstValue() {
+    const firstValue = this.props.facetValues && this.props.facetValues[0];
     if (firstValue) {
       const actualValue = firstValue.value;
       this.props.toggleRefinement(actualValue);
     }
   }
 
-  render() {
-    // Adding `-lvl0` classes
-    const cssClassList = cx(this.props.cssClasses.list, {
-      [`${this.props.cssClasses.depth}${this.props.depth}`]: this.props
-        .cssClasses.depth,
-    });
-
+  public render() {
     const showMoreButtonClassName = cx(this.props.cssClasses.showMore, {
       [this.props.cssClasses.disabledShowMore]: !(
         this.props.showMore === true && this.props.canToggleShowMore
@@ -191,18 +273,22 @@ class RefinementList extends Component {
 
     const templates = this.props.searchBoxTemplateProps
       ? this.props.searchBoxTemplateProps.templates
-      : {};
+      : undefined;
 
     const searchBox = this.props.searchFacetValues && (
       <div className={this.props.cssClasses.searchBox}>
         <SearchBox
-          ref={searchBoxRef => (this.searchBox = searchBoxRef)}
+          ref={this.searchBox}
           placeholder={this.props.searchPlaceholder}
           disabled={shouldDisableSearchBox}
-          cssClasses={this.props.cssClasses.searchable}
+          cssClasses={this.props.cssClasses.searchable!}
           templates={templates}
-          onChange={event => this.props.searchFacetValues(event.target.value)}
-          onReset={() => this.props.searchFacetValues('')}
+          onChange={(event: Event) =>
+            this.props.searchFacetValues!(
+              (event.target as HTMLInputElement).value
+            )
+          }
+          onReset={() => this.props.searchFacetValues!('')}
           onSubmit={() => this.refineFirstValue()}
           // This sets the search box to a controlled state because
           // we don't rely on the `refine` prop but on `onChange`.
@@ -213,32 +299,32 @@ class RefinementList extends Component {
 
     const facetValues = this.props.facetValues &&
       this.props.facetValues.length > 0 && (
-        <ul className={cssClassList}>
+        <ul className={this.props.cssClasses.list}>
           {this.props.facetValues.map(this._generateFacetItem, this)}
         </ul>
       );
 
     const noResults = this.props.searchFacetValues &&
       this.props.isFromSearch &&
-      this.props.facetValues.length === 0 && (
+      (!this.props.facetValues || this.props.facetValues.length === 0) && (
         <Template
           {...this.props.templateProps}
           templateKey="searchableNoResults"
           rootProps={{ className: this.props.cssClasses.noResults }}
         />
       );
 
+    const rootClassName = cx(
+      this.props.cssClasses.root,
+      {
+        [this.props.cssClasses.noRefinementRoot]:
+          !this.props.facetValues || this.props.facetValues.length === 0,
+      },
+      this.props.className
+    );
+
     return (
-      <div
-        className={cx(
-          this.props.cssClasses.root,
-          {
-            [this.props.cssClasses.noRefinementRoot]:
-              !this.props.facetValues || this.props.facetValues.length === 0,
-          },
-          this.props.className
-        )}
-      >
+      <div className={rootClassName}>
         {this.props.children}
         {searchBox}
         {facetValues}
@@ -249,61 +335,4 @@ class RefinementList extends Component {
   }
 }
 
-RefinementList.propTypes = {
-  Template: PropTypes.func,
-  createURL: PropTypes.func,
-  cssClasses: PropTypes.shape({
-    depth: PropTypes.string,
-    root: PropTypes.string,
-    noRefinementRoot: PropTypes.string,
-    list: PropTypes.string,
-    item: PropTypes.string,
-    selectedItem: PropTypes.string,
-    parentItem: PropTypes.string,
-    childList: PropTypes.string,
-    searchBox: PropTypes.string,
-    label: PropTypes.string,
-    checkbox: PropTypes.string,
-    labelText: PropTypes.string,
-    count: PropTypes.string,
-    noResults: PropTypes.string,
-    showMore: PropTypes.string,
-    disabledShowMore: PropTypes.string,
-    disabledItem: PropTypes.string,
-    searchable: PropTypes.shape({
-      root: PropTypes.string,
-      form: PropTypes.string,
-      input: PropTypes.string,
-      submit: PropTypes.string,
-      submitIcon: PropTypes.string,
-      reset: PropTypes.string,
-      resetIcon: PropTypes.string,
-      loadingIndicator: PropTypes.string,
-      loadingIcon: PropTypes.string,
-    }),
-  }).isRequired,
-  depth: PropTypes.number,
-  facetValues: PropTypes.array,
-  attribute: PropTypes.string,
-  templateProps: PropTypes.object.isRequired,
-  searchBoxTemplateProps: PropTypes.object,
-  toggleRefinement: PropTypes.func.isRequired,
-  searchFacetValues: PropTypes.func,
-  searchPlaceholder: PropTypes.string,
-  isFromSearch: PropTypes.bool,
-  showMore: PropTypes.bool,
-  toggleShowMore: PropTypes.func,
-  isShowingMore: PropTypes.bool,
-  hasExhaustiveItems: PropTypes.bool,
-  canToggleShowMore: PropTypes.bool,
-  searchIsAlwaysActive: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.element,
-};
-
-RefinementList.defaultProps = {
-  cssClasses: {},
-  depth: 0,
-};
-
 export default RefinementList;

src/components/RefinementList/RefinementListItem.js src/components/RefinementList/RefinementListItem.tsx

@@ -1,9 +1,23 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import PropTypes from 'prop-types';
 import Template from '../Template/Template';
 
+export type RefinementListItemProps = {
+  facetValueToRefine: string;
+  handleClick: (args: {
+    facetValueToRefine: string;
+    isRefined: boolean;
+    originalEvent: MouseEvent;
+  }) => void;
+  isRefined: boolean;
+  subItems?: h.JSX.Element;
+  templateData: Record<string, any>;
+  templateKey: string;
+  templateProps?: Record<string, any>;
+  className: string;
+};
+
 function RefinementListItem({
   className,
   handleClick,
@@ -13,7 +27,7 @@ function RefinementListItem({
   templateKey,
   templateData,
   subItems,
-}) {
+}: RefinementListItemProps) {
   return (
     <li
       className={className}
@@ -35,15 +49,4 @@ function RefinementListItem({
   );
 }
 
-RefinementListItem.propTypes = {
-  facetValueToRefine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  handleClick: PropTypes.func.isRequired,
-  isRefined: PropTypes.bool.isRequired,
-  subItems: PropTypes.object,
-  templateData: PropTypes.object.isRequired,
-  templateKey: PropTypes.string.isRequired,
-  templateProps: PropTypes.object.isRequired,
-  className: PropTypes.string.isRequired,
-};
-
 export default RefinementListItem;

src/components/RefinementList/__tests__/RefinementList-test.js src/components/RefinementList/__tests__/RefinementList-test.tsx

@@ -2,11 +2,13 @@
 
 import { h } from 'preact';
 import { shallow } from 'enzyme';
-import RefinementListItem from '../RefinementListItem';
+import { ReactElementLike } from 'prop-types';
+import RefinementListItem, {
+  RefinementListItemProps,
+} from '../RefinementListItem';
 
 describe('RefinementListItem', () => {
-  const props = {
-    facetValue: 'Hello',
+  const props: RefinementListItemProps = {
     facetValueToRefine: 'wi',
     isRefined: false,
     handleClick: jest.fn(),
@@ -18,7 +20,9 @@ describe('RefinementListItem', () => {
   };
 
   it('renders an item', () => {
-    const wrapper = shallow(<RefinementListItem {...props} />);
+    const wrapper = shallow(
+      (<RefinementListItem {...props} />) as ReactElementLike
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -28,7 +32,9 @@ describe('RefinementListItem', () => {
     expect(props.handleClick).toHaveBeenCalledTimes(1);
   });
 
-  function render(askedProps) {
-    return shallow(<RefinementListItem {...askedProps} />);
+  function render(askedProps: RefinementListItemProps) {
+    return shallow(
+      (<RefinementListItem {...askedProps} />) as ReactElementLike
+    );
   }
 });

src/components/RefinementList/__tests__/RefinementListItem-test.js src/components/RefinementList/__tests__/RefinementListItem-test.tsx

@@ -51,6 +51,10 @@ export type RefinementListItem = {
    * Indicates if the list item is refined.
    */
   isRefined: boolean;
+  /**
+   * List item childrens.
+   */
+  data?: RefinementListItem[];
 };
 
 export type RefinementListConnectorParams = {

src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.tsx.snap

@@ -1,5 +1,6 @@
 import { render as preactRender, VNode } from 'preact';
-import numericMenu from '../numeric-menu';
+import defaultTemplates from '../defaultTemplates';
+import numericMenu, { NumericMenuCSSClasses } from '../numeric-menu';
 import algoliasearchHelper, {
   SearchParameters,
   SearchResults,
@@ -13,7 +14,7 @@ import {
 } from '../../../../test/mock/createWidget';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 import { createSearchClient } from '../../../../test/mock/createSearchClient';
-import { RefinementListProps } from '../../../components/RefinementList/types';
+import { RefinementListProps } from '../../../components/RefinementList/RefinementList';
 
 const render = castToJestMock(preactRender);
 jest.mock('preact', () => {
@@ -85,8 +86,12 @@ describe('numericMenu()', () => {
     widget.render!(createRenderOptions({ state, results }));
     widget.render!(createRenderOptions({ state, results }));
 
-    const firstRender = render.mock.calls[0][0] as VNode<RefinementListProps>;
-    const secondRender = render.mock.calls[1][0] as VNode<RefinementListProps>;
+    const firstRender = render.mock.calls[0][0] as VNode<
+      RefinementListProps<typeof defaultTemplates, NumericMenuCSSClasses>
+    >;
+    const secondRender = render.mock.calls[1][0] as VNode<
+      RefinementListProps<typeof defaultTemplates, NumericMenuCSSClasses>
+    >;
     const firstContainer = render.mock.calls[0][1];
     const secondContainer = render.mock.calls[1][1];
 
@@ -109,8 +114,13 @@ describe('numericMenu()', () => {
     widget.init!(createInitOptions({ helper }));
     widget.render!(createRenderOptions({ state, results }));
 
-    const firstRender = render.mock.calls[0][0] as VNode<RefinementListProps>;
-    const { facetValues } = firstRender.props as RefinementListProps;
+    const firstRender = render.mock.calls[0][0] as VNode<
+      RefinementListProps<typeof defaultTemplates, NumericMenuCSSClasses>
+    >;
+    const { facetValues } = firstRender.props as RefinementListProps<
+      typeof defaultTemplates,
+      NumericMenuCSSClasses
+    >;
 
     expect(facetValues).toEqual([
       {

src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.tsx.snap

@@ -93,6 +93,12 @@ export type NumericMenuCSSClasses = {
   radio?: string | string[];
 };
 
+type NumericMenuRendererCSSClasses = Required<
+  {
+    [key in keyof NumericMenuCSSClasses]: string;
+  }
+>;
+
 export type NumericMenuTemplates = {
   /**
    * Item template, provided with `label` (the name in the configuration), `isRefined`, `url`, `value` (the setting for the filter) data properties.
@@ -129,7 +135,7 @@ export type NumericMenuTemplates = {
     /**
      * The CSS classes provided to the widget.
      */
-    cssClasses: NumericMenuCSSClasses;
+    cssClasses: NumericMenuRendererCSSClasses;
   }>;
 };
 

src/components/RefinementList/types.ts

@@ -78,6 +78,10 @@ export type RatingMenuCSSClasses = {
   count: string | string[];
 };
 
+type RatingMenuRendererCSSClasses = {
+  [key in keyof RatingMenuCSSClasses]: string;
+};
+
 export type RatingMenuWidgetParams = {
   /**
    * Place where to insert the widget in your webpage.
@@ -108,7 +112,7 @@ const renderer = ({
   renderState,
 }: {
   containerNode: HTMLElement;
-  cssClasses: Record<string, string>;
+  cssClasses: RatingMenuRendererCSSClasses;
   templates: Partial<RatingMenuTemplates>;
   renderState: { templateProps?: PreparedTemplateProps<RatingMenuTemplates> };
 }) => (

src/connectors/refinement-list/connectRefinementList.ts

@@ -95,64 +95,64 @@ type RefinementListOwnCSSClasses = {
   /**
    * CSS class to add to the root element.
    */
-  root: string;
+  root: string | string[];
   /**
    * CSS class to add to the root element when no refinements.
    */
-  noRefinementRoot: string;
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the root element with no results.
    */
-  noResults: string;
+  noResults: string | string[];
   /**
    * CSS class to add to the list element.
    */
-  list: string;
+  list: string | string[];
   /**
    * CSS class to add to each item element.
    */
-  item: string;
+  item: string | string[];
   /**
    * CSS class to add to each selected element.
    */
-  selectedItem: string;
+  selectedItem: string | string[];
   /**
    * CSS class to add to each label element (when using the default template).
    */
-  label: string;
+  label: string | string[];
   /**
    * CSS class to add to each checkbox element (when using the default template).
    */
-  checkbox: string;
+  checkbox: string | string[];
   /**
    * CSS class to add to each label text element.
    */
-  labelText: string;
+  labelText: string | string[];
   /**
    * CSS class to add to the show more element
    */
-  showMore: string;
+  showMore: string | string[];
   /**
    * CSS class to add to the disabled show more element
    */
-  disabledShowMore: string;
+  disabledShowMore: string | string[];
   /**
    * CSS class to add to each count element (when using the default template).
    */
-  count: string;
+  count: string | string[];
 };
 
 type RefinementListSearchableCSSClasses = {
-  searchBox: string;
-  searchableRoot: string;
-  searchableForm: string;
-  searchableInput: string;
-  searchableSubmit: string;
-  searchableSubmitIcon: string;
-  searchableReset: string;
-  searchableResetIcon: string;
-  searchableLoadingIndicator: string;
-  searchableLoadingIcon: string;
+  searchBox: string | string[];
+  searchableRoot: string | string[];
+  searchableForm: string | string[];
+  searchableInput: string | string[];
+  searchableSubmit: string | string[];
+  searchableSubmitIcon: string | string[];
+  searchableReset: string | string[];
+  searchableResetIcon: string | string[];
+  searchableLoadingIndicator: string | string[];
+  searchableLoadingIcon: string | string[];
 };
 
 export type RefinementListCSSClasses = RefinementListOwnCSSClasses &