alex-shamshurin / sweetalert2-react Goto Github PK

In deps of this library we have "sweetalert2": "^8.5.0", here, but Sweetalert2 already released v11.6.14 - any plans to suppose newer versions of Swal?

• The new function to wrap a sweetalert2 instance is asReactComponent, not withSwalInstance
• "You should import sweetalert2.css from 'sweetalert2' package" no longer applies since #3 was closed

I think we should move to an even more react-y state and do something like:

     <div>
        <Typography gutterBottom>Click to get the full Modal experience!</Typography>
        <Button onClick={this.handleOpen}>Open Modal</Button>
        <SweetAlert
          open={this.state.open}
          onClose={this.handleClose}
        >
          <div className={classes.paper}>
            <h2>
              Text in a modal
            </h2>
            <p id="simple-modal-description">
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>
          </div>
        </SweetAlert>
      </div>

The demo @ http://chentsulin.github.io/sweetalert-react/ uses code like this: (I've stripped it down a bit)

import { Component } from 'react';
import SweetAlert from 'sweetalert-react';

export default class App extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ show: true })}>Alert</button>
        <SweetAlert
          show={this.state.show}
          title="Demo"
          showCancelButton
          onConfirm={() => {
            console.log('confirm');
            this.setState({ show: false });
          }}
          onCancel={() => {
            console.log('cancel');
            this.setState({ show: false });
          }}
          onEscapeKey={() => this.setState({ show: false })}
          onOutsideClick={() => this.setState({ show: false })}
        />
      </div>
    );
  }
}

But how is that more declarative (repo description is "Declarative SweetAlert in React") or better than this equivalent code?...

import swal from 'sweetalert2';

function onClick () {
  swal({
    title: 'Demo',
    showCancelButton: true
  }).then(({dismiss}) => {
    if (!dismiss) {
      console.log('confirm')
    } else if (dismiss === 'cancel') {
      console.log('cancel')
    }
  })
}

export default function App {
    return <button onClick={onClick}>Alert</button>;
}

note: The above code is using the SweetAlert2 version 7 API, where the useRejections option is false by default

Using this package, it seems to take a lot more code to do the same thing.

It bothers me that the SweetAlert component is technically present even when we don't want it to be, just hidden. I think this is the root of the problem of all the boilerplate code, because it means we have to manage the visibility and life-cycle of the swals ourselves.

I have the suspicion that swal as a component doesn't make sense...

/cc @alex-shamshurin @hipstersmoothie

... when click on <a target="_blank"> in modal content. When you back to orginal page you see modal for a quick moment and it disappears without calling 'onDestroy' or 'onClose' callback.

Hello, when I use this module, it constantly argues about prop being not boolean

Warning: Failed prop type: Invalid prop html of type string supplied to SweetAlert, expected boolean.
in SweetAlert (created by Campaign)
in Campaign

MY CODE:

<SweetAlert
  show={saveConfirm}
  title={t('campaign.confirmCampaign')}
  html={renderToStaticMarkup(confirmModalHtml)}
  showCancelButton
  cancelButtonText={t('actions.cancel')}
  confirmButtonText={t('actions.confirm')}
  confirmButtonColor="#474F79"
  reverseButtons
  onConfirm={this.save.bind(this)}
  onCancel={this.valueByKey.bind(this, 'saveConfirm', false)}
  onEscapeKey={this.valueByKey.bind(this, 'saveConfirm', false)}
/>

but when I change it to html={true}, text={renderToStaticMarkup(confirmModalHtml)}, it doesn't work, maybe it is just forgotten prop-type check, or I am missing something? It works but with error warning

in

src/SweetAlert.js line 240 --> onConfirmm --> should be onConfirm

This bug prevent user from pressing the confirm button

The wrapper doesn't seem to have a support for Footers, example here https://sweetalert2.github.io/

This package currently uses SweetAlert2 version 6

The latest version of SweetAlert2 is 7.6.2

If/when tests are fixed (#1), Greenkeeper can be used to do these upgrades (semi-) automatically.

By calling the onCacel function I am getting the return from the onConfirm function! This is very critical, could it solve?

Hello,

I am trying to use preConfirm of sweetalert2 with sweetalert2-react but can't do that? showLoaderOnConfirm is an option there however as per sweetalert2 documentation, showLoaderOnConfirm should be used together with preConfirm, how can I use preConfirm?

Thanks a lot.

I am pulling 0.8.1 from npm. I am finding that if I set an onConfirm handler, then my onCancel does not execute. Here's a snippet of my code:

import SweetAlert from 'sweetalert2-react';
....
<SweetAlert
show={this.state.removeAlert}
title="Delete Swing"
text="Are you sure?"
showCancelButton
confirmButtonColor="#bed745"
onConfirm={() => { this.setState({ removeAlert: false }); dispatch(deleteSwing(this.state.swing)); }}
onCancel={() => this.setState({ removeAlert: false, swing: null })}
/>

The deleteSwing() method is called regardless of whether I click the OK or Cancel buttons.

Setting the type to input doesn't bring the input field up.

<SweetAlert show={this.state.renameAlert} title="Demo Input" text="SweetAlert in React" type="input" inputType="password" inputPlaceholder="password" onConfirm={inputValue=> { console.log(inputValue); // eslint-disable-line no-console this.setState({ renameAlert: false }); }} />

produces

Also produces this error in console

SweetAlert2: Unknown type! Expected "success", "error", "warning", "info" or "question", got "input"

I know it's still young, but it would be awesome to include this so i could write

<SweetAlert
  show={this.state.show}
  text={<h1> Some Text </h1>}
  onConfirm={() => this.setState({ show: false })}
/>

@zenflow do you think it would be possible to accomplish this with your package?

From the README:

Test were not updated to support sweetalert2

The ability to define a container class, position, backdrop, etc is not present in this component.

sweetalert-react.min.js:450 SweetAlert2: The parameter "confirmButtonClass" is deprecated

In the sweetalert-react package, you can render component by this

import { renderToStaticMarkup } from 'react-dom/server';

<SweetAlert
  show={this.state.show}
  title="Demo"
  html
  text={renderToStaticMarkup(<HelloWorld />)}
  onConfirm={() => this.setState({ show: false })}
/>

Check this example and issue

But now in sweetalert2-react, this approach would display the html tags to escaped text. We need an approach to put components inside sweetalert2.

How can i change the font family ?

why type="input" is not working ???

I got an error when using type="input":
SweetAlert2: Unknown type! Expected "success", "error", "warning", "info" or "question", got "input"

Screenshot:
click to view error screenshot

I find it pretty odd that i have to include the css from another package to get your component to work. Is it possible to do that inside the component instead? I would expect importing your component to have already loaded it

"window is not defined" in nextjs project. Actually window in not available at server side. So, i am using this hack https://github.com/zeit/next.js/issues/2473#issuecomment-362119102 . but this does not work everytime, it will be helpful if you add this check .

As I have downloaded your code and tried to run the cancel example, it gives some proptypes related error for unexpected token. may be due to that you are not able to build and your npm build is failed so all latest changes of master not covered in package. and onCancel not working.

so can you please help us with new version with working and npm build pass?

The repo's website is still appearing as http://chentsulin.github.io/sweetalert-react/ .. and http://alex-shamshurin.github.io/sweetalert-react/ doesn't exist ..

Examples here need to be updated to use the forked version, published to GitHub Pages, and linked to as the repo's website.