React bootstrap upgrade to v1, migrate to react-beautiful-dnd (#1639)

* Upgrade packages, fix errors, still WIP

* WIP

* Bootstrap v4 upgrade

* Switch to react-beautiful-dnd

* Fixed some issues

* Added to generate signed Mac build for UX

* PR feedback

* Missed one

* PR feedback
This commit is contained in:
Devin Binnie
2021-07-05 21:19:11 -04:00
committed by GitHub
parent 86a3f13a6b
commit 4130c2c37d
27 changed files with 869 additions and 554 deletions

View File

@@ -3,10 +3,10 @@
// See LICENSE.txt for license information.
import React, {Fragment} from 'react';
import {Grid, Row} from 'react-bootstrap';
import {Container, Row} from 'react-bootstrap';
import {DropResult} from 'react-beautiful-dnd';
import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
import {IpcRendererEvent} from 'electron/renderer';
import {DropResult} from 'react-smooth-dnd';
import {Team} from 'types/config';
@@ -60,7 +60,7 @@ enum Status {
type Props = {
teams: Team[];
showAddServerButton: boolean;
moveTabs: (originalOrder: number, newOrder: number) => Promise<number | undefined>;
moveTabs: (originalOrder: number, newOrder: number) => number | undefined;
openMenu: () => void;
darkMode: boolean;
appName: string;
@@ -256,18 +256,17 @@ export default class MainPage extends React.PureComponent<Props, State> {
}
handleDragAndDrop = async (dropResult: DropResult) => {
const {removedIndex, addedIndex} = dropResult;
if (removedIndex === null || addedIndex === null) {
const removedIndex = dropResult.source.index;
const addedIndex = dropResult.destination?.index;
if (addedIndex === undefined || removedIndex === addedIndex) {
return;
}
if (removedIndex !== addedIndex) {
const teamIndex = await this.props.moveTabs(removedIndex, addedIndex < this.props.teams.length ? addedIndex : this.props.teams.length - 1);
if (!teamIndex) {
return;
}
const name = this.props.teams[teamIndex].name;
this.handleSelect(name, teamIndex);
const teamIndex = this.props.moveTabs(removedIndex, addedIndex < this.props.teams.length ? addedIndex : this.props.teams.length - 1);
if (!teamIndex) {
return;
}
const name = this.props.teams[teamIndex].name;
this.handleSelect(name, teamIndex);
}
handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -471,10 +470,10 @@ export default class MainPage extends React.PureComponent<Props, State> {
className='MainPage'
onClick={this.focusOnWebView}
>
<Grid fluid={true}>
<Container fluid={true}>
{topRow}
{viewsRow}
</Grid>
</Container>
</div>
);
}