You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/TweetButton.js

54 lines
1.1 KiB
JavaScript

import React from 'react'
import { useAsyncCallback } from '@dawnlabs/tacklebox'
import Button from './Button'
function useWindowListener(key, fn) {
React.useEffect(() => {
window.addEventListener(key, fn)
return () => window.removeEventListener(key, fn)
}, [])
}
function useOnlineListener() {
const [online, setOnline] = React.useState(true)
React.useEffect(() => {
setOnline(
typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
? navigator.onLine
: true
)
}, [])
useWindowListener('offline', () => setOnline(false))
useWindowListener('online', () => setOnline(true))
return online
}
function TweetButton(props) {
const online = useOnlineListener()
const [onClick, { loading }] = useAsyncCallback(props.onClick)
if (!online) {
return null
}
return (
<Button
center
border
large
padding="0 16px"
margin="0 8px 0 0"
onClick={onClick}
color="#57b5f9"
>
{loading ? 'Loading...' : 'Tweet'}
</Button>
)
}
export default React.memo(TweetButton)