|
|
@ -1,12 +1,22 @@
|
|
|
|
import React from 'react'
|
|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import Button from './Button'
|
|
|
|
|
|
|
|
|
|
|
|
// constants
|
|
|
|
// constants
|
|
|
|
|
|
|
|
const BUTTON_COLOR = '#84ACFC'
|
|
|
|
|
|
|
|
|
|
|
|
const STATUS = {
|
|
|
|
const STATUS = {
|
|
|
|
IDLE: 'IDLE',
|
|
|
|
IDLE: 'IDLE',
|
|
|
|
LOADING: 'LOADING',
|
|
|
|
LOADING: 'LOADING',
|
|
|
|
DEBOUNCED: 'DEBOUNCED'
|
|
|
|
DEBOUNCED: 'DEBOUNCED'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const textMap = {
|
|
|
|
|
|
|
|
[STATUS.IDLE]: 'Copy Imgur Link',
|
|
|
|
|
|
|
|
[STATUS.LOADING]: 'Loading...',
|
|
|
|
|
|
|
|
[STATUS.DEBOUNCED]: 'Coppied'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class CopyButton extends React.Component {
|
|
|
|
class CopyButton extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
super(props)
|
|
|
@ -15,4 +25,18 @@ class CopyButton extends React.Component {
|
|
|
|
status: STATUS.IDLE
|
|
|
|
status: STATUS.IDLE
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleClick () {
|
|
|
|
|
|
|
|
switch (this.state.status)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<Button onClick={() => {}} title={textMap[this.state.status]} bg={BUTTON_COLOR}/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default CopyButton
|