diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index 75cd62f575..b1894c16f0 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -18,6 +18,8 @@ import iOSLeaveAnimation from './animations/ios.leave'; }) export class Alert { private animation: Animation; + private activeId: string; + private inputType: string; @Element() private el: HTMLElement; @@ -36,7 +38,7 @@ export class Alert { @Prop() subTitle: string; @Prop() message: string; @Prop() buttons: AlertButton[] = []; - @Prop() inputs: AlertInput[] = []; + @Prop({state: true}) inputs: AlertInput[] = []; @Prop() enableBackdropDismiss: boolean = true; @Prop() enterAnimation: AnimationBuilder; @@ -142,38 +144,29 @@ export class Alert { } rbClick(button: any) { - console.log('rbClick', button); - // if (this.enabled) { - // this.d.inputs.forEach(input => { - // input.checked = (button === input); - // }); - // this.activeId = button.id; - - // if (button.handler) { - // button.handler(button); - // } - // } + this.inputs.forEach(input => { + input.checked = (button === input); + return input; + }); + this.activeId = button.id; + + if (button.handler) { + button.handler(button); + } } cbClick(button: any) { - console.log('cbClick', button); - // if (this.enabled) { - // button.checked = !button.checked; - - // if (button.handler) { - // button.handler(button); - // } - // } + button.checked = !button.checked; + + if (button.handler) { + button.handler(button); + } } btnClick(button: any) { console.log('btnClick', button); - // if (!this.enabled) { - // return; - // } - - // keep the time of the most recent button click + // TODO keep the time of the most recent button click // this.lastClick = Date.now(); let shouldDismiss = true; @@ -181,10 +174,10 @@ export class Alert { if (button.handler) { // a handler has been provided, execute it // pass the handler the values from the inputs - // if (button.handler(this.getValues()) === false) { - // // if the return value of the handler is false then do not dismiss - // shouldDismiss = false; - // } + if (button.handler(this.getValues()) === false) { + // if the return value of the handler is false then do not dismiss + shouldDismiss = false; + } } if (shouldDismiss) { @@ -192,6 +185,39 @@ export class Alert { } } + getValues(): any { + if (this.inputType === 'radio') { + // this is an alert with radio buttons (single value select) + // return the one value which is checked, otherwise undefined + const checkedInput = this.inputs.find(i => i.checked); + console.debug('returning', checkedInput ? checkedInput.value : undefined); + return checkedInput ? checkedInput.value : undefined; + } + + if (this.inputType === 'checkbox') { + // this is an alert with checkboxes (multiple value select) + // return an array of all the checked values + console.debug('returning', this.inputs.filter(i => i.checked).map(i => i.value)); + return this.inputs.filter(i => i.checked).map(i => i.value); + } + + if (this.inputs.length === 0) { + // this is an alert without any options/inputs at all + console.debug('returning', 'undefined'); + return undefined; + } + + // this is an alert with text inputs + // return an object of all the values with the input name as the key + const values: {[k: string]: string} = {}; + this.inputs.forEach(i => { + values[i.name] = i.value; + }); + + console.debug('returning', values); + return values; + } + buttonClass(button: AlertButton): CssClassMap { let buttonClass: string[] = !button.cssClass ? ['alert-button'] @@ -224,12 +250,11 @@ export class Alert { renderRadio(inputs: AlertInput[]) { const hdrId = 'TODO'; - const activeId = 'TODO'; if (inputs.length === 0) return null; return ( -
+
{ inputs.map(i => (