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:
committed by
Facebook GitHub Bot
parent
23102b1997
commit
368dd4a5ab
@@ -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,
|
||||
|
||||
@@ -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 />;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user