diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index ccdcb63360..511c4996f3 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -629,6 +629,7 @@ declare global { mode?: string, color?: string, + pickerCtrl?: any, disabled?: boolean, min?: string, max?: string, @@ -646,7 +647,8 @@ declare global { dayNames?: any, dayShortNames?: any, pickerOptions?: any, - placeholder?: string + placeholder?: string, + value?: string } } } @@ -1934,6 +1936,7 @@ declare global { mode?: string, color?: string, + addButton?: any, addColumn?: any, getColumn?: any, getColumns?: any, diff --git a/packages/core/src/components/picker/picker-column.tsx b/packages/core/src/components/picker/picker-column.tsx index 4cc29481ad..5f6d2125f1 100644 --- a/packages/core/src/components/picker/picker-column.tsx +++ b/packages/core/src/components/picker/picker-column.tsx @@ -1,6 +1,10 @@ import { Component, Element, Prop } from '@stencil/core'; -import { PickerColumn } from '../../index'; +import { PickerColumn, PickerColumnOption } from '../../index'; + +import { PICKER_OPT_SELECTED } from './picker'; + +import { clamp } from '../../utils/helpers'; @Component({ tag: 'ion-picker-column', @@ -9,13 +13,56 @@ import { PickerColumn } from '../../index'; } }) export class PickerColumnCmp { + mode: string; + + colHeight: number; velocity: number; optHeight: number; + rotateFactor: number; + scaleFactor: number; + y: number = 0; + lastIndex: number; @Element() el: HTMLElement; @Prop() col: PickerColumn; + protected ionViewWillLoad() { + let pickerRotateFactor = 0; + let pickerScaleFactor = 0.81; + + if (this.mode === 'ios') { + pickerRotateFactor = -0.46; + pickerScaleFactor = 1; + } + + this.rotateFactor = pickerRotateFactor; + this.scaleFactor = pickerScaleFactor; + // this.decelerateFunc = this.decelerate.bind(this); + // this.debouncer = domCtrl.debouncer(); + } + + protected ionViewDidLoad() { + // get the scrollable element within the column + let colEle = this.el.querySelector('.picker-opts'); + this.colHeight = colEle.clientHeight; + + // get the height of one option + this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0); + + // TODO Listening for pointer events + // this.events.pointerEvents({ + // element: this.elementRef.nativeElement, + // pointerDown: this.pointerStart.bind(this), + // pointerMove: this.pointerMove.bind(this), + // pointerUp: this.pointerEnd.bind(this), + // capture: true, + // zone: false + // }); + + this.refresh(); + } + optClick(ev: Event, index: number) { if (!this.velocity) { ev.preventDefault(); @@ -33,7 +80,7 @@ export class PickerColumnCmp { // this._plt.cancelRaf(this.rafId); this.velocity = 0; - // so what y position we're at + // set what y position we're at this.update(y, duration, true, true); } @@ -41,109 +88,212 @@ export class PickerColumnCmp { // ensure we've got a good round number :) y = Math.round(y); - // let i: number; - // let button: any; - // let opt: any; - // let optOffset: number; - // let visible: boolean; - // let translateX: number; - // let translateY: number; - // let translateZ: number; - // let rotateX: number; - // let transform: string; - // let selected: boolean; + let i: number; + let button: any; + let opt: PickerColumnOption; + let optOffset: number; + let visible: boolean; + let translateX: number; + let translateY: number; + let translateZ: number; + let rotateX: number; + let transform: string; + let selected: boolean; const parent = this.el.querySelector('.picker-opts'); - // const children = parent.children; - // const length = children.length; - // const selectedIndex = this.col.selectedIndex = Math.min(Math.max(Math.round(-y / this.optHeight), 0), length - 1); + const children = parent.children; + const length = children.length; + const selectedIndex = this.col.selectedIndex = Math.min(Math.max(Math.round(-y / this.optHeight), 0), length - 1); - // const durationStr = (duration === 0) ? null : duration + 'ms'; - // const scaleStr = `scale(${this.scaleFactor})`; + const durationStr = (duration === 0) ? null : duration + 'ms'; + const scaleStr = `scale(${this.scaleFactor})`; - // for (i = 0; i < length; i++) { - // button = children[i]; - // opt = this.col.options[i]; - // optOffset = (i * this.optHeight) + y; - // visible = true; - // transform = ''; + for (i = 0; i < length; i++) { + button = children[i]; + opt = this.col.options[i]; + optOffset = (i * this.optHeight) + y; + visible = true; + transform = ''; - // if (this.rotateFactor !== 0) { - // rotateX = optOffset * this.rotateFactor; - // if (Math.abs(rotateX) > 90) { - // visible = false; - // } else { - // translateX = 0; - // translateY = 0; - // translateZ = 90; - // transform = `rotateX(${rotateX}deg) `; - // } - // } else { - // translateX = 0; - // translateZ = 0; - // translateY = optOffset; - // if (Math.abs(translateY) > 170) { - // visible = false; - // } - // } + if (this.rotateFactor !== 0) { + rotateX = optOffset * this.rotateFactor; + if (Math.abs(rotateX) > 90) { + visible = false; + } else { + translateX = 0; + translateY = 0; + translateZ = 90; + transform = `rotateX(${rotateX}deg) `; + } + } else { + translateX = 0; + translateZ = 0; + translateY = optOffset; + if (Math.abs(translateY) > 170) { + visible = false; + } + } - // selected = selectedIndex === i; - // if (visible) { - // transform += `translate3d(0px,${translateY}px,${translateZ}px) `; - // if (this.scaleFactor !== 1 && !selected) { - // transform += scaleStr; - // } - // } else { - // transform = 'translate3d(-9999px,0px,0px)'; - // } - // // Update transition duration - // if (duration !== opt._dur) { - // opt._dur = duration; - // button.style[this._plt.Css.transitionDuration] = durationStr; - // } - // // Update transform - // if (transform !== opt._trans) { - // opt._trans = transform; - // button.style[this._plt.Css.transform] = transform; - // } - // // Update selected item - // if (selected !== opt._selected) { - // opt._selected = selected; - // if (selected) { - // button.classList.add(PICKER_OPT_SELECTED); - // } else { - // button.classList.remove(PICKER_OPT_SELECTED); - // } - // } - // } - // this.col.prevSelected = selectedIndex; + selected = selectedIndex === i; + if (visible) { + transform += `translate3d(0px,${translateY}px,${translateZ}px) `; + if (this.scaleFactor !== 1 && !selected) { + transform += scaleStr; + } + } else { + transform = 'translate3d(-9999px,0px,0px)'; + } + // Update transition duration + if (duration !== opt.duration) { + opt.duration = duration; + button.style.transitionDuration = durationStr; + } + // Update transform + if (transform !== opt.transform) { + opt.transform = transform; + button.style.transform = transform; + } + // Update selected item + if (selected !== opt.selected) { + opt.selected = selected; + if (selected) { + button.classList.add(PICKER_OPT_SELECTED); + } else { + button.classList.remove(PICKER_OPT_SELECTED); + } + } + } + this.col.prevSelected = selectedIndex; - // if (saveY) { - // this.y = y; - // } + if (saveY) { + this.y = y; + } - // if (emitChange) { - // if (this.lastIndex === undefined) { - // // have not set a last index yet - // this.lastIndex = this.col.selectedIndex; + if (emitChange) { + if (this.lastIndex === undefined) { + // have not set a last index yet + this.lastIndex = this.col.selectedIndex; - // } else if (this.lastIndex !== this.col.selectedIndex) { - // // new selected index has changed from the last index - // // update the lastIndex and emit that it has changed - // this.lastIndex = this.col.selectedIndex; - // var ionChange = this.ionChange; - // if (ionChange.observers.length > 0) { - // this._zone.run(ionChange.emit.bind(ionChange, this.col.options[this.col.selectedIndex])); - // } - // } - // } + } else if (this.lastIndex !== this.col.selectedIndex) { + // new selected index has changed from the last index + // update the lastIndex and emit that it has changed + this.lastIndex = this.col.selectedIndex; + // TODO ionChange event + // var ionChange = this.ionChange; + // if (ionChange.observers.length > 0) { + // this._zone.run(ionChange.emit.bind(ionChange, this.col.options[this.col.selectedIndex])); + // } + } + } } - render() { - console.log('picker column, render col', this.col); + + decelerate() { + // let y = 0; + + // if (isNaN(this.y) || !this.optHeight) { + // // fallback in case numbers get outta wack + // this.update(y, 0, true, true); + // this._haptic.gestureSelectionEnd(); + + // } else if (Math.abs(this.velocity) > 0) { + // // still decelerating + // this.velocity *= DECELERATION_FRICTION; + + // // do not let it go slower than a velocity of 1 + // this.velocity = (this.velocity > 0) + // ? Math.max(this.velocity, 1) + // : Math.min(this.velocity, -1); + + // y = Math.round(this.y - this.velocity); + + // if (y > this.minY) { + // // whoops, it's trying to scroll up farther than the options we have! + // y = this.minY; + // this.velocity = 0; + + // } else if (y < this.maxY) { + // // gahh, it's trying to scroll down farther than we can! + // y = this.maxY; + // this.velocity = 0; + // } + + // var notLockedIn = (y % this.optHeight !== 0 || Math.abs(this.velocity) > 1); + + // this.update(y, 0, true, !notLockedIn); + + + // if (notLockedIn) { + // // isn't locked in yet, keep decelerating until it is + // this.rafId = this._plt.raf(this.decelerateFunc); + // } + + // } else if (this.y % this.optHeight !== 0) { + // // needs to still get locked into a position so options line up + // var currentPos = Math.abs(this.y % this.optHeight); + + // // create a velocity in the direction it needs to scroll + // this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1); + // this._haptic.gestureSelectionEnd(); + + // this.decelerate(); + // } + + // let currentIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0); + // if (currentIndex !== this.lastTempIndex) { + // // Trigger a haptic event for physical feedback that the index has changed + // this._haptic.gestureSelectionChanged(); + // } + // this.lastTempIndex = currentIndex; + } + + refresh() { + let min = this.col.options.length - 1; + let max = 0; + const options = this.col.options; + for (var i = 0; i < options.length; i++) { + if (!options[i].disabled) { + min = Math.min(min, i); + max = Math.max(max, i); + } + } + + const selectedIndex = clamp(min, this.col.selectedIndex, max); + if (this.col.prevSelected !== selectedIndex) { + var y = (selectedIndex * this.optHeight) * -1; + // TODO + // this._plt.cancelRaf(this.rafId); + this.velocity = 0; + this.update(y, 150, true, false); + } + } + + + hostData() { + return { + class: { + 'picker-opts-left': this.col.align === 'left', + 'picker-opts-right': this.col.align === 'right' + }, + style: { + 'max-width': this.col.columnWidth + } + }; + } + + protected render() { let col = this.col; - const pickerPrefix: any[] = []; + let options = this.col.options + .map(o => { + if (typeof o === 'string') { + o = { text: o }; + } + return o; + }) + .filter(clientInformation => clientInformation !== null); + + let pickerPrefix: any[] = []; if (col.prefix) { pickerPrefix.push( @@ -153,18 +303,20 @@ export class PickerColumnCmp { ); } - // if (this.content) { - // pickerPrefix.push( - //
- // {this.content} - //
- // ); - // } + let pickerSuffix: any[] = []; + + if (col.suffix) { + pickerSuffix.push( +
+ {col.suffix} +
+ ); + } return [ { pickerPrefix },
- {col.options.map((o, index) => + {options.map((o, index) =>
- + , + { pickerSuffix } ]; - } - } - - -// /** -// * @hidden -// */ -// @Component({ -// selector: '.picker-col', -// template: -// '
{{col.prefix}}
' + -// '
' + -// '' + -// '
' + -// '
{{col.suffix}}
', -// host: { -// '[style.max-width]': 'col.columnWidth', -// '[class.picker-opts-left]': 'col.align=="left"', -// '[class.picker-opts-right]': 'col.align=="right"', -// } -// }) // export class PickerColumnCmp { // @ViewChild('colEle') colEle: ElementRef; // @Input() col: PickerColumn; -// y: number = 0; -// colHeight: number; -// velocity: number; // pos: number[] = []; // startY: number = null; // rafId: number; // bounceFrom: number; // minY: number; // maxY: number; -// rotateFactor: number; -// scaleFactor: number; // lastIndex: number; // lastTempIndex: number; // decelerateFunc: Function; // debouncer: DomDebouncer; // events: UIEventManager; -// @Output() ionChange: EventEmitter = new EventEmitter(); - -// constructor( -// config: Config, -// private _plt: Platform, -// private elementRef: ElementRef, -// private _zone: NgZone, -// private _haptic: Haptic, -// plt: Platform, -// domCtrl: DomController, -// ) { -// this.events = new UIEventManager(plt); -// this.rotateFactor = config.getNumber('pickerRotateFactor', 0); -// this.scaleFactor = config.getNumber('pickerScaleFactor', 1); -// this.decelerateFunc = this.decelerate.bind(this); -// this.debouncer = domCtrl.debouncer(); -// } - -// ngAfterViewInit() { -// // get the scrollable element within the column -// let colEle: HTMLElement = this.colEle.nativeElement; - -// this.colHeight = colEle.clientHeight; - -// // get the height of one option -// this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0); - -// // Listening for pointer events -// this.events.pointerEvents({ -// element: this.elementRef.nativeElement, -// pointerDown: this.pointerStart.bind(this), -// pointerMove: this.pointerMove.bind(this), -// pointerUp: this.pointerEnd.bind(this), -// capture: true, -// zone: false -// }); -// } - // ngOnDestroy() { // this._plt.cancelRaf(this.rafId); // this.events.destroy(); @@ -393,85 +477,3 @@ export class PickerColumnCmp { // this.startY = null; // this.decelerate(); // } - -// decelerate() { -// let y = 0; - -// if (isNaN(this.y) || !this.optHeight) { -// // fallback in case numbers get outta wack -// this.update(y, 0, true, true); -// this._haptic.gestureSelectionEnd(); - -// } else if (Math.abs(this.velocity) > 0) { -// // still decelerating -// this.velocity *= DECELERATION_FRICTION; - -// // do not let it go slower than a velocity of 1 -// this.velocity = (this.velocity > 0) -// ? Math.max(this.velocity, 1) -// : Math.min(this.velocity, -1); - -// y = Math.round(this.y - this.velocity); - -// if (y > this.minY) { -// // whoops, it's trying to scroll up farther than the options we have! -// y = this.minY; -// this.velocity = 0; - -// } else if (y < this.maxY) { -// // gahh, it's trying to scroll down farther than we can! -// y = this.maxY; -// this.velocity = 0; -// } - -// var notLockedIn = (y % this.optHeight !== 0 || Math.abs(this.velocity) > 1); - -// this.update(y, 0, true, !notLockedIn); - - -// if (notLockedIn) { -// // isn't locked in yet, keep decelerating until it is -// this.rafId = this._plt.raf(this.decelerateFunc); -// } - -// } else if (this.y % this.optHeight !== 0) { -// // needs to still get locked into a position so options line up -// var currentPos = Math.abs(this.y % this.optHeight); - -// // create a velocity in the direction it needs to scroll -// this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1); -// this._haptic.gestureSelectionEnd(); - -// this.decelerate(); -// } - -// let currentIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0); -// if (currentIndex !== this.lastTempIndex) { -// // Trigger a haptic event for physical feedback that the index has changed -// this._haptic.gestureSelectionChanged(); -// } -// this.lastTempIndex = currentIndex; -// } - - -// refresh() { -// let min = this.col.options.length - 1; -// let max = 0; -// const options = this.col.options; -// for (var i = 0; i < options.length; i++) { -// if (!options[i].disabled) { -// min = Math.min(min, i); -// max = Math.max(max, i); -// } -// } - -// const selectedIndex = clamp(min, this.col.selectedIndex, max); -// if (this.col.prevSelected !== selectedIndex) { -// var y = (selectedIndex * this.optHeight) * -1; -// this._plt.cancelRaf(this.rafId); -// this.velocity = 0; -// this.update(y, 150, true, false); -// } -// } - -// } diff --git a/packages/core/src/components/picker/picker.ios.scss b/packages/core/src/components/picker/picker.ios.scss index 9aa4fc3b07..99bcbc142d 100644 --- a/packages/core/src/components/picker/picker.ios.scss +++ b/packages/core/src/components/picker/picker.ios.scss @@ -115,7 +115,7 @@ $picker-ios-option-offset-y: (($picker-ios-height - $picker-io font-weight: $picker-ios-button-strong-font-weight; } -.picker-ios .picker-toolbar-cancel { +.picker-ios .picker-toolbar-button:first-child{ @include text-align(start); font-weight: normal; diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index 68f6d66c17..bb76786d91 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -20,6 +20,7 @@ export class Picker { private animation: Animation; private durationTimeout: any; private mode: string; + private lastClick: number = 0; @Element() private el: HTMLElement; @@ -167,30 +168,50 @@ export class Picker { this.ionPickerDidPresent.emit({ picker: this }); } - btnClick(button: PickerButton) { + buttonClick(button: PickerButton) { // if (!this.enabled) { // return; // } - // // keep the time of the most recent button click - // this.lastClick = Date.now(); + // keep the time of the most recent button click + this.lastClick = Date.now(); let shouldDismiss = true; - // if (button.handler) { - // // a handler has been provided, execute it - // // pass the handler the values from the inputs - // if (button.handler(this.getSelected()) === false) { - // // if the return value of the handler is false then do not dismiss - // shouldDismiss = false; - // } - // } + if (button.handler) { + // a handler has been provided, execute it + // pass the handler the values from the inputs + if (button.handler(this.getSelected()) === false) { + // if the return value of the handler is false then do not dismiss + shouldDismiss = false; + } + } if (shouldDismiss) { this.dismiss(); } } + getSelected(): any { + let selected: {[k: string]: any} = {}; + this.columns.forEach((col, index) => { + let selectedColumn = col.options[col.selectedIndex]; + selected[col.name] = { + text: selectedColumn ? selectedColumn.text : null, + value: selectedColumn ? selectedColumn.value : null, + columnIndex: index, + }; + }); + return selected; + } + + /** + * @param {any} button Picker toolbar button + */ + @Method() + addButton(button: any) { + this.buttons.push(button); + } /** * @param {PickerColumn} column Picker toolbar button @@ -215,7 +236,7 @@ export class Picker { if (this.enableBackdropDismiss) { let cancelBtn = this.buttons.find(b => b.role === 'cancel'); if (cancelBtn) { - this.btnClick(cancelBtn); + this.buttonClick(cancelBtn); } else { this.dismiss(); } @@ -240,9 +261,54 @@ export class Picker { }) .filter(b => b !== null); - console.log('picker render, columns', this.columns); let columns = this.columns; + // // clean up dat data + // data.columns = data.columns.map(column => { + // if (!isPresent(column.options)) { + // column.options = []; + // } + // column.selectedIndex = column.selectedIndex || 0; + // column.options = column.options.map(inputOpt => { + // let opt: PickerColumnOption = { + // text: '', + // value: '', + // disabled: inputOpt.disabled, + // }; + + // if (isPresent(inputOpt)) { + // if (isString(inputOpt) || isNumber(inputOpt)) { + // opt.text = inputOpt.toString(); + // opt.value = inputOpt; + + // } else { + // opt.text = isPresent(inputOpt.text) ? inputOpt.text : inputOpt.value; + // opt.value = isPresent(inputOpt.value) ? inputOpt.value : inputOpt.text; + // } + // } + + // return opt; + // }); + // return column; + // }); + + // RENDER TODO + // + //
+ //
+ //
+ // + // {{b.text}} + // + //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ return [ {buttons.map(b =>
-
@@ -294,8 +360,6 @@ export class Picker { } - - export interface PickerButton { text?: string; role?: string; @@ -323,12 +387,16 @@ export interface PickerColumn { prefixWidth?: string; suffixWidth?: string; optionsWidth?: string; + refresh?: () => void; } export interface PickerColumnOption { text?: string; value?: any; disabled?: boolean; + duration?: number; + transform?: string; + selected?: boolean; } export interface PickerEvent extends Event { @@ -343,124 +411,15 @@ export const FRAME_MS = (1000 / 60); export const MAX_PICKER_SPEED = 60; - - - -// /** -// * @hidden -// */ -// @Component({ -// selector: 'ion-picker-cmp', -// template: ` -// -//
-//
-//
-// -// {{b.text}} -// -//
-//
-//
-//
-//
-//
-//
-//
-// `, -// host: { -// 'role': 'dialog' -// }, -// encapsulation: ViewEncapsulation.None, -// }) -// export class PickerCmp { - // @ViewChildren(PickerColumnCmp) _cols: QueryList; // d: PickerOptions; // enabled: boolean; -// lastClick: number; // id: number; // mode: string; // _gestureBlocker: BlockerDelegate; -// constructor( -// private _viewCtrl: ViewController, -// private _elementRef: ElementRef, -// config: Config, -// private _plt: Platform, -// gestureCtrl: GestureController, -// params: NavParams, -// renderer: Renderer -// ) { -// this._gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL); -// this.d = params.data; -// this.mode = config.get('mode'); -// renderer.setElementClass(_elementRef.nativeElement, `picker-${this.mode}`, true); - -// if (this.d.cssClass) { -// this.d.cssClass.split(' ').forEach(cssClass => { -// renderer.setElementClass(_elementRef.nativeElement, cssClass, true); -// }); -// } - +// constructor() { // this.id = (++pickerIds); -// this.lastClick = 0; -// } - -// ionViewWillLoad() { -// // normalize the data -// let data = this.d; - -// data.buttons = data.buttons.map(button => { -// if (isString(button)) { -// return { text: button }; -// } -// }); - -// // clean up dat data -// data.columns = data.columns.map(column => { -// if (!isPresent(column.options)) { -// column.options = []; -// } -// column.selectedIndex = column.selectedIndex || 0; -// column.options = column.options.map(inputOpt => { -// let opt: PickerColumnOption = { -// text: '', -// value: '', -// disabled: inputOpt.disabled, -// }; - -// if (isPresent(inputOpt)) { -// if (isString(inputOpt) || isNumber(inputOpt)) { -// opt.text = inputOpt.toString(); -// opt.value = inputOpt; - -// } else { -// opt.text = isPresent(inputOpt.text) ? inputOpt.text : inputOpt.value; -// opt.value = isPresent(inputOpt.value) ? inputOpt.value : inputOpt.text; -// } -// } - -// return opt; -// }); -// return column; -// }); -// } - -// ionViewDidLoad() { -// this.refresh(); -// } - -// ionViewWillEnter() { -// this._gestureBlocker.block(); -// } - -// ionViewDidLeave() { -// this._gestureBlocker.unblock(); -// } - -// refresh() { -// this._cols.forEach(column => column.refresh()); // } // _colChange(selectedOption: PickerColumnOption) { @@ -500,25 +459,6 @@ export const MAX_PICKER_SPEED = 60; // this.enabled = true; // } - - -// dismiss(role: string): Promise { -// return this._viewCtrl.dismiss(this.getSelected(), role); -// } - -// getSelected(): any { -// let selected: {[k: string]: any} = {}; -// this.d.columns.forEach((col, index) => { -// let selectedColumn = col.options[col.selectedIndex]; -// selected[col.name] = { -// text: selectedColumn ? selectedColumn.text : null, -// value: selectedColumn ? selectedColumn.value : null, -// columnIndex: index, -// }; -// }); -// return selected; -// } - // ngOnDestroy() { // assert(this._gestureBlocker.blocked === false, 'gesture blocker must be already unblocked'); // this._gestureBlocker.destroy(); @@ -527,76 +467,3 @@ export const MAX_PICKER_SPEED = 60; // } // let pickerIds = -1; - - - - - - -// /** -// * @hidden -// */ -// export class Picker extends ViewController { -// private _app: App; - -// @Output() ionChange: EventEmitter; - -// constructor(app: App, opts: PickerOptions = {}, config: Config) { -// if (!opts) { -// opts = {}; -// } -// opts.columns = opts.columns || []; -// opts.buttons = opts.buttons || []; -// opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? Boolean(opts.enableBackdropDismiss) : true; - -// super(PickerCmp, opts, null); -// this._app = app; -// this.isOverlay = true; - -// this.ionChange = new EventEmitter(); - -// config.setTransition('picker-slide-in', PickerSlideIn); -// config.setTransition('picker-slide-out', PickerSlideOut); -// } - -// /** -// * @hidden -// */ -// getTransitionName(direction: string) { -// let key = (direction === 'back' ? 'pickerLeave' : 'pickerEnter'); -// return this._nav && this._nav.config.get(key); -// } - -// /** -// * @param {any} button Picker toolbar button -// */ -// addButton(button: any) { -// this.data.buttons.push(button); -// } - - -// refresh() { -// assert(this._cmp, 'componentRef must be valid'); -// assert(this._cmp.instance.refresh, 'instance must implement refresh()'); - -// this._cmp && this._cmp.instance.refresh && this._cmp.instance.refresh(); -// } - -// /** -// * @param {string} cssClass CSS class name to add to the picker's outer wrapper. -// */ -// setCssClass(cssClass: string) { -// this.data.cssClass = cssClass; -// } - -// /** -// * Present the picker instance. -// * -// * @param {NavOptions} [navOptions={}] Nav options to go with this transition. -// * @returns {Promise} Returns a promise which is resolved when the transition has completed. -// */ -// present(navOptions: NavOptions = {}) { -// return this._app.present(this, navOptions); -// } - -// } diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 2696a27649..5bdf0a4a9c 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -12,7 +12,7 @@ import { MenuController } from './components/menu/menu-controller'; import { Modal, ModalOptions, ModalEvent } from './components/modal/modal'; import { ModalController } from './components/modal-controller/modal-controller'; -import { Picker, PickerButton, PickerColumn, PickerEvent, PickerOptions } from './components/picker/picker'; +import { Picker, PickerButton, PickerColumn, PickerColumnOption, PickerEvent, PickerOptions } from './components/picker/picker'; import { PickerController } from './components/picker-controller/picker-controller'; import { Popover, PopoverEvent, PopoverOptions } from './components/popover/popover'; @@ -89,6 +89,7 @@ export { Picker, PickerButton, PickerColumn, + PickerColumnOption, PickerController, PickerEvent, PickerOptions,