@ -15,6 +15,8 @@ const toIFrame = url =>
< / i f r a m e >
< / i f r a m e >
`
`
const toURL = url => encodeURI ( ` https://carbon.now.sh/embed ${ url } ` )
const MAX _PAYLOAD _SIZE = 5e6 // bytes
const MAX _PAYLOAD _SIZE = 5e6 // bytes
function verifyPayloadSize ( str ) {
function verifyPayloadSize ( str ) {
if ( typeof str !== 'string' ) return true
if ( typeof str !== 'string' ) return true
@ -22,20 +24,23 @@ function verifyPayloadSize(str) {
return new Blob ( [ str ] ) . size < MAX _PAYLOAD _SIZE
return new Blob ( [ str ] ) . size < MAX _PAYLOAD _SIZE
}
}
const CopyEmbed = withRouter (
const CopyEmbed = withRouter ( ( { router : { asPath } , mapper , title , margin } ) => {
React . memo (
const text = React . useMemo ( ( ) => mapper ( asPath ) , [ mapper , asPath ] )
( { router : { asPath } } ) => {
const { onClick , copied } = useCopyTextHandler ( text )
const { onClick , copied } = useCopyTextHandler ( toIFrame ( asPath ) )
return (
return (
< Button
< Button onClick = { onClick } center color = { COLORS . PURPLE } padding = "12px 16px" flex = "1 0 68px" >
onClick = { onClick }
{ copied ? 'Copied!' : 'Copy Embed' }
center
< / B u t t o n >
hoverColor = { COLORS . PURPLE }
)
color = { COLORS . DARK _PURPLE }
} ,
margin = { margin }
( prevProps , nextProps ) => prevProps . router . asPath === nextProps . router . asPath
style = { { minWidth : 48 } }
>
{ copied ? 'Copied!' : title }
< / B u t t o n >
)
)
)
} )
const popoutStyle = { width : '280px' , right : 0 }
const popoutStyle = { width : '280px' , right : 0 }
@ -102,7 +107,13 @@ class ExportMenu extends React.PureComponent {
< Button center color = { COLORS . PURPLE } onClick = { this . handleExport ( 'open' ) } >
< Button center color = { COLORS . PURPLE } onClick = { this . handleExport ( 'open' ) } >
Open
Open
< / B u t t o n >
< / B u t t o n >
< CopyEmbed / >
< div className = "save-container" >
< span > Copy embed < / s p a n >
< div >
< CopyEmbed title = "URL" mapper = { toURL } margin = "0 4px 0 0" / >
< CopyEmbed title = "IFrame" mapper = { toIFrame } margin = "0 0 0 4px" / >
< / d i v >
< / d i v >
< div className = "save-container" >
< div className = "save-container" >
< span > Save as < / s p a n >
< span > Save as < / s p a n >
< div >
< div >
@ -175,6 +186,11 @@ class ExportMenu extends React.PureComponent {
display : flex ;
display : flex ;
flex : 1 ;
flex : 1 ;
}
}
. save - container : first - of - type {
padding : 12 px 12 px ;
border - right : 1 px solid $ { COLORS . PURPLE } ;
}
` }
` }
< / s t y l e >
< / s t y l e >
< / d i v >
< / d i v >