Skip to content

Commit 270247d

Browse files
liamdebeasiliamdebeasi
authored
fix(datetime-button): handle preferWheel correctly (#25621)
1 parent 8387ba3 commit 270247d

File tree

3 files changed

+88
-16
lines changed

3 files changed

+88
-16
lines changed

‎core/src/components/datetime-button/datetime-button.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class DatetimeButton implements ComponentInterface {
137137
return;
138138
}
139139

140-
const { value, locale, hourCycle } = datetimeEl;
140+
const { value, locale, hourCycle, preferWheel } = datetimeEl;
141141

142142
/**
143143
* Both ion-datetime and ion-datetime-button default
@@ -149,11 +149,19 @@ export class DatetimeButton implements ComponentInterface {
149149
// TODO(FW-1865) - Remove once FW-1831 is fixed.
150150
parsedDatetime.tzOffset = undefined;
151151

152+
this.dateText = this.timeText = undefined;
153+
152154
switch (datetimePresentation) {
153155
case 'date-time':
154156
case 'time-date':
155-
this.dateText = getMonthDayAndYear(locale, parsedDatetime);
156-
this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
157+
const dateText = getMonthDayAndYear(locale, parsedDatetime);
158+
const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
159+
if (preferWheel) {
160+
this.dateText = `${dateText} ${timeText}`;
161+
} else {
162+
this.dateText = dateText;
163+
this.timeText = timeText;
164+
}
157165
break;
158166
case 'date':
159167
this.dateText = getMonthDayAndYear(locale, parsedDatetime);
@@ -190,7 +198,17 @@ export class DatetimeButton implements ComponentInterface {
190198
switch (datetimePresentation) {
191199
case 'date-time':
192200
case 'time-date':
193-
datetimeEl.presentation = 'date';
201+
/**
202+
* The date+time wheel picker
203+
* shows date and time together,
204+
* so do not adjust the presentation
205+
* in that case.
206+
*/
207+
if (!datetimeEl.preferWheel) {
208+
datetimeEl.presentation = 'date';
209+
}
210+
break;
211+
default:
194212
break;
195213
}
196214

@@ -236,12 +254,8 @@ export class DatetimeButton implements ComponentInterface {
236254
};
237255

238256
render() {
239-
const { color, dateText, timeText, datetimePresentation, selectedButton, datetimeActive } = this;
257+
const { color, dateText, timeText, selectedButton, datetimeActive } = this;
240258

241-
const showDateTarget =
242-
!datetimePresentation ||
243-
['date-time', 'time-date', 'date', 'month', 'year', 'month-year'].includes(datetimePresentation);
244-
const showTimeTarget = !datetimePresentation || ['date-time', 'time-date', 'time'].includes(datetimePresentation);
245259
const mode = getIonMode(this);
246260

247261
return (
@@ -251,7 +265,7 @@ export class DatetimeButton implements ComponentInterface {
251265
[`${selectedButton}-active`]: datetimeActive,
252266
})}
253267
>
254-
{showDateTarget && (
268+
{dateText && (
255269
<div class="date-target-container" onClick={() => this.handleDateClick()}>
256270
<slot name="date-target">
257271
{/*
@@ -266,7 +280,7 @@ export class DatetimeButton implements ComponentInterface {
266280
</div>
267281
)}
268282

269-
{showTimeTarget && (
283+
{timeText && (
270284
<div class="time-target-container" onClick={() => this.handleTimeClick()}>
271285
<slot name="time-target">
272286
<button id="time-button" aria-expanded={datetimeActive ? 'true' : 'false'}>

‎core/src/components/datetime-button/test/basic/datetime-button.e2e.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ test.describe('datetime-button: labels', () => {
5454
await page.waitForSelector('.datetime-ready');
5555

5656
await expect(page.locator('.date-target-container')).toContainText('January 2022');
57+
await expect(page.locator('.time-target-container')).toBeHidden();
5758
});
5859
test('should set only year', async ({ page }) => {
5960
await page.setContent(`
@@ -63,6 +64,7 @@ test.describe('datetime-button: labels', () => {
6364
await page.waitForSelector('.datetime-ready');
6465

6566
await expect(page.locator('.date-target-container')).toContainText('2022');
67+
await expect(page.locator('.time-target-container')).toBeHidden();
6668
});
6769
test('should set only month', async ({ page }) => {
6870
await page.setContent(`
@@ -72,6 +74,7 @@ test.describe('datetime-button: labels', () => {
7274
await page.waitForSelector('.datetime-ready');
7375

7476
await expect(page.locator('.date-target-container')).toContainText('January');
77+
await expect(page.locator('.time-target-container')).toBeHidden();
7578
});
7679
test('should set only time', async ({ page }) => {
7780
await page.setContent(`
@@ -80,6 +83,7 @@ test.describe('datetime-button: labels', () => {
8083
`);
8184
await page.waitForSelector('.datetime-ready');
8285

86+
await expect(page.locator('.date-target-container')).toBeHidden();
8387
await expect(page.locator('.time-target-container')).toContainText('6:30 AM');
8488
});
8589
test('should update the label when the value of the datetime changes', async ({ page }) => {
@@ -148,3 +152,35 @@ test.describe('datetime-button: locale', () => {
148152
await expect(timeTarget).toContainText('6:30');
149153
});
150154
});
155+
156+
test.describe('datetime-button: wheel', () => {
157+
// eslint-disable-next-line no-empty-pattern
158+
test.beforeEach(({}, testInfo) => {
159+
test.skip(testInfo.project.metadata.rtl === 'rtl', 'No layout tests');
160+
test.skip(testInfo.project.metadata.mode === 'ios', 'No mode-specific logic');
161+
});
162+
test('should only show a single date button when presentation="date-time" and prefer-wheel="true"', async ({
163+
page,
164+
}) => {
165+
await page.setContent(`
166+
<ion-datetime-button datetime="datetime"></ion-datetime-button>
167+
<ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
168+
`);
169+
await page.waitForSelector('.datetime-ready');
170+
171+
await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
172+
await expect(page.locator('.time-target-container')).not.toBeVisible();
173+
});
174+
test('should only show a single date button when presentation="time-date" and prefer-wheel="true"', async ({
175+
page,
176+
}) => {
177+
await page.setContent(`
178+
<ion-datetime-button datetime="datetime"></ion-datetime-button>
179+
<ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
180+
`);
181+
await page.waitForSelector('.datetime-ready');
182+
183+
await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
184+
await expect(page.locator('.time-target-container')).not.toBeVisible();
185+
});
186+
});

‎core/src/components/datetime-button/test/basic/index.html‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,23 +179,45 @@ <h2>Year</h2>
179179
</ion-popover>
180180
</div>
181181
<div class="grid-item">
182-
<h2>preferWheel</h2>
182+
<h2>preferWheel / date</h2>
183183

184184
<ion-item>
185185
<ion-label>Start Date</ion-label>
186186
<ion-datetime-button
187187
slot="end"
188-
id="prefer-wheel-button"
189-
datetime="prefer-wheel-datetime"
188+
id="prefer-wheel-date-button"
189+
datetime="prefer-wheel-date"
190190
></ion-datetime-button>
191191
</ion-item>
192192

193-
<ion-popover arrow="false" trigger="prefer-wheel-button">
193+
<ion-popover arrow="false" trigger="prefer-wheel-date-button">
194+
<ion-datetime
195+
locale="en-US"
196+
prefer-wheel="true"
197+
presentation="date"
198+
id="prefer-wheel-date"
199+
value="2022-03-15T00:43:00"
200+
></ion-datetime>
201+
</ion-popover>
202+
</div>
203+
<div class="grid-item">
204+
<h2>preferWheel / date-time</h2>
205+
206+
<ion-item>
207+
<ion-label>Start Date</ion-label>
208+
<ion-datetime-button
209+
slot="end"
210+
id="prefer-wheel-date-time-button"
211+
datetime="prefer-wheel-date-time"
212+
></ion-datetime-button>
213+
</ion-item>
214+
215+
<ion-popover arrow="false" trigger="prefer-wheel-date-time-button">
194216
<ion-datetime
195217
locale="en-US"
196218
prefer-wheel="true"
197219
presentation="date-time"
198-
id="prefer-wheel-datetime"
220+
id="prefer-wheel-date-time"
199221
value="2022-03-15T00:43:00"
200222
></ion-datetime>
201223
</ion-popover>

0 commit comments

Comments
 (0)