Remove Value/renderValue public API from "flipper"

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
This commit is contained in:
Anton Nikolaev
2021-04-30 09:36:51 -07:00
committed by Facebook GitHub Bot
parent 23102b1997
commit 368dd4a5ab
11 changed files with 18 additions and 24 deletions

View File

@@ -87,11 +87,6 @@ export {
default as ManagedTable_immutable,
ManagedTableProps_immutable,
} from './ui/components/table/ManagedTable_immutable';
export {
Value,
renderValue,
valueToNullableString,
} from './ui/components/table/TypeBasedValueRenderer';
export {
DataValueExtractor,
DataInspectorExpanded,

View File

@@ -1,88 +0,0 @@
/**
* 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 {default as styled} from '@emotion/styled';
import {colors} from '../colors';
import {default as Text} from '../Text';
import React from 'react';
export type Value =
| {
type: 'string' | 'blob';
value: string;
}
| {
type: 'boolean';
value: boolean;
}
| {
type: 'integer' | 'float' | 'double' | 'number';
value: number;
}
| {
type: 'null';
value: null;
};
const WrappingText = styled(Text)({
wordWrap: 'break-word',
width: '100%',
lineHeight: '125%',
padding: '3px 0',
});
WrappingText.displayName = 'TypeBasedValueRenderer:WrappingText';
const NonWrappingText = styled(Text)({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});
NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
const BooleanValue = styled(NonWrappingText)<{active?: boolean}>((props) => ({
'&::before': {
content: '""',
display: 'inline-block',
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: props.active ? colors.green : colors.red,
marginRight: 5,
marginTop: 1,
},
}));
BooleanValue.displayName = 'TypeBasedValueRenderer:BooleanValue';
export function valueToNullableString(val: Value): string | null {
return val.value?.toString() ?? null;
}
export function renderValue(val: Value, wordWrap?: boolean) {
const TextComponent = wordWrap ? WrappingText : NonWrappingText;
switch (val.type) {
case 'boolean':
return (
<BooleanValue code={true} active={val.value}>
{val.value.toString()}
</BooleanValue>
);
case 'blob':
case 'string':
return <TextComponent>{val.value}</TextComponent>;
case 'integer':
case 'float':
case 'double':
case 'number':
return <TextComponent>{val.value}</TextComponent>;
case 'null':
return <TextComponent>NULL</TextComponent>;
default:
return <TextComponent />;
}
}

View File

@@ -1,53 +0,0 @@
/**
* 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 {render} from '@testing-library/react';
import {
Value,
valueToNullableString,
renderValue,
} from '../TypeBasedValueRenderer';
test('valueToNullableString', () => {
const testcases: Array<{input: Value; output: string | null}> = [
{
input: {type: 'string', value: 'this is a string'},
output: 'this is a string',
},
{input: {type: 'boolean', value: true}, output: 'true'},
{input: {type: 'boolean', value: false}, output: 'false'},
{input: {type: 'integer', value: 1337}, output: '1337'},
{input: {type: 'float', value: 13.37}, output: '13.37'},
{input: {type: 'null', value: null}, output: null},
];
for (const testcase of testcases) {
expect(valueToNullableString(testcase.input)).toEqual(testcase.output);
}
});
test('renderValue', () => {
const testcases: Array<{input: Value; queryString: string}> = [
{
input: {type: 'string', value: 'this is a string'},
queryString: 'this is a string',
},
{input: {type: 'boolean', value: true}, queryString: 'true'},
{input: {type: 'boolean', value: false}, queryString: 'false'},
{input: {type: 'integer', value: 1337}, queryString: '1337'},
{input: {type: 'float', value: 13.37}, queryString: '13.37'},
{input: {type: 'null', value: null}, queryString: 'NULL'},
];
const res = render(renderValue(testcases[0].input));
for (const testcase of testcases) {
res.rerender(renderValue(testcase.input));
expect(res.queryAllByText(testcase.queryString).length).toBeGreaterThan(0);
}
});

View File

@@ -40,9 +40,6 @@ export {ManagedTableProps} from './components/table/ManagedTable';
export {default as ManagedTable_immutable} from './components/table/ManagedTable_immutable';
export {ManagedTableProps_immutable} from './components/table/ManagedTable_immutable';
export {Value} from './components/table/TypeBasedValueRenderer';
export {renderValue} from './components/table/TypeBasedValueRenderer';
export {DataValueExtractor, DataInspectorExpanded} from 'flipper-plugin';
export {DataInspector as ManagedDataInspector} from 'flipper-plugin';
export {default as SearchableDataInspector} from './components/data-inspector/SearchableDataInspector';