Yauheni/76933/table component ts migration

packages/components/src/components/table/index.js → packages/components/src/components/table/index.ts

@@ -1,4 +1,4 @@
-import Table from './table.jsx';
+import Table from './table';
 import './table.scss';
 
 export default Table;

packages/components/src/components/table/table-body.jsx → packages/components/src/components/table/table-body.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Body = ({ children, ...otherProps }) => (
+type TBody = {
+    className?: string;
+};
+
+const Body = ({ children, ...otherProps }: React.PropsWithChildren<TBody>) => (
     <div role='rowgroup' {...otherProps}>
         {children}
     </div>

packages/components/src/components/table/table-cell.jsx → packages/components/src/components/table/table-cell.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-const Cell = ({ children, align = 'left', className, fixed }) => (
+export type TCell = {
+    align: 'left' | 'right';
+    className: string;
+    fixed: boolean;
+};
+
+const Cell = ({ children, align = 'left', className, fixed }: React.PropsWithChildren<Partial<TCell>>) => (
     <div
         role='cell'
         className={classNames('dc-table__cell', className, {
@@ -14,11 +19,4 @@ const Cell = ({ children, align = 'left', className, fixed }) => (
     </div>
 );
 
-Cell.propTypes = {
-    align: PropTypes.oneOf(['left', 'right']),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    fixed: PropTypes.bool,
-};
-
 export default Cell;

packages/components/src/components/table/table-head.jsx → packages/components/src/components/table/table-head.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import { TCell } from './table-cell';
 
-const Head = ({ children, align, className, fixed }) => (
+const Head = ({ children, align, className, fixed }: React.PropsWithChildren<Partial<TCell>>) => (
     <div
         role='columnheader'
         className={classNames('dc-table__head', className, {
@@ -14,11 +14,4 @@ const Head = ({ children, align, className, fixed }) => (
     </div>
 );
 
-Head.propTypes = {
-    align: PropTypes.oneOf(['left', 'right']),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    fixed: PropTypes.bool,
-};
-
 export default Head;

packages/components/src/components/table/table-header.jsx → packages/components/src/components/table/table-header.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-const Header = ({ children, className }) => (
+type THeader = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const Header = ({ children, className }: THeader) => (
     <div role='rowgroup' className={classNames('dc-table__header', className)}>
         {children}
     </div>
 );
 
-Header.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-};
-
 export default Header;

packages/components/src/components/table/table-row.jsx → packages/components/src/components/table/table-row.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-const Row = ({ children, className, has_hover }) => {
+type TRow = {
+    children: React.ReactNode;
+    className?: string;
+    has_hover?: boolean;
+};
+
+const Row = ({ children, className, has_hover }: TRow) => {
     return (
         <div
             role='row'
@@ -15,10 +20,4 @@ const Row = ({ children, className, has_hover }) => {
     );
 };
 
-Row.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    has_hover: PropTypes.bool,
-};
-
 export default Row;

packages/components/src/components/table/table.jsx → packages/components/src/components/table/table.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
 import classNames from 'classnames';
-import Head from './table-head.jsx';
-import Header from './table-header.jsx';
-import Body from './table-body.jsx';
-import Row from './table-row.jsx';
-import Cell from './table-cell.jsx';
+import Head from './table-head';
+import Header from './table-header';
+import Body from './table-body';
+import Row from './table-row';
+import Cell from './table-cell';
 import ThemedScrollbars from '../themed-scrollbars/themed-scrollbars';
 
+type TTable = {
+    className: string;
+    fixed: boolean;
+    scroll_width: string;
+    scroll_height: string;
+};
+
 // TODO: update the <Table /> component to fit with the DataTable in Trader
-const Table = ({ className, fixed, children, scroll_width, scroll_height }) => (
+const Table = ({
+    className,
+    fixed,
+    children,
+    scroll_width,
+    scroll_height,
+}: React.PropsWithChildren<Partial<TTable>>) => (
     <div
         role='table'
         className={classNames('dc-table', className, {

packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx

@@ -11,8 +11,8 @@ type TThemedScrollbars = {
     is_only_horizontal?: boolean;
     is_only_horizontal_overlay?: boolean;
     is_scrollbar_hidden?: boolean;
-    onScroll: UIEventHandler<HTMLDivElement>;
-    refSetter: RefObject<HTMLDivElement>;
+    onScroll?: UIEventHandler<HTMLDivElement>;
+    refSetter?: RefObject<HTMLDivElement> | null;
     style?: React.CSSProperties;
     width?: string;
 };
@@ -28,13 +28,13 @@ const ThemedScrollbars = ({
     is_only_horizontal_overlay,
     is_scrollbar_hidden,
     onScroll,
-    refSetter,
+    refSetter = null,
     style = {},
     width,
 }: React.PropsWithChildren<TThemedScrollbars>) => {
     const [hoverRef, isHovered] = useHover<HTMLDivElement>(refSetter, false);
 
-    if (is_bypassed) return children;
+    if (is_bypassed) return children as JSX.Element;
     return (
         <div
             data-testid='dt_themed_scrollbars'

packages/components/stories/table/README.md

@@ -1,12 +1,13 @@
 # Table component
+
 Use this component to have a basic table.
 
 ## Usage
- 
+
 ```jsx
 import { Table } from 'deriv-components';
 
-const DummyComponent = (props) => (
+const DummyComponent = props => (
     <Table>
         <Table.Header>
             <Table.Row className='table-storybook-row'>
@@ -25,29 +26,24 @@ const DummyComponent = (props) => (
             ))}
         </Table.Body>
     </Table>
-)
+);
 ```
 
 ## Props
 
-| Name                     | Type                   | Default            | Description                                                                                                              |
-|--------------------------|------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------|
-| fixed                    | {boolean}              | null               | Set it to 'true' to have customed scrollbar for the table                                                                    |
-| scroll\_width            | {string \| number}     | 100%               | If 'fixed' is 'true' you can set fixed width of the table                                                                |
-| scroll\_height           | {string \| number}     | null               | If 'fixed' is 'true' you can set fixed height of the table                                                               |
-
+| Name          | Type               | Default | Description                                                |
+| ------------- | ------------------ | ------- | ---------------------------------------------------------- |
+| fixed         | {boolean}          | null    | Set it to 'true' to have customed scrollbar for the table  |
+| scroll_width  | {string \| number} | 100%    | If 'fixed' is 'true' you can set fixed width of the table  |
+| scroll_height | {string \| number} | null    | If 'fixed' is 'true' you can set fixed height of the table |
 
 ## Full example:
 
 ```jsx
 import { Table } from 'deriv-components';
 
-const DummyComponent = (props) => (
-    <Table 
-        fixed 
-        scroll_width={400} 
-        scroll_height={400}
-    >
+const DummyComponent = props => (
+    <Table fixed scroll_width='400' scroll_height='400'>
         <Table.Header>
             <Table.Row className='table-storybook-row'>
                 {props.data.header.map((field, index) => (
@@ -65,5 +61,5 @@ const DummyComponent = (props) => (
             ))}
         </Table.Body>
     </Table>
-)
+);
 ```

packages/components/stories/table/stories/fixed-size.js

@@ -6,7 +6,7 @@ import sample_data from '../sample-data.json';
 
 const FixedSize = () => (
     <Wrapper is_dark={boolean('Dark Theme', false)}>
-        <Table fixed scroll_width={400} scroll_height={400}>
+        <Table fixed scroll_width='400' scroll_height='400'>
             <Table.Header>
                 <Table.Row className='table-storybook-row'>
                     {sample_data.fields.map((field, index) => (

packages/p2p/src/components/orders/order-table/order-table-row.jsx

@@ -25,7 +25,7 @@ const Title = ({ send_amount, currency, order_purchase_datetime, order_type }) =
     );
 };
 
-const OrderRow = ({ style, row: order }) => {
+const OrderRow = ({ row: order }) => {
     const getTimeLeft = time => {
         const distance = ServerTime.getDistanceToServerTime(time);
         return {
@@ -175,7 +175,6 @@ const OrderRow = ({ style, row: order }) => {
                 </DesktopWrapper>
                 <MobileWrapper>
                     <Table.Row
-                        style={style}
                         className={classNames('orders__mobile', {
                             'orders__mobile--attention': !isOrderSeen(id),
                         })}
@@ -257,7 +256,6 @@ const OrderRow = ({ style, row: order }) => {
 
 OrderRow.propTypes = {
     order: PropTypes.object,
-    style: PropTypes.object,
     row: PropTypes.object,
     server_time: PropTypes.object,
 };

packages/p2p/src/stores/my-profile-store.js

@@ -524,7 +524,7 @@ export default class MyProfileStore extends BaseStore {
             this.setIsConfirmDeleteModalOpen(true);
         }
     }
-  
+
     onSubmit() {
         const { general_store } = this.root_store;