Skip to content

Commit

Permalink
test(ac): header only
Browse files Browse the repository at this point in the history
  • Loading branch information
@thetaPC
thetaPC committed Oct 16, 2024
1 parent d05ced8 commit 94d2c73
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 35 deletions.
3 changes: 2 additions & 1 deletion core/src/components/action-sheet/action-sheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@
outline: none;

background: var(--button-background);

color: var(--button-color);

font-family: inherit;
Expand Down Expand Up @@ -214,9 +215,9 @@
// --------------------------------------------------

.action-sheet-button.ion-focused {
background-color: var(--button-background-focused);
color: var(--button-color-focused);

background-color: var(--button-background-focused);
opacity: var(--button-background-focused-opacity);

&::after {
Expand Down
113 changes: 79 additions & 34 deletions core/src/components/action-sheet/action-sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
import { getClassMap } from '@utils/theme';

import { getIonMode } from '../../global/ionic-global';
import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
import type { OverlayEventDetail } from '../../utils/overlays-interface';

import type { ActionSheetButton } from './action-sheet-interface';
Expand Down Expand Up @@ -253,17 +253,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
return eventMethod(this.el, 'ionActionSheetWillDismiss');
}

// private async buttonClick(button: ActionSheetButton) {
// const role = button.role;
// if (isCancel(role)) {
// return this.dismiss(button.data, role);
// }
// const shouldDismiss = await this.callButtonHandler(button);
// if (shouldDismiss) {
// return this.dismiss(button.data, button.role);
// }
// return Promise.resolve();
// }
private async buttonClick(button: ActionSheetButton) {
const role = button.role;
if (isCancel(role)) {
return this.dismiss(button.data, role);
}
const shouldDismiss = await this.callButtonHandler(button);
if (shouldDismiss) {
return this.dismiss(button.data, button.role);
}
return Promise.resolve();
}

private async callButtonHandler(button: ActionSheetButton | undefined) {
if (button) {
Expand Down Expand Up @@ -359,8 +359,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
render() {
const { header, htmlAttributes, overlayIndex } = this;
const mode = getIonMode(this);
// const allButtons = this.getButtons();
// const cancelButton = allButtons.find((b) => b.role === 'cancel');
const allButtons = this.getButtons();
const cancelButton = allButtons.find((b) => b.role === 'cancel');
// const buttons = allButtons.filter((b) => b.role !== 'cancel');
const headerID = `action-sheet-${overlayIndex}-header`;

Expand Down Expand Up @@ -388,20 +388,65 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
<div tabindex="0"></div>

<div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
<div class="action-sheet-head">
{header !== undefined && (
<h2
id={headerID}
class={{
'action-sheet-title': true,
'action-sheet-has-sub-title': this.subHeader !== undefined,
}}
>
<div class="action-sheet-container">
{header && (
<h2 id={headerID} class="action-sheet-title">
{header}
</h2>
)}
{this.subHeader !== undefined && (
<h2 class="action-sheet-sub-title">{this.subHeader}</h2>
{/* <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
{header !== undefined && (
<div
id={headerID}
class={{
'action-sheet-title': true,
'action-sheet-has-sub-title': this.subHeader !== undefined,
}}
>
{header}
{this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
</div>
)}
{buttons.map((b) => (
<button
{...b.htmlAttributes}
type="button"
id={b.id}
class={buttonClass(b)}
onClick={() => this.buttonClick(b)}
disabled={b.disabled}
>
<span class="action-sheet-button-inner">
{b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
{b.text}
</span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
))}
</div> */}

{cancelButton && (
<div class="action-sheet-group action-sheet-group-cancel">
{/*
Cancel buttons intentionally do not
receive a disabled state here as we should
not make it difficult to dismiss the overlay.
*/}
<button
{...cancelButton.htmlAttributes}
type="button"
class={buttonClass(cancelButton)}
onClick={() => this.buttonClick(cancelButton)}
>
<span class="action-sheet-button-inner">
{cancelButton.icon && (
<ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
)}
{cancelButton.text}
</span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
</div>
)}
</div>
</div>
Expand All @@ -412,12 +457,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
}

// const buttonClass = (button: ActionSheetButton): CssClassMap => {
// return {
// 'action-sheet-button': true,
// 'ion-activatable': !button.disabled,
// 'ion-focusable': !button.disabled,
// [`action-sheet-${button.role}`]: button.role !== undefined,
// ...getClassMap(button.cssClass),
// };
// };
const buttonClass = (button: ActionSheetButton): CssClassMap => {
return {
'action-sheet-button': true,
'ion-activatable': !button.disabled,
'ion-focusable': !button.disabled,
[`action-sheet-${button.role}`]: button.role !== undefined,
...getClassMap(button.cssClass),
};
};

0 comments on commit 94d2c73

Please sign in to comment.