Peter Cai
2b42e19ecb
by replacing everything with a `<Redirect/>` on switching, it produces a short blink while the new page appears. But we cannot just use `<Link/>` because an `<a>` cannot be "disabled". Wrapping `Link` around `button` is invalid HTML5. Instead, hack together a custom component for the job.
88 lines
2.1 KiB
CoffeeScript
88 lines
2.1 KiB
CoffeeScript
import React from "react"
|
|
import LinkButton from "./util/linkButton"
|
|
import ContentEditable from "./util/contentEditable"
|
|
|
|
class Pastebin extends React.Component
|
|
constructor: (props) ->
|
|
super props
|
|
@state =
|
|
text: ""
|
|
pasting: false
|
|
highlight: false # Make this false by default to avoid blocking
|
|
|
|
onEditTextUpdate: (ev) =>
|
|
console.log ev.target.value
|
|
@setState
|
|
text: ev.target.value
|
|
|
|
toggleHighlight: (ev) =>
|
|
@setState (state, props) =>
|
|
{ highlight: not state.highlight }
|
|
|
|
paste: =>
|
|
return if @state.text.trim() == ""
|
|
# Set the state first to disable the button
|
|
@setState
|
|
pasting: true
|
|
# For things pasted through the web interface,
|
|
# we always assume the name is `web_paste.txt`,
|
|
# and the content type is always `text/plain`.
|
|
resp = await fetch "/paste/web_paste.txt",
|
|
method: 'PUT'
|
|
headers:
|
|
'content-type': 'text/plain'
|
|
body: @state.text
|
|
console.log resp
|
|
txt = await resp.text()
|
|
console.log txt
|
|
|
|
# Dialog opening is provided by parent
|
|
@props.openDialog do ->
|
|
if resp.ok
|
|
<a href={txt} target="_blank">
|
|
https://{window.location.hostname}{txt}
|
|
</a>
|
|
else
|
|
msg = txt
|
|
|
|
@setState
|
|
text: ""
|
|
|
|
# Reset the button
|
|
@setState
|
|
pasting: false
|
|
|
|
render: ->
|
|
<div className="content-pastebin">
|
|
<ContentEditable
|
|
className="content-pastebin-edit"
|
|
onUpdate={@onEditTextUpdate}
|
|
value={@state.text}
|
|
highlightCode={@state.highlight}
|
|
plainText
|
|
/>
|
|
<div className="content-buttons">
|
|
<button
|
|
className="button-blue"
|
|
onClick={@toggleHighlight}
|
|
>
|
|
Highlight: {if @state.highlight then 'ON' else 'OFF'}
|
|
</button>
|
|
<LinkButton
|
|
className="button-blue"
|
|
disabled={@state.pasting}
|
|
to="/paste/binary"
|
|
>
|
|
File Upload
|
|
</LinkButton>
|
|
<button
|
|
className="button-blue"
|
|
disabled={@state.pasting}
|
|
onClick={@paste}
|
|
>
|
|
Paste
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
export default Pastebin |