From 73e8725f6d62e02792462c43b4ba36845af4b969 Mon Sep 17 00:00:00 2001 From: mhartington Date: Thu, 30 Nov 2017 11:42:07 -0500 Subject: [PATCH] feat(actionSheet): add custom cssClass in component and buttons --- .../action-sheet-controller.tsx | 31 +++++++++++++++++++ .../components/action-sheet/action-sheet.tsx | 13 +++++--- .../action-sheet/test/basic/index.html | 21 +++++++++++++ 3 files changed, 60 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx index fcf4fe7339..e8081fda2f 100644 --- a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -2,6 +2,33 @@ import { Component, Listen, Method } from '@stencil/core'; import { ActionSheetEvent, ActionSheetOptions } from '../../index'; +/** + * @name ActionSheetController + * @description + * An Action Sheet is a dialog that lets the user choose from a set of + * options. It appears on top of the app's content, and must be manually + * dismissed by the user before they can resume interaction with the app. + * Dangerous (destructive) options are made obvious in `ios` mode. There are easy + * ways to cancel out of the action sheet, such as tapping the backdrop or + * hitting the escape key on desktop. + * + * An action sheet is created from an array of `buttons`, with each button + * including properties for its `text`, and optionally a `handler` and `role`. + * If a handler returns `false` then the action sheet will not be dismissed. An + * action sheet can also optionally have a `title`, `subTitle` and an `icon`. + * + * A button's `role` property can either be `destructive` or `cancel`. Buttons + * without a role property will have the default look for the platform. Buttons + * with the `cancel` role will always load as the bottom button, no matter where + * they are in the array. All other buttons will be displayed in the order they + * have been added to the `buttons` array. Note: We recommend that `destructive` + * buttons are always the first button in the array, making them the top button. + * Additionally, if the action sheet is dismissed by tapping the backdrop, then + * it will fire the handler from the button with the cancel role. + * + * You can pass all of the action sheet's options in the first argument of + * the create method: `ActionSheet.create(opts)`. + */ @Component({ tag: 'ion-action-sheet-controller' }) @@ -10,6 +37,10 @@ export class ActionSheetController { private actionSheetResolves: { [actionSheetId: string]: Function } = {}; private actionSheets: HTMLIonActionSheetElement[] = []; + /** + * Open an action sheet with a title, subTitle, and an array of buttons + * @param {ActionSheetOptions} opts Action sheet options + */ @Method() create(opts?: ActionSheetOptions): Promise { // create ionic's wrapping ion-action-sheet component diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 0098293f37..0f3eaccc68 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -127,7 +127,6 @@ export class ActionSheet { this.ionActionSheetDidLoad.emit(); } - componentDidUnload() { this.ionActionSheetDidUnload.emit(); } @@ -147,9 +146,12 @@ export class ActionSheet { } buttonClass(button: ActionSheetButton): CssClassMap { + let customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' '); + let buttonClass: string[] = !button.role - ? ['action-sheet-button'] - : [`action-sheet-button`, `action-sheet-${button.role}`]; + ? ['action-sheet-button', customClass] + : [`action-sheet-button`, `action-sheet-${button.role}`, customClass]; + return buttonClass.reduce((prevValue: any, cssClass: any) => { prevValue[cssClass] = true; return prevValue; @@ -181,9 +183,10 @@ export class ActionSheet { } render() { - let userCssClass = 'action-sheet-content'; if (this.cssClass) { - userCssClass += ' ' + this.cssClass; + this.cssClass.split(' ').forEach(cssClass => { + if (cssClass.trim() !== '') this.el.classList.add(cssClass); + }); } let cancelButton: ActionSheetButton; diff --git a/packages/core/src/components/action-sheet/test/basic/index.html b/packages/core/src/components/action-sheet/test/basic/index.html index 91eaa9b54b..3052c99b58 100644 --- a/packages/core/src/components/action-sheet/test/basic/index.html +++ b/packages/core/src/components/action-sheet/test/basic/index.html @@ -26,6 +26,7 @@ Scrollable Options Scroll Without Cancel Cancel Only + Custom CSS Class @@ -289,6 +290,26 @@ }); await actionSheetElement.present(); } + + async function presentWithCssClass() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + await actionSheetController.componentOnReady(); + const actionSheetElement = await actionSheetController.create({ + title: "Custom Css Class", + cssClass: "my-class my-custom-class", + buttons: [ + { + text: 'Test', + cssClass: 'my-cancel-button, my-custom-button customClass', + handler: () => { + console.log('Cancel clicked'); + } + } + ] + }); + await actionSheetElement.present(); + } +