added position absolute and some flexbox so I could remov changes in display and…

added position absolute and some flexbox so I could remov changes in display and setTimeout, added tests and types, did some renaming

public/app/containers/Teams/TeamList.tsx

@@ -55,7 +55,7 @@ export class TeamList extends React.Component<Props, any> {
           <a href={teamUrl}>{team.memberCount}</a>
           <a href={teamUrl}>{team.memberCount}</a>
         </td>
         </td>
         <td className="text-right">
         <td className="text-right">
-          <DeleteButton confirmDelete={() => this.deleteTeam(team)} />
+          <DeleteButton onConfirmDelete={() => this.deleteTeam(team)} />
         </td>
         </td>
       </tr>
       </tr>
     );
     );

public/app/core/components/DeleteButton/DeleteButton.jest.tsx

+import React from 'react';
+import DeleteButton from './DeleteButton';
+import { shallow } from 'enzyme';
+
+describe('DeleteButton', () => {
+  let wrapper;
+  let deleted;
+
+  beforeAll(() => {
+    deleted = false;
+
+    function deleteItem() {
+      deleted = true;
+    }
+    wrapper = shallow(<DeleteButton onConfirmDelete={() => deleteItem()} />);
+  });
+
+  it('should show confirm delete when clicked', () => {
+    expect(wrapper.state().showConfirm).toBe(false);
+    wrapper.find('.delete-button').simulate('click');
+    expect(wrapper.state().showConfirm).toBe(true);
+  });
+
+  it('should hide confirm delete when clicked', () => {
+    wrapper.find('.delete-button').simulate('click');
+    expect(wrapper.state().showConfirm).toBe(true);
+    wrapper
+      .find('.confirm-delete')
+      .find('.btn')
+      .at(0)
+      .simulate('click');
+    expect(wrapper.state().showConfirm).toBe(false);
+  });
+
+  it('should show confirm delete when clicked', () => {
+    expect(deleted).toBe(false);
+    wrapper
+      .find('.confirm-delete')
+      .find('.btn')
+      .at(1)
+      .simulate('click');
+    expect(deleted).toBe(true);
+  });
+});

public/app/core/components/DeleteButton/DeleteButton.tsx

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 
-export default class DeleteButton extends Component<any, any> {
-  state = {
-    deleteButton: 'delete-button--show',
-    confirmSpan: 'confirm-delete--removed',
+export interface DeleteButtonProps {
+  onConfirmDelete();
+}
+
+export interface DeleteButtonStates {
+  showConfirm: boolean;
+}
+
+export default class DeleteButton extends PureComponent<DeleteButtonProps, DeleteButtonStates> {
+  state: DeleteButtonStates = {
+    showConfirm: false,
   };
   };
 
 
-  handleDelete = event => {
+  onClickDelete = event => {
     if (event) {
     if (event) {
       event.preventDefault();
       event.preventDefault();
     }
     }
 
 
     this.setState({
     this.setState({
-      deleteButton: 'delete-button--hide',
-    });
-
-    setTimeout(() => {
-      this.setState({
-        deleteButton: 'delete-button--removed',
-      });
-    }, 100);
-
-    setTimeout(() => {
-      this.setState({
-        confirmSpan: 'confirm-delete--hide',
-      });
-    }, 100);
-
-    setTimeout(() => {
-      this.setState({
-        confirmSpan: 'confirm-delete--show',
+      showConfirm: true,
     });
     });
-    }, 150);
   };
   };
 
 
-  cancelDelete = event => {
+  onClickCancel = event => {
+    if (event) {
       event.preventDefault();
       event.preventDefault();
-
-    this.setState({
-      confirmSpan: 'confirm-delete--hide',
-    });
-
-    setTimeout(() => {
-      this.setState({
-        confirmSpan: 'confirm-delete--removed',
-        deleteButton: 'delete-button--hide',
-      });
-    }, 140);
-
-    setTimeout(() => {
+    }
     this.setState({
     this.setState({
-        deleteButton: 'delete-button--show',
+      showConfirm: false,
     });
     });
-    }, 190);
   };
   };
 
 
   render() {
   render() {
-    const { confirmDelete } = this.props;
+    const onClickConfirm = this.props.onConfirmDelete;
+    let showConfirm;
+    let showDeleteButton;
+
+    if (this.state.showConfirm) {
+      showConfirm = 'show';
+      showDeleteButton = 'hide';
+    } else {
+      showConfirm = 'hide';
+      showDeleteButton = 'show';
+    }
+
     return (
     return (
       <span className="delete-button-container">
       <span className="delete-button-container">
-        <a className={this.state.deleteButton + ' btn btn-danger btn-small'} onClick={this.handleDelete}>
+        <a className={'delete-button ' + showDeleteButton + ' btn btn-danger btn-small'} onClick={this.onClickDelete}>
           <i className="fa fa-remove" />
           <i className="fa fa-remove" />
         </a>
         </a>
         <span className="confirm-delete-container">
         <span className="confirm-delete-container">
-          <span className={this.state.confirmSpan}>
-            <a className="btn btn-small" onClick={this.cancelDelete}>
+          <span className={'confirm-delete ' + showConfirm}>
+            <a className="btn btn-small" onClick={this.onClickCancel}>
               Cancel
               Cancel
             </a>
             </a>
-            <a className="btn btn-danger btn-small" onClick={confirmDelete}>
+            <a className="btn btn-danger btn-small" onClick={onClickConfirm}>
               Confirm Delete
               Confirm Delete
             </a>
             </a>
           </span>
           </span>

public/sass/components/_delete_button.scss

+// sets a fixed width so that the rest of the table
+// isn't affected by the animation
 .delete-button-container {
 .delete-button-container {
-  max-width: 24px;
   width: 24px;
   width: 24px;
   direction: rtl;
   direction: rtl;
-  max-height: 38px;
-  display: block;
+  display: flex;
+  align-items: center;
 }
 }
 
 
+//this container is used to make sure confirm-delete isn't
+//shown outside of table
 .confirm-delete-container {
 .confirm-delete-container {
   overflow: hidden;
   overflow: hidden;
   width: 145px;
   width: 145px;
-  display: block;
+  position: absolute;
+  z-index: 1;
 }
 }
 
 
 .delete-button {
 .delete-button {
-  &--show {
-    display: inline-block;
+  position: absolute;
+
+  &.show {
     opacity: 1;
     opacity: 1;
     transition: opacity 0.1s ease;
     transition: opacity 0.1s ease;
+    z-index: 2;
   }
   }
 
 
-  &--hide {
-    display: inline-block;
+  &.hide {
     opacity: 0;
     opacity: 0;
     transition: opacity 0.1s ease;
     transition: opacity 0.1s ease;
-  }
-  &--removed {
-    display: none;
+    z-index: 0;
   }
   }
 }
 }
 
 
 .confirm-delete {
 .confirm-delete {
-  &--show {
-    display: inline-block;
+  display: flex;
+  align-items: flex-start;
+
+  &.show {
     opacity: 1;
     opacity: 1;
     transition: opacity 0.08s ease-out, transform 0.1s ease-out;
     transition: opacity 0.08s ease-out, transform 0.1s ease-out;
     transform: translateX(0);
     transform: translateX(0);
   }
   }
 
 
-  &--hide {
-    display: inline-block;
+  &.hide {
     opacity: 0;
     opacity: 0;
     transition: opacity 0.12s ease-in, transform 0.14s ease-in;
     transition: opacity 0.12s ease-in, transform 0.14s ease-in;
     transform: translateX(100px);
     transform: translateX(100px);
   }
   }
-  &--removed {
-    display: none;
-  }
 }
 }