Merge branch 'master' into toolbar

main
Jake Dexheimer 8 years ago
commit 8272d81753

@ -0,0 +1,93 @@
import React from 'react'
import domtoimage from 'dom-to-image'
import Button from './Button'
import api from '../lib/api'
// constants
const BUTTON_COLOR = '#84ACFC'
const BUTTON_STYLE = { borderRadius: '3px 0px 0px 3px' }
const DEBOUNCE_DURATION = 10000
const STATUS = {
IDLE: 'IDLE',
LOADING: 'LOADING',
DEBOUNCED: 'DEBOUNCED'
}
const textMap = {
[STATUS.IDLE]: 'Copy Imgur Link',
[STATUS.LOADING]: 'Uploading...',
[STATUS.DEBOUNCED]: 'Copied to Clipboard'
}
class CopyButton extends React.Component {
constructor(props) {
super(props)
this.state = {
status: STATUS.IDLE
}
// bind methods
this.handleIdleClick = this.handleIdleClick.bind(this)
this.handleDebounceClick = this.handleDebounceClick.bind(this)
this.handleClick = this.handleClick.bind(this)
}
uploadImage () {
return domtoimage.toBlob(document.getElementById('container'))
.then(api.uploadImage)
.then(res => res.data.id)
.then(id => `http://i.imgur.com/${id}`)
}
handleIdleClick () {
// set to loading
this.setState({
status: STATUS.LOADING
})
// upload code image and update state
this.uploadImage()
.then(link => {
console.log('link')
this.setState({
status: STATUS.DEBOUNCED,
link
})
setTimeout(() => {
this.setState({
status: STATUS.IDLE
})
}, DEBOUNCE_DURATION)
})
}
handleDebounceClick () {
// copy link to clipboard
}
handleClick () {
console.log('called!')
switch (this.state.status) {
case STATUS.IDLE:
this.handleIdleClick()
break
case STATUS.DEBOUNCED:
this.handleDebounceClick()
}
}
render () {
return (
<div >
{ this.state.link ? <input id="linkTarget" type="hidden" value="https://github.com/zenorocha/clipboard.js.git" /> : null }
<Button onClick={this.handleClick} title={textMap[this.state.status]} bg={BUTTON_COLOR} style={BUTTON_STYLE}/>
</div>
)
}
}
export default CopyButton

@ -3,6 +3,7 @@ import Dropdown from './Dropdown'
import ColorPicker from './Colorpicker' import ColorPicker from './Colorpicker'
import Settings from './Settings' import Settings from './Settings'
import Button from './Button' import Button from './Button'
import CopyButton from './CopyButton'
import { THEMES, LANGUAGES } from '../lib/constants' import { THEMES, LANGUAGES } from '../lib/constants'
const Toolbar = (props) => ( const Toolbar = (props) => (
@ -15,12 +16,7 @@ const Toolbar = (props) => (
/> />
<Settings onChange={props.onSettingsChange} /> <Settings onChange={props.onSettingsChange} />
<div className="buttons"> <div className="buttons">
<Button <CopyButton />
onClick={props.upload}
title="Copy Imgur Link"
bg="#84ACFC"
style={{ borderRadius: '3px 0px 0px 3px' }}
/>
<Button onClick={props.save} title="Save Image" bg="#C3E98D" /> <Button onClick={props.save} title="Save Image" bg="#C3E98D" />
</div> </div>
<style jsx>{` <style jsx>{`

@ -52,7 +52,8 @@ class Index extends React.Component {
upload () { upload () {
domtoimage.toBlob(document.getElementById('container')) domtoimage.toBlob(document.getElementById('container'))
.then(api.uploadImage) .then(api.uploadImage)
.then(res => res.data.link) .then(res => res.data.id)
.then(id => `http://i.imgur.com/${id}`)
.then(console.log) .then(console.log)
} }

Loading…
Cancel
Save