9ae0511f16
Summary: As suggested in the previous diff, I change the way to store row values. Now, (kinda) raw values are stored instead of processed values that can be used directly for `ManagedTable`. This simplifies logic in detail sidebar. I'm not sure what the effect to performance. Reviewed By: mweststrate Differential Revision: D21621896 fbshipit-source-id: 472be3caa955ca32f876f81095af21e9c17cb159
98 lines
2.0 KiB
TypeScript
98 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 React, {useMemo} from 'react';
|
|
import {
|
|
Text,
|
|
DetailSidebar,
|
|
Panel,
|
|
ManagedTable,
|
|
TableRows,
|
|
TableBodyRow,
|
|
ManagedDataInspector,
|
|
Value,
|
|
renderValue,
|
|
} from 'flipper';
|
|
|
|
type DatabaseDetailSidebarProps = {
|
|
columnLabels: Array<string>;
|
|
columnValues: Array<Value>;
|
|
};
|
|
|
|
function sidebarRows(labels: Array<string>, values: Array<Value>): TableRows {
|
|
return labels.map((label, idx) => buildSidebarRow(label, values[idx]));
|
|
}
|
|
|
|
function buildSidebarRow(key: string, val: Value): TableBodyRow {
|
|
let output = renderValue(val, true);
|
|
// TODO(T60896483): Narrow the scope of this try/catch block.
|
|
if (val.type === 'string') {
|
|
try {
|
|
const parsed = JSON.parse(val.value);
|
|
output = (
|
|
<ManagedDataInspector data={parsed} expandRoot={false} collapsed />
|
|
);
|
|
} catch (_error) {}
|
|
}
|
|
return {
|
|
columns: {
|
|
col: {value: <Text>{key}</Text>},
|
|
val: {
|
|
value: output,
|
|
},
|
|
},
|
|
key: key,
|
|
};
|
|
}
|
|
|
|
const cols = {
|
|
col: {
|
|
value: 'Column',
|
|
resizable: true,
|
|
},
|
|
val: {
|
|
value: 'Value',
|
|
resizable: true,
|
|
},
|
|
};
|
|
const colSizes = {
|
|
col: '35%',
|
|
val: 'flex',
|
|
};
|
|
|
|
export default React.memo(function DatabaseDetailSidebar(
|
|
props: DatabaseDetailSidebarProps,
|
|
) {
|
|
const {columnLabels, columnValues} = props;
|
|
const rows = useMemo(() => sidebarRows(columnLabels, columnValues), [
|
|
columnLabels,
|
|
columnValues,
|
|
]);
|
|
return (
|
|
<DetailSidebar>
|
|
<Panel
|
|
heading="Row details"
|
|
floating={false}
|
|
collapsable={true}
|
|
padded={false}>
|
|
<ManagedTable
|
|
highlightableRows={false}
|
|
columnSizes={colSizes}
|
|
multiline={true}
|
|
columns={cols}
|
|
autoHeight={true}
|
|
floating={false}
|
|
zebra={false}
|
|
rows={rows}
|
|
/>
|
|
</Panel>
|
|
</DetailSidebar>
|
|
);
|
|
});
|