mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-13 01:54:52 +08:00
Migrate data_grid_controller examples to TypeScript
Bug: chromium:1144106 Change-Id: Id5cbfd901d97013b0de5674ed557830967872e1d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2612862 Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Auto-Submit: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
This commit is contained in:
Jack Franklin
committed by
Commit Bot
Commit Bot
parent
4c477e8779
commit
021bc2ce45
@@ -3,6 +3,22 @@
|
||||
# found in the LICENSE file.
|
||||
|
||||
import("../../../scripts/build/ninja/copy.gni")
|
||||
import("../../../third_party/typescript/typescript.gni")
|
||||
|
||||
ts_library("ts") {
|
||||
sources = [
|
||||
"basic.ts",
|
||||
"custom-context-menu-items.ts",
|
||||
"filter.ts",
|
||||
]
|
||||
|
||||
deps = [
|
||||
"../../../test/unittests/front_end/helpers",
|
||||
"../../component_helpers:bundle",
|
||||
"../../text_utils:bundle",
|
||||
"../../ui/components:bundle",
|
||||
]
|
||||
}
|
||||
|
||||
copy_to_gen("data_grid_controller") {
|
||||
sources = [
|
||||
@@ -11,9 +27,5 @@ copy_to_gen("data_grid_controller") {
|
||||
"filter.html",
|
||||
]
|
||||
|
||||
deps = [
|
||||
"../../component_helpers:bundle",
|
||||
"../../text_utils:bundle",
|
||||
"../../ui/components:bundle",
|
||||
]
|
||||
deps = [ ":ts" ]
|
||||
}
|
||||
|
||||
@@ -23,34 +23,6 @@
|
||||
<div id="container">
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
|
||||
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
|
||||
EnvironmentHelpers.initializeGlobalVars().then(() => {
|
||||
return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
|
||||
})
|
||||
|
||||
const renderComponent = () => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{ id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
|
||||
{ id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: true, sortable: true },
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'Letter B'}] },
|
||||
{cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'Letter A'}] },
|
||||
{cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'Letter C'}] },
|
||||
],
|
||||
}
|
||||
|
||||
document.getElementById('container').appendChild(component)
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="module" src="./basic.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
// 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 EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
|
||||
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
|
||||
EnvironmentHelpers.initializeGlobalVars().then(() => {
|
||||
return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
|
||||
});
|
||||
|
||||
const renderComponent = (): void => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
|
||||
{id: 'value', title: 'Value', sortable: true, widthWeighting: 1, visible: true, hideable: true},
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{cells: [{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'Letter B'}]},
|
||||
{cells: [{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'Letter A'}]},
|
||||
{cells: [{columnId: 'key', value: 'Charlie', title: 'Charlie'}, {columnId: 'value', value: 'Letter C'}]},
|
||||
],
|
||||
};
|
||||
|
||||
document.getElementById('container')?.appendChild(component);
|
||||
};
|
||||
@@ -23,41 +23,6 @@
|
||||
<div id="container">
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
|
||||
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
|
||||
EnvironmentHelpers.initializeGlobalVars().then(() => {
|
||||
return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
|
||||
})
|
||||
|
||||
const renderComponent = () => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{ id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
|
||||
{ id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: true, sortable: true },
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'Letter B'}] },
|
||||
{cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'Letter A'}] },
|
||||
{cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'Letter C'}] },
|
||||
],
|
||||
contextMenus: {
|
||||
bodyRow: (menu, columns, selectedRow) => {
|
||||
menu.defaultSection().appendItem('Hello World', () => {
|
||||
alert('You clicked!')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('container').appendChild(component)
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="module" src="./custom-context-menu-items.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
// 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 EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
|
||||
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
|
||||
EnvironmentHelpers.initializeGlobalVars().then(() => {
|
||||
return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
|
||||
});
|
||||
|
||||
const renderComponent = (): void => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
|
||||
{id: 'value', title: 'Value', sortable: true, widthWeighting: 1, visible: true, hideable: true},
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{cells: [{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'Letter B'}]},
|
||||
{cells: [{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'Letter A'}]},
|
||||
{cells: [{columnId: 'key', value: 'Charlie', title: 'Charlie'}, {columnId: 'value', value: 'Letter C'}]},
|
||||
],
|
||||
contextMenus: {
|
||||
bodyRow: (menu): void => {
|
||||
menu.defaultSection().appendItem('Hello World', () => {
|
||||
alert('You clicked!');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
document.getElementById('container')?.appendChild(component);
|
||||
};
|
||||
@@ -30,44 +30,6 @@
|
||||
<input type="text" placeholder="filter text" />
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
import * as TextUtils from '../../text_utils/text_utils.js';
|
||||
|
||||
ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
|
||||
|
||||
const renderComponent = () => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
const filterParser = new TextUtils.TextUtils.FilterParser(['key', 'value'])
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{ id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false },
|
||||
{ id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: false },
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'foobar', title: 'foobar'}]},
|
||||
{cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'bazbar', title: 'bazbar'}]},
|
||||
{cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'bazbar', title: 'bazbar'}]},
|
||||
]
|
||||
}
|
||||
|
||||
document.getElementById('container').appendChild(component)
|
||||
|
||||
const filterTextInput = document.querySelector('input');
|
||||
filterTextInput.addEventListener('input', event => {
|
||||
const newText = event.target.value;
|
||||
const filters = filterParser.parse(newText);
|
||||
component.data = {
|
||||
...component.data,
|
||||
filters: filters
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="module" src="./filter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
// 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 ComponentHelpers from '../../component_helpers/component_helpers.js';
|
||||
import * as TextUtils from '../../text_utils/text_utils.js';
|
||||
import * as Components from '../../ui/components/components.js';
|
||||
|
||||
ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
|
||||
|
||||
const renderComponent = (): void => {
|
||||
const component = new Components.DataGridController.DataGridController();
|
||||
|
||||
const filterParser = new TextUtils.TextUtils.FilterParser(['key', 'value']);
|
||||
|
||||
component.data = {
|
||||
columns: [
|
||||
{id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
|
||||
{id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: false},
|
||||
],
|
||||
rows: [
|
||||
// Each key is the ID of a column, and the value is the value for that column
|
||||
{
|
||||
cells:
|
||||
[{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'foobar', title: 'foobar'}],
|
||||
},
|
||||
{
|
||||
cells:
|
||||
[{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'bazbar', title: 'bazbar'}],
|
||||
},
|
||||
{
|
||||
cells: [
|
||||
{columnId: 'key', value: 'Charlie', title: 'Charlie'},
|
||||
{columnId: 'value', value: 'bazbar', title: 'bazbar'},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
document.getElementById('container')?.appendChild(component);
|
||||
|
||||
const filterTextInput = document.querySelector('input');
|
||||
filterTextInput?.addEventListener('input', event => {
|
||||
const newText = (event.target as HTMLInputElement).value;
|
||||
const filters = filterParser.parse(newText);
|
||||
component.data = {
|
||||
...component.data,
|
||||
filters: filters,
|
||||
};
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user