From e38ac11915f1ceb9e18f0591e6d212fb1bfe929b Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 9 Mar 2022 09:25:41 -0300 Subject: [PATCH 01/10] [DDW-923] Check if header is stuck --- .../staking/stake-pools/StakePoolsTable.scss | 8 +++-- .../staking/stake-pools/StakePoolsTable.tsx | 21 +++++++++++-- .../app/components/widgets/InView.tsx | 30 +++++++++++++++++++ 3 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 source/renderer/app/components/widgets/InView.tsx diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index b76685e13d..c227c34535 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -99,14 +99,18 @@ thead { background: var(--theme-bordered-box-background-color); border-radius: 4px 4px 0 0; - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: block; margin: -20px -20px 0; padding: 0 20px; position: sticky; top: 0; + transition: box-shadow 0.3s ease-in-out; z-index: 999; + &.isHeaderStuck { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); + } + tr { border: 0; display: flex; @@ -144,7 +148,7 @@ } } - tr { + tr:not(:last-child) { border-bottom: 1px solid var(--theme-staking-table-border-color); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index ca95bf4e2a..c60ef19fa2 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -10,6 +10,7 @@ import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; import { StakePoolsTableHeader } from './StakePoolsTableHeader'; import { StakePoolsTableBody } from './StakePoolsTableBody'; +import { InView } from '../../widgets/InView'; const messages = defineMessages({ tableHeaderRank: { @@ -152,11 +153,14 @@ type State = { isPreloading: boolean; stakePoolsOrder: string; stakePoolsSortBy: string; + isHeaderStuck: boolean; }; const initialState = { isPreloading: true, stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', + isHeaderStuck: false, + isTest: true, }; @observer @@ -176,10 +180,11 @@ class StakePoolsTable extends Component { componentDidMount() { this._isMounted = true; setTimeout(() => { - if (this._isMounted) + if (this._isMounted) { this.setState({ isPreloading: false, }); + } }, 0); } @@ -215,11 +220,15 @@ class StakePoolsTable extends Component { listName, onSelect, selectedPoolId, - currentLocale, onTableHeaderMouseEnter, onTableHeaderMouseLeave, } = this.props; - const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state; + const { + isPreloading, + stakePoolsSortBy, + stakePoolsOrder, + isHeaderStuck, + } = this.state; const { intl } = this.context; const componentClasses = classNames([styles.component, listName]); if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading) @@ -375,8 +384,14 @@ class StakePoolsTable extends Component {
{sortedStakePoolList.length > 0 && ( + + this.setState({ isHeaderStuck: !visible }) + } + /> diff --git a/source/renderer/app/components/widgets/InView.tsx b/source/renderer/app/components/widgets/InView.tsx new file mode 100644 index 0000000000..5623b70d2c --- /dev/null +++ b/source/renderer/app/components/widgets/InView.tsx @@ -0,0 +1,30 @@ +import React, { useRef, useCallback } from 'react'; + +type Props = { + onChange: (visible: boolean) => void; +}; + +export const InView = ({ onChange }: Props) => { + const elementRef = useRef(null); + const observerRef = useRef( + new IntersectionObserver((entries) => { + entries.forEach((entry) => { + onChange(entry.isIntersecting); + }); + }) + ); + + const setElementRef = useCallback((element) => { + if (elementRef.current) { + observerRef.current.unobserve(elementRef.current); + } + + if (element) { + observerRef.current.observe(element); + } + + elementRef.current = element; + }, []); + + return
; +}; From 6b3dfa59413e9f2992311157018e231a05b3e7b6 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 10 Mar 2022 20:22:13 -0300 Subject: [PATCH 02/10] [DDW-923] CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a4f3f2b7c3..5ddf146620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Fixes +- Fixed stake pool list styling ([PR 2920](https://github.com/input-output-hk/daedalus/pull/2920)) - Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907)) - Fix warning sign displayed when recommend decimals is zero ([PR 2905](https://github.com/input-output-hk/daedalus/pull/2905)) - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) From 6eaf4aa2da125381c6e507e8ba22162dc2d0e78d Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 10 Mar 2022 20:22:30 -0300 Subject: [PATCH 03/10] [DDW-923] Missing translations --- .../app/i18n/locales/defaultMessages.json | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index ca037a45b1..68fac37f7d 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -6784,13 +6784,13 @@ "description": "Table header \"Rank\" label on stake pools list view page", "end": { "column": 3, - "line": 19 + "line": 20 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.rank", "start": { "column": 19, - "line": 15 + "line": 16 } }, { @@ -6798,13 +6798,13 @@ "description": "\"Rank\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 25 + "line": 26 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.rankingTooltip", "start": { "column": 26, - "line": 20 + "line": 21 } }, { @@ -6812,13 +6812,13 @@ "description": "Table header \"Ticker\" label on stake pools list view page", "end": { "column": 3, - "line": 30 + "line": 31 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.ticker", "start": { "column": 21, - "line": 26 + "line": 27 } }, { @@ -6826,13 +6826,13 @@ "description": "Table header \"Saturation\" label on stake pools list view page", "end": { "column": 3, - "line": 36 + "line": 37 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.saturation", "start": { "column": 25, - "line": 31 + "line": 32 } }, { @@ -6840,13 +6840,13 @@ "description": "\"Saturation\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 42 + "line": 43 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.saturationTooltip", "start": { "column": 32, - "line": 37 + "line": 38 } }, { @@ -6854,13 +6854,13 @@ "description": "Table header \"Performance\" label on stake pools list view page", "end": { "column": 3, - "line": 48 + "line": 49 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.performance", "start": { "column": 26, - "line": 43 + "line": 44 } }, { @@ -6868,13 +6868,13 @@ "description": "Table header \"Uptime\" label on stake pools list view page", "end": { "column": 3, - "line": 53 + "line": 54 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.uptime", "start": { "column": 21, - "line": 49 + "line": 50 } }, { @@ -6882,13 +6882,13 @@ "description": "Table header \"Margin\" label on stake pools list view page", "end": { "column": 3, - "line": 58 + "line": 59 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.margin", "start": { "column": 21, - "line": 54 + "line": 55 } }, { @@ -6896,13 +6896,13 @@ "description": "\"Pool margin\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 64 + "line": 65 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.profitMarginTooltip", "start": { "column": 28, - "line": 59 + "line": 60 } }, { @@ -6910,13 +6910,13 @@ "description": "Table header \"Roi\" label on stake pools list view page", "end": { "column": 3, - "line": 69 + "line": 70 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.roi", "start": { "column": 18, - "line": 65 + "line": 66 } }, { @@ -6924,13 +6924,13 @@ "description": "Table header \"Cost\" label on stake pools list view page", "end": { "column": 3, - "line": 74 + "line": 75 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.cost", "start": { "column": 19, - "line": 70 + "line": 71 } }, { @@ -6938,13 +6938,13 @@ "description": "\"Cost per epoch\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 80 + "line": 81 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.costPerEpochTooltip", "start": { "column": 26, - "line": 75 + "line": 76 } }, { @@ -6952,13 +6952,13 @@ "description": "Table header \"Produced Blocks\" label on stake pools list view page", "end": { "column": 3, - "line": 86 + "line": 87 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.producedBlocks", "start": { "column": 29, - "line": 81 + "line": 82 } }, { @@ -6966,13 +6966,13 @@ "description": "\"Blocks\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 92 + "line": 93 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.producedBlocksTooltip", "start": { "column": 36, - "line": 87 + "line": 88 } }, { @@ -6980,13 +6980,13 @@ "description": "Table header \"Potential rewards\" label on stake pools list view page", "end": { "column": 3, - "line": 98 + "line": 99 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.potentialRewards", "start": { "column": 31, - "line": 93 + "line": 94 } }, { @@ -6994,13 +6994,13 @@ "description": "\"Rewards\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 104 + "line": 105 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.potentialRewardsTooltip", "start": { "column": 38, - "line": 99 + "line": 100 } }, { @@ -7008,13 +7008,13 @@ "description": "Table header \"Pledge\" label on stake pools list view page", "end": { "column": 3, - "line": 109 + "line": 110 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.pledge", "start": { "column": 21, - "line": 105 + "line": 106 } }, { @@ -7022,13 +7022,13 @@ "description": "\"Pledge\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 115 + "line": 116 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.pledgeTooltip", "start": { "column": 28, - "line": 110 + "line": 111 } }, { @@ -7036,13 +7036,13 @@ "description": "Table header \"Retiring\" label on stake pools list view page", "end": { "column": 3, - "line": 120 + "line": 121 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.retiring", "start": { "column": 23, - "line": 116 + "line": 117 } } ], From 589e7aa40364d231e24fa18015046ea5477eb02d Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 11 Mar 2022 11:29:13 -0300 Subject: [PATCH 04/10] [DDW-923] Revert --- .../app/components/staking/stake-pools/StakePoolsTable.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index c60ef19fa2..6fc896560c 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -160,7 +160,6 @@ const initialState = { stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', isHeaderStuck: false, - isTest: true, }; @observer @@ -180,11 +179,10 @@ class StakePoolsTable extends Component { componentDidMount() { this._isMounted = true; setTimeout(() => { - if (this._isMounted) { + if (this._isMounted) this.setState({ isPreloading: false, }); - } }, 0); } From 325c6c4279267829670c6835a69cf482925a0aaf Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 11 Mar 2022 13:59:30 -0300 Subject: [PATCH 05/10] [DDW-923] Refactor to only re-render header --- .../staking/stake-pools/StakePoolsTable.scss | 4 +- .../staking/stake-pools/StakePoolsTable.tsx | 51 +++++++++---------- .../app/components/widgets/InView.tsx | 28 +++++----- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index c227c34535..a603d88c97 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -104,10 +104,10 @@ padding: 0 20px; position: sticky; top: 0; - transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.1s ease-in-out; z-index: 999; - &.isHeaderStuck { + &.headerStuck { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 6fc896560c..0fba8c5749 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -153,13 +153,11 @@ type State = { isPreloading: boolean; stakePoolsOrder: string; stakePoolsSortBy: string; - isHeaderStuck: boolean; }; const initialState = { isPreloading: true, stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', - isHeaderStuck: false, }; @observer @@ -221,12 +219,7 @@ class StakePoolsTable extends Component { onTableHeaderMouseEnter, onTableHeaderMouseLeave, } = this.props; - const { - isPreloading, - stakePoolsSortBy, - stakePoolsOrder, - isHeaderStuck, - } = this.state; + const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state; const { intl } = this.context; const componentClasses = classNames([styles.component, listName]); if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading) @@ -377,31 +370,35 @@ class StakePoolsTable extends Component { title: intl.formatMessage(messages.tableHeaderRetiring), }, ]; + return (
{sortedStakePoolList.length > 0 && ( - - this.setState({ isHeaderStuck: !visible }) - } - />
- - - - - + + {({ isInViewport, setTargetRef }) => ( + <> + + + + + + + )} + + void; + children: (props: { + isInViewport: boolean; + setTargetRef: (target: HTMLElement) => void; + }) => JSX.Element; }; -export const InView = ({ onChange }: Props) => { - const elementRef = useRef(null); +export const InView = ({ children }: Props) => { + const [isInViewport, setIsInViewport] = useState(true); + const targetRef = useRef(null); const observerRef = useRef( new IntersectionObserver((entries) => { entries.forEach((entry) => { - onChange(entry.isIntersecting); + setIsInViewport(entry.isIntersecting); }); }) ); - const setElementRef = useCallback((element) => { - if (elementRef.current) { - observerRef.current.unobserve(elementRef.current); + const setTargetRef = useCallback((target: HTMLElement) => { + if (targetRef.current) { + observerRef.current.unobserve(targetRef.current); } - if (element) { - observerRef.current.observe(element); + if (target) { + observerRef.current.observe(target); } - elementRef.current = element; + targetRef.current = target; }, []); - return
; + return children({ isInViewport, setTargetRef }); }; From 6ed7106d279103e323e322d988587b85948deace Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Tue, 15 Mar 2022 09:35:59 -0300 Subject: [PATCH 06/10] [DDW-923] Hook refactor --- .../staking/stake-pools/StakePoolsTable.scss | 2 +- .../staking/stake-pools/StakePoolsTable.tsx | 31 ++----- .../stake-pools/StakePoolsTableHeader.tsx | 88 +++++++++++-------- .../app/components/widgets/InView.tsx | 11 +-- .../app/i18n/locales/defaultMessages.json | 76 ++++++++-------- 5 files changed, 101 insertions(+), 107 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index a603d88c97..8c6b0324c0 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -107,7 +107,7 @@ transition: box-shadow 0.1s ease-in-out; z-index: 999; - &.headerStuck { + &.stickyHeader { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 0fba8c5749..5384572053 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -10,7 +10,6 @@ import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; import { StakePoolsTableHeader } from './StakePoolsTableHeader'; import { StakePoolsTableBody } from './StakePoolsTableBody'; -import { InView } from '../../widgets/InView'; const messages = defineMessages({ tableHeaderRank: { @@ -377,28 +376,14 @@ class StakePoolsTable extends Component { {sortedStakePoolList.length > 0 && (
+
- - {({ isInViewport, setTargetRef }) => ( - <> - - - - - - - )} - - + ; stakePoolsSortBy: string; stakePoolsOrder: string; - onHandleSort: (...args: Array) => any; + onHandleSort: (newSortBy: string) => void; + onTableHeaderMouseEnter: () => void; + onTableHeaderMouseLeave: () => void; }; -@observer -class StakePoolsTableHeader extends Component { - render() { - const { - availableTableHeaders, - stakePoolsSortBy, - stakePoolsOrder, - onHandleSort, - } = this.props; - return map(availableTableHeaders, (tableHeader) => { - const isSorted = - tableHeader.name === stakePoolsSortBy || - (tableHeader.name === 'ticker' && stakePoolsSortBy === 'ticker'); - const defaultOrdering = defaultTableOrdering[tableHeader.name]; - const sortIconClasses = classNames([ - styles.sortIcon, - isSorted ? styles.sorted : null, - isSorted && styles[`${stakePoolsOrder}CurrentOrdering`], - styles[`${defaultOrdering}DefaultOrdering`], - ]); - return ( - - {tableHeader.title} - - - ); - }); + + {map(availableTableHeaders, (tableHeader) => { + const isSorted = + tableHeader.name === stakePoolsSortBy || + (tableHeader.name === 'ticker' && + stakePoolsSortBy === 'ticker'); + const defaultOrdering = defaultTableOrdering[tableHeader.name]; + const sortIconClasses = classNames([ + styles.sortIcon, + isSorted ? styles.sorted : null, + isSorted && styles[`${stakePoolsOrder}CurrentOrdering`], + styles[`${defaultOrdering}DefaultOrdering`], + ]); + return ( + + ); + })} + + + + ); } -} - -export { StakePoolsTableHeader }; +); diff --git a/source/renderer/app/components/widgets/InView.tsx b/source/renderer/app/components/widgets/InView.tsx index 0b24ed2902..dca99008e6 100644 --- a/source/renderer/app/components/widgets/InView.tsx +++ b/source/renderer/app/components/widgets/InView.tsx @@ -1,13 +1,6 @@ import { useRef, useState, useCallback } from 'react'; -type Props = { - children: (props: { - isInViewport: boolean; - setTargetRef: (target: HTMLElement) => void; - }) => JSX.Element; -}; - -export const InView = ({ children }: Props) => { +export const useInViewPort = () => { const [isInViewport, setIsInViewport] = useState(true); const targetRef = useRef(null); const observerRef = useRef( @@ -30,5 +23,5 @@ export const InView = ({ children }: Props) => { targetRef.current = target; }, []); - return children({ isInViewport, setTargetRef }); + return { isInViewport, setTargetRef }; }; diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index 68fac37f7d..ca037a45b1 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -6784,13 +6784,13 @@ "description": "Table header \"Rank\" label on stake pools list view page", "end": { "column": 3, - "line": 20 + "line": 19 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.rank", "start": { "column": 19, - "line": 16 + "line": 15 } }, { @@ -6798,13 +6798,13 @@ "description": "\"Rank\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 26 + "line": 25 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.rankingTooltip", "start": { "column": 26, - "line": 21 + "line": 20 } }, { @@ -6812,13 +6812,13 @@ "description": "Table header \"Ticker\" label on stake pools list view page", "end": { "column": 3, - "line": 31 + "line": 30 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.ticker", "start": { "column": 21, - "line": 27 + "line": 26 } }, { @@ -6826,13 +6826,13 @@ "description": "Table header \"Saturation\" label on stake pools list view page", "end": { "column": 3, - "line": 37 + "line": 36 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.saturation", "start": { "column": 25, - "line": 32 + "line": 31 } }, { @@ -6840,13 +6840,13 @@ "description": "\"Saturation\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 43 + "line": 42 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.saturationTooltip", "start": { "column": 32, - "line": 38 + "line": 37 } }, { @@ -6854,13 +6854,13 @@ "description": "Table header \"Performance\" label on stake pools list view page", "end": { "column": 3, - "line": 49 + "line": 48 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.performance", "start": { "column": 26, - "line": 44 + "line": 43 } }, { @@ -6868,13 +6868,13 @@ "description": "Table header \"Uptime\" label on stake pools list view page", "end": { "column": 3, - "line": 54 + "line": 53 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.uptime", "start": { "column": 21, - "line": 50 + "line": 49 } }, { @@ -6882,13 +6882,13 @@ "description": "Table header \"Margin\" label on stake pools list view page", "end": { "column": 3, - "line": 59 + "line": 58 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.margin", "start": { "column": 21, - "line": 55 + "line": 54 } }, { @@ -6896,13 +6896,13 @@ "description": "\"Pool margin\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 65 + "line": 64 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.profitMarginTooltip", "start": { "column": 28, - "line": 60 + "line": 59 } }, { @@ -6910,13 +6910,13 @@ "description": "Table header \"Roi\" label on stake pools list view page", "end": { "column": 3, - "line": 70 + "line": 69 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.roi", "start": { "column": 18, - "line": 66 + "line": 65 } }, { @@ -6924,13 +6924,13 @@ "description": "Table header \"Cost\" label on stake pools list view page", "end": { "column": 3, - "line": 75 + "line": 74 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.cost", "start": { "column": 19, - "line": 71 + "line": 70 } }, { @@ -6938,13 +6938,13 @@ "description": "\"Cost per epoch\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 81 + "line": 80 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.costPerEpochTooltip", "start": { "column": 26, - "line": 76 + "line": 75 } }, { @@ -6952,13 +6952,13 @@ "description": "Table header \"Produced Blocks\" label on stake pools list view page", "end": { "column": 3, - "line": 87 + "line": 86 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.producedBlocks", "start": { "column": 29, - "line": 82 + "line": 81 } }, { @@ -6966,13 +6966,13 @@ "description": "\"Blocks\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 93 + "line": 92 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.producedBlocksTooltip", "start": { "column": 36, - "line": 88 + "line": 87 } }, { @@ -6980,13 +6980,13 @@ "description": "Table header \"Potential rewards\" label on stake pools list view page", "end": { "column": 3, - "line": 99 + "line": 98 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.potentialRewards", "start": { "column": 31, - "line": 94 + "line": 93 } }, { @@ -6994,13 +6994,13 @@ "description": "\"Rewards\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 105 + "line": 104 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.potentialRewardsTooltip", "start": { "column": 38, - "line": 100 + "line": 99 } }, { @@ -7008,13 +7008,13 @@ "description": "Table header \"Pledge\" label on stake pools list view page", "end": { "column": 3, - "line": 110 + "line": 109 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.pledge", "start": { "column": 21, - "line": 106 + "line": 105 } }, { @@ -7022,13 +7022,13 @@ "description": "\"Pledge\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 116 + "line": 115 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.pledgeTooltip", "start": { "column": 28, - "line": 111 + "line": 110 } }, { @@ -7036,13 +7036,13 @@ "description": "Table header \"Retiring\" label on stake pools list view page", "end": { "column": 3, - "line": 121 + "line": 120 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.retiring", "start": { "column": 23, - "line": 117 + "line": 116 } } ], From 0af09337e45b2943064bc4f2580708defa113e37 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Tue, 12 Apr 2022 19:31:24 -0300 Subject: [PATCH 07/10] [DDW-923] Review changes; Fix merge issues --- .../staking/stake-pools/StakePoolsTable.scss | 3 +- .../staking/stake-pools/StakePoolsTable.tsx | 38 +++-------- .../stake-pools/StakePoolsTableHeader.tsx | 68 +++++++++++++++++++ .../staking/stake-pools/hooks/index.ts | 1 + .../stake-pools/hooks/useInViewPort.tsx} | 0 5 files changed, 80 insertions(+), 30 deletions(-) create mode 100644 source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx rename source/renderer/app/components/{widgets/InView.tsx => staking/stake-pools/hooks/useInViewPort.tsx} (100%) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index 60b29a2c90..f5d3fab975 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -105,6 +105,7 @@ padding: 0 20px; position: sticky; top: 0; + transition: box-shadow 0.1s ease-in-out; z-index: $sticky-header-z-index; &.stickyHeader { @@ -148,7 +149,7 @@ } } - tr:not(:last-child) { + .tr:not(:last-child) { border-bottom: 1px solid var(--theme-staking-table-border-color); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 4fd9214c3f..258328b12f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -12,13 +12,13 @@ import styles from './StakePoolsTable.scss'; import StakePool from '../../../domains/StakePool'; import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; -import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; import { useSortedStakePoolList, useCreateColumns, StakePoolsOrder, StakePoolSortableProps, } from './hooks'; +import { StakePoolsTableHeader } from './StakePoolsTableHeader'; export const defaultTableOrdering: Record< StakePoolSortableProps, @@ -191,34 +191,14 @@ function StakePoolsTableComponent({ {sortedStakePoolList.length > 0 && (
-
- {headerGroups.map((headerGroup) => ( - /* eslint-disable-next-line react/jsx-key */ -
- {headerGroup.headers.map((column) => ( - - {column.render('Header')} - - ))} -
- ))} -
+ {({ width }) => ( diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx new file mode 100644 index 0000000000..a08ea9ef71 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import classNames from 'classnames'; +import { HeaderGroup } from 'react-table'; +import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; +import StakePool from '../../../domains/StakePool'; +import { + useInViewPort, + StakePoolsOrder, + StakePoolSortableProps, +} from './hooks'; +import styles from './StakePoolsTable.scss'; + +type Props = { + headerGroups: HeaderGroup[]; + stakePoolsOrder: StakePoolsOrder; + stakePoolsSortBy: StakePoolSortableProps; + onHandleSort: (name: string) => void; + onTableHeaderMouseEnter: () => void; + onTableHeaderMouseLeave: () => void; +}; + +export const Component = ({ + stakePoolsSortBy, + stakePoolsOrder, + headerGroups, + onHandleSort, + onTableHeaderMouseEnter, + onTableHeaderMouseLeave, +}: Props) => { + const { setTargetRef, isInViewport } = useInViewPort(); + + return ( + <> +
+
+ {headerGroups.map((headerGroup) => ( + /* eslint-disable-next-line react/jsx-key */ +
+ {headerGroup.headers.map((column) => ( + + {column.render('Header')} + + ))} +
+ ))} +
+ + ); +}; + +export const StakePoolsTableHeader = observer(Component); diff --git a/source/renderer/app/components/staking/stake-pools/hooks/index.ts b/source/renderer/app/components/staking/stake-pools/hooks/index.ts index ac08a1ed77..daaddce0bd 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/index.ts +++ b/source/renderer/app/components/staking/stake-pools/hooks/index.ts @@ -1,4 +1,5 @@ export { useCreateColumns } from './useCreateColumns'; +export { useInViewPort } from './useInViewPort'; export { useSortedStakePoolList, StakePoolsOrder, diff --git a/source/renderer/app/components/widgets/InView.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx similarity index 100% rename from source/renderer/app/components/widgets/InView.tsx rename to source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx From ca9ea0e50cd57f39c502f1458a8a08f2c251e7b3 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 13 Apr 2022 11:48:05 -0300 Subject: [PATCH 08/10] [DDW-923] Review: Change margin --- .../app/components/staking/stake-pools/StakePoolsTable.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index f5d3fab975..dd8d96ba0f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -94,6 +94,7 @@ .table { border-style: hidden; + margin-bottom: -10px; user-select: text; width: 100%; @@ -101,7 +102,7 @@ background: var(--theme-bordered-box-background-color); border-radius: 4px 4px 0 0; display: block; - margin: -20px -20px 0; + margin: -10px -20px 0; padding: 0 20px; position: sticky; top: 0; From df0f5d6ffa3b7dd0a5501ee829d37668e5d9a933 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 14 Apr 2022 12:07:57 -0300 Subject: [PATCH 09/10] [DDW-923] Review: change border color --- source/renderer/app/themes/daedalus/cardano.ts | 2 +- source/renderer/app/themes/daedalus/dark-blue.ts | 2 +- source/renderer/app/themes/daedalus/dark-cardano.ts | 2 +- source/renderer/app/themes/daedalus/flight-candidate.ts | 2 +- source/renderer/app/themes/daedalus/incentivized-testnet.ts | 2 +- source/renderer/app/themes/daedalus/light-blue.ts | 2 +- source/renderer/app/themes/daedalus/shelley-testnet.ts | 2 +- source/renderer/app/themes/daedalus/white.ts | 2 +- source/renderer/app/themes/daedalus/yellow.ts | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/source/renderer/app/themes/daedalus/cardano.ts b/source/renderer/app/themes/daedalus/cardano.ts index ba3d02ee9a..0387de1a91 100644 --- a/source/renderer/app/themes/daedalus/cardano.ts +++ b/source/renderer/app/themes/daedalus/cardano.ts @@ -896,7 +896,7 @@ export const CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': 'rgba(32, 34, 37, 0.07)', - '--theme-staking-table-border-color': '#d2d3d3', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(28, 172, 99, 1)', '--theme-staking-link-color-light': 'rgba(28, 172, 99, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(32, 34, 37, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-blue.ts b/source/renderer/app/themes/daedalus/dark-blue.ts index 00f43cff9c..fac12d93dd 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.ts +++ b/source/renderer/app/themes/daedalus/dark-blue.ts @@ -900,7 +900,7 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(233, 244, 254, 0.7)', '--theme-staking-font-color-lighter': 'rgba(233, 244, 254, 0.5)', '--theme-staking-table-head-background-color': '#536370', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(233, 244, 254, 0.15)', '--theme-staking-link-color': 'rgba(32, 181, 107, 1)', '--theme-staking-link-color-light': 'rgba(32, 181, 107, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(233, 244, 254, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-cardano.ts b/source/renderer/app/themes/daedalus/dark-cardano.ts index 86bf01adff..946a8837e0 100644 --- a/source/renderer/app/themes/daedalus/dark-cardano.ts +++ b/source/renderer/app/themes/daedalus/dark-cardano.ts @@ -885,7 +885,7 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#1fc1c3', '--theme-staking-link-color-light': 'rgba(31, 193, 195, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/flight-candidate.ts b/source/renderer/app/themes/daedalus/flight-candidate.ts index bed89525e1..ddb94c2a95 100644 --- a/source/renderer/app/themes/daedalus/flight-candidate.ts +++ b/source/renderer/app/themes/daedalus/flight-candidate.ts @@ -883,7 +883,7 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#ffb923', '--theme-staking-link-color-light': 'rgba(255, 185, 35, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.ts b/source/renderer/app/themes/daedalus/incentivized-testnet.ts index 8ce56bef49..0f10dd23b2 100644 --- a/source/renderer/app/themes/daedalus/incentivized-testnet.ts +++ b/source/renderer/app/themes/daedalus/incentivized-testnet.ts @@ -886,7 +886,7 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': 'rgba(246, 154, 178, 1)', '--theme-staking-link-color-light': 'rgba(246, 154, 178, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/light-blue.ts b/source/renderer/app/themes/daedalus/light-blue.ts index 71c3abf722..ecc36039ce 100644 --- a/source/renderer/app/themes/daedalus/light-blue.ts +++ b/source/renderer/app/themes/daedalus/light-blue.ts @@ -892,7 +892,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': '#f1f3f5', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(41, 111, 208, 1)', '--theme-staking-link-color-light': 'rgba(41, 111, 208, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(52, 70, 94, 0.1)', diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.ts b/source/renderer/app/themes/daedalus/shelley-testnet.ts index 4017b6330a..a04ecc862c 100644 --- a/source/renderer/app/themes/daedalus/shelley-testnet.ts +++ b/source/renderer/app/themes/daedalus/shelley-testnet.ts @@ -883,7 +883,7 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#898ee6', '--theme-staking-link-color-light': 'rgba(137, 142, 230, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/white.ts b/source/renderer/app/themes/daedalus/white.ts index 3e63b73bea..5bc117b24c 100644 --- a/source/renderer/app/themes/daedalus/white.ts +++ b/source/renderer/app/themes/daedalus/white.ts @@ -886,7 +886,7 @@ export const WHITE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': '#f9f9f9', - '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.1)', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#29b595', '--theme-staking-link-color-light': 'rgba(41, 181, 149, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(94, 96, 102, 0.07)', diff --git a/source/renderer/app/themes/daedalus/yellow.ts b/source/renderer/app/themes/daedalus/yellow.ts index ea12aa398a..cc66661e19 100644 --- a/source/renderer/app/themes/daedalus/yellow.ts +++ b/source/renderer/app/themes/daedalus/yellow.ts @@ -882,7 +882,7 @@ export const YELLOW_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': 'rgba(45, 45, 45, 0.07)', - '--theme-staking-table-border-color': '#e1dac6', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#d6902f', '--theme-staking-link-color-light': 'rgba(214, 144, 47, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(45, 45, 45, 0.07)', From 401024ad47133ce82c6170d297010d257229d5c4 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Tue, 19 Apr 2022 13:57:26 -0300 Subject: [PATCH 10/10] [DDW-923] Add comment for re callback usage --- .../app/components/staking/stake-pools/hooks/useInViewPort.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx index dca99008e6..17a38b30ef 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx +++ b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx @@ -11,6 +11,8 @@ export const useInViewPort = () => { }) ); + // React will call the ref callback twice. Once when the component mounts, and call it with again when it unmounts. + // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node const setTargetRef = useCallback((target: HTMLElement) => { if (targetRef.current) { observerRef.current.unobserve(targetRef.current);
-
onHandleSort(tableHeader.name)} +export const StakePoolsTableHeader = observer( + ({ + availableTableHeaders, + stakePoolsSortBy, + stakePoolsOrder, + onHandleSort, + onTableHeaderMouseEnter, + onTableHeaderMouseLeave, + }: Props) => { + const { setTargetRef, isInViewport } = useInViewPort(); + + return ( + <> +
+
onHandleSort(tableHeader.name)} + > + {tableHeader.title} + +