mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-31 18:33:25 +08:00
Jack Franklin
9ce08209bf
This CL contains improvements to the auto scroll logic which means we can correctly resume scrolling when the user has prevented it (e.g. by selecting a cell) but then scrolled down to the end of the table. It also includes a suite of interaction tests to verify the behaviour and edge cases. Bug: 1211346 Change-Id: Ic0905aaf2bc35dcf20d1c74dab19fb7e9eacedd5 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2914884 Reviewed-by: Paul Lewis <aerotwist@chromium.org> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
// Copyright 2020 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as DataGrid from '../../data_grid/data_grid.js';
|
|
import * as ComponentHelpers from '../../helpers/helpers.js';
|
|
|
|
await ComponentHelpers.ComponentServerSetup.setup();
|
|
|
|
const component = new DataGrid.DataGrid.DataGrid();
|
|
|
|
component.data = {
|
|
columns: [
|
|
{id: 'key', title: 'Key', widthWeighting: 1, visible: true, hideable: false},
|
|
{id: 'value', title: 'Value', widthWeighting: 1, visible: true, hideable: false},
|
|
],
|
|
rows: Array.from(
|
|
{length: 10},
|
|
() => {
|
|
return getRandomRow();
|
|
}),
|
|
activeSort: null,
|
|
};
|
|
|
|
document.getElementById('container')?.appendChild(component);
|
|
|
|
function getRandomRow() {
|
|
const key = Math.floor(Math.random() * 10);
|
|
const value = Math.floor(Math.random() * 10);
|
|
const randomDataRow = {
|
|
cells: [
|
|
{columnId: 'key', value: `Key: ${key}`, title: `Key: ${key}`},
|
|
{columnId: 'value', value: `Value: ${value}`, title: `Value: ${value}`},
|
|
],
|
|
};
|
|
return randomDataRow;
|
|
}
|
|
|
|
/**
|
|
* Set so we can call this from an interaction test to emulate the user
|
|
* interacting with the data grid whilst something is populating the grid with
|
|
* new data - e.g. like the protocol monitor.
|
|
*/
|
|
// @ts-expect-error
|
|
window.addNewRow = function() {
|
|
addNewRow();
|
|
};
|
|
|
|
function addNewRow() {
|
|
const newRow = getRandomRow();
|
|
|
|
component.data = {
|
|
...component.data,
|
|
rows: [...component.data.rows, newRow],
|
|
};
|
|
}
|
|
|
|
document.querySelector('#add')?.addEventListener('click', (event: Event) => {
|
|
event.preventDefault();
|
|
addNewRow();
|
|
});
|