7 changed files with 4 additions and 135 deletions
@ -1,30 +0,0 @@ |
|||
@import '~antd/es/style/themes/default.less'; |
|||
|
|||
.copy-block { |
|||
position: fixed; |
|||
right: 80px; |
|||
bottom: 40px; |
|||
z-index: 99; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 40px; |
|||
height: 40px; |
|||
font-size: 20px; |
|||
background: @input-bg; |
|||
border-radius: 40px; |
|||
box-shadow: @card-shadow; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.copy-block-view { |
|||
position: relative; |
|||
.copy-block-code { |
|||
display: inline-block; |
|||
margin: 0 0.2em; |
|||
padding: 0.2em 0.4em 0.1em; |
|||
font-size: 85%; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
import { Icon, Popover, Typography } from 'antd'; |
|||
import React, { useRef } from 'react'; |
|||
|
|||
import { FormattedMessage } from 'umi-plugin-react/locale'; |
|||
import { connect } from 'dva'; |
|||
import { isAntDesignPro } from '@/utils/utils'; |
|||
import styles from './index.less'; |
|||
|
|||
const firstUpperCase = (pathString: string): string => |
|||
pathString |
|||
.replace('.', '') |
|||
.split(/\/|-/) |
|||
.map((s): string => s.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase())) |
|||
.filter((s): boolean => !!s) |
|||
.join(''); |
|||
|
|||
// when click block copy, send block url to ga
|
|||
const onBlockCopy = (label: string) => { |
|||
if (!isAntDesignPro()) { |
|||
return; |
|||
} |
|||
|
|||
const ga = window && window.ga; |
|||
if (ga) { |
|||
ga('send', 'event', { |
|||
eventCategory: 'block', |
|||
eventAction: 'copy', |
|||
eventLabel: label, |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const BlockCodeView: React.SFC<{ |
|||
url: string; |
|||
}> = ({ url }) => { |
|||
const blockUrl = `npx umi block add ${firstUpperCase(url)} --path=${url}`; |
|||
return ( |
|||
<div className={styles['copy-block-view']}> |
|||
<Typography.Paragraph |
|||
copyable={{ |
|||
text: blockUrl, |
|||
onCopy: () => onBlockCopy(url), |
|||
}} |
|||
style={{ |
|||
display: 'flex', |
|||
}} |
|||
> |
|||
<pre> |
|||
<code className={styles['copy-block-code']}>{blockUrl}</code> |
|||
</pre> |
|||
</Typography.Paragraph> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
interface RoutingType { |
|||
location: { |
|||
pathname: string; |
|||
}; |
|||
} |
|||
|
|||
export default connect(({ routing }: { routing: RoutingType }) => ({ |
|||
location: routing.location, |
|||
}))(({ location }: RoutingType) => { |
|||
const url = location.pathname; |
|||
const divDom = useRef<HTMLDivElement>(null); |
|||
return ( |
|||
<Popover |
|||
title={<FormattedMessage id="app.preview.down.block" defaultMessage="下载此页面到本地项目" />} |
|||
placement="topLeft" |
|||
content={<BlockCodeView url={url} />} |
|||
trigger="click" |
|||
getPopupContainer={dom => (divDom.current ? divDom.current : dom)} |
|||
> |
|||
<div className={styles['copy-block']} ref={divDom}> |
|||
<Icon type="download" /> |
|||
</div> |
|||
</Popover> |
|||
); |
|||
}); |
|||
Loading…
Reference in new issue