368dd4a5ab
Summary: Moving Value/renderValue API to "database" plugin as these APIs used exclusively by this plugin. Alternative to that could be moving this API to "flipper-plugin" instead, but I think it doesn't make sense to expose public API which is only used in one plugin. Reviewed By: mweststrate Differential Revision: D28110483 fbshipit-source-id: 1576444681c1e0531fe45f0c15f442d65a28f803
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {Value, renderValue} from './TypeBasedValueRenderer';
|
|
import {DataTable, DataTableColumn, Layout, useMemoize} from 'flipper-plugin';
|
|
import React from 'react';
|
|
import {Structure} from './index';
|
|
|
|
function createRows(
|
|
columns: string[],
|
|
rows: Value[][],
|
|
): {[key: string]: Value}[] {
|
|
return rows.map((values) =>
|
|
values.reduce((acc: {[key: string]: Value}, cur: Value, i: number) => {
|
|
acc[columns[i]] = cur;
|
|
return acc;
|
|
}, {}),
|
|
);
|
|
}
|
|
|
|
function createColumnConfig(columns: string[]) {
|
|
const columnObjs: DataTableColumn<{[key: string]: Value}>[] = columns.map(
|
|
(c) => ({
|
|
key: c,
|
|
title: c,
|
|
onRender(row) {
|
|
return renderValue(row[c]);
|
|
},
|
|
}),
|
|
);
|
|
return columnObjs;
|
|
}
|
|
|
|
export default React.memo((props: {structure: Structure}) => {
|
|
const {structure} = props;
|
|
const {columns, rows, indexesColumns, indexesValues} = structure;
|
|
const rowObjs = useMemoize(
|
|
(columns: string[], rows: Value[][]) => createRows(columns, rows),
|
|
[columns, rows],
|
|
);
|
|
const columnObjs = useMemoize(
|
|
(columns: string[]) => createColumnConfig(columns),
|
|
[columns],
|
|
);
|
|
const indexRowObjs = useMemoize(
|
|
(indexesColumns: string[], indexesValues: Value[][]) =>
|
|
createRows(indexesColumns, indexesValues),
|
|
[indexesColumns, indexesValues],
|
|
);
|
|
const indexColumnObjs = useMemoize(
|
|
(indexesColumns: string[]) => createColumnConfig(indexesColumns),
|
|
[indexesColumns],
|
|
);
|
|
|
|
return (
|
|
<Layout.Top resizable height={400}>
|
|
<DataTable<{[key: string]: Value}>
|
|
records={rowObjs}
|
|
columns={columnObjs}
|
|
searchbar={false}
|
|
/>
|
|
<DataTable<{[key: string]: Value}>
|
|
records={indexRowObjs}
|
|
columns={indexColumnObjs}
|
|
searchbar={false}
|
|
/>
|
|
</Layout.Top>
|
|
);
|
|
});
|