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

lint(): run prettier on feature-6.1

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-04 19:38:08 +00:00
parent d737f7074d
commit 2ebb94ba01
46 changed files with 1682 additions and 1639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1388,7 +1388,10 @@ export class Datetime implements ComponentInterface {
*/
isCalDayDisabled = !isDateEnabled(convertDataToISO(referenceParts));
} catch (e) {
printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
printIonError(
'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
e
);
}
}

45
core/src/components/datetime/test/disable-dates/e2e.ts
View File

@ -16,20 +16,16 @@ function queryAllWorkingMonthDisabledDays(page: E2EPage, datetimeSelector = 'ion
}
describe('datetime: disable dates', () => {
describe('return values', () => {
let page: E2EPage;
beforeEach(async () => {
page = await newE2EPage({
html: '<ion-datetime value="2021-10-01"></ion-datetime>'
html: '<ion-datetime value="2021-10-01"></ion-datetime>',
});
});
describe('when isDateEnabled returns true', () => {
it('calendar days should be enabled', async () => {
await page.$eval('ion-datetime', (el: any) => {
el.isDateEnabled = () => true;
@ -41,13 +37,10 @@ describe('datetime: disable dates', () => {
expect(disabledDays.length).toBe(0);
});
});
describe('when isDateEnabled returns false', () => {
it('calendar days should be disabled', async () => {
await page.$eval('ion-datetime', (el: any) => {
el.isDateEnabled = () => false;
});
@ -58,11 +51,9 @@ describe('datetime: disable dates', () => {
expect(disabledDays.length).toBe(91);
});
});
describe('when isDateEnabled throws an exception', () => {
beforeEach(async () => {
await page.$eval('ion-datetime', (el: any) => {
el.isDateEnabled = (dateIsoString: string) => {
@ -79,10 +70,11 @@ describe('datetime: disable dates', () => {
});
it('calendar days should be enabled', async () => {
await page.waitForChanges();
const enabledDays = await page.findAll('ion-datetime >>> .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)');
const enabledDays = await page.findAll(
'ion-datetime >>> .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)'
);
expect(enabledDays.length).toBe(1);
});
@ -99,13 +91,13 @@ describe('datetime: disable dates', () => {
await page.waitForChanges();
expect(errors.length).toBe(1);
expect(errors[0]).toContain('[Ionic Error]: Exception thrown from provided `isDateEnabled` function. Please check your function and try again.');
expect(errors[0]).toContain(
'[Ionic Error]: Exception thrown from provided `isDateEnabled` function. Please check your function and try again.'
);
});
});
describe('when isDateEnabled returns undefined', () => {
it('calendar days should be disabled', async () => {
await page.$eval('ion-datetime', (el: any) => {
el.isDateEnabled = () => undefined;
@ -117,11 +109,9 @@ describe('datetime: disable dates', () => {
expect(disabledDays.length).toBe(91);
});
});
describe('when isDateEnabled returns null', () => {
it('calendar days should be disabled', async () => {
await page.$eval('ion-datetime', (el: any) => {
el.isDateEnabled = () => null;
@ -133,18 +123,15 @@ describe('datetime: disable dates', () => {
expect(disabledDays.length).toBe(91);
});
});
});
describe('examples', () => {
let page: E2EPage;
beforeEach(async () => {
page = await newE2EPage({
url: '/src/components/datetime/test/disable-dates?ionic:_testing=true'
url: '/src/components/datetime/test/disable-dates?ionic:_testing=true',
});
});
@ -156,29 +143,27 @@ describe('datetime: disable dates', () => {
it('should disable specific days of the week', async () => {
const disabledDays = await queryAllWorkingMonthDisabledDays(page, '#weekends');
const disabledValues = disabledDays.map(d => d.textContent);
const disabledValues = disabledDays.map((d) => d.textContent);
expect(disabledValues).toEqual(['2', '3', '9', '10', '16', '17', '23', '24', '30', '31']);
});
it('should disable a range of dates', async () => {
const disabledDays = await queryAllDisabledDays(page, '#dateRange');
const disabledValues = disabledDays.map(d => d.textContent);
const disabledValues = disabledDays.map((d) => d.textContent);
expect(disabledValues).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']);
});
it('should disable a month', async () => {
const disabledDays = await queryAllDisabledDays(page, '#month');
const disabledValues = disabledDays.map(d => d.textContent);
const disabledValues = disabledDays.map((d) => d.textContent);
expect(disabledValues.length).toBe(31);
});
});
describe('with a min date range', () => {
it('should not enable already disabled dates', async () => {
const page = await newE2EPage({
html: `
@ -187,18 +172,16 @@ describe('datetime: disable dates', () => {
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = () => true;
</script>
`
`,
});
const disabledDays = await queryAllWorkingMonthDisabledDays(page);
expect(disabledDays.length).toBe(14);
});
});
describe('with a max date range', () => {
it('should not enable already disabled dates', async () => {
const page = await newE2EPage({
html: `
@ -207,14 +190,12 @@ describe('datetime: disable dates', () => {
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = () => true;
</script>
`
`,
});
const disabledDays = await queryAllWorkingMonthDisabledDays(page);
expect(disabledDays.length).toBe(16);
});
});
});

203
core/src/components/datetime/test/disable-dates/index.html
View File

@ -1,114 +1,111 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime - Disable Dates</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(250px, 1fr));
grid-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
ion-datetime {
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Disable Dates</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Disable Specific Date</h2>
<ion-datetime id="specificDate" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Weekends</h2>
<ion-datetime id="weekends" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Date Range</h2>
<ion-datetime id="dateRange" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Month</h2>
<ion-datetime id="month" value="2021-10-01"></ion-datetime>
</div>
</div>
</ion-content>
<script>
const specificDateDisabled = document.querySelector('#specificDate');
specificDateDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables October 10, 2021.
if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
return false;
}
return true;
<head>
<meta charset="UTF-8" />
<title>Datetime - Disable Dates</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(250px, 1fr));
grid-gap: 20px;
}
const weekendsDisabled = document.querySelector('#weekends');
weekendsDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables Sunday and Saturday
if (date.getUTCDay() === 0 || date.getUTCDay() === 6) {
return false;
}
return true;
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
const dateRangeDisabled = document.querySelector('#dateRange');
dateRangeDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables dates between October 10, 2021 and October 20, 2021.
if (date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
if (date.getUTCDate() >= 10 && date.getUTCDate() <= 20) {
ion-datetime {
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Disable Dates</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Disable Specific Date</h2>
<ion-datetime id="specificDate" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Weekends</h2>
<ion-datetime id="weekends" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Date Range</h2>
<ion-datetime id="dateRange" value="2021-10-01"></ion-datetime>
</div>
<div class="grid-item">
<h2>Disable Month</h2>
<ion-datetime id="month" value="2021-10-01"></ion-datetime>
</div>
</div>
</ion-content>
<script>
const specificDateDisabled = document.querySelector('#specificDate');
specificDateDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables October 10, 2021.
if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
return false;
}
}
return true;
}
return true;
};
const monthDisabled = document.querySelector('#month');
monthDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables October (every year)
if (date.getUTCMonth() === 9) {
return false;
}
return true;
}
</script>
</ion-app>
</body>
const weekendsDisabled = document.querySelector('#weekends');
weekendsDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables Sunday and Saturday
if (date.getUTCDay() === 0 || date.getUTCDay() === 6) {
return false;
}
return true;
};
const dateRangeDisabled = document.querySelector('#dateRange');
dateRangeDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables dates between October 10, 2021 and October 20, 2021.
if (date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
if (date.getUTCDate() >= 10 && date.getUTCDate() <= 20) {
return false;
}
}
return true;
};
const monthDisabled = document.querySelector('#month');
monthDisabled.isDateEnabled = (dateIsoString) => {
const date = new Date(dateIsoString);
// Disables October (every year)
if (date.getUTCMonth() === 9) {
return false;
}
return true;
};
</script>
</ion-app>
</body>
</html>