import React from 'react' import { withRouter } from 'next/router' import { useCopyTextHandler, useOnline } from '@dawnlabs/tacklebox' import { COLORS, EXPORT_SIZES } from '../lib/constants' import Button from './Button' import Input from './Input' import Popout, { managePopout } from './Popout' const toIFrame = url => ` ` const toURL = url => encodeURI(`https://carbon.now.sh/embed${url}`) const MAX_PAYLOAD_SIZE = 5e6 // bytes function verifyPayloadSize(str) { if (typeof str !== 'string') return true return new Blob([str]).size < MAX_PAYLOAD_SIZE } const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) => { const text = React.useMemo(() => mapper(asPath), [mapper, asPath]) const { onClick, copied } = useCopyTextHandler(text) return ( ) }) const popoutStyle = { width: '280px', right: 0 } class ExportMenu extends React.PureComponent { input = React.createRef() handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value) handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize) handleExport = format => () => this.props.export(format, { filename: this.input.current.value }) render() { const { exportSize, isVisible, toggleVisibility, disablePNG } = this.props return (
) } } export default managePopout(function({ backgroundImage, ...props }) { const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage]) const online = useOnline() const [isSafari, setSafari] = React.useState(false) React.useEffect(() => { setSafari( window.navigator && window.navigator.userAgent.indexOf('Safari') !== -1 && window.navigator.userAgent.indexOf('Chrome') === -1 ) }, []) const disablePNG = isSafari && (tooLarge || !online) return })