javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(picker): add inline picker (#28689)

Browse Source 
Issue number: resolves #24905, resolves #26840, resolves #15710

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The current picker is only displayed as an overlay which makes it
impossible to use inline with the rest of the application. Additionally,
there are several bugs and missing features. For example, it is
impossible to know when the value of the picker column has changed using
public APIs. This is valuable for updating other columns in response to
that data.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Introduces `ion-picker` as an inline wheel picker component. The
overlay picker is still available using `ion-picker-legacy`.
- The implementation of this component resolves linked bugs. It also
resolves linked features by exposing an `ionChange` event for developers
to listen for.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.5.8-dev.11702398696.1ab62ea9`

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2023-12-13 13:03:58 -05:00
committed by GitHub
parent 666a01dd6e
commit cd5c099dd3
251 changed files with 4595 additions and 3634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
packages/angular/src/directives/proxies.ts
View File

@ -1418,17 +1418,98 @@ export declare interface IonNote extends Components.IonNote {}
@ProxyCmp({
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
inputs: ['mode']
})
@Component({
selector: 'ion-picker',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
inputs: ['mode'],
})
export class IonPicker {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionInputModeChange']);
}
}
import type { PickerChangeEventDetail as IIonPickerPickerChangeEventDetail } from '@ionic/core';
export declare interface IonPicker extends Components.IonPicker {
ionInputModeChange: EventEmitter<CustomEvent<IIonPickerPickerChangeEventDetail>>;
}
@ProxyCmp({
inputs: ['color', 'disabled', 'mode', 'value'],
methods: ['setFocus']
})
@Component({
selector: 'ion-picker-column',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'disabled', 'mode', 'value'],
})
export class IonPickerColumn {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange']);
}
}
import type { PickerColumnChangeEventDetail as IIonPickerColumnPickerColumnChangeEventDetail } from '@ionic/core';
export declare interface IonPickerColumn extends Components.IonPickerColumn {
/**
* Emitted when the value has changed.
*/
ionChange: EventEmitter<CustomEvent<IIonPickerColumnPickerColumnChangeEventDetail>>;
}
@ProxyCmp({
inputs: ['color', 'disabled', 'value']
})
@Component({
selector: 'ion-picker-column-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'disabled', 'value'],
})
export class IonPickerColumnOption {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}
export declare interface IonPickerColumnOption extends Components.IonPickerColumnOption {}
@ProxyCmp({
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
})
@Component({
selector: 'ion-picker-legacy',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
})
export class IonPickerLegacy {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
@ -1438,9 +1519,9 @@ export class IonPicker {
}
import type { OverlayEventDetail as IIonPickerOverlayEventDetail } from '@ionic/core';
import type { OverlayEventDetail as IIonPickerLegacyOverlayEventDetail } from '@ionic/core';
export declare interface IonPicker extends Components.IonPicker {
export declare interface IonPickerLegacy extends Components.IonPickerLegacy {
/**
* Emitted after the picker has presented.
*/
@ -1452,11 +1533,11 @@ export declare interface IonPicker extends Components.IonPicker {
/**
* Emitted before the picker has dismissed.
*/
ionPickerWillDismiss: EventEmitter<CustomEvent<IIonPickerOverlayEventDetail>>;
ionPickerWillDismiss: EventEmitter<CustomEvent<IIonPickerLegacyOverlayEventDetail>>;
/**
* Emitted after the picker has dismissed.
*/
ionPickerDidDismiss: EventEmitter<CustomEvent<IIonPickerOverlayEventDetail>>;
ionPickerDidDismiss: EventEmitter<CustomEvent<IIonPickerLegacyOverlayEventDetail>>;
/**
* Emitted after the picker has presented.
Shorthand for ionPickerWillDismiss.
@ -1471,12 +1552,12 @@ Shorthand for ionPickerWillPresent.
* Emitted before the picker has dismissed.
Shorthand for ionPickerWillDismiss.
*/
willDismiss: EventEmitter<CustomEvent<IIonPickerOverlayEventDetail>>;
willDismiss: EventEmitter<CustomEvent<IIonPickerLegacyOverlayEventDetail>>;
/**
* Emitted after the picker has dismissed.
Shorthand for ionPickerDidDismiss.
*/
didDismiss: EventEmitter<CustomEvent<IIonPickerOverlayEventDetail>>;
didDismiss: EventEmitter<CustomEvent<IIonPickerLegacyOverlayEventDetail>>;
}