import * as React from 'react' ; import CopyButton from '../CopyButton' ; import { $v } from 'graphcool-styles' ; import Icon from 'graphcool-styles/dist/components/Icon/Icon' ; import { extractGroup } from '../../utils/graphql' ; interface Props { children ? : JSX . Element ; path ? : string ; className ? : string ; nocopy ? : string ; } function getGithubLink ( group , path ? ) { if ( ! path ) { return '' ; } const trimmedPath = path . replace ( /^[\.\/]*/g , '' ) ; const firstSlash = trimmedPath . indexOf ( '/' ) ; const normalizedPath = trimmedPath . slice ( firstSlash + 1 , trimmedPath . length ) ; return `https://github.com/howtographql/${ group }/blob/master/${ normalizedPath }` ; } export default function Pre ( { children , path , className , nocopy , ... rest , } ) { const isBash = className ? className . includes ( 'bash' ) : false ; const group = extractGroup ( location . pathname ) ; const showCopy = nocopy ? ! ( nocopy === 'true' ) : true ; const link = getGithubLink ( group , path ) ; return ( < div className = "pre-container" > < style jsx = { true } > { `
        .pre-container {
          @p: .mt16, .relative, .mb38;
        }
        pre {
          @p: .bDarkBlue10, .ba, .br2, .pa16, .bgDarkBlue04, .overflowAuto;
        }
        pre :global(code) {
          @p: .mono;
          font-size: 13px;
          font-weight: 500;
        }
        .copy-button {
          @p: .absolute, .right0, .bottom0, .pa10, .z999, .pointer;
        }
        .copy-button :global(svg) {
          transition: $duration fill;
        }
        .copy-button:hover :global(svg) {
          fill: $gray60 !important;
        }
        .path {
          @p: .flex, .itemsCenter;
        }
        .path span {
          @p: .black40, .fw6, .f12;
        }
        .path-sh {
          @p: .mono, .flex, .itemsCenter;
        }
        .path-sh svg {
          @p: .mr6;
          margin-left: 2px;
        }
        .path :global(i) {
          @p: .mr6;
        }
      ` } < /style> { path && < a className = "path" href = { link } target = "_blank" > { isBash ? < span className = "path-sh" > < span > $ < /span> < svg width = "4" height = "12" viewBox = "0 0 4 12" xmlns = "http://www.w3.org/2000/svg" fill = "rgba(0,0,0,0.2)" > < rect x = "0" y = "0" width = "4" height = "12" / > < /svg> < /span> : < Icon src = { require ( 'graphcool-styles/icons/fill/github.svg' ) } color = { $v . gray30 } width = { 14 } height = { 14 } / > } < span > { path } < /span> < /a>} < pre className = { className } { ... rest } > { children } { showCopy && < span className = "copy-button" > < CopyButton text = { childrenToString ( children ) } /> < /span>} < /pre> < /div>); } export function childrenToString ( children ) { if ( typeof children === 'string' ) { return children ; } if ( typeof children === 'undefined' ) { return '' ; } return children . map ( el => { if ( typeof el === 'string' ) { return el ; } { return childrenToString ( el . props . children ) ; } } ) . join ( '' ) ; }