import React , { useRef } from 'react' ; import { CodeSandboxOutlined , } from '@ant-design/icons' ; import LZString from 'lz-string' ; import { Tooltip } from 'antd' ; import { FormattedMessage , injectIntl } from 'react-intl' ; function compress ( string ) { return LZString . compressToBase64 ( string ) . replace ( /\+/g , '-' ) . replace ( /\//g , '_' ) . replace ( /=+$/ , '' ) ; } function CodeSandbox ( props ) { const iconRef = useRef ( null ) ; const indexJsContent = `import './index.css';
  ${ props . sourceCode }
  ` ; const dependencies = { } ; Object . keys ( props . packages ) . forEach ( p => { dependencies [ p ] = props . packages [ p ] . version ; } ) ; const codesandboxPackage = { title : `${ props . name } - ${ props . engineName }@${ props . version }` , main : 'index.ts' , dependencies , devDependencies : { typescript : '^4.0.5' , } , scripts : { } , browserslist : [ '>0.2%' , 'not dead' , 'not ie <= 11' , 'not op_mini all' ] , } ; const codesanboxPrefillConfig = { files : { 'package.json' : { content : codesandboxPackage } , 'index.css' : { content : props . css } , 'index.ts' : { content : indexJsContent } , 'index.html' : { content : props . html , } , } , } ; return ( < div className = "code-box-action" > < form className = "code-box-code-action" action = "https://codesandbox.io/api/v1/sandboxes/define" method = "POST" target = "_blank" ref = { iconRef } onClick = { ( ) => { iconRef . current . submit ( ) ; } } > < input type = "hidden" name = "parameters" value = { compress ( JSON . stringify ( codesanboxPrefillConfig ) ) } / > < Tooltip title = { < FormattedMessage id = "app.demo.codesandbox" / > } > < CodeSandboxOutlined /> < /Tooltip> < /form> < /div>); } export default injectIntl ( CodeSandbox ) ;