fd84820ee5
Summary: Large GraphQL responses feel pretty unwieldy, added a search option. Added filter functionality to ManagedDataInspector, and use it in GraphQL changelog: It is now possible to search inside GraphQL responses making it slightly more efficient, and scrolling to the matches will be done in a next diff Reviewed By: jknoxville Differential Revision: D21347880 fbshipit-source-id: 85c95be0964515e737de2ab41bbdd8cc6a87544e
37 lines
852 B
TypeScript
37 lines
852 B
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 styled from '@emotion/styled';
|
|
import {colors} from '../colors';
|
|
import React from 'react';
|
|
|
|
const Highlighted = styled.span({
|
|
backgroundColor: colors.lemon,
|
|
});
|
|
|
|
export const Highlight: React.FC<{text: string; highlight?: string}> = ({
|
|
text,
|
|
highlight,
|
|
}) => {
|
|
if (!highlight) {
|
|
return <span>{text}</span>;
|
|
}
|
|
const index = text.toLowerCase().indexOf(highlight.toLowerCase());
|
|
if (index === -1) {
|
|
return <span>{text}</span>;
|
|
}
|
|
return (
|
|
<span>
|
|
{text.substr(0, index)}
|
|
<Highlighted>{text.substr(index, highlight.length)}</Highlighted>
|
|
{text.substr(index + highlight.length)}
|
|
</span>
|
|
);
|
|
};
|