changed swal to swal2 in SavesList

This commit is contained in:
knoxfighter 2018-08-10 23:54:28 +02:00
parent d5e1852925
commit d59a984cdd
4 changed files with 81 additions and 85 deletions

View File

@ -18,10 +18,9 @@ class SavesList extends React.Component {
let self = this;
ReactSwalDanger.fire({
title: "Are you sure?",
html: <p style={{width: "100%", textAlign: "center"}}>Save: {saveName} will be deleted</p>,
html: <p>Save: {saveName} will be deleted</p>,
type: "question",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
showLoaderOnConfirm: true,
preConfirm: () => {
@ -42,9 +41,7 @@ class SavesList extends React.Component {
});
});
},
allowOutsideClick: () => !ReactSwalDanger.isLoading()
}).then((result) => {
console.log(result);
if(result.value) {
ReactSwalNormal.fire({
title: "Deleted!",
@ -54,7 +51,6 @@ class SavesList extends React.Component {
}
self.updateSavesList();
}).catch((result) => {
console.log(result);
ReactSwalNormal.fire({
title: "An error occurred!",
text: result,

View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
// import swal from 'sweetalert';
import {ReactSwalDanger, ReactSwalNormal} from './../../../js/customSwal';
class UserTable extends React.Component {
constructor(props) {
@ -9,31 +9,50 @@ class UserTable extends React.Component {
}
removeUser(user) {
/*swal({
title: "Are you sure?",
text: "User: " + user + " will be deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
() => {
user = {username: user}
$.ajax({
type: "POST",
url: "/api/user/remove",
dataType: "json",
data: JSON.stringify(user),
success: (resp) => {
if (resp.success === true) {
swal("Deleted!", resp.data, "success");
}
}
})
});*/
this.props.listUsers();
ReactSwalDanger.fire({
title: "Are you sure?",
html: <p>User {user} will be deleted!</p>,
type: "question",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
showLoaderOnConfirm: true,
preConfirm: () => {
return new Promise((resolve, reject) => {
user = {username: user};
$.ajax({
type: "POST",
url: "/api/user/remove",
dataType: "json",
data: JSON.stringify(user),
success: (resp) => {
if (resp.success === true) {
resolve(resp.data);
} else {
reject("Unknown error");
}
},
error: () => {
reject("Unknown error");
}
});
});
}
}).then((result) => {
if (result.value) {
ReactSwalNormal.fire({
title: "Deleted!",
text: result.value,
type: "success"
});
this.props.listUsers();
}
}).catch((result) => {
ReactSwalNormal.fire({
title: "An error occurred!",
text: result,
type: "error"
});
});
}

View File

@ -6,7 +6,9 @@ const ReactSwalTemp = ReactSwal.mixin({
confirmButtonClass: "swal-btn btn-primary",
cancelButtonClass: "swal-btn btn-secondary",
customClass: "swal-design",
buttonsStyling: false
buttonsStyling: false,
allowOutsideClick: () => !ReactSwalDanger.isLoading()
});
export const ReactSwalNormal = ReactSwalTemp.mixin({

View File

@ -9,61 +9,40 @@
border-radius: 0;
}
/*.swal2-popup .swal2-actions.swal2-loading .swal2-confirm {
width: 2.5em;
height: 2.5em;
margin: .46875em;
padding: 0;
border: .25em solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 100%;
border-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
background-color: transparent !important;
color: transparent;
cursor: default;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}*/
.swal2-popup .swal2-actions.swal2-loading {
.swal2-confirm {
width: 2.5em;
height: 2.5em;
margin: .46875em;
padding: 0;
border-radius: 100%;
background-color: transparent !important;
color: transparent;
cursor: default;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(221, 107, 85);
border: .25em solid transparent;
border-right-color: rgb(221, 107, 85);
border-left-color: rgb(221, 107, 85);
display: flex;
.swal2-popup {
.swal2-content {
text-align: center;
}
:not(.swal2-styled).swal2-confirm::after {
display: none;
.swal2-actions.swal2-loading {
.swal2-confirm {
width: 2.5em;
height: 2.5em;
margin: .46875em;
padding: 0;
border-radius: 100%;
background-color: transparent !important;
color: transparent;
cursor: default;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(221, 107, 85);
border: .25em solid transparent;
border-right-color: rgb(221, 107, 85);
border-left-color: rgb(221, 107, 85);
display: flex;
}
:not(.swal2-styled).swal2-confirm::after {
display: none;
}
}
}