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

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

Browse Source
This commit is contained in:
Brandy Carney
2017-10-23 17:58:00 -04:00
parent 7f7efe56fb
commit f3b509ee85
5 changed files with 346 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/src/components.d.ts vendored
View File

@ -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,

506
packages/core/src/components/picker/picker-column.tsx
View File

@ -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 = <any>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(
// <div class='loading-content'>
// {this.content}
// </div>
// );
// }
let pickerSuffix: any[] = [];
if (col.suffix) {
pickerSuffix.push(
<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);
// }
// }
// }

2
packages/core/src/components/picker/picker.ios.scss
View File

@ -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;

303
packages/core/src/components/picker/picker.tsx
View File

@ -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
// <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(
// 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<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);
// }
// }

3
packages/core/src/index.d.ts vendored
View File

@ -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,