feat:
重构接口列表，新建接口按钮放到最上面，列表透出地址信息，清爽+1 解决组件性能问题，切换接口不再闪动 编辑接口时可以同时编辑字段和接口本身的信息，而不是分散在两个地方 接口详情中的大量信息悬停后会出现「点击复制」的按钮，方便在代码里使用 超长 value 添加滚动显示，不要占据太大的页面空间 为根节点添加加号，尊重用户使用惯性 在接口不 match 的情况下提醒用户是不是用错了请求方式 ……其他视觉细节test
bigfengyu
6 years ago
parent
f9d5525374
commit
1da7d36190
@ -1,3 +0,0 @@
|
||||
.InterfaceList
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
@ -0,0 +1,3 @@
|
||||
.rc-tooltip-content .rc-tooltip-inner
|
||||
min-height: unset
|
||||
padding: 0
|
||||
@ -0,0 +1,65 @@
|
||||
import copy from 'clipboard-copy'
|
||||
import * as React from 'react'
|
||||
import Tooltip from 'rc-tooltip'
|
||||
import { withSnackbar, WithSnackbarProps } from 'notistack'
|
||||
|
||||
import 'rc-tooltip/assets/bootstrap.css'
|
||||
import './CopyToClipboard.sass'
|
||||
|
||||
type Props = {
|
||||
children: React.ReactElement<any>
|
||||
text: string
|
||||
} & WithSnackbarProps
|
||||
|
||||
interface OwnState {
|
||||
showTooltip: boolean
|
||||
}
|
||||
|
||||
class CopyToClipboard extends React.Component<Props, OwnState> {
|
||||
public state: OwnState = { showTooltip: false }
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<Tooltip
|
||||
placement="right"
|
||||
overlay={
|
||||
<div
|
||||
style={{ cursor: 'pointer', color: '#fff', padding: '8px 10px' }}
|
||||
onClick={() => this.onCopy(this.props.text)}
|
||||
>
|
||||
复制
|
||||
</div>
|
||||
}
|
||||
mouseLeaveDelay={0.4}
|
||||
mouseEnterDelay={0.4}
|
||||
visible={this.state.showTooltip}
|
||||
onVisibleChange={this.handleVisibleChange}
|
||||
>
|
||||
{this.props.children}
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
private onCopy = (content: string) => {
|
||||
copy(content).then(() => {
|
||||
const maxLength = 30
|
||||
const cutContent = content.length > maxLength ? content.substr(0, maxLength) + '...' : content
|
||||
this.props.enqueueSnackbar(`成功复制 ${cutContent} 到剪贴板`, {
|
||||
variant: 'success',
|
||||
autoHideDuration: 1000,
|
||||
})
|
||||
}).catch(() => {
|
||||
this.props.enqueueSnackbar(`复制失败`, {
|
||||
variant: 'error',
|
||||
autoHideDuration: 1000,
|
||||
})
|
||||
})
|
||||
this.setState({ showTooltip: false })
|
||||
};
|
||||
|
||||
private handleVisibleChange = (visible: boolean) => {
|
||||
this.setState({showTooltip: visible})
|
||||
}
|
||||
}
|
||||
|
||||
export default withSnackbar<Props>(CopyToClipboard)
|
||||
Loading…
Reference in New Issue