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

feat(datetime-button): add button for displaying datetime in overlays (#25655)

Browse Source 
resolves #24316
This commit is contained in:
Liam DeBeasi
2022-07-27 09:47:02 -04:00
committed by GitHub
parent 52f0b22778
commit 499733105e
59 changed files with 1514 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
core/src/components/datetime-button/datetime-button.tsx Normal file
View File

@ -0,0 +1,414 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, State, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import type { Color, DatetimePresentation, DatetimeParts } from '../../interface';
import { componentOnReady, addEventListener } from '../../utils/helpers';
import { printIonError, printIonWarning } from '../../utils/logging';
import { createColorClasses } from '../../utils/theme';
import { getToday } from '../datetime/utils/data';
import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
import { is24Hour } from '../datetime/utils/helpers';
import { parseDate } from '../datetime/utils/parse';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @slot date-target - Content displayed inside of the date button.
* @slot time-target - Content displayed inside of the time button.
*
* @part native - The native HTML button that wraps the slotted text.
*/
@Component({
tag: 'ion-datetime-button',
styleUrls: {
ios: 'datetime-button.scss',
md: 'datetime-button.scss',
},
shadow: true,
})
export class DatetimeButton implements ComponentInterface {
private datetimeEl: HTMLIonDatetimeElement | null = null;
private overlayEl: HTMLIonModalElement | HTMLIonPopoverElement | null = null;
private dateTargetEl: HTMLElement | undefined;
private timeTargetEl: HTMLElement | undefined;
@Element() el!: HTMLIonDatetimeButtonElement;
@State() datetimePresentation?: DatetimePresentation = 'date-time';
@State() dateText?: string;
@State() timeText?: string;
@State() datetimeActive = false;
@State() selectedButton?: 'date' | 'time';
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop({ reflect: true }) color?: Color = 'primary';
/**
* If `true`, the user cannot interact with the button.
*/
@Prop({ reflect: true }) disabled = false;
/**
* The ID of the `ion-datetime` instance
* associated with the datetime button.
*/
@Prop() datetime?: string;
async componentWillLoad() {
const { datetime } = this;
if (!datetime) {
printIonError(
'An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.',
this.el
);
return;
}
const datetimeEl = (this.datetimeEl = document.getElementById(datetime) as HTMLIonDatetimeElement | null);
if (!datetimeEl) {
printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
return;
}
/**
* Since the datetime can be used in any context (overlays, accordion, etc)
* we track when it is visible to determine when it is active.
* This informs which button is highlighted as well as the
* aria-expanded state.
*/
const io = new IntersectionObserver(
(entries: IntersectionObserverEntry[]) => {
const ev = entries[0];
this.datetimeActive = ev.isIntersecting;
},
{
threshold: 0.01,
}
);
io.observe(datetimeEl);
/**
* Get a reference to any modal/popover
* the datetime is being used in so we can
* correctly size it when it is presented.
*/
const overlayEl = (this.overlayEl = datetimeEl.closest('ion-modal, ion-popover'));
/**
* The .ion-datetime-button-overlay class contains
* styles that allow any modal/popover to be
* sized according to the dimensions of the datetime.
* If developers want a smaller/larger overlay all they need
* to do is change the width/height of the datetime.
* Additionally, this lets us avoid having to set
* explicit widths on each variant of datetime.
*/
if (overlayEl) {
overlayEl.classList.add('ion-datetime-button-overlay');
}
componentOnReady(datetimeEl, () => {
const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
/**
* Set the initial display
* in the rendered buttons.
*
* From there, we need to listen
* for ionChange to be emitted
* from datetime so we know when
* to re-render the displayed
* text in the buttons.
*/
this.setDateTimeText();
addEventListener(datetimeEl, 'ionChange', this.setDateTimeText);
/**
* Configure the initial selected button
* in the event that the datetime is displayed
* without clicking one of the datetime buttons.
* For example, a datetime could be expanded
* in an accordion. In this case users only
* need to click the accordion header to show
* the datetime.
*/
switch (datetimePresentation) {
case 'date-time':
case 'date':
case 'month-year':
case 'month':
case 'year':
this.selectedButton = 'date';
break;
case 'time-date':
case 'time':
this.selectedButton = 'time';
break;
}
});
}
/**
* Check the value property on the linked
* ion-datetime and then format it according
* to the locale specified on ion-datetime.
*/
private setDateTimeText = () => {
const { datetimeEl, datetimePresentation } = this;
if (!datetimeEl) {
return;
}
const { value, locale, hourCycle, preferWheel, multiple } = datetimeEl;
if (multiple) {
printIonWarning(
`Multi-date selection cannot be used with ion-datetime-button.
Please upvote https://github.com/ionic-team/ionic-framework/issues/25668 if you are interested in seeing this functionality added.
`,
this.el
);
return;
}
/**
* Both ion-datetime and ion-datetime-button default
* to today's date and time if no value is set.
*/
const parsedDatetime = parseDate(value || getToday()) as DatetimeParts;
const use24Hour = is24Hour(locale, hourCycle);
// TODO(FW-1865) - Remove once FW-1831 is fixed.
parsedDatetime.tzOffset = undefined;
this.dateText = this.timeText = undefined;
switch (datetimePresentation) {
case 'date-time':
case 'time-date':
const dateText = getMonthDayAndYear(locale, parsedDatetime);
const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
if (preferWheel) {
this.dateText = `${dateText} ${timeText}`;
} else {
this.dateText = dateText;
this.timeText = timeText;
}
break;
case 'date':
this.dateText = getMonthDayAndYear(locale, parsedDatetime);
break;
case 'time':
this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
break;
case 'month-year':
this.dateText = getMonthAndYear(locale, parsedDatetime);
break;
case 'month':
this.dateText = getLocalizedDateTime(locale, parsedDatetime, { month: 'long' });
break;
case 'year':
this.dateText = getLocalizedDateTime(locale, parsedDatetime, { year: 'numeric' });
break;
}
};
/**
* Waits for the ion-datetime to re-render.
* This is needed in order to correctly position
* a popover relative to the trigger element.
*/
private waitForDatetimeChanges = async () => {
const { datetimeEl } = this;
if (!datetimeEl) {
return Promise.resolve();
}
return new Promise((resolve) => {
addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
});
};
private handleDateClick = async (ev: Event) => {
const { datetimeEl, datetimePresentation } = this;
if (!datetimeEl) {
return;
}
let needsPresentationChange = false;
/**
* When clicking the date button,
* we need to make sure that only a date
* picker is displayed. For presentation styles
* that display content other than a date picker,
* we need to update the presentation style.
*/
switch (datetimePresentation) {
case 'date-time':
case 'time-date':
const needsChange = datetimeEl.presentation !== 'date';
/**
* The date+time wheel picker
* shows date and time together,
* so do not adjust the presentation
* in that case.
*/
if (!datetimeEl.preferWheel && needsChange) {
datetimeEl.presentation = 'date';
needsPresentationChange = true;
}
break;
}
/**
* Track which button was clicked
* so that it can have the correct
* activated styles applied when
* the modal/popover containing
* the datetime is opened.
*/
this.selectedButton = 'date';
this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
};
private handleTimeClick = (ev: Event) => {
const { datetimeEl, datetimePresentation } = this;
if (!datetimeEl) {
return;
}
let needsPresentationChange = false;
/**
* When clicking the time button,
* we need to make sure that only a time
* picker is displayed. For presentation styles
* that display content other than a time picker,
* we need to update the presentation style.
*/
switch (datetimePresentation) {
case 'date-time':
case 'time-date':
const needsChange = datetimeEl.presentation !== 'time';
if (needsChange) {
datetimeEl.presentation = 'time';
needsPresentationChange = true;
}
break;
}
/**
* Track which button was clicked
* so that it can have the correct
* activated styles applied when
* the modal/popover containing
* the datetime is opened.
*/
this.selectedButton = 'time';
this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
};
/**
* If the datetime is presented in an
* overlay, the datetime and overlay
* should be appropriately sized.
* These classes provide default sizing values
* that developers can customize.
* The goal is to provide an overlay that is
* reasonably sized with a datetime that
* fills the entire container.
*/
private presentOverlay = async (ev: Event, needsPresentationChange: boolean, triggerEl?: HTMLElement) => {
const { overlayEl } = this;
if (!overlayEl) {
return;
}
if (overlayEl.tagName === 'ION-POPOVER') {
/**
* When the presentation on datetime changes,
* we need to wait for the component to re-render
* otherwise the computed width/height of the
* popover content will be wrong, causing
* the popover to not align with the trigger element.
*/
if (needsPresentationChange) {
await this.waitForDatetimeChanges();
}
/**
* We pass the trigger button element
* so that the popover aligns with the individual
* button that was clicked, not the component container.
*/
(overlayEl as HTMLIonPopoverElement).present({
...ev,
detail: {
ionShadowTarget: triggerEl,
},
} as CustomEvent);
} else {
overlayEl.present();
}
};
render() {
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
const mode = getIonMode(this);
return (
<Host
class={createColorClasses(color, {
[mode]: true,
[`${selectedButton}-active`]: datetimeActive,
['datetime-button-disabled']: disabled,
})}
>
{dateText && (
<button
class="ion-activatable"
id="date-button"
aria-expanded={datetimeActive ? 'true' : 'false'}
onClick={this.handleDateClick}
disabled={disabled}
part="native"
ref={(el) => (this.dateTargetEl = el)}
>
<slot name="date-target">{dateText}</slot>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
)}
{timeText && (
<button
class="ion-activatable"
id="time-button"
aria-expanded={datetimeActive ? 'true' : 'false'}
onClick={this.handleTimeClick}
disabled={disabled}
part="native"
ref={(el) => (this.timeTargetEl = el)}
>
<slot name="time-target">{timeText}</slot>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
)}
</Host>
);
}
}