112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import * as React from 'react'
|
|
import { Badge, Typography } from '@material-ui/core'
|
|
import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
|
|
import { Theme, withStyles } from '@material-ui/core/styles'
|
|
|
|
interface HistoryItem {
|
|
key: string
|
|
title: JSX.Element | string
|
|
value: string
|
|
selected?: boolean
|
|
}
|
|
|
|
interface Props {
|
|
items: Array<HistoryItem>
|
|
onClick?: (index: number, element: EventTarget) => void
|
|
classes: any
|
|
contentTypeIndicator?: JSX.Element
|
|
theme: Theme
|
|
}
|
|
|
|
interface State {
|
|
collapsed: boolean
|
|
}
|
|
|
|
class HistoryDrawer extends React.Component<Props, State> {
|
|
private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre' })
|
|
|
|
constructor(props: any) {
|
|
super(props)
|
|
this.state = {
|
|
collapsed: true,
|
|
}
|
|
}
|
|
|
|
private toggle = () => {
|
|
this.setState({ collapsed: !this.state.collapsed })
|
|
}
|
|
|
|
private createSelectionHandler = (index: number) => (event: React.MouseEvent) => {
|
|
this.props.onClick && this.props.onClick(index, event.target)
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
|
|
public renderHistory() {
|
|
const style = (element: HistoryItem) => ({
|
|
backgroundColor: element.selected
|
|
? this.props.theme.palette.action.selected
|
|
: this.props.theme.palette.action.hover,
|
|
margin: '8px',
|
|
padding: '8px 8px 0 8px',
|
|
cursor: this.props.onClick ? 'pointer' : 'inherit',
|
|
})
|
|
|
|
const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
|
|
const elements = this.props.items.map((element, index) => (
|
|
<div
|
|
key={element.key}
|
|
style={style(element)}
|
|
onClick={this.createSelectionHandler(index)}
|
|
tabIndex={0}
|
|
onKeyDown={this.handleCtrlA}
|
|
>
|
|
<div>
|
|
<i>{element.title}</i>
|
|
</div>
|
|
<div style={messageStyle}>
|
|
<span>
|
|
<pre>{element.value}</pre>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
|
|
const visible = this.props.items.length > 0 && this.state.collapsed
|
|
|
|
return (
|
|
<div className={this.props.classes.main}>
|
|
<Typography component={'span'} onClick={this.toggle} style={{ cursor: 'pointer' }}>
|
|
<Badge
|
|
classes={{ badge: this.props.classes.badge }}
|
|
invisible={!visible}
|
|
badgeContent={this.props.items.length}
|
|
color="primary"
|
|
>
|
|
{this.state.collapsed ? '▶ History' : '▼ History'}
|
|
</Badge>
|
|
<div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
|
|
</Typography>
|
|
<div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
|
|
{this.state.collapsed ? null : this.props.children}
|
|
{this.state.collapsed ? null : elements}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
public render() {
|
|
return <div style={{ display: 'block', width: '100%' }}>{this.renderHistory()}</div>
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => ({
|
|
main: {
|
|
backgroundColor: 'rgba(170, 170, 170, 0.2)',
|
|
marginTop: '16px',
|
|
},
|
|
badge: { right: '-25px' },
|
|
})
|
|
|
|
export default withStyles(styles, { withTheme: true })(HistoryDrawer)
|