[BD-9310][BpkMobileScrollContainer] Convert BpkMobileScrollContainer …

…into typescript (#3701) * convert BpkMobileScrollContainer into typescript * lint fix * fix lint * fix test * convert index file * fix test * change ariaLabel type to undefined * fix lint --------- Co-authored-by: Ana Belciug <[email protected]>
Skyscanner · Jan 10, 2025 · 43800b5 · 43800b5
1 parent 07c7ac2
commit 43800b5
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 76 deletions.
diff --git a/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx b/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx
@@ -21,7 +21,6 @@ import { useRef } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
 import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CHIP_TYPES } from '../../bpk-component-chip';
 import FilterIconSm from '../../bpk-component-icon/sm/filter';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 import { cssModules } from '../../bpk-react-utils';
@@ -195,7 +194,7 @@ const RailChipGroup = ({
         </div>
       }
       <BpkMobileScrollContainer
-        scrollerRef={(el: HTMLElement) => { scrollContainerRef.current = el }}
+        scrollerRef={(el: HTMLElement | null) => { scrollContainerRef.current = el }}
       >
         <ChipGroupContent ariaLabel={ariaLabel}
           ariaMultiselectable={ariaMultiselectable}

diff --git a/...omponent-mobile-scroll-container/index.js → ...omponent-mobile-scroll-container/index.ts b/...omponent-mobile-scroll-container/index.js → ...omponent-mobile-scroll-container/index.ts
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import BpkMobileScrollContainer from './src/BpkMobileScrollContainer';
 
 export default BpkMobileScrollContainer;
diff --git a/...iner/src/BpkMobileScrollContainer-test.js → ...ner/src/BpkMobileScrollContainer-test.tsx b/...iner/src/BpkMobileScrollContainer-test.js → ...ner/src/BpkMobileScrollContainer-test.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
@@ -28,9 +26,9 @@ import BpkMobileScrollContainer, {
 } from './BpkMobileScrollContainer';
 
 const makeMockScroller = (
-  scrollLeft,
-  scrollWidth,
-  offsetWidth,
+  scrollLeft:number,
+  scrollWidth:number,
+  offsetWidth:number,
   offsetHeight = 0,
 ): HTMLElement => {
   const element = document.createElement('div');
@@ -41,7 +39,7 @@ const makeMockScroller = (
   return element;
 };
 
-const makeMockInnerEl = (offsetHeight): HTMLElement => {
+const makeMockInnerEl = (offsetHeight: number): HTMLElement => {
   const element = document.createElement('div');
   Object.defineProperty(element, 'offsetHeight', { value: offsetHeight });
   return element;
@@ -103,9 +101,9 @@ describe('BpkMobileScrollContainer', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with ariaLabel prop set to null', () => {
+  it('should render correctly with ariaLabel prop set to undefined', () => {
     const { asFragment } = render(
-      <BpkMobileScrollContainer ariaLabel={null}>
+      <BpkMobileScrollContainer ariaLabel={undefined}>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
         ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
         dis parturient montes, nascetur ridiculus mus.

diff --git a/...container/src/BpkMobileScrollContainer.js → ...ontainer/src/BpkMobileScrollContainer.tsx b/...container/src/BpkMobileScrollContainer.js → ...ontainer/src/BpkMobileScrollContainer.tsx
@@ -16,13 +16,10 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
+import type { ReactNode, ElementType, CSSProperties } from 'react';
 import { Component } from 'react';
 
-import debounce from 'lodash.debounce';
+import debounce from 'lodash/debounce';
 
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
@@ -31,27 +28,27 @@ import STYLES from './BpkMobileScrollContainer.module.scss';
 const getClassName = cssModules(STYLES);
 
 const computeScrollBarAwareHeight = (
-  scrollerEl: ?HTMLElement,
-  innerEl: ?HTMLElement,
-): ?string => {
+  scrollerEl: HTMLElement | null,
+  innerEl: HTMLElement | null,
+) => {
   if (!(scrollerEl && innerEl)) {
     return null;
   }
 
-  const scrollBarVisibile = scrollerEl.offsetHeight - innerEl.offsetHeight > 0;
-  return scrollBarVisibile ? `${innerEl.offsetHeight / 16}rem` : 'auto';
+  const scrollBarVisible = scrollerEl.offsetHeight - innerEl.offsetHeight > 0;
+  return scrollBarVisible ? `${innerEl.offsetHeight / 16}rem` : 'auto';
 };
 
 const computeScrollIndicatorClassName = (
-  scrollerEl: ?HTMLElement,
-  leadingIndicatorClassName: ?string = null,
-  trailingIndicatorClassName: ?string = null,
+  scrollerEl: HTMLElement | null,
+  leadingIndicatorClassName?: string,
+  trailingIndicatorClassName?: string,
 ) => {
   if (!scrollerEl) {
     return null;
   }
 
-  const classNames = [];
+  const classNames: string[] = [];
   const { offsetWidth, scrollLeft, scrollWidth } = scrollerEl;
 
   const rtl = isRTL();
@@ -70,51 +67,30 @@ const computeScrollIndicatorClassName = (
 };
 
 type Props = {
-  children: Node,
-  innerContainerTagName: string,
-  className: ?string,
-  leadingIndicatorClassName: ?string,
-  trailingIndicatorClassName: ?string,
-  scrollerRef: ?Function,
-  style: ?Object,
-  showScrollbar: ?boolean,
+  ariaLabel?: string;
+  children: ReactNode;
+  innerContainerTagName?: ElementType;
+  className?: string;
+  leadingIndicatorClassName?: string;
+  trailingIndicatorClassName?: string;
+  scrollerRef?: (el: HTMLElement | null) => void;
+  style?: CSSProperties;
+  showScrollbar?: boolean;
 };
 
 type State = {
-  computedHeight: ?string,
-  scrollIndicatorClassName: ?string,
-};
-
-const propTypes = {
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  scrollerRef: PropTypes.func,
-  innerContainerTagName: PropTypes.string,
-  className: PropTypes.string,
-  leadingIndicatorClassName: PropTypes.string,
-  trailingIndicatorClassName: PropTypes.string,
-  style: PropTypes.object,
-  showScrollbar: PropTypes.bool,
-};
-
-const defaultProps = {
-  ariaLabel: null,
-  scrollerRef: null,
-  innerContainerTagName: 'div',
-  className: null,
-  leadingIndicatorClassName: null,
-  trailingIndicatorClassName: null,
-  style: null,
-  showScrollbar: false,
+  computedHeight: string;
+  scrollIndicatorClassName: string | null;
 };
 
 class BpkMobileScrollContainer extends Component<Props, State> {
-  innerEl: ?HTMLElement;
-
-  scrollerEl: ?HTMLElement;
+  static defaultProps: Partial<Props> = {
+    innerContainerTagName: 'div',
+    showScrollbar: false,
+  };
 
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
 
     this.state = {
       computedHeight: 'auto',
@@ -168,16 +144,20 @@ class BpkMobileScrollContainer extends Component<Props, State> {
       return;
     }
 
-    this.setState(() => ({ computedHeight }));
+    this.setState({ computedHeight });
   };
 
+  innerEl: HTMLElement | null = null;
+
+  scrollerEl: HTMLElement | null = null;
+
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
     const {
       ariaLabel,
       children,
       className,
-      innerContainerTagName,
+      innerContainerTagName = 'div',
       leadingIndicatorClassName,
       scrollerRef,
       showScrollbar,
@@ -218,7 +198,7 @@ class BpkMobileScrollContainer extends Component<Props, State> {
         >
           <InnerContainer
             aria-label={ariaLabel}
-            ref={(el) => {
+            ref={(el: any) => {
               this.innerEl = el;
             }}
             className={getClassName('bpk-mobile-scroll-container__inner')}
@@ -230,12 +210,6 @@ class BpkMobileScrollContainer extends Component<Props, State> {
     );
   }
 }
-BpkMobileScrollContainer.propTypes = {
-  ...propTypes,
-};
-BpkMobileScrollContainer.defaultProps = {
-  ...defaultProps,
-};
 
 export default BpkMobileScrollContainer;
 export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };
diff --git a/...s__/BpkMobileScrollContainer-test.js.snap → ...__/BpkMobileScrollContainer-test.tsx.snap b/...s__/BpkMobileScrollContainer-test.js.snap → ...__/BpkMobileScrollContainer-test.tsx.snap
@@ -96,7 +96,7 @@ exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop 1`
 </DocumentFragment>
 `;
 
-exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop set to null 1`] = `
+exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop set to undefined 1`] = `
 <DocumentFragment>
   <div
     class="bpk-mobile-scroll-container"

diff --git a/...croll-container/src/accessibility-test.js → ...roll-container/src/accessibility-test.tsx b/...croll-container/src/accessibility-test.js → ...roll-container/src/accessibility-test.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';