From 500c0b7758103316b98bb2e35905316e32f92295 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 22 Dec 2017 11:27:03 -0500 Subject: [PATCH] fix(select): pass interface options to overlays and fix styling --- .../core/src/components/input/input.ios.scss | 4 -- .../core/src/components/input/input.md.scss | 5 --- .../select-popover/select-popover.tsx | 15 +++++++ .../src/components/select/select.ios.scss | 9 ++++ .../core/src/components/select/select.md.scss | 10 +++++ .../core/src/components/select/select.tsx | 41 ++++++++++++++----- 6 files changed, 64 insertions(+), 20 deletions(-) diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss index 00a40fd7ea..64029157b6 100644 --- a/packages/core/src/components/input/input.ios.scss +++ b/packages/core/src/components/input/input.ios.scss @@ -97,10 +97,6 @@ @include margin-horizontal(0, null); } -.item-label-stacked .select-ios, -.item-label-floating .select-ios { - @include padding(8px, null, 8px, 0); -} // iOS Input After Label // -------------------------------------------------- diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss index 717a9f9c69..f4f8e6899c 100644 --- a/packages/core/src/components/input/input.md.scss +++ b/packages/core/src/components/input/input.md.scss @@ -93,11 +93,6 @@ width: calc(100% - #{$input-md-margin-end}); } -.item-label-stacked .select-md, -.item-label-floating .select-md { - @include padding(8px, null, 8px, 0); -} - // Material Design Clear Input Icon // -------------------------------------------------- diff --git a/packages/core/src/components/select-popover/select-popover.tsx b/packages/core/src/components/select-popover/select-popover.tsx index 6c87fe9a4b..55d7129303 100644 --- a/packages/core/src/components/select-popover/select-popover.tsx +++ b/packages/core/src/components/select-popover/select-popover.tsx @@ -18,6 +18,12 @@ export interface SelectPopoverOption { export class SelectPopover { private mode: string; + @Prop() title: string; + + @Prop() subTitle: string; + + @Prop() message: string; + @Prop() options: SelectPopoverOption[] = []; @Listen('ionSelect') @@ -29,6 +35,15 @@ export class SelectPopover { render() { return ( + { this.title ? {this.title} : null } + { this.subTitle || this.message + ? + + { this.subTitle ?

{this.subTitle}

: null } + { this.message ?

{this.message}

: null } + + + : null} {this.options.map(option => diff --git a/packages/core/src/components/select/select.ios.scss b/packages/core/src/components/select/select.ios.scss index 2fc7af6c79..ced6dfccbb 100644 --- a/packages/core/src/components/select/select.ios.scss +++ b/packages/core/src/components/select/select.ios.scss @@ -35,3 +35,12 @@ pointer-events: none; } + + +// Stacked & Floating Select +// -------------------------------------------------- + +.item-label-stacked .select-ios, +.item-label-floating .select-ios { + @include padding(8px, null, 8px, 0); +} \ No newline at end of file diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss index 196d4ee0a3..d50b8d9611 100644 --- a/packages/core/src/components/select/select.md.scss +++ b/packages/core/src/components/select/select.md.scss @@ -40,6 +40,16 @@ pointer-events: none; } + +// Stacked & Floating Select +// -------------------------------------------------- + +.item-label-stacked .select-md, +.item-label-floating .select-md { + @include padding(8px, null, 8px, 0); +} + + // Select Popover Interface // -------------------------------------------------- diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 5ab2860b50..ced4972b70 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -253,6 +253,7 @@ export class Select { // there are no values set at this point // so check to see who should be selected const checked = this.childOpts.filter(o => o.selected); + (this.value as string[]).length = 0; checked.forEach(o => { // doing this instead of map() so we don't @@ -303,9 +304,14 @@ export class Select { } openPopover(ev: UIEvent) { - const popoverOpts: PopoverOptions = { + let interfaceOptions = {...this.interfaceOptions}; + + const popoverOpts: PopoverOptions = Object.assign(interfaceOptions, { component: 'ion-select-popover', data: { + title: interfaceOptions.title, + subTitle: interfaceOptions.subTitle, + message: interfaceOptions.message, value: this.value, options: this.childOpts.map(o => { return { @@ -320,9 +326,9 @@ export class Select { } as SelectPopoverOption; }) }, - cssClass: 'select-popover ' + (this.interfaceOptions.cssClass ? ' ' + this.interfaceOptions.cssClass : ''), + cssClass: 'select-popover' + (interfaceOptions.cssClass ? ' ' + interfaceOptions.cssClass : ''), ev: ev - }; + }); const popover = this.popoverCtrl.create(popoverOpts); @@ -337,6 +343,8 @@ export class Select { } openActionSheet() { + let interfaceOptions = {...this.interfaceOptions}; + const actionSheetButtons: ActionSheetButton[] = this.childOpts.map(option => { return { role: (option.selected ? 'selected' : ''), @@ -355,10 +363,10 @@ export class Select { } }); - const actionSheetOpts: ActionSheetOptions = { + const actionSheetOpts: ActionSheetOptions = Object.assign(interfaceOptions, { buttons: actionSheetButtons, - cssClass: 'select-action-sheet' + (this.interfaceOptions.cssClass ? ' ' + this.interfaceOptions.cssClass : '') - }; + cssClass: 'select-action-sheet' + (interfaceOptions.cssClass ? ' ' + interfaceOptions.cssClass : '') + }); const actionSheet = this.actionSheetCtrl.create(actionSheetOpts); return actionSheet.then(overlay => { @@ -371,14 +379,16 @@ export class Select { } openAlert() { + let interfaceOptions = {...this.interfaceOptions}; + const label = this.getLabel(); let labelText: string = null; if (label) { labelText = label.textContent; } - const alertOpts: AlertOptions = { - title: labelText, + const alertOpts: AlertOptions = Object.assign(interfaceOptions, { + title: interfaceOptions.title ? interfaceOptions.title : labelText, inputs: this.childOpts.map(o => { return { type: (this.multiple ? 'checkbox' : 'radio'), @@ -398,15 +408,15 @@ export class Select { }, { text: this.okText, - handler: (selectedValues) => { + handler: (selectedValues: any) => { this.value = selectedValues; } } ], cssClass: 'select-alert ' + (this.multiple ? 'multiple-select-alert' : 'single-select-alert') + - (this.interfaceOptions.cssClass ? ' ' + this.interfaceOptions.cssClass : '') - }; + (interfaceOptions.cssClass ? ' ' + interfaceOptions.cssClass : '') + }); const alert = this.alertCtrl.create(alertOpts); return alert.then(overlay => { @@ -448,11 +458,20 @@ export class Select { this.ionBlur.emit(); } + hasValue(): boolean { + if (Array.isArray(this.value)) { + return this.value.length > 0; + } + return (this.value !== null && this.value !== undefined && this.value !== ''); + } + emitStyle() { clearTimeout(this.styleTmr); this.styleTmr = setTimeout(() => { this.ionStyle.emit({ + 'select': true, + 'input-has-value': this.hasValue(), 'select-disabled': this.disabled }); });