From da8446dda1e64fc7c1c45c11299623f3b2f98bd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Wed, 26 Oct 2022 14:52:01 +0300 Subject: [PATCH 1/4] yauheni/76933/table_component ts migration --- .../components/table/{index.js => index.ts} | 2 +- .../table/{table-body.jsx => table-body.tsx} | 6 ++++- .../table/{table-cell.jsx => table-cell.tsx} | 16 +++++------ .../table/{table-head.jsx => table-head.tsx} | 11 ++------ .../{table-header.jsx => table-header.tsx} | 13 +++++---- .../table/{table-row.jsx => table-row.tsx} | 15 +++++------ .../components/table/{table.jsx => table.tsx} | 27 ++++++++++++++----- .../stories/table/stories/fixed-size.js | 2 +- 8 files changed, 49 insertions(+), 43 deletions(-) rename packages/components/src/components/table/{index.js => index.ts} (58%) rename packages/components/src/components/table/{table-body.jsx => table-body.tsx} (50%) rename packages/components/src/components/table/{table-cell.jsx => table-cell.tsx} (56%) rename packages/components/src/components/table/{table-head.jsx => table-head.tsx} (56%) rename packages/components/src/components/table/{table-header.jsx => table-header.tsx} (53%) rename packages/components/src/components/table/{table-row.jsx => table-row.tsx} (60%) rename packages/components/src/components/table/{table.jsx => table.tsx} (65%) diff --git a/packages/components/src/components/table/index.js b/packages/components/src/components/table/index.ts similarity index 58% rename from packages/components/src/components/table/index.js rename to packages/components/src/components/table/index.ts index d0aad5dcb39f..dd1be0c9d7ff 100644 --- a/packages/components/src/components/table/index.js +++ b/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; diff --git a/packages/components/src/components/table/table-body.jsx b/packages/components/src/components/table/table-body.tsx similarity index 50% rename from packages/components/src/components/table/table-body.jsx rename to packages/components/src/components/table/table-body.tsx index dda785d43e2f..67fc4bc518e4 100644 --- a/packages/components/src/components/table/table-body.jsx +++ b/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) => (
{children}
diff --git a/packages/components/src/components/table/table-cell.jsx b/packages/components/src/components/table/table-cell.tsx similarity index 56% rename from packages/components/src/components/table/table-cell.jsx rename to packages/components/src/components/table/table-cell.tsx index dddbf108abe9..0f599b9dfe00 100644 --- a/packages/components/src/components/table/table-cell.jsx +++ b/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>) => (
(
); -Cell.propTypes = { - align: PropTypes.oneOf(['left', 'right']), - children: PropTypes.node, - className: PropTypes.string, - fixed: PropTypes.bool, -}; - export default Cell; diff --git a/packages/components/src/components/table/table-head.jsx b/packages/components/src/components/table/table-head.tsx similarity index 56% rename from packages/components/src/components/table/table-head.jsx rename to packages/components/src/components/table/table-head.tsx index 41f10198d562..4762d6534412 100644 --- a/packages/components/src/components/table/table-head.jsx +++ b/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>) => (
(
); -Head.propTypes = { - align: PropTypes.oneOf(['left', 'right']), - children: PropTypes.node, - className: PropTypes.string, - fixed: PropTypes.bool, -}; - export default Head; diff --git a/packages/components/src/components/table/table-header.jsx b/packages/components/src/components/table/table-header.tsx similarity index 53% rename from packages/components/src/components/table/table-header.jsx rename to packages/components/src/components/table/table-header.tsx index f26ea87b9963..df0d99c1763d 100644 --- a/packages/components/src/components/table/table-header.jsx +++ b/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) => (
{children}
); -Header.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, -}; - export default Header; diff --git a/packages/components/src/components/table/table-row.jsx b/packages/components/src/components/table/table-row.tsx similarity index 60% rename from packages/components/src/components/table/table-row.jsx rename to packages/components/src/components/table/table-row.tsx index b6729950c83e..fae117ddba5b 100644 --- a/packages/components/src/components/table/table-row.jsx +++ b/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 (
{ ); }; -Row.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, - has_hover: PropTypes.bool, -}; - export default Row; diff --git a/packages/components/src/components/table/table.jsx b/packages/components/src/components/table/table.tsx similarity index 65% rename from packages/components/src/components/table/table.jsx rename to packages/components/src/components/table/table.tsx index 06ed243efadd..031db5a38d82 100644 --- a/packages/components/src/components/table/table.jsx +++ b/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 ThemedScrollbars from '../themed-scrollbars/themed-scrollbars.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 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>) => (
( -
+
{sample_data.fields.map((field, index) => ( From 43631a62852b2d0d2dc011311925593a6bcb5057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Wed, 26 Oct 2022 15:08:19 +0300 Subject: [PATCH 2/4] resolve errors --- .../components/themed-scrollbars/themed-scrollbars.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx b/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx index 95da39100ede..9baf9279c0b8 100644 --- a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx +++ b/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; - refSetter: RefObject; + onScroll?: UIEventHandler; + refSetter?: RefObject | 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) => { const [hoverRef, isHovered] = useHover(refSetter, false); - if (is_bypassed) return children; + if (is_bypassed) return children; return (
Date: Tue, 1 Nov 2022 09:09:41 +0300 Subject: [PATCH 3/4] icons fix, readme table, order table row --- packages/components/stories/icon/icons.js | 3 +- packages/components/stories/table/README.md | 28 ++++++++----------- .../orders/order-table/order-table-row.jsx | 4 +-- 3 files changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 5f0415e45363..909eeb8ed34e 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -147,6 +147,7 @@ export const icons = 'IcCashierPaymentAgent', 'IcCashierPaypalDark', 'IcCashierPaypalLight', + 'IcCashierPaymentAgent', 'IcCashierPerfectMoneyDark', 'IcCashierPerfectMoneyLight', 'IcCashierPermatabankDark', @@ -876,4 +877,4 @@ export const icons = 'IcWalletZingpayDark', 'IcWalletZingpayLight', ], -} +}; diff --git a/packages/components/stories/table/README.md b/packages/components/stories/table/README.md index fa4a87b2a791..1b6c21c9750a 100644 --- a/packages/components/stories/table/README.md +++ b/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 => (
@@ -25,29 +26,24 @@ const DummyComponent = (props) => ( ))}
-) +); ``` ## 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) => ( - +const DummyComponent = props => ( +
{props.data.header.map((field, index) => ( @@ -65,5 +61,5 @@ const DummyComponent = (props) => ( ))}
-) +); ``` diff --git a/packages/p2p/src/components/orders/order-table/order-table-row.jsx b/packages/p2p/src/components/orders/order-table/order-table-row.jsx index 523106c8f24a..40e209fdafc0 100644 --- a/packages/p2p/src/components/orders/order-table/order-table-row.jsx +++ b/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 }) => { { OrderRow.propTypes = { order: PropTypes.object, - style: PropTypes.object, row: PropTypes.object, server_time: PropTypes.object, }; From ba3133c9fdd0bca4710377410f2627dafeaa46ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Tue, 1 Nov 2022 09:22:14 +0300 Subject: [PATCH 4/4] readme file for table fix --- packages/components/stories/table/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/stories/table/README.md b/packages/components/stories/table/README.md index 1b6c21c9750a..832325fe6cca 100644 --- a/packages/components/stories/table/README.md +++ b/packages/components/stories/table/README.md @@ -31,11 +31,11 @@ const DummyComponent = props => ( ## 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} | 100% | If 'fixed' is 'true' you can set fixed width of the table | +| scroll_height | {string} | null | If 'fixed' is 'true' you can set fixed height of the table | ## Full example: