diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index 4ebd5071b4..6dc9069022 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -31,8 +31,63 @@ export class Picker { private durationTimeout: any; private mode: string; + pickerId: number; + @Element() private el: HTMLElement; + @State() private showSpinner: boolean = null; + @State() private spinner: string; + + @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; + @Prop({ context: 'config' }) config: Config; + @Prop({ context: 'dom' }) dom: DomController; + + /** + * Animation to use when the picker is presented. + */ + @Prop() enterAnimation: AnimationBuilder; + + /** + * Animation to use when the picker is dismissed. + */ + @Prop() leaveAnimation: AnimationBuilder; + + /** + * Array of buttons to be displayed at the top of the picker. + */ + @Prop() buttons: PickerButton[] = []; + + /** + * Array of columns to be displayed in the picker. + */ + @Prop() columns: PickerColumn[] = []; + + /** + * Additional classes to apply for custom CSS. If multiple classes are + * provided they should be separated by spaces. + */ + @Prop() cssClass: string; + + /** + * Number of milliseconds to wait before dismissing the picker. + */ + @Prop() duration: number; + + /** + * If true, a backdrop will be displayed behind the picker. Defaults to `true`. + */ + @Prop() showBackdrop = true; + + /** + * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + @Prop() enableBackdropDismiss = true; + + /** + * If true, the picker will animate. Defaults to `true`. + */ + @Prop() willAnimate = true; + /** * Emitted after the picker has loaded. */ @@ -63,27 +118,9 @@ export class Picker { */ @Event() ionPickerDidUnload: EventEmitter; - @State() private showSpinner: boolean = null; - @State() private spinner: string; - - @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; - @Prop({ context: 'config' }) config: Config; - @Prop({ context: 'dom' }) dom: DomController; - - @Prop() cssClass: string; - @Prop() content: string; - @Prop() dismissOnPageChange = false; - @Prop() duration: number; - @Prop() enterAnimation: AnimationBuilder; - @Prop() leaveAnimation: AnimationBuilder; - @Prop() pickerId: number; - @Prop() showBackdrop = true; - @Prop() enableBackdropDismiss = true; - @Prop() willAnimate = true; - - @Prop() buttons: PickerButton[] = []; - @Prop() columns: PickerColumn[] = []; - + /** + * Present the picker overlay after it has been created. + */ @Method() present() { if (this.animation) { @@ -113,6 +150,9 @@ export class Picker { }); } + /** + * Dismiss the picker overlay after it has been presented. + */ @Method() dismiss(data?: any, role?: string) { clearTimeout(this.durationTimeout); @@ -223,17 +263,11 @@ export class Picker { return selected; } - /** - * @param {any} button Picker toolbar button - */ @Method() addButton(button: any) { this.buttons.push(button); } - /** - * @param {PickerColumn} column Picker toolbar button - */ @Method() addColumn(column: PickerColumn) { this.columns.push(column); @@ -307,31 +341,13 @@ export class Picker { // return column; // }); - // RENDER TODO - // - //
- //
- //
- // - // {{b.text}} - // - //
- //
- //
- //
- //
- //
- //
- //
- return [ , + }}>,