fix(picker): making touchable fill all the available space

Author: manucorporat

src/components/datetime/datetime.ts

@@ -682,17 +682,16 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
 
     if (columns.length === 2) {
       var width = Math.max(columns[0], columns[1]);
-      pickerColumns[0].columnWidth = pickerColumns[1].columnWidth = `${width * 16}px`;
+      pickerColumns[0].align = 'right';
+      pickerColumns[1].align = 'left';
+      pickerColumns[0].optionsWidth = pickerColumns[1].optionsWidth = `${width * 17}px`;
 
     } else if (columns.length === 3) {
       var width = Math.max(columns[0], columns[2]);
-      pickerColumns[1].columnWidth = `${columns[1] * 16}px`;
-      pickerColumns[0].columnWidth = pickerColumns[2].columnWidth = `${width * 16}px`;
-
-    } else if (columns.length > 3) {
-      columns.forEach((col, i) => {
-        pickerColumns[i].columnWidth = `${col * 12}px`;
-      });
+      pickerColumns[0].align = 'right';
+      pickerColumns[1].columnWidth = `${columns[1] * 17}px`;
+      pickerColumns[0].optionsWidth = pickerColumns[2].optionsWidth = `${width * 17}px`;
+      pickerColumns[2].align = 'left';
     }
   }
 

src/components/picker/picker-component.ts

@@ -21,7 +21,7 @@ import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/ge
   selector: '.picker-col',
   template:
     '<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>' +
-    '<div class="picker-opts" #colEle [style.width]="col.optionsWidth">' +
+    '<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)">' +
@@ -30,7 +30,7 @@ import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/ge
     '</div>' +
     '<div *ngIf="col.suffix" class="picker-suffix" [style.width]="col.suffixWidth">{{col.suffix}}</div>',
   host: {
-    '[style.min-width]': 'col.columnWidth',
+    '[style.max-width]': 'col.columnWidth',
     '[class.picker-opts-left]': 'col.align=="left"',
     '[class.picker-opts-right]': 'col.align=="right"',
   }
@@ -497,9 +497,6 @@ export class PickerCmp {
 
     // clean up dat data
     data.columns = data.columns.map(column => {
-      if (!isPresent(column.columnWidth)) {
-        column.columnWidth = (100 / data.columns.length) + '%';
-      }
       if (!isPresent(column.options)) {
         column.options = [];
       }
@@ -642,4 +639,4 @@ let pickerIds = -1;
 const PICKER_OPT_SELECTED = 'picker-opt-selected';
 const DECELERATION_FRICTION = 0.97;
 const FRAME_MS = (1000 / 60);
-const MAX_PICKER_SPEED = 50;
+const MAX_PICKER_SPEED = 60;

src/components/picker/picker.scss

@@ -55,23 +55,29 @@ ion-picker-cmp {
   position: relative;
   display: flex;
 
-  max-height: 100%;
+  flex: 1;
+  justify-content: center;
+
+  height: 100%;
+
+  box-sizing: content-box;
 }
 
 .picker-opts {
   position: relative;
 
-  width: 100%;
-  min-width: 50px;
+  flex: 1;
+
   max-width: 100%;
 }
 
 .picker-prefix {
   position: relative;
 
-  flex: 1;
+  flex: 2;
 
   min-width: 45%;
+  max-width: 50%;
 
   text-align: right;
   white-space: nowrap;
@@ -80,9 +86,10 @@ ion-picker-cmp {
 .picker-suffix {
   position: relative;
 
-  flex: 1;
+  flex: 2;
 
   min-width: 45%;
+  max-width: 50%;
 
   text-align: left;
   white-space: nowrap;
@@ -115,11 +122,11 @@ ion-picker-cmp {
   opacity: 0;
 }
 
-.picker-opts-left .picker-opt {
+.picker-opts-left {
   justify-content: flex-start;
 }
 
-.picker-opts-right .picker-opt {
+.picker-opts-right {
   justify-content: flex-end;
 }
 

src/components/picker/test/basic/app-module.ts

@@ -183,8 +183,8 @@ export class E2EPage {
     picker.addColumn({
       name: 'hour',
       suffix: 'hour',
-      columnWidth: '30%',
       optionsWidth: '50px',
+      align: 'right',
       options: Array.apply(null, {length: 23}).map(Number.call, Number)
     });
 
@@ -200,8 +200,8 @@ export class E2EPage {
     picker.addColumn({
       name: 'min',
       suffix: 'min',
-      columnWidth: '40%',
       optionsWidth: '80px',
+      align: 'left',
       options: minuteOptions
     });