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

fix(datetime): expose shadow parts

Browse Source
This commit is contained in:
Liam DeBeasi
2023-12-04 14:07:55 -05:00
parent 4b564ee9b2
commit 3da0590a09
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/datetime/datetime.tsx
View File

@@ -1648,7 +1648,7 @@ export class Datetime implements ComponentInterface {
}}
>
{items.map((item: PickerColumnItem) => (
<ion-picker-column-option key={item.value} disabled={item.disabled} value={item.value}>
<ion-picker-column-option part={item.value === todayString ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={item.value} disabled={item.disabled} value={item.value}>
{item.text}
</ion-picker-column-option>
))}
@@ -1736,13 +1736,14 @@ export class Datetime implements ComponentInterface {
const { disabled, workingParts } = this;
const activePart = this.getActivePartsWithFallback();
const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
return (
<ion-picker-column
class="day-column"
color={this.color}
disabled={disabled}
value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
value={pickerColumnValue}
onIonChange={(ev: CustomEvent) => {
// TODO(FW-1823) Remove this when iOS 14 support is dropped.
// Due to a Safari 14 issue we need to destroy
@@ -1770,7 +1771,7 @@ export class Datetime implements ComponentInterface {
}}
>
{days.map((day: PickerColumnItem) => (
<ion-picker-column-option key={day.value} disabled={day.disabled} value={day.value}>
<ion-picker-column-option part={day.value === pickerColumnValue ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={day.value} disabled={day.disabled} value={day.value}>
{day.text}
</ion-picker-column-option>
))}
@@ -1820,7 +1821,7 @@ export class Datetime implements ComponentInterface {
}}
>
{months.map((month: PickerColumnItem) => (
<ion-picker-column-option key={month.value} disabled={month.disabled} value={month.value}>
<ion-picker-column-option part={month.value === workingParts.month ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={month.value} disabled={month.disabled} value={month.value}>
{month.text}
</ion-picker-column-option>
))}
@@ -1869,7 +1870,7 @@ export class Datetime implements ComponentInterface {
}}
>
{years.map((year: PickerColumnItem) => (
<ion-picker-column-option key={year.value} disabled={year.disabled} value={year.value}>
<ion-picker-column-option part={year.value === workingParts.year ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={year.value} disabled={year.disabled} value={year.value}>
{year.text}
</ion-picker-column-option>
))}
@@ -1937,7 +1938,7 @@ export class Datetime implements ComponentInterface {
}}
>
{hoursData.map((hour: PickerColumnItem) => (
<ion-picker-column-option key={hour.value} disabled={hour.disabled} value={hour.value}>
<ion-picker-column-option part={hour.value === activePart.hour ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={hour.value} disabled={hour.disabled} value={hour.value}>
{hour.text}
</ion-picker-column-option>
))}
@@ -1971,7 +1972,7 @@ export class Datetime implements ComponentInterface {
}}
>
{minutesData.map((minute: PickerColumnItem) => (
<ion-picker-column-option key={minute.value} disabled={minute.disabled} value={minute.value}>
<ion-picker-column-option part={minute.value === activePart.minute ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={minute.value} disabled={minute.disabled} value={minute.value}>
{minute.text}
</ion-picker-column-option>
))}
@@ -2012,7 +2013,7 @@ export class Datetime implements ComponentInterface {
}}
>
{dayPeriodData.map((dayPeriod: PickerColumnItem) => (
<ion-picker-column-option key={dayPeriod.value} disabled={dayPeriod.disabled} value={dayPeriod.value}>
<ion-picker-column-option part={dayPeriod.value === activePart.ampm ? WHEEL_ITEM_ACTIVE_PART : WHEEL_ITEM_PART} key={dayPeriod.value} disabled={dayPeriod.disabled} value={dayPeriod.value}>
{dayPeriod.text}
</ion-picker-column-option>
))}
@@ -2564,3 +2565,5 @@ export class Datetime implements ComponentInterface {
}
let datetimeIds = 0;
const WHEEL_ITEM_PART = 'wheel-item';
const WHEEL_ITEM_ACTIVE_PART = `${WHEEL_ITEM_PART} active`;