Skip to content

Commit b857c1d

Browse files
JoaoFerreira-FrontEndJoaoFerreira-FrontEnd
committed
- lint.fix;
1 parent 053843f commit b857c1d

File tree

1 file changed

+165
-167
lines changed

1 file changed

+165
-167
lines changed

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

Lines changed: 165 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -2232,189 +2232,187 @@ export class Datetime implements ComponentInterface {
22322232
}}
22332233
>
22342234
<div class="calendar-month-grid">
2235-
{getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map(
2236-
(dateObject, index) => {
2237-
const { day, dayOfWeek, adjacentDay } = dateObject;
2238-
const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
2239-
let _month = month;
2240-
let _year = year;
2241-
if (showAdjacentDays && adjacentDay && day !== null) {
2242-
if (day > 20) {
2243-
// Leading with the adjacent day from the previous month
2244-
// if its a adjacent day and is higher than '20' (last week even in feb)
2245-
if (month === 1) {
2246-
_year = year - 1;
2247-
_month = 12;
2248-
} else {
2249-
_month = month - 1;
2250-
}
2251-
} else if (day < 15) {
2252-
// Leading with the adjacent day from the next month
2253-
// if its a adjacent day and is lower than '15' (first two weeks)
2254-
if (month === 12) {
2255-
_year = year + 1;
2256-
_month = 1;
2257-
} else {
2258-
_month = month + 1;
2259-
}
2235+
{getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
2236+
const { day, dayOfWeek, adjacentDay } = dateObject;
2237+
const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
2238+
let _month = month;
2239+
let _year = year;
2240+
if (showAdjacentDays && adjacentDay && day !== null) {
2241+
if (day > 20) {
2242+
// Leading with the adjacent day from the previous month
2243+
// if its a adjacent day and is higher than '20' (last week even in feb)
2244+
if (month === 1) {
2245+
_year = year - 1;
2246+
_month = 12;
2247+
} else {
2248+
_month = month - 1;
2249+
}
2250+
} else if (day < 15) {
2251+
// Leading with the adjacent day from the next month
2252+
// if its a adjacent day and is lower than '15' (first two weeks)
2253+
if (month === 12) {
2254+
_year = year + 1;
2255+
_month = 1;
2256+
} else {
2257+
_month = month + 1;
22602258
}
22612259
}
2260+
}
22622261

2263-
const referenceParts = { month: _month, day, year: _year, adjacentDay };
2264-
const isCalendarPadding = day === null;
2265-
const {
2266-
isActive,
2267-
isToday,
2268-
ariaLabel,
2269-
ariaSelected,
2270-
disabled: isDayDisabled,
2271-
text,
2272-
} = getCalendarDayState(
2273-
this.locale,
2274-
referenceParts,
2275-
this.activeParts,
2276-
this.todayParts,
2277-
this.minParts,
2278-
this.maxParts,
2279-
this.parsedDayValues
2280-
);
2281-
2282-
const dateIsoString = convertDataToISO(referenceParts);
2283-
2284-
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
2285-
2286-
if (!isCalDayDisabled && isDateEnabled !== undefined) {
2287-
try {
2288-
/**
2289-
* The `isDateEnabled` implementation is try-catch wrapped
2290-
* to prevent exceptions in the user's function from
2291-
* interrupting the calendar rendering.
2292-
*/
2293-
isCalDayDisabled = !isDateEnabled(dateIsoString);
2294-
} catch (e) {
2295-
printIonError(
2296-
'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
2297-
el,
2298-
e
2299-
);
2300-
}
2262+
const referenceParts = { month: _month, day, year: _year, adjacentDay };
2263+
const isCalendarPadding = day === null;
2264+
const {
2265+
isActive,
2266+
isToday,
2267+
ariaLabel,
2268+
ariaSelected,
2269+
disabled: isDayDisabled,
2270+
text,
2271+
} = getCalendarDayState(
2272+
this.locale,
2273+
referenceParts,
2274+
this.activeParts,
2275+
this.todayParts,
2276+
this.minParts,
2277+
this.maxParts,
2278+
this.parsedDayValues
2279+
);
2280+
2281+
const dateIsoString = convertDataToISO(referenceParts);
2282+
2283+
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
2284+
2285+
if (!isCalDayDisabled && isDateEnabled !== undefined) {
2286+
try {
2287+
/**
2288+
* The `isDateEnabled` implementation is try-catch wrapped
2289+
* to prevent exceptions in the user's function from
2290+
* interrupting the calendar rendering.
2291+
*/
2292+
isCalDayDisabled = !isDateEnabled(dateIsoString);
2293+
} catch (e) {
2294+
printIonError(
2295+
'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
2296+
el,
2297+
e
2298+
);
23012299
}
2300+
}
23022301

2303-
/**
2304-
* Some days are constrained through max & min or allowed dates
2305-
* and also disabled because the component is readonly or disabled.
2306-
* These need to be displayed differently.
2307-
*/
2308-
const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
2302+
/**
2303+
* Some days are constrained through max & min or allowed dates
2304+
* and also disabled because the component is readonly or disabled.
2305+
* These need to be displayed differently.
2306+
*/
2307+
const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
23092308

2310-
const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
2309+
const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
23112310

2312-
let dateStyle: DatetimeHighlightStyle | undefined = undefined;
2311+
let dateStyle: DatetimeHighlightStyle | undefined = undefined;
23132312

2314-
/**
2315-
* Custom highlight styles should not override the style for selected dates,
2316-
* nor apply to "filler days" at the start of the grid.
2317-
*/
2318-
if (highlightedDates !== undefined && !isActive && day !== null && !adjacentDay) {
2319-
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
2320-
}
2313+
/**
2314+
* Custom highlight styles should not override the style for selected dates,
2315+
* nor apply to "filler days" at the start of the grid.
2316+
*/
2317+
if (highlightedDates !== undefined && !isActive && day !== null && !adjacentDay) {
2318+
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
2319+
}
23212320

2322-
let dateParts = undefined;
2321+
let dateParts = undefined;
23232322

2324-
// "Filler days" at the beginning of the grid should not get the calendar day
2325-
// CSS parts added to them
2326-
if (!isCalendarPadding && !adjacentDay) {
2327-
dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
2328-
isCalDayDisabled ? ' disabled' : ''
2329-
}`;
2330-
} else if (adjacentDay) {
2331-
dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
2332-
}
2323+
// "Filler days" at the beginning of the grid should not get the calendar day
2324+
// CSS parts added to them
2325+
if (!isCalendarPadding && !adjacentDay) {
2326+
dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
2327+
isCalDayDisabled ? ' disabled' : ''
2328+
}`;
2329+
} else if (adjacentDay) {
2330+
dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
2331+
}
23332332

2334-
return (
2335-
<div class="calendar-day-wrapper">
2336-
<button
2337-
// We need to use !important for the inline styles here because
2338-
// otherwise the CSS shadow parts will override these styles.
2339-
// See https://github.com/WICG/webcomponents/issues/847
2340-
// Both the CSS shadow parts and highlightedDates styles are
2341-
// provided by the developer, but highlightedDates styles should
2342-
// always take priority.
2343-
ref={(el) => {
2344-
if (el) {
2345-
el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
2346-
el.style.setProperty(
2347-
'background-color',
2348-
`${dateStyle ? dateStyle.backgroundColor : ''}`,
2349-
'important'
2350-
);
2351-
}
2352-
}}
2353-
tabindex="-1"
2354-
data-day={day}
2355-
data-month={_month}
2356-
data-year={_year}
2357-
data-index={index}
2358-
data-day-of-week={dayOfWeek}
2359-
disabled={isButtonDisabled}
2360-
class={{
2361-
'calendar-day-padding': isCalendarPadding,
2362-
'calendar-day': true,
2363-
'calendar-day-active': isActive,
2364-
'calendar-day-constrained': isCalDayConstrained,
2365-
'calendar-day-today': isToday,
2366-
'calendar-day-adjacent-day': adjacentDay,
2367-
}}
2368-
part={dateParts}
2369-
aria-hidden={isCalendarPadding ? 'true' : null}
2370-
aria-selected={ariaSelected}
2371-
aria-label={ariaLabel}
2372-
onClick={() => {
2373-
if (isCalendarPadding) {
2374-
return;
2375-
}
2376-
2377-
if (adjacentDay) {
2378-
//the user selected a day outside the current month, let's not focus on this button since the month will be re-render;
2379-
this.el.blur();
2380-
}
2381-
2382-
this.setWorkingParts({
2383-
...this.workingParts,
2333+
return (
2334+
<div class="calendar-day-wrapper">
2335+
<button
2336+
// We need to use !important for the inline styles here because
2337+
// otherwise the CSS shadow parts will override these styles.
2338+
// See https://github.com/WICG/webcomponents/issues/847
2339+
// Both the CSS shadow parts and highlightedDates styles are
2340+
// provided by the developer, but highlightedDates styles should
2341+
// always take priority.
2342+
ref={(el) => {
2343+
if (el) {
2344+
el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
2345+
el.style.setProperty(
2346+
'background-color',
2347+
`${dateStyle ? dateStyle.backgroundColor : ''}`,
2348+
'important'
2349+
);
2350+
}
2351+
}}
2352+
tabindex="-1"
2353+
data-day={day}
2354+
data-month={_month}
2355+
data-year={_year}
2356+
data-index={index}
2357+
data-day-of-week={dayOfWeek}
2358+
disabled={isButtonDisabled}
2359+
class={{
2360+
'calendar-day-padding': isCalendarPadding,
2361+
'calendar-day': true,
2362+
'calendar-day-active': isActive,
2363+
'calendar-day-constrained': isCalDayConstrained,
2364+
'calendar-day-today': isToday,
2365+
'calendar-day-adjacent-day': adjacentDay,
2366+
}}
2367+
part={dateParts}
2368+
aria-hidden={isCalendarPadding ? 'true' : null}
2369+
aria-selected={ariaSelected}
2370+
aria-label={ariaLabel}
2371+
onClick={() => {
2372+
if (isCalendarPadding) {
2373+
return;
2374+
}
2375+
2376+
if (adjacentDay) {
2377+
//the user selected a day outside the current month, let's not focus on this button since the month will be re-render;
2378+
this.el.blur();
2379+
}
2380+
2381+
this.setWorkingParts({
2382+
...this.workingParts,
2383+
month: _month,
2384+
day,
2385+
year: _year,
2386+
adjacentDay: adjacentDay,
2387+
});
2388+
2389+
// multiple only needs date info, so we can wipe out other fields like time
2390+
if (multiple) {
2391+
this.setActiveParts(
2392+
{
2393+
month: _month,
2394+
day,
2395+
year: _year,
2396+
adjacentDay: adjacentDay,
2397+
},
2398+
isActive
2399+
);
2400+
} else {
2401+
this.setActiveParts({
2402+
...activePart,
23842403
month: _month,
23852404
day,
23862405
year: _year,
23872406
adjacentDay: adjacentDay,
23882407
});
2389-
2390-
// multiple only needs date info, so we can wipe out other fields like time
2391-
if (multiple) {
2392-
this.setActiveParts(
2393-
{
2394-
month: _month,
2395-
day,
2396-
year: _year,
2397-
adjacentDay: adjacentDay,
2398-
},
2399-
isActive
2400-
);
2401-
} else {
2402-
this.setActiveParts({
2403-
...activePart,
2404-
month: _month,
2405-
day,
2406-
year: _year,
2407-
adjacentDay: adjacentDay,
2408-
});
2409-
}
2410-
}}
2411-
>
2412-
{text}
2413-
</button>
2414-
</div>
2415-
);
2416-
}
2417-
)}
2408+
}
2409+
}}
2410+
>
2411+
{text}
2412+
</button>
2413+
</div>
2414+
);
2415+
})}
24182416
</div>
24192417
</div>
24202418
);

0 commit comments

Comments
 (0)