mirror of https://github.com/sgoudham/carbon.git
New copy action menu (#970)
* move copy actions to a new menu * clean up copy menu * clean up export menu * move flex into reset styles * use real ellipses * fix copy menu id and classNames Co-authored-by: repo-ranger[bot] <39074581+repo-ranger[bot]@users.noreply.github.com>main
Michael Fix
5 years ago
committed by
GitHub
parent
1cf04495ab
commit
3acbd9ef9c
@ -0,0 +1,120 @@
|
||||
import React from 'react'
|
||||
import { withRouter } from 'next/router'
|
||||
import { useCopyTextHandler, useAsyncCallback } from 'actionsack'
|
||||
import morph from 'morphmorph'
|
||||
|
||||
import { COLORS } from '../lib/constants'
|
||||
import Button from './Button'
|
||||
import Popout, { managePopout } from './Popout'
|
||||
import CopySVG from './svg/Copy'
|
||||
|
||||
const toIFrame = url =>
|
||||
`<iframe
|
||||
src="${location.origin}/embed${url.replace(/^\/\?/, '?')}"
|
||||
style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;"
|
||||
sandbox="allow-scripts allow-same-origin">
|
||||
</iframe>
|
||||
`
|
||||
|
||||
const toURL = url => `${location.origin}${url}`
|
||||
const toEncodedURL = morph.compose(encodeURI, toURL)
|
||||
|
||||
function CopyButton(props) {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
hoverColor={COLORS.SECONDARY}
|
||||
color="rgba(255, 255, 255, 0.7)"
|
||||
padding="8px"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const CopyEmbed = withRouter(({ router: { asPath }, mapper, title }) => {
|
||||
const text = React.useMemo(() => mapper(asPath), [mapper, asPath])
|
||||
const { onClick, copied } = useCopyTextHandler(text)
|
||||
|
||||
return <CopyButton onClick={onClick}>{copied ? 'Copied!' : title}</CopyButton>
|
||||
})
|
||||
|
||||
const popoutStyle = { width: '140px', right: 0 }
|
||||
|
||||
function useClipboardSupport() {
|
||||
const [isClipboardSupports, setClipboardSupport] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
setClipboardSupport(
|
||||
window.navigator && window.navigator.clipboard && typeof ClipboardItem === 'function'
|
||||
)
|
||||
}, [])
|
||||
|
||||
return isClipboardSupports
|
||||
}
|
||||
|
||||
function CopyMenu({ isVisible, toggleVisibility, copyImage }) {
|
||||
const clipboardSupported = useClipboardSupport()
|
||||
|
||||
const [copy, { loading }] = useAsyncCallback(copyImage)
|
||||
|
||||
return (
|
||||
<div className="copy-menu-container">
|
||||
<div className="flex">
|
||||
<Button
|
||||
center
|
||||
border
|
||||
large
|
||||
padding="0 16px"
|
||||
margin="0 8px 0 0"
|
||||
onClick={toggleVisibility}
|
||||
color={COLORS.SECONDARY}
|
||||
>
|
||||
<CopySVG size={16} color={COLORS.SECONDARY} />
|
||||
</Button>
|
||||
</div>
|
||||
<Popout
|
||||
hidden={!isVisible}
|
||||
borderColor={COLORS.SECONDARY}
|
||||
pointerRight="24px"
|
||||
style={popoutStyle}
|
||||
>
|
||||
<div className="copy-row flex">
|
||||
<span>Copy to clipboard</span>
|
||||
{clipboardSupported && (
|
||||
<CopyButton id="export-clipboard" onClick={copy} disabled={loading}>
|
||||
{loading ? 'Copying…' : 'Image'}
|
||||
</CopyButton>
|
||||
)}
|
||||
<CopyEmbed title="Medium.com" mapper={toEncodedURL} />
|
||||
<CopyEmbed title="IFrame" mapper={toIFrame} />
|
||||
<CopyEmbed title="Plain URL" mapper={toURL} />
|
||||
</div>
|
||||
</Popout>
|
||||
<style jsx>
|
||||
{`
|
||||
.copy-menu-container {
|
||||
position: relative;
|
||||
color: ${COLORS.SECONDARY};
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.copy-row {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.copy-row :global(button) {
|
||||
border-top: 1px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.copy-row > span {
|
||||
padding: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default managePopout(React.memo(CopyMenu))
|
||||
Loading…
Reference in New Issue