refactor(picker): get picker rendering buttons and columns properly

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,

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 i: number;
-    // let button: any;
+    let button: any;
-    // let opt: any;
+    let opt: PickerColumnOption;
-    // let optOffset: number;
+    let optOffset: number;
-    // let visible: boolean;
+    let visible: boolean;
-    // let translateX: number;
+    let translateX: number;
-    // let translateY: number;
+    let translateY: number;
-    // let translateZ: number;
+    let translateZ: number;
-    // let rotateX: number;
+    let rotateX: number;
-    // let transform: string;
+    let transform: string;
-    // let selected: boolean;
+    let selected: boolean;
 
     const parent = this.el.querySelector('.picker-opts');
-    // const children = parent.children;
+    const children = parent.children;
-    // const length = children.length;
+    const length = children.length;
-    // const selectedIndex = this.col.selectedIndex = Math.min(Math.max(Math.round(-y / this.optHeight), 0), length - 1);
+    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 durationStr = (duration === 0) ? null : duration + 'ms';
-    // const scaleStr = `scale(${this.scaleFactor})`;
+    const scaleStr = `scale(${this.scaleFactor})`;
 
-    // for (i = 0; i < length; i++) {
+    for (i = 0; i < length; i++) {
-    //   button = children[i];
+      button = children[i];
-    //   opt = <any>this.col.options[i];
+      opt = this.col.options[i];
-    //   optOffset = (i * this.optHeight) + y;
+      optOffset = (i * this.optHeight) + y;
-    //   visible = true;
+      visible = true;
-    //   transform = '';
+      transform = '';
 
-    //   if (this.rotateFactor !== 0) {
+      if (this.rotateFactor !== 0) {
-    //     rotateX = optOffset * this.rotateFactor;
+        rotateX = optOffset * this.rotateFactor;
-    //     if (Math.abs(rotateX) > 90) {
+        if (Math.abs(rotateX) > 90) {
-    //       visible = false;
+          visible = false;
-    //     } else {
+        } else {
-    //       translateX = 0;
+          translateX = 0;
-    //       translateY = 0;
+          translateY = 0;
-    //       translateZ = 90;
+          translateZ = 90;
-    //       transform = `rotateX(${rotateX}deg) `;
+          transform = `rotateX(${rotateX}deg) `;
-    //     }
+        }
-    //   } else {
+      } else {
-    //     translateX = 0;
+        translateX = 0;
-    //     translateZ = 0;
+        translateZ = 0;
-    //     translateY = optOffset;
+        translateY = optOffset;
-    //     if (Math.abs(translateY) > 170) {
+        if (Math.abs(translateY) > 170) {
-    //       visible = false;
+          visible = false;
-    //     }
+        }
-    //   }
+      }
 
-    //   selected = selectedIndex === i;
+      selected = selectedIndex === i;
-    //   if (visible) {
+      if (visible) {
-    //     transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+        transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
-    //     if (this.scaleFactor !== 1 && !selected) {
+        if (this.scaleFactor !== 1 && !selected) {
-    //       transform += scaleStr;
+          transform += scaleStr;
-    //     }
+        }
-    //   } else {
+      } else {
-    //     transform = 'translate3d(-9999px,0px,0px)';
+        transform = 'translate3d(-9999px,0px,0px)';
-    //   }
+      }
-    //   // Update transition duration
+      // Update transition duration
-    //   if (duration !== opt._dur) {
+      if (duration !== opt.duration) {
-    //     opt._dur = duration;
+        opt.duration = duration;
-    //     button.style[this._plt.Css.transitionDuration] = durationStr;
+        button.style.transitionDuration = durationStr;
-    //   }
+      }
-    //   // Update transform
+      // Update transform
-    //   if (transform !== opt._trans) {
+      if (transform !== opt.transform) {
-    //     opt._trans = transform;
+        opt.transform = transform;
-    //     button.style[this._plt.Css.transform] = transform;
+        button.style.transform = transform;
-    //   }
+      }
-    //   // Update selected item
+      // Update selected item
-    //   if (selected !== opt._selected) {
+      if (selected !== opt.selected) {
-    //     opt._selected = selected;
+        opt.selected = selected;
-    //     if (selected) {
+        if (selected) {
-    //       button.classList.add(PICKER_OPT_SELECTED);
+          button.classList.add(PICKER_OPT_SELECTED);
-    //     } else {
+        } else {
-    //       button.classList.remove(PICKER_OPT_SELECTED);
+          button.classList.remove(PICKER_OPT_SELECTED);
-    //     }
+        }
-    //   }
+      }
-    // }
+    }
-    // this.col.prevSelected = selectedIndex;
+    this.col.prevSelected = selectedIndex;
 
-    // if (saveY) {
+    if (saveY) {
-    //   this.y = y;
+      this.y = y;
-    // }
+    }
 
-    // if (emitChange) {
+    if (emitChange) {
-    //   if (this.lastIndex === undefined) {
+      if (this.lastIndex === undefined) {
-    //     // have not set a last index yet
+        // have not set a last index yet
-    //     this.lastIndex = this.col.selectedIndex;
+        this.lastIndex = this.col.selectedIndex;
 
-    //   } else if (this.lastIndex !== this.col.selectedIndex) {
+      } else if (this.lastIndex !== this.col.selectedIndex) {
-    //     // new selected index has changed from the last index
+        // new selected index has changed from the last index
-    //     // update the lastIndex and emit that it has changed
+        // update the lastIndex and emit that it has changed
-    //     this.lastIndex = this.col.selectedIndex;
+        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) {
+    let pickerSuffix: any[] = [];
-    //   pickerPrefix.push(
+
-    //     <div class='loading-content'>
+    if (col.suffix) {
-    //       {this.content}
+      pickerSuffix.push(
-    //     </div>
+        <div class="picker-suffix" style={{width: col.suffixWidth}}>
-    //   );
+          {col.suffix}
-    // }
+        </div>
+      );
+    }
 
     return [
       { pickerPrefix },
       <div class="picker-opts" style={{maxWidth: col.optionsWidth}}>
-        {col.options.map((o, index) =>
+        {options.map((o, index) =>
         <button
           class={{'picker-opt': true, 'picker-opt-disabled': o.disabled}}
           disable-activated
@@ -172,95 +324,27 @@ export class PickerColumnCmp {
           {o.text}
         </button>
         )}
-      </div>
+      </div>,
-
+      { pickerSuffix }
     ];
-
+  }
 }
 
-}
-
-
-
-// /**
-//  * @hidden
-//  */
-// @Component({
-//   selector: '.picker-col',
-//   template:
-//     '<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>' +
-//     '<div class="picker-opts" #colEle [style.max-width]="col.optionsWidth">' +
-//       '<button *ngFor="let o of col.options; let i=index"' +
-//         '[class.picker-opt-disabled]="o.disabled" ' +
-//         'class="picker-opt" disable-activated (click)="optClick($event, i)">' +
-//         '{{o.text}}' +
-//       '</button>' +
-//     '</div>' +
-//     '<div *ngIf="col.suffix" class="picker-suffix" [style.width]="col.suffixWidth">{{col.suffix}}</div>',
-//   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<any> = 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);
-//     }
-//   }
-
-// }

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;

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
+    // keep the time of the most recent button click
-    // this.lastClick = Date.now();
+    this.lastClick = Date.now();
 
     let shouldDismiss = true;
 
-    // if (button.handler) {
+    if (button.handler) {
-    //   // a handler has been provided, execute it
+      // a handler has been provided, execute it
-    //   // pass the handler the values from the inputs
+      // pass the handler the values from the inputs
-    //   if (button.handler(this.getSelected()) === false) {
+      if (button.handler(this.getSelected()) === false) {
-    //     // if the return value of the handler is false then do not dismiss
+        // if the return value of the handler is false then do not dismiss
-    //     shouldDismiss = false;
+        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
+    // <ion-backdrop (click)="bdClick()"></ion-backdrop>
+    // <div class="picker-wrapper">
+    //   <div class="picker-toolbar">
+    //     <div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
+    //       <ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
+    //         {{b.text}}
+    //       </ion-button>
+    //     </div>
+    //   </div>
+    //   <div class="picker-columns">
+    //     <div class="picker-above-highlight"></div>
+    //     <div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>
+    //     <div class="picker-below-highlight"></div>
+    //   </div>
+    // </div>
+
     return [
       <ion-backdrop
         onClick={this.backdropClick.bind(this)}
@@ -255,7 +321,7 @@ export class Picker {
         <div class='picker-toolbar'>
           {buttons.map(b =>
             <div class={this.buttonWrapperClass(b)}>
-              <button onClick={() => this.btnClick(b)} class={this.buttonClass(b)}>
+              <button onClick={() => this.buttonClick(b)} class={this.buttonClass(b)}>
                 {b.text}
               </button>
             </div>
@@ -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: `
-//     <ion-backdrop (click)="bdClick()"></ion-backdrop>
-//     <div class="picker-wrapper">
-//       <div class="picker-toolbar">
-//         <div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
-//           <ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
-//             {{b.text}}
-//           </ion-button>
-//         </div>
-//       </div>
-//       <div class="picker-columns">
-//         <div class="picker-above-highlight"></div>
-//         <div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>
-//         <div class="picker-below-highlight"></div>
-//       </div>
-//     </div>
-//   `,
-//   host: {
-//     'role': 'dialog'
-//   },
-//   encapsulation: ViewEncapsulation.None,
-// })
-// export class PickerCmp {
-
 //   @ViewChildren(PickerColumnCmp) _cols: QueryList<PickerColumnCmp>;
 //   d: PickerOptions;
 //   enabled: boolean;
-//   lastClick: number;
 //   id: number;
 //   mode: string;
 //   _gestureBlocker: BlockerDelegate;
 
-//   constructor(
+//   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);
-//       });
-//     }
-
 //     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<any> {
-//     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<any>;
-
-//   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<any>();
-
-//     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);
-//   }
-
-// }

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,