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/SnippetToolbar.js

86 lines
1.6 KiB
JavaScript

import React from 'react'
import { useAsyncCallback, useOnline } from 'actionsack'
import Button from './Button'
import Toolbar from './Toolbar'
import ConfirmButton from './ConfirmButton'
import { useAuth } from './AuthContext'
import { COLORS } from '../lib/constants'
function DeleteButton(props) {
const [onClick, { loading }] = useAsyncCallback(props.onClick)
return (
<ConfirmButton
display="block"
padding="0 16px"
flex="unset"
center
border
large
color="#fff"
onClick={onClick}
style={{ color: COLORS.RED }}
>
{loading ? 'Deleting...' : 'Delete'}
</ConfirmButton>
)
}
function DuplicateButton(props) {
const [onClick, { loading }] = useAsyncCallback(props.onClick)
return (
<Button
display="block"
padding="0 16px"
margin="0 0 0 1rem"
flex="unset"
center
border
large
color="#37b589"
onClick={onClick}
>
{loading ? 'Duplicating...' : 'Duplicate'}
</Button>
)
}
function SnippetToolbar(props) {
const user = useAuth()
const online = useOnline()
if (!online) {
return null
}
if (!user) {
return null
}
if (!props.snippet) {
return null
}
const sameUser = user.uid === props.snippet.userId
return (
<Toolbar
style={{
marginTop: 16,
marginBottom: 0,
flexDirection: 'row-reverse',
// justifyContent: 'space-between',
zIndex: 1
}}
>
<DuplicateButton onClick={props.onCreate} />
{sameUser && <DeleteButton onClick={props.onDelete} />}
</Toolbar>
)
}
export default SnippetToolbar