javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): add alert overlay support

Browse Source
This commit is contained in:
Brandy Carney
2017-08-22 16:20:11 -04:00
parent 1276224a5e
commit d43d2d583a
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/core/src/components/select/select.tsx
View File

@ -7,7 +7,7 @@ import { Alert } from '../alert/alert';
import { Popover } from '../popover/popover'; import { Popover } from '../popover/popover';
import { ActionSheetController } from '../action-sheet-controller/action-sheet-controller'; import { ActionSheetController } from '../action-sheet-controller/action-sheet-controller';
// import { AlertController } from '../alert-controller/alert-controller'; import { AlertController } from '../alert-controller/alert-controller';
import { PopoverController } from '../popover-controller/popover-controller'; import { PopoverController } from '../popover-controller/popover-controller';
@ -32,7 +32,7 @@ export class Select {
overlay: ActionSheet | Alert | Popover; overlay: ActionSheet | Alert | Popover;
@Prop({ connect: 'ion-action-sheet-controller' }) actionSheetCtrl: ActionSheetController; @Prop({ connect: 'ion-action-sheet-controller' }) actionSheetCtrl: ActionSheetController;
// @Prop({ connect: 'ion-alert-controller' }) alertCtrl: AlertController; @Prop({ connect: 'ion-alert-controller' }) alertCtrl: AlertController;
@Prop({ connect: 'ion-popover-controller' }) popoverCtrl: PopoverController; @Prop({ connect: 'ion-popover-controller' }) popoverCtrl: PopoverController;
@Element() el: HTMLElement; @Element() el: HTMLElement;
@ -194,18 +194,18 @@ export class Select {
// user cannot provide inputs from selectOptions // user cannot provide inputs from selectOptions
// alert inputs must be created by ionic from ion-select-options // alert inputs must be created by ionic from ion-select-options
selectOptions.inputs = Array.from(this.options).map((input: any) => { selectOptions.inputs = Array.from(this.options).map((option: any) => {
return { return {
type: (this.multiple ? 'checkbox' : 'radio'), type: (this.multiple ? 'checkbox' : 'radio'),
label: input.text, label: option.getText(),
value: input.value, value: option.value,
checked: input.selected, checked: option.selected,
disabled: input.disabled, disabled: option.disabled,
handler: (selectedOption: any) => { handler: (selectedOption: any) => {
// Only emit the select event if it is being checked // Only emit the select event if it is being checked
// For multi selects this won't emit when unchecking // For multi selects this won't emit when unchecking
if (selectedOption.checked) { if (selectedOption.checked) {
input.ionSelect.emit(input.value); option.ionSelect.emit(option.value);
} }
} }
}; };
@ -218,17 +218,17 @@ export class Select {
selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : ''; selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
// create the alert instance from our built up selectOptions // create the alert instance from our built up selectOptions
// overlay = new Alert(this._app, selectOptions, this.config); const alertOptions = {
cssClass: selectCssClass,
buttons: [{
text: this.okText,
handler: (selectedValues: any) => this.value = selectedValues
}],
...selectOptions
}
// overlay.setCssClass(selectCssClass); console.debug('Built Select: Alert with', alertOptions);
return this.alertCtrl.create(alertOptions);
// overlay.addButton({
// text: this.okText,
// handler: (selectedValues) => this.value = selectedValues
// });
console.debug('Built Select: Alert with', selectOptions, selectCssClass);
// return overlay;
} }
buildActionSheet(selectOptions: any) { buildActionSheet(selectOptions: any) {
@ -251,10 +251,13 @@ export class Select {
// If the user passed a cssClass for the select, add it // If the user passed a cssClass for the select, add it
selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : ''; selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
selectOptions.cssClass = selectCssClass; const actionSheetOptions = {
cssClass: selectCssClass,
...selectOptions
}
console.debug('Built Select: Action Sheet with', selectOptions, selectCssClass); console.debug('Built Select: Action Sheet with', actionSheetOptions);
return this.actionSheetCtrl.create(selectOptions); return this.actionSheetCtrl.create(actionSheetOptions);
} }
buildPopover(selectOptions: any) { buildPopover(selectOptions: any) {
@ -278,16 +281,17 @@ export class Select {
// If the user passed a cssClass for the select, add it // If the user passed a cssClass for the select, add it
selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : ''; selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
console.debug('Built Select: Popover with', selectOptions, selectCssClass); const popoverOptions = {
return this.popoverCtrl.create({
component: 'ion-select-popover', component: 'ion-select-popover',
componentProps: { componentProps: {
options: selectOptions options: selectOptions
}, },
cssClass: selectCssClass, cssClass: selectCssClass,
ev: event ev: event
}); }
console.debug('Built Select: Popover with', popoverOptions);
return this.popoverCtrl.create(popoverOptions);
} }
open(ev: UIEvent) { open(ev: UIEvent) {
@ -319,7 +323,7 @@ export class Select {
} else if (selectInterface === 'popover') { } else if (selectInterface === 'popover') {
controller = this.buildPopover(selectOptions); controller = this.buildPopover(selectOptions);
} else { } else {
this.buildAlert(selectOptions); controller = this.buildAlert(selectOptions);
} }
controller.then((component: any) => { controller.then((component: any) => {