Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add set first day week android #902

Merged
merged 14 commits into from
Jun 3, 2024
Merged

feat: Add set first day week android #902

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
22d4805
Added implementation for firstDayOfWeek for Android
JoshBarnesD May 28, 2024
c240ded
Fixed failing tests due to changes in App.js and fixed inconsistent t…
JoshBarnesD May 28, 2024
e2cbf3d
Added e2e tests for firstDayOfWeek Android
JoshBarnesD May 28, 2024
db0a276
Fixed .java files formatting issues due to changes
JoshBarnesD May 28, 2024
9f8f3c9
Fixed .java files formatting issues due to changes (2)
JoshBarnesD May 28, 2024
a20de55
Fixed failing test on iOS
JoshBarnesD May 29, 2024
43a0511
Added descriptions in type files and checked SDK version compatability
JoshBarnesD May 29, 2024
6858793
Updated firstDayOfWeek in README.md
JoshBarnesD May 29, 2024
9759027
Modified descriptions in type files
JoshBarnesD May 29, 2024
f344787
Fixed failing e2e tests on Android
JoshBarnesD May 30, 2024
46a4888
Fixed failing e2e tests on iOS
JoshBarnesD May 30, 2024
8d05525
Fixed failing e2e tests on iOS (2)
JoshBarnesD May 30, 2024
11ea194
README.md changes as requested, detox tests modified to reduce repeti…
JoshBarnesD May 31, 2024
0f9786b
Added helper function userSwipesTimezoneListUntilDesiredIsVisible
JoshBarnesD Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,15 +144,15 @@ Autolinking is not yet implemented on Windows, so [manual installation ](/docs/m
If you are using RN >= 0.60, only run `npx pod-install`. Then rebuild your project.

## React Native Support
Check the `react-native` version support table below to find the corrosponding `datetimepicker` version to meet support requirements.

| react-native version | version |
| -------------------- | -------- |
| 0.73.0+ | 7.6.3+ |
| <=0.72.0 | <=7.6.2 |
| 0.70.0+ | 7.0.1+ |
| <0.70.0 | <=7.0.0 |
Check the `react-native` version support table below to find the corrosponding `datetimepicker` version to meet support requirements.
JoshBarnesD marked this conversation as resolved.
Show resolved Hide resolved

| react-native version | version |
| -------------------- | ------- |
| 0.73.0+ | 7.6.3+ |
| <=0.72.0 | <=7.6.2 |
| 0.70.0+ | 7.0.1+ |
| <0.70.0 | <=7.0.0 |

## Usage

Expand Down Expand Up @@ -424,7 +424,7 @@ Reference: https://docs.microsoft.com/en-us/uwp/api/windows.globalization.dateti
<RNDateTimePicker dateFormat="dayofweek day month" />
```

#### `firstDayOfWeek` (`optional`, `Windows only`)
#### `firstDayOfWeek` (`optional`, `Android and Windows only`)

Indicates which day is shown as the first day of the week.

Expand Down
5 changes: 5 additions & 0 deletions android/src/main/java/com/reactcommunity/rndatetimepicker/DatePickerModule.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,11 @@ private Bundle createFragmentArguments(ReadableMap options) {
if (options.hasKey(RNConstants.ARG_TESTID) && !options.isNull(RNConstants.ARG_TESTID)) {
args.putString(RNConstants.ARG_TESTID, options.getString(RNConstants.ARG_TESTID));
}
if (options.hasKey(RNConstants.FIRST_DAY_OF_WEEK) && !options.isNull(RNConstants.FIRST_DAY_OF_WEEK)) {
// FIRST_DAY_OF_WEEK is 0-indexed, since it uses the same constants DAY_OF_WEEK used in the Windows implementation
// Android DatePicker uses 1-indexed values, SUNDAY being 1 and SATURDAY being 7, so the +1 is necessary in this case
args.putInt(RNConstants.FIRST_DAY_OF_WEEK, options.getInt(RNConstants.FIRST_DAY_OF_WEEK)+1);
}
return args;
}
}
1 change: 1 addition & 0 deletions android/src/main/java/com/reactcommunity/rndatetimepicker/RNConstants.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ public final class RNConstants {
public static final String ACTION_TIME_SET = "timeSetAction";
public static final String ACTION_DISMISSED = "dismissedAction";
public static final String ACTION_NEUTRAL_BUTTON = "neutralButtonAction";
public static final String FIRST_DAY_OF_WEEK = "firstDayOfWeek";

/**
* Minimum date supported by {@link TimePickerDialog}, 01 Jan 1900
Expand Down
7 changes: 5 additions & 2 deletions android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,11 @@ private DatePickerDialog createDialog(Bundle args) {
// the date under certain conditions.
datePicker.setMinDate(RNConstants.DEFAULT_MIN_DATE);
}
if (args.containsKey(RNConstants.ARG_MAXDATE)) {
datePicker.setMaxDate(maxDate);

// Only compatible with SDK 21 and above
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && args.containsKey(RNConstants.FIRST_DAY_OF_WEEK)) {
final int firstDayOfWeek = args.getInt(RNConstants.FIRST_DAY_OF_WEEK);
datePicker.setFirstDayOfWeek(firstDayOfWeek);
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && (args.containsKey(RNConstants.ARG_MAXDATE) || args.containsKey(RNConstants.ARG_MINDATE))) {
Expand Down
67 changes: 65 additions & 2 deletions example/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const App = () => {
const [maxDate] = useState(new Date('2021'));
const [minDate] = useState(new Date('2018'));
const [is24Hours, set24Hours] = useState(false);
const [firstDayOfWeek, setFirstDayOfWeek] = useState(DAY_OF_WEEK.Monday);
const [firstDayOfWeek, setFirstDayOfWeek] = useState(DAY_OF_WEEK.Sunday);
const [dateFormat, setDateFormat] = useState('longdate');
const [dayOfWeekFormat, setDayOfWeekFormat] = useState(
'{dayofweek.abbreviated(2)}',
Expand Down Expand Up @@ -168,7 +168,7 @@ export const App = () => {
: `${item} mins`
: item;
return (
<View style={{marginHorizontal: 1}}>
<View style={{marginHorizontal: 1}} testID={`${item}`}>
<Button
title={title || 'undefined'}
onPress={() => {
Expand Down Expand Up @@ -253,6 +253,13 @@ export const App = () => {
/>
</>
)}
<Info
testID={'firstDayOfWeek'}
title={'First Day of Week:'}
body={`${Object.keys(DAY_OF_WEEK).find(
(key) => DAY_OF_WEEK[key] === firstDayOfWeek,
)}`}
/>
</View>
</View>
<ScrollView
Expand Down Expand Up @@ -334,6 +341,55 @@ export const App = () => {
testID="neutralButtonLabelTextInput"
/>
</View>

<View
style={{
flexDirection: 'column',
flexWrap: 'wrap',
paddingBottom: 10,
}}>
<ThemedText style={styles.textLabel}>
firstDayOfWeek (android only)
</ThemedText>
<View style={styles.firstDayOfWeekContainer}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mentioned you needed to add scrolling. Can we make this more compact in terms of height?

I'd prefer if we can avoid scrolling because it's annoying to think about it when maintaining tests.

Also the code seems fit to be replaced by a array.map

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First off, thank you for the lovely comments you've made, they made my day! 😄

Now, with regards to this, Ive implemented a FlatList design for selecting the DAY_OF_WEEK variable (similar to the "timezone" FlatList further down) but, sadly, it seems most of the tests would still need to have some level of scrolling to access the UI elements... Either way I will push the changes shortly and you can check them out!

I've gone through most of the tests and I think it might be reasonable to implement a "ScrollToElement" function that allows you to scroll to the necessary UI element before interacting with it. This would also reduce the size and repetitiveness of some of the tests and hopefully aid with maintainability. I was thinking of maybe creating a separate PR going over them and addressing some of the issues. Let me know what you think!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me, though if we can avoid scrolling, that'd be best imho. I see that now we run in iphone 14. A low-effort fix could be just bumping to a larger device.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will revert the changes to the tests that add scrolling and see if I can find a valid device for iOS and Android that will pass the tests without scrolling, will get back to you shortly

<Button
title={'Sunday'}
value={DAY_OF_WEEK.Sunday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Sunday)}
/>
<Button
title={'Monday'}
value={DAY_OF_WEEK.Monday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Monday)}
/>
<Button
title={'Tuesday'}
value={DAY_OF_WEEK.Tuesday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Tuesday)}
/>
<Button
title={'Wednesday'}
value={DAY_OF_WEEK.Wednesday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Wednesday)}
/>
<Button
title={'Thursday'}
value={DAY_OF_WEEK.Thursday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Thursday)}
/>
<Button
title={'Friday'}
value={DAY_OF_WEEK.Friday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Friday)}
/>
<Button
title={'Saturday'}
value={DAY_OF_WEEK.Saturday}
onPress={() => setFirstDayOfWeek(DAY_OF_WEEK.Saturday)}
/>
</View>
</View>

<View style={styles.header}>
<ThemedText style={styles.textLabel}>
[android] show and dismiss picker after 3 secs
Expand Down Expand Up @@ -410,6 +466,7 @@ export const App = () => {
neutralButton={{label: neutralButtonLabel}}
negativeButton={{label: 'Cancel', textColor: 'red'}}
disabled={disabled}
firstDayOfWeek={firstDayOfWeek}
/>
)}
</View>
Expand Down Expand Up @@ -631,6 +688,12 @@ const styles = StyleSheet.create({
paddingTop: 10,
width: 350,
},
firstDayOfWeekContainer: {
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
gap: 5,
},
});

export default App;
100 changes: 91 additions & 9 deletions example/e2e/detoxTest.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ const {
getDatePickerAndroid,
getDateTimePickerControlIOS,
getInlineTimePickerIOS,
getDatePickerButtonIOS,
} = require('./utils/matchers');
const {
userChangesTimeValue,
userOpensPicker,
userTapsCancelButtonAndroid,
userTapsOkButtonAndroid,
userDismissesCompactDatePicker,
} = require('./utils/actions');
const {isIOS, isAndroid, wait, Platform} = require('./utils/utils');
const {device} = require('detox');
Expand Down Expand Up @@ -63,15 +63,15 @@ describe('e2e tests', () => {
await userOpensPicker({mode: 'date', display: 'default'});

if (isIOS()) {
await element(
by.traits(['staticText']).withAncestor(by.label('Date Picker')),
).tap();
await elementById('DateTimePickerScrollView').scrollTo('bottom');
await getDatePickerButtonIOS().tap();

// 'label' maps to 'description' in view hierarchy debugger
const nextMonthArrow = element(by.label('Next Month'));

await nextMonthArrow.tap();
await nextMonthArrow.tap();
await userDismissesCompactDatePicker();
await getDatePickerButtonIOS().tap();
} else {
const calendarHorizontalScrollView = element(
by
Expand Down Expand Up @@ -119,9 +119,11 @@ describe('e2e tests', () => {
ios: 'inline',
android: 'default',
});
await elementById('DateTimePickerScrollView').scrollTo('top');
await userOpensPicker({mode: 'time', display});

if (isIOS()) {
await elementById('DateTimePickerScrollView').scrollTo('bottom');
await expect(getInlineTimePickerIOS()).toBeVisible();
} else {
await expect(element(by.type('android.widget.TimePicker'))).toBeVisible();
Expand Down Expand Up @@ -165,16 +167,22 @@ describe('e2e tests', () => {

await expect(elementById('overriddenTzName')).toHaveText('Europe/Prague');

await elementById('timezone').swipe('left', 'fast', 0.5);
await elementById('DateTimePickerScrollView').scrollTo('bottom');

let timeZone = 'America/Vancouver';
await waitFor(elementById('timezone')).toBeVisible().withTimeout(1000);
JoshBarnesD marked this conversation as resolved.
Show resolved Hide resolved
await waitFor(elementById(timeZone))
.toBeVisible()
.whileElement(by.id('timezone'))
.scroll(200, 'right');

if (isAndroid()) {
timeZone = timeZone.toUpperCase();
}

await waitFor(elementByText(timeZone)).toBeVisible().withTimeout(1000);

await elementByText(timeZone).tap();
await elementByText(timeZone).multiTap(2);

await assertTimeLabels({
utcTime: '2021-11-13T01:00:00Z',
Expand All @@ -188,17 +196,24 @@ describe('e2e tests', () => {
});

it('daylight saving should work properly', async () => {
await elementById('timezone').swipe('left', 'fast', 0.5);
await elementById('DateTimePickerScrollView').scrollTo('bottom');

let timeZone = 'America/Vancouver';
await waitFor(elementById('timezone')).toBeVisible().withTimeout(1000);
await waitFor(elementById(timeZone))
.toBeVisible()
.whileElement(by.id('timezone'))
.scroll(200, 'right');

if (isAndroid()) {
timeZone = timeZone.toUpperCase();
}

await waitFor(elementByText(timeZone)).toBeVisible().withTimeout(1000);

await elementByText(timeZone).tap();
await elementByText(timeZone).multiTap(2);

await elementById('DateTimePickerScrollView').scrollTo('top');
await userOpensPicker({mode: 'date', display: getPickerDisplay()});

if (isIOS()) {
Expand Down Expand Up @@ -228,6 +243,7 @@ describe('e2e tests', () => {
await uiDevice.pressEnter();
await userTapsOkButtonAndroid();

await elementById('DateTimePickerScrollView').scrollTo('top');
await userOpensPicker({mode: 'time', display: getPickerDisplay()});
await userChangesTimeValue({hours: '2', minutes: '0'});
await userTapsOkButtonAndroid();
Expand Down Expand Up @@ -275,6 +291,8 @@ describe('e2e tests', () => {
tzOffsetPreset = tzOffsetPreset.toUpperCase();
}

await elementById('DateTimePickerScrollView').scrollTo('top');

await userOpensPicker({
mode: 'time',
display: getPickerDisplay(),
Expand Down Expand Up @@ -310,7 +328,9 @@ describe('e2e tests', () => {
await expect(elementById('utcTime')).toHaveText('2021-11-13T00:00:00Z');

// Ensure you can select tomorrow (iOS)
await elementById('DateTimePickerScrollView').scrollTo('top');
await userOpensPicker({mode: 'date', display: getPickerDisplay()});
await elementById('DateTimePickerScrollView').scrollTo('bottom');
await testElement.setDatePickerDate('2021-11-14T01:00:00Z', 'ISO8601');
} else {
const uiDevice = device.getUiDevice();
Expand Down Expand Up @@ -445,4 +465,66 @@ describe('e2e tests', () => {
});
});
});

describe(':android: firstDayOfWeek functionality', () => {
JoshBarnesD marked this conversation as resolved.
Show resolved Hide resolved
it(':android: picker should have Sunday as firstDayOfWeek and select Sunday date', async () => {
const targetDate = '2021-11-07T01:00:00Z';
const targetDateWithTZ = '2021-11-07T02:00:00+01:00';

await userOpensPicker({mode: 'date', display: getPickerDisplay()});
await expect(getDatePickerAndroid()).toBeVisible();

const uiDevice = device.getUiDevice();
const focusSeventhOfNovemberInCalendar = async () => {
for (let i = 0; i < 4; i++) {
await uiDevice.pressDPadDown();
}
for (let i = 0; i < 2; i++) {
await uiDevice.pressDPadLeft();
}
};
await focusSeventhOfNovemberInCalendar();
await uiDevice.pressEnter();
await userTapsOkButtonAndroid();

await expect(elementById('firstDayOfWeek')).toHaveText('Sunday');

await assertTimeLabels({
utcTime: targetDate,
deviceTime: targetDateWithTZ,
});
});

it(':android: should select firstDayOfWeek as Tuesday and select the Sunday date', async () => {
const targetDate = '2021-11-07T01:00:00Z';
const targetDateWithTZ = '2021-11-07T02:00:00+01:00';

await userOpensPicker({
mode: 'date',
display: getPickerDisplay(),
firstDayOfWeek: 'TUESDAY',
});
await expect(getDatePickerAndroid()).toBeVisible();

const uiDevice = device.getUiDevice();
const focusSeventhOfNovemberInCalendar = async () => {
for (let i = 0; i < 3; i++) {
await uiDevice.pressDPadDown();
}
for (let i = 0; i < 3; i++) {
await uiDevice.pressDPadRight();
}
};
await focusSeventhOfNovemberInCalendar();
await uiDevice.pressEnter();
await userTapsOkButtonAndroid();

await expect(elementById('firstDayOfWeek')).toHaveText('Tuesday');

await assertTimeLabels({
utcTime: targetDate,
deviceTime: targetDateWithTZ,
});
});
});
});
Loading