From bfd7672d07c4b74bc1e7e74de7a78332411dd814 Mon Sep 17 00:00:00 2001 From: majakomel Date: Mon, 19 Feb 2024 14:12:29 +0100 Subject: [PATCH] Fix react-table --- components/aggregation/mat/Filters.js | 25 +++++++++++++------------ package.json | 1 + yarn.lock | 2 +- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/aggregation/mat/Filters.js b/components/aggregation/mat/Filters.js index 6deadcd9..9c973d68 100644 --- a/components/aggregation/mat/Filters.js +++ b/components/aggregation/mat/Filters.js @@ -1,9 +1,10 @@ -import React, { useCallback, useEffect, useMemo, useRef } from 'react' -import { useTable, useFlexLayout, useRowSelect, useSortBy, useGlobalFilter, useAsyncDebounce } from 'react-table' +import { Box, Button, Flex, Text } from 'ooni-components' +import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { FormattedMessage, useIntl } from 'react-intl' +import { useAsyncDebounce, useFlexLayout, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table' import { useVirtual } from 'react-virtual' +import 'regenerator-runtime' import styled from 'styled-components' -import { Flex, Box, Button, Text } from 'ooni-components' import { DetailsBox } from '../../measurement/DetailsBox' import { sortRows } from './computations' @@ -53,12 +54,12 @@ const TableBody = styled.div` overflow: auto; ` -const IndeterminateCheckbox = React.forwardRef( +const IndeterminateCheckbox = forwardRef( ({ indeterminate, ...rest }, ref) => { - const defaultRef = React.useRef() + const defaultRef = useRef() const resolvedRef = ref || defaultRef - React.useEffect(() => { + useEffect(() => { resolvedRef.current.indeterminate = indeterminate }, [resolvedRef, indeterminate]) @@ -104,7 +105,7 @@ function GlobalFilter({ }) { const intl = useIntl() const count = preGlobalFilteredRows.length - const [value, setValue] = React.useState(globalFilter) + const [value, setValue] = useState(globalFilter) const onChange = useAsyncDebounce(value => { setGlobalFilter(value || '') }, 200) @@ -150,7 +151,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => { const resetTableRef = useRef(false) const yAxis = query.axis_y - const defaultColumn = React.useMemo( + const defaultColumn = useMemo( () => ({ // When using the useFlexLayout: width: 70, // width is used for both the flex-basis and flex-grow @@ -164,12 +165,12 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => { ) // Aggregate by the first column - const initialState = React.useMemo(() => ({ + const initialState = useMemo(() => ({ hiddenColumns: ['yAxisCode'], sortBy: [{ id: 'yAxisLabel', desc: false }] }),[]) - const getRowId = React.useCallback(row => row[query.axis_y], [query.axis_y]) + const getRowId = useCallback(row => row[query.axis_y], [query.axis_y]) const columns = useMemo(() => [ { @@ -320,13 +321,13 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => { } }, [state.globalFilter, toggleAllRowsSelected]) - const parentRef = React.useRef() + const parentRef = useRef() const { virtualItems: virtualRows, totalSize } = useVirtual({ size: rows.length, parentRef, overscan: 10, - estimateSize: React.useCallback(() => 35, []), + estimateSize: useCallback(() => 35, []), }) return ( diff --git a/package.json b/package.json index 1d4776c8..700467c9 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "react-virtual": "^2.10.4", "react-virtualized": "^9.22.5", "react-window": "^1.8.10", + "regenerator-runtime": "^0.14.1", "styled-components": "^6.1.8", "swr": "^2.2.4", "use-clipboard-copy": "^0.2.0", diff --git a/yarn.lock b/yarn.lock index 95c76c77..7b1831f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6327,7 +6327,7 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.14.0: +regenerator-runtime@^0.14.0, regenerator-runtime@^0.14.1: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==