|
|
@ -1,6 +1,5 @@
|
|
|
|
import React from 'react'
|
|
|
|
import React from 'react'
|
|
|
|
import enhanceWithClickOutside from 'react-click-outside'
|
|
|
|
import enhanceWithClickOutside from 'react-click-outside'
|
|
|
|
import shallowCompare from 'react-addons-shallow-compare'
|
|
|
|
|
|
|
|
import { withRouter } from 'next/router'
|
|
|
|
import { withRouter } from 'next/router'
|
|
|
|
|
|
|
|
|
|
|
|
import { COLORS, EXPORT_SIZES } from '../lib/constants'
|
|
|
|
import { COLORS, EXPORT_SIZES } from '../lib/constants'
|
|
|
@ -8,6 +7,8 @@ import Button from './Button'
|
|
|
|
import CopyButton from './CopyButton'
|
|
|
|
import CopyButton from './CopyButton'
|
|
|
|
import WindowPointer from './WindowPointer'
|
|
|
|
import WindowPointer from './WindowPointer'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { toggle } from '../lib/util'
|
|
|
|
|
|
|
|
|
|
|
|
const toIFrame = url =>
|
|
|
|
const toIFrame = url =>
|
|
|
|
`<iframe
|
|
|
|
`<iframe
|
|
|
|
src="https://carbon.now.sh/embed${url}"
|
|
|
|
src="https://carbon.now.sh/embed${url}"
|
|
|
@ -16,37 +17,20 @@ const toIFrame = url =>
|
|
|
|
</iframe>
|
|
|
|
</iframe>
|
|
|
|
`
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
class ExportMenu extends React.Component {
|
|
|
|
class ExportMenu extends React.PureComponent {
|
|
|
|
state = {
|
|
|
|
state = {
|
|
|
|
isVisible: false
|
|
|
|
isVisible: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
shouldComponentUpdate(prevProps, prevState) {
|
|
|
|
toggle = () => this.setState(toggle('isVisible'))
|
|
|
|
return (
|
|
|
|
|
|
|
|
prevState.isVisible !== this.state.isVisible ||
|
|
|
|
|
|
|
|
(prevState.isVisible && shallowCompare(this, prevProps, prevState))
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toggle = () => {
|
|
|
|
|
|
|
|
this.setState({ isVisible: !this.state.isVisible })
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleClickOutside = () => {
|
|
|
|
handleClickOutside = () => this.setState({ isVisible: false })
|
|
|
|
this.setState({ isVisible: false })
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleInputChange = e => {
|
|
|
|
handleInputChange = e => this.props.onChange(e.target.name, e.target.value)
|
|
|
|
this.props.onChange(e.target.name, e.target.value)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleExportSizeChange = selectedSize => () => {
|
|
|
|
handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
|
|
|
|
this.props.onChange('exportSize', selectedSize)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleExport = format => () => {
|
|
|
|
handleExport = format => () => this.props.export(format)
|
|
|
|
this.props.export(format)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { exportSize, filename, router } = this.props
|
|
|
|
const { exportSize, filename, router } = this.props
|
|
|
|