ionic-team / ionic-team/ionic-framework

feat: dismiss data in overlay button handler return

Đang mở
#26,013 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

It would be great if the `handler` function of an overlay button (e.g. `IonActionSheetButton`) would allow overlay data as a return value.

### Describe the Use Case

I have an `IonActionSheet` with three buttons that resolve some data from a promise. When the data is resolved and is not null, the IonActionSheet should dismiss with given data in the `OverlayEventDetail`. If the data is null, I do not want to close the ActionSheet by returning false in the handler method.

At the moment I can not return data inside the handler value except by using the dismiss method of the created action sheet itself.

### Describe Preferred Solution

The `handler()` method on an `IonActionSheetButton` should accept OverlayEventDetail object as return value

```
public async browseFile(): Promise {
const actionSheet = await this.actionSheetController.create({
buttons: [
{
text: 'Scan Document',
role: 'scanner',
handler: async () => {
const file = await this.browseScanner();
return file ? {file} : false;
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
await actionSheet.present();
const {data, role} = await actionSheet.onWillDismiss<{file: SandboxFile}>();
return data?.file || null;
}
```

### Describe Alternatives

_No response_

### Related Code
At the moment I have to solve the problem with using the `dismiss()` method of the action sheet element. But this results in the buttons role attribute being ignored because the dismiss is triggered by the `dismiss()` method and not via the handler default.

```
public async browseFile(): Promise {
const actionSheet = await this.actionSheetController.create({
buttons: [
{
text: 'Scan Document',
role: 'scanner',
handler: async () => {
const file = await this.browseScanner();
if (!file) {
// if file is null or undefined, I do not want to close the action sheet
return false;
}
// dismissing in handler needs to be done with via the action sheet object
await actionSheet.dismiss({file});
}
},
{
text: 'Camera',
role: 'camera',
handler: async () => {
const file = await this.browseCamera();
if (!file) {
return false;
}
await actionSheet.dismiss({file});
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
await actionSheet.present();
const {data, role} = await actionSheet.onWillDismiss<{file: SandboxFile}>();
return data?.file || null;
}
```

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by tracing the IonActionSheetButton handler and the overlay dismissal flow described in the issue. Determine how handler return values currently control dismissal and roles, then verify that returning overlay data dismisses with that data while returning false keeps the overlay open.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.