125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
// Copyright 2019 PingCAP, Inc.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
import Menu from '@material-ui/core/Menu';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import MenuList from '@material-ui/core/MenuList';
|
|
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
|
|
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
|
|
import CancelIcon from '@material-ui/icons/Cancel';
|
|
import MortVertIcon from '@material-ui/icons/MoreVert';
|
|
import * as React from 'react';
|
|
|
|
import * as api from './api';
|
|
|
|
|
|
interface Props {
|
|
taskID: api.TaskID
|
|
movable: boolean
|
|
|
|
onDelete: (taskID: api.TaskID) => void
|
|
onMoveToFront: (taskID: api.TaskID) => void
|
|
onMoveToBack: (taskID: api.TaskID) => void
|
|
}
|
|
|
|
interface States {
|
|
menuOpened: boolean
|
|
}
|
|
|
|
export default class MoveTaskButton extends React.Component<Props, States> {
|
|
private ref: React.RefObject<HTMLButtonElement>;
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.ref = React.createRef();
|
|
|
|
this.state = {
|
|
menuOpened: false,
|
|
};
|
|
}
|
|
|
|
handleToggleMenu = () => {
|
|
this.setState(state => ({ menuOpened: !state.menuOpened }));
|
|
};
|
|
|
|
handleCloseMenu = () => {
|
|
this.setState({ menuOpened: false });
|
|
};
|
|
|
|
handleStopTask = () => {
|
|
const taskID = this.props.taskID;
|
|
const readableID = api.dateFromTaskID(taskID).toLocaleString();
|
|
if (confirm(`Do you really want to stop and delete task queued at ${readableID}?`)) {
|
|
this.props.onDelete(taskID);
|
|
this.handleCloseMenu();
|
|
}
|
|
};
|
|
|
|
handleMoveTaskToFront = () => {
|
|
this.props.onMoveToFront(this.props.taskID);
|
|
this.handleCloseMenu();
|
|
};
|
|
|
|
handleMoveTaskToBack = () => {
|
|
this.props.onMoveToBack(this.props.taskID);
|
|
this.handleCloseMenu();
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<IconButton edge='end' ref={this.ref} onClick={this.handleToggleMenu}>
|
|
<MortVertIcon />
|
|
</IconButton>
|
|
<Menu anchorEl={this.ref.current} open={this.state.menuOpened} onClose={this.handleCloseMenu}>
|
|
<MenuList>
|
|
<MenuItem onClick={this.handleStopTask} divider={this.props.movable}>
|
|
<ListItemIcon>
|
|
<CancelIcon color='secondary' />
|
|
</ListItemIcon>
|
|
<ListItemText primaryTypographyProps={{ color: 'secondary' }}>
|
|
{this.props.movable ? 'Delete' : 'Stop'}
|
|
</ListItemText>
|
|
</MenuItem>
|
|
{this.props.movable && (
|
|
<>
|
|
<MenuItem onClick={this.handleMoveTaskToFront}>
|
|
<ListItemIcon>
|
|
<ArrowUpwardIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>
|
|
Move to front
|
|
</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem onClick={this.handleMoveTaskToBack}>
|
|
<ListItemIcon>
|
|
<ArrowDownwardIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>
|
|
Move to back
|
|
</ListItemText>
|
|
</MenuItem>
|
|
</>
|
|
)}
|
|
</MenuList>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
}
|
|
}
|