From 43800b5fbde4eebf757115fcb3f4b9b0c459f45b Mon Sep 17 00:00:00 2001 From: Giria Wu <86780745+giriawu@users.noreply.github.com> Date: Fri, 10 Jan 2025 16:58:06 +0800 Subject: [PATCH] [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 <88667174+anambl@users.noreply.github.com> --- .../src/BpkMultiSelectChipGroup.tsx | 3 +- .../{index.js => index.ts} | 2 - ...t.js => BpkMobileScrollContainer-test.tsx} | 14 ++- ...tainer.js => BpkMobileScrollContainer.tsx} | 96 +++++++------------ ...=> BpkMobileScrollContainer-test.tsx.snap} | 2 +- ...ibility-test.js => accessibility-test.tsx} | 2 - 6 files changed, 43 insertions(+), 76 deletions(-) rename packages/bpk-component-mobile-scroll-container/{index.js => index.ts} (97%) rename packages/bpk-component-mobile-scroll-container/src/{BpkMobileScrollContainer-test.js => BpkMobileScrollContainer-test.tsx} (96%) rename packages/bpk-component-mobile-scroll-container/src/{BpkMobileScrollContainer.js => BpkMobileScrollContainer.tsx} (72%) rename packages/bpk-component-mobile-scroll-container/src/__snapshots__/{BpkMobileScrollContainer-test.js.snap => BpkMobileScrollContainer-test.tsx.snap} (98%) rename packages/bpk-component-mobile-scroll-container/src/{accessibility-test.js => accessibility-test.tsx} (98%) diff --git a/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx b/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx index 9a19f475fe..eb30c2994a 100644 --- 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 = ({ } { scrollContainerRef.current = el }} + scrollerRef={(el: HTMLElement | null) => { scrollContainerRef.current = el }} > { 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( - + 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/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.tsx similarity index 72% rename from packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js rename to packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.tsx index d9910b8dad..cabf9197ab 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +++ b/packages/bpk-component-mobile-scroll-container/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 { - innerEl: ?HTMLElement; - - scrollerEl: ?HTMLElement; + static defaultProps: Partial = { + innerContainerTagName: 'div', + showScrollbar: false, + }; - constructor() { - super(); + constructor(props: Props) { + super(props); this.state = { computedHeight: 'auto', @@ -168,16 +144,20 @@ class BpkMobileScrollContainer extends Component { 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 { > { + ref={(el: any) => { this.innerEl = el; }} className={getClassName('bpk-mobile-scroll-container__inner')} @@ -230,12 +210,6 @@ class BpkMobileScrollContainer extends Component { ); } } -BpkMobileScrollContainer.propTypes = { - ...propTypes, -}; -BpkMobileScrollContainer.defaultProps = { - ...defaultProps, -}; export default BpkMobileScrollContainer; export { computeScrollBarAwareHeight, computeScrollIndicatorClassName }; diff --git a/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap b/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.tsx.snap similarity index 98% rename from packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap rename to packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.tsx.snap index 0b5ccc6c57..1057f3476d 100644 --- a/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap +++ b/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.tsx.snap @@ -96,7 +96,7 @@ exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop 1` `; -exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop set to null 1`] = ` +exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop set to undefined 1`] = `