d903a862d2
Summary: Changelog: Standardized DataList component This diff standardizes the DataList component, by reusing the DataList. This is done to be able to take full advantage of all its features like virtualisation, keyboard support, datasource support, etc. Also cleaned up DataTable properties a bit, by prefixing all flags with `enableXXX` and setting clear defaults Reviewed By: passy Differential Revision: D28119721 fbshipit-source-id: b7b241ea18d788bfa035389cc8c6ae7ea95ecadb
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}
|
|
enableSearchbar={false}
|
|
/>
|
|
<DataTable<{[key: string]: Value}>
|
|
records={indexRowObjs}
|
|
columns={indexColumnObjs}
|
|
enableSearchbar={false}
|
|
/>
|
|
</Layout.Top>
|
|
);
|
|
});
|