import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { palette } from 'styled-tools' ; import SyntaxHighlighter , { registerLanguage } from 'react-syntax-highlighter/prism-light' ; import defaultTheme from './theme' ; import javascript from 'react-syntax-highlighter/languages/prism/javascript' ; import jsx from 'react-syntax-highlighter/languages/prism/jsx' ; import json from 'react-syntax-highlighter/languages/prism/json' ; import { ReakitBoxProps } from '../types' ; import _get from 'lodash/get' ; import { Box } from '../primitives' ; import styled , { css , withTheme } from '../styled' ; import _Code from './Code' ; const Wrapper = styled ( Box ) < HighlightedCodeProps > `
  ${ props => props . showLabel && css `
  position: relative;

  &:before {
    color: ${ palette ( 'text' ) };
    content: '${ ( props ) => props . lang }';
    font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
    font-size: 0.8rem;
    font-weight: bold;
    position: absolute;
    right: 0.5rem;
    top: 0.2rem;
    text-transform: uppercase;
  }
  ` };
` ; export type LocalHighlightedCodeProps = { children : React . ReactNode ; className ? : string ; codeClassName ? : string ; isBlock ? : boolean ; lang : string ; showLabel ? : boolean ; showLineNumbers ? : boolean ; theme ? : Object ; } ; export type HighlightedCodeProps = LocalHighlightedCodeProps & ReakitBoxProps ; export const highlightedCodePropTypes = { children : PropTypes . node . isRequired , className : PropTypes . string , codeClassName : PropTypes . string , isBlock : PropTypes . bool , lang : PropTypes . string . isRequired , showLabel : PropTypes . bool , showLineNumbers : PropTypes . bool } ; export const highlightedCodeDefaultProps = { className : undefined , codeClassName : undefined , isBlock : false , showLabel : false , showLineNumbers : false , theme : { } } ; export class HighlightedCode extends React . PureComponent < LocalHighlightedCodeProps > { static propTypes = highlightedCodePropTypes ; static defaultProps = highlightedCodeDefaultProps ; componentDidMount = ( ) => { registerLanguage ( 'javascript' , javascript ) ; registerLanguage ( 'jsx' , jsx ) ; registerLanguage ( 'json' , json ) ; } ; render = ( ) => { const { children , className , codeClassName , isBlock , lang , showLineNumbers , theme , ... props } = this . props ; const style = defaultTheme ( { palette : _get ( theme , 'fannypack.palette' ) } ) ; return ( < Wrapper lang = { lang } { ... props } > < SyntaxHighlighter className = { className } codeClassName = { codeClassName } block = { isBlock } language = { lang } showLineNumbers = { showLineNumbers } style = { style } PreTag = { _Code } wrapLines > { children } < /SyntaxHighlighter> < /Wrapper>); } ; } const C = withTheme ( HighlightedCode ) ; export default C ;