Is it possible to disable buttons of ActionsheetController. Can anyone tell me what property to use and how can I use it


#1
extraContentAction() {
    let actionSheet = this.actionSheetCtrl.create({
      buttons: [
        {
          text: 'Summary',
          handler: () => {
            console.log('All modules selected');
          }
        },
        {
          text: 'Content',
          handler: () => {
            console.log('completed module selected');
            this.navCtrl.push(ContentPage, {

            });
          }
        },
        {
          text: 'Questions',
          handler: () => {
            console.log('Current module selected');
          }
        },
        {
          text: 'Review',
          handler: () => {
            console.log('Current module selected');
          }
        },
        {
          text: 'Resources',
          handler: () => {
            console.log('Current module selected');
          }
        },
        {
          text: 'Evaluate',
          handler: () => {
            console.log('Current module selected');
            this.navCtrl.push(EvaluationPage, {

            });
          }
        },
        {
          text: 'Exit',
          role: 'cancel',
          cssClass: 'ModuleActionClass',
          handler: () => {
            console.log('apply the changes');
          }
        }
      ]
    });
    actionSheet.present();
  }

#2

There is no general property for this! However, just like you did for your last button you can add a custom cssClass to the buttons that should be disabled to style it like a disabled button.

Then either disable the user input directly or add an early return; to your handler of the disabled button!


#3

as @saimon said, we can use cssClass property of handler() to assign some custom class.

 /*
  |----------------------------------
  |   SHOWING ACTION SHEET
  |----------------------------------
  */  
  showActions(){
   const item = {status: 'pending' };
    const actionSheet = this.showActionSheet(item);
    actionSheet.then(sheet => {
      sheet.present();      
      sheet.onDidDismiss().then((response:any) => {
         console.log("Handle Action Sheet Response Here.");
      });
    });
  }
  /*
  |----------------------
  | Getting Action Sheet
  |-----------------------
  */
  async showActionSheet(item?: any) {
      const buttons = [ 'Edit' , 'Delete',  'Pending' , 'Draft' , 'Publish' , 'Cancel']
      const actionSheet$ = await this.actionSheetCtrl.create({
            header: 'CleverHub',
            buttons: [ 
              {
                text : buttons[0],
                cssClass : this.cssClassForButton(item, buttons[0]),
                handler: () => { 
                  actionSheet$.dismiss({action: buttons[0]}).catch(() => {}); 
                  return false;
                }
              },
              {
                text : buttons[1],
                cssClass : this.cssClassForButton(item, buttons[1]),
                handler: () => { 
                  actionSheet$.dismiss({action: buttons[1]}).catch(() => {}); 
                  return false;
                }
              },
              {
                text : buttons[2],
                cssClass : this.cssClassForButton(item, buttons[2]),
                handler: () => { 
                  actionSheet$.dismiss({action: buttons[2]}).catch(() => {}); 
                  return false;
                }
              },
              {
                text : buttons[3],
                cssClass : this.cssClassForButton(item, buttons[3]),
                handler: () => { 
                  actionSheet$.dismiss({action: buttons[3]}).catch(() => {}); 
                  return false;
                }
              },
              {
                text : buttons[4],
                cssClass : this.cssClassForButton(item, buttons[4]),
                handler: () => { 
                  actionSheet$.dismiss({action: buttons[4]}).catch(() => {}); 
                  return false;
                }
              },
              {
                text: buttons[5],
                role: 'cancel',
                handler: () => {  
                  actionSheet$.dismiss({action: buttons[5]}).catch(() => {}); 
                  return false; 
                }
              }
            ]
        });
     
      return actionSheet$;
    }
/*
  |----------------------------------------------
  |  GETTING CSS CLASS FOR ACTION-SHEET BUTTONS
  |----------------------------------------------
  */
  cssClassForButton(item, buttonText): string {
    let cssClass = '';
    const status = item.status.toLowerCase();
    if(status === 'pending'  &&  ( buttonText === 'Edit' || buttonText === 'Pending'))
      cssClass = 'disable-action-sheet-btns';
    else if(status === 'draft'  && ( buttonText === 'Edit' || buttonText === 'Draft'))
      cssClass = 'disable-action-sheet-btns';
    else if(status === 'publish'  &&  ( buttonText === 'Publish'))
      cssClass = 'disable-action-sheet-btns';
    return cssClass;
  }

and css is like this:

.disable-action-sheet-btns {
    cursor: not-allowed;
    background-color: rgb(229, 229, 229) !important;
}

.disable-action-sheet-btns > * { pointer-events:none; }