Files
create-react-app/packages/react-error-overlay/src/components/CodeBlock.js
Tharaka Wijebandara ecd1f0544b Convert react-error-overlay to React (#2515)
* Convert react-error-overlay to React

* Update compile-time error overlay to use react-error-overlay components

 * Refactor react-error-overlay components to container and presentational components.

 * Make the compile-time error overlay a part of react-error-overlay package.

 * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.

* Run Prettier

* Move the function name fix into StackFrame itself

* Fix clicking on source code snippet to open the code in editor

* Use exact objects + minor style tweak

* Don't linkify frames that don't exist on the disk

* Fix lint

* Consolidate iframe rendering logic

* Remove circular dependency between react-dev-utils and react-error-overlay

* Fix lint

* Fix decoupling of react-dev-utils and react-error-overlay by moving middleware

* Deduplicate identical errors
2017-08-27 19:45:55 -06:00

55 lines
1.2 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
/* @flow */
import React from 'react';
import { redTransparent, yellowTransparent } from '../styles';
const _preStyle = {
display: 'block',
padding: '0.5em',
marginTop: '0.5em',
marginBottom: '0.5em',
overflowX: 'auto',
whiteSpace: 'pre-wrap',
borderRadius: '0.25rem',
};
const primaryPreStyle = {
..._preStyle,
backgroundColor: redTransparent,
};
const secondaryPreStyle = {
..._preStyle,
backgroundColor: yellowTransparent,
};
const codeStyle = {
fontFamily: 'Consolas, Menlo, monospace',
};
type CodeBlockPropsType = {|
main: boolean,
codeHTML: string,
|};
function CodeBlock(props: CodeBlockPropsType) {
const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
const codeBlock = { __html: props.codeHTML };
return (
<pre style={preStyle}>
<code style={codeStyle} dangerouslySetInnerHTML={codeBlock} />
</pre>
);
}
export default CodeBlock;