Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Types of property 'buttons' are incompatible #763

Closed
burakkilic opened this issue Nov 8, 2017 · 9 comments
Closed

Types of property 'buttons' are incompatible #763

burakkilic opened this issue Nov 8, 2017 · 9 comments

Comments

@burakkilic
Copy link

burakkilic commented Nov 8, 2017

Hi,

I'm getting "Types of property 'buttons' are incompatible" error in my component. Here is the code and error:

`delete(id, $index) {
    swal({
        title: "Are you sure?",
        text: "Are you sure to delete the menu? It cannot be undone.",
        icon: "warning",
        dangerMode: true,
        buttons: {
            cancel: "Cancel",
            ok: "OK"
        }
    })
        .then(willDelete => {
            if (willDelete) {
                Helpers.setLoading(true);
                this.service
                    .delete({ _id: id})
                    .subscribe(data => {
                        if (data.type) {
                            this.cars.splice($index, 1);
                            Helpers.setLoading(false);
                        }
                    });
            }
        });

    }`

I'm getting

Argument of type '{ title: string; text: string; icon: string; dangerMode: true; buttons: { cancel: string; ok: str...' is not assignableto parameter of type 'string | Partial<SwalOptions>'. Type '{ title: string; text: string; icon: string; dangerMode: true; buttons: { cancel: string; ok: str...' is not assignable to type 'Partial<SwalOptions>'. Types of property 'buttons' are incompatible. Type '{ cancel: string; ok: string; }' is not assignable to type 'ButtonList'. Property 'cancel' is incompatible with index signature. Type 'string' is not assignable to type 'ButtonOptions'.

What can be the reason?

@alex-osman
Copy link
Contributor

buttons: [true, true] will give the default cancel and ok
buttons: ['Cancel', 'Ok'] will give buttons named Cancel and Ok

@burakkilic
Copy link
Author

Error became like:

error TS2345: Argument of type '{ title: string; text: string; icon: string; dangerMode: true; buttons: boolean[]; }' is not assignable to parameter oftype 'string | Partial<SwalOptions>'. Type '{ title: string; text: string; icon: string; dangerMode: true; buttons: boolean[]; }' is not assignable to type 'Partial<SwalOptions>'. Types of property 'buttons' are incompatible. Type 'boolean[]' is not assignable to type 'ButtonList'. Index signature is missing in type 'boolean[]'.

@alex-osman
Copy link
Contributor

You are facing a typescript error, make sure to follow these types

export interface ButtonOptions {
  visible: boolean,
  text: string,
  value: any,
  className: string,
  closeModal: boolean,
};

export interface ButtonList {
  [buttonNamespace: string]: ButtonOptions,
};

It seems buttons: cannot be a boolean array, but it must be a ButtonList.
You may try

buttons: {
  cancel: { text: 'Cancel' },
  confirm: { text: 'Confirm' },
}

@burakkilic
Copy link
Author

Why should I add this code? I couldn't get what I have to do

@splitt3r
Copy link

Why aren´t the options optional in typescript? You have to pass all values instead of the ones you need. jQuery for example does it like:

interface DialogOptions {
    closeBtn?: string;
    closeBtnText?: string;
    corners?: boolean;
    initSelector?: string;
    overlayTheme?: string;
}

@t4t5
Copy link
Owner

t4t5 commented Nov 18, 2017

@splitt3r You're right, they should definitely be optional. If anyone wants to send a pull request to fix this, feel free to!

@kipkemoimayor
Copy link

kipkemoimayor commented Mar 24, 2019

### This will work 

swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })

@ricnef2121
Copy link

ricnef2121 commented Aug 1, 2019

swal({
        title: "Are you sure?",
        text: "Are you sure to delete the menu? It cannot be undone.",
        icon: "warning",
        dangerMode: true,
        buttons: {
            cancel: "Cancel",
            ok: "OK"
        }
    } as any)

@pshoraciozevallosafiliaciones

Thanks, I worked with Angular 10 , Swal.fire({
title: 'Espere',
text: 'Guardando informacion',
ty: 'info',
allowOutsideClick: false
}as any);
Swal.showLoading();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants