Henning Hall
5 years ago
52 changed files with 12340 additions and 95 deletions
Split View
Diff Options
-
+61 -0.github/workflows/android.yml
-
+1 -0.watchmanconfig
-
+1 -10README.md
-
+2 -2android/build.gradle
-
+18 -4android/src/main/java/com/henninghall/date_picker/DatePickerManager.java
-
+12 -2android/src/main/java/com/henninghall/date_picker/PickerView.java
-
+0 -2android/src/main/java/com/henninghall/date_picker/Style.java
-
+2 -2android/src/main/java/com/henninghall/date_picker/WheelOrder.java
-
+7 -0android/src/main/res/layout/datepicker_view.xml
-
+2 -2examples/detox/android/app/build.gradle
-
+3 -0examples/detox/android/build.gradle
-
+1 -1examples/detox/android/settings.gradle
-
+4 -2examples/detox/e2e/init.js
-
+1 -1examples/detox/e2e/mocha.opts
-
+28 -0examples/detox/e2e/tests/24h-mode/hourWheel.spec.js
-
+49 -0examples/detox/e2e/tests/24h-mode/mode.spec.js
-
+131 -0examples/detox/e2e/tests/maximumDate.spec.js
-
+134 -0examples/detox/e2e/tests/minimumDate.spec.js
-
+34 -0examples/detox/e2e/tests/minuteInterval.spec.js
-
+49 -0examples/detox/e2e/tests/mode.spec.js
-
+45 -0examples/detox/e2e/tests/scrollAround.spec.js
-
+95 -0examples/detox/e2e/tests/wheelOrder.spec.js
-
+39 -0examples/detox/e2e/utils.js
-
+1 -1examples/detox/index.android.js
-
+1 -1examples/detox/index.js
-
+29 -19examples/detox/ios/example.xcodeproj/project.pbxproj
-
+29 -0examples/detox/metro.config.js
-
+23 -31examples/detox/package.json
-
+84 -0examples/detox/src/App.js
-
+49 -0examples/detox/src/CustomPropValue.js
-
+6 -0examples/detox/src/PropButton.js
-
+64 -0examples/detox/src/PropSlider.js
-
+6 -0examples/detox/src/exampleKeys.js
-
+25 -0examples/detox/src/examples.js
-
+225 -0examples/detox/src/examples/Advanced.js
-
+14 -0examples/detox/src/examples/DateMode.js
-
+13 -0examples/detox/src/examples/Minimal.js
-
+14 -0examples/detox/src/examples/TimeMode.js
-
+212 -0examples/detox/src/locales.js
-
+45 -0examples/detox/src/propPickers/DateChange.js
-
+8 -0examples/detox/src/propPickers/FadeToColor.js
-
+39 -0examples/detox/src/propPickers/LocalePicker.js
-
+55 -0examples/detox/src/propPickers/MinMaxDateChange.js
-
+18 -0examples/detox/src/propPickers/MinuteInterval.js
-
+18 -0examples/detox/src/propPickers/ModePicker.js
-
+40 -0examples/detox/src/propPickers/Scroll.js
-
+8 -0examples/detox/src/propPickers/TextColor.js
-
+20 -0examples/detox/src/propPickers/TimeZoneOffsetInMinutes.js
-
+341 -14examples/detox/yarn.lock
-
+5785 -0package-lock.json
-
+1 -1package.json
-
+4448 -0yarn.lock
+ 61
- 0
.github/workflows/android.yml
View File
| @ -0,0 +1,61 @@ | |||
| name: "Android: build & test" | |||
| on: [push, pull_request] | |||
| jobs: | |||
| build_and_test: | |||
| name: Build & test | |||
| runs-on: macos-latest | |||
| timeout-minutes: 30 | |||
| steps: | |||
| - name: Checkout | |||
| uses: actions/checkout@v1 | |||
| with: | |||
| fetch-depth: 1 | |||
| - name: Node | |||
| uses: actions/setup-node@v1 | |||
| - name: Use specific Java version for sdkmanager to work | |||
| uses: joschi/setup-jdk@v1 | |||
| with: | |||
| java-version: 'openjdk8' | |||
| architecture: 'x64' | |||
| - name: Download Android Emulator Image | |||
| run: | | |||
| echo "y" | $ANDROID_HOME/tools/bin/sdkmanager --install "system-images;android-29;google_apis;x86" | |||
| echo "no" | $ANDROID_HOME/tools/bin/avdmanager create avd --force --name emu --device "Nexus 5X" -k 'system-images;android-29;google_apis;x86' | |||
| $ANDROID_HOME/emulator/emulator -list-avds | |||
| - name: Install npm dependencies | |||
| working-directory: ./examples/detox | |||
| run: | | |||
| yarn install --frozen-lockfile | |||
| - name: Build | |||
| working-directory: ./examples/detox | |||
| run: | | |||
| yarn build:android-ci | |||
| - name: Start android emulator | |||
| working-directory: ./examples/detox | |||
| continue-on-error: true | |||
| run: | | |||
| echo "Starting emulator" | |||
| nohup $ANDROID_HOME/emulator/emulator -avd emu -no-audio -no-snapshot -no-window & | |||
| $ANDROID_HOME/platform-tools/adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed | tr -d '\r') ]]; do sleep 1; done; input keyevent 82' | |||
| $ANDROID_HOME/platform-tools/adb devices | |||
| echo "Emulator started" | |||
| - name: Run tests | |||
| working-directory: ./examples/detox | |||
| run: yarn start & yarn test:android-ci | |||
| - name: Upload artifacts | |||
| uses: actions/upload-artifact@v1 | |||
| if: failure() | |||
| with: | |||
| name: Failing tests | |||
| path: ./examples/detox/artifacts | |||
+ 1
- 0
.watchmanconfig
View File
| @ -0,0 +1 @@ | |||
| {} | |||
+ 1
- 10
README.md
View File
+ 2
- 2
android/build.gradle
View File
+ 18
- 4
android/src/main/java/com/henninghall/date_picker/DatePickerManager.java
View File
+ 12
- 2
android/src/main/java/com/henninghall/date_picker/PickerView.java
View File
+ 0
- 2
android/src/main/java/com/henninghall/date_picker/Style.java
View File
+ 2
- 2
android/src/main/java/com/henninghall/date_picker/WheelOrder.java
View File
+ 7
- 0
android/src/main/res/layout/datepicker_view.xml
View File
+ 2
- 2
examples/detox/android/app/build.gradle
View File
+ 3
- 0
examples/detox/android/build.gradle
View File
+ 1
- 1
examples/detox/android/settings.gradle
View File
| @ -1,5 +1,5 @@ | |||
| rootProject.name = 'DetoxRNExample' | |||
| include ':react-native-date-picker' | |||
| project(':react-native-date-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-date-picker/android') | |||
| project(':react-native-date-picker').projectDir = new File(rootProject.projectDir, '../../../android') | |||
| include ':app' | |||
+ 4
- 2
examples/detox/e2e/init.js
View File
+ 1
- 1
examples/detox/e2e/mocha.opts
View File
| @ -1,4 +1,4 @@ | |||
| --recursive | |||
| --timeout 300000 | |||
| --bail | |||
| --file e2e/init.js | |||
| --slow 30000 | |||
+ 28
- 0
examples/detox/e2e/tests/24h-mode/hourWheel.spec.js
View File
| @ -0,0 +1,28 @@ | |||
| const { scrollWheel, expectDate } = require("../../utils") | |||
| describe('Hour wheel', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| it('should have 24 hours', async () => { | |||
| await scroll3HoursAndExpect("2000-01-01 03:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 06:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 09:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 12:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 15:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 18:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 21:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 00:00:00") | |||
| }) | |||
| const scroll3HoursAndExpect = async (date) => { | |||
| await scrollWheel(1, 3) | |||
| await expectDate(date) | |||
| } | |||
| }) | |||
+ 49
- 0
examples/detox/e2e/tests/24h-mode/mode.spec.js
View File
| @ -0,0 +1,49 @@ | |||
| const { setMode } = require("../../utils") | |||
| describe('Modes - 24h', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| it('datetime', async () => { | |||
| await setMode("datetime") | |||
| await expect(element(by.id('day'))).toBeVisible() | |||
| await expect(element(by.id('minutes'))).toBeVisible() | |||
| await expect(element(by.id('hour'))).toBeVisible() | |||
| await expect(element(by.id('ampm'))).toNotExist() | |||
| await expect(element(by.id('month'))).toNotExist() | |||
| await expect(element(by.id('date'))).toNotExist() | |||
| await expect(element(by.id('year'))).toNotExist() | |||
| }) | |||
| it('date', async () => { | |||
| await setMode("date") | |||
| await expect(element(by.id('month'))).toBeVisible() | |||
| await expect(element(by.id('date'))).toBeVisible() | |||
| await expect(element(by.id('year'))).toBeVisible() | |||
| await expect(element(by.id('day'))).toNotExist() | |||
| await expect(element(by.id('minutes'))).toNotExist() | |||
| await expect(element(by.id('hour'))).toNotExist() | |||
| await expect(element(by.id('ampm'))).toNotExist() | |||
| }) | |||
| it('time', async () => { | |||
| await setMode("time") | |||
| await expect(element(by.id('minutes'))).toBeVisible() | |||
| await expect(element(by.id('hour'))).toBeVisible() | |||
| await expect(element(by.id('ampm'))).toNotExist() | |||
| await expect(element(by.id('day'))).toNotExist() | |||
| await expect(element(by.id('month'))).toNotExist() | |||
| await expect(element(by.id('date'))).toNotExist() | |||
| await expect(element(by.id('year'))).toNotExist() | |||
| }) | |||
| }) | |||
+ 131
- 0
examples/detox/e2e/tests/maximumDate.spec.js
View File
| @ -0,0 +1,131 @@ | |||
| const { scrollWheel, expectDate, setMaximumDate, setMode } = require("../utils") | |||
| const initialDate = new Date(2000, 0, 1, 0, 0); | |||
| const secondOfJanuary = new Date(2000, 0, 2, 0, 0); | |||
| const secondOfJanuary2001 = new Date(2001, 0, 2, 0, 0); | |||
| describe('Maximum date', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| describe('cannot pass max date - datetime mode', () => { | |||
| before(async () => { | |||
| await setMode("datetime") | |||
| await setMaximumDate(initialDate) | |||
| }) | |||
| it('day wheel', async () => { | |||
| await scrollWheel(0, 2) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('hour wheel', async () => { | |||
| await scrollWheel(1, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('minute wheel', async () => { | |||
| await scrollWheel(2, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| }) | |||
| describe('cannot pass max date - date mode', () => { | |||
| before(async () => { | |||
| await setMode("date") | |||
| await setMaximumDate(initialDate) | |||
| }) | |||
| it('month wheel', async () => { | |||
| await scrollWheel(0, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('date wheel', async () => { | |||
| await scrollWheel(1, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('year wheel', async () => { | |||
| await scrollWheel(2, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| }) | |||
| describe('overshooting max date', () => { | |||
| before(async () => { | |||
| await setMaximumDate(secondOfJanuary) | |||
| }) | |||
| it('day wheel should not be possible to overshoot since it is not wrapping (no invalid dates exists)', async () => { | |||
| await setMode("datetime") | |||
| await scrollWheel(0, 1) | |||
| await expectDate("2000-01-02 00:00:00") | |||
| await scrollWheel(0, 1) | |||
| await expectDate("2000-01-02 00:00:00") | |||
| }) | |||
| describe('date mode', () => { | |||
| before(async () => { | |||
| await setMode("date") | |||
| await setMaximumDate(secondOfJanuary) | |||
| }) | |||
| it('overshooting month wheel should set all other wheels to maximum possible date', async () => { | |||
| await scrollWheel(0, 1) | |||
| await expectDate("2000-01-02 00:00:00") | |||
| }) | |||
| it('overshooting date wheel should reverse to highest possible date', async () => { | |||
| await scrollWheel(1, 5) | |||
| await expectDate("2000-01-02 00:00:00") | |||
| }) | |||
| it('overshooting year wheel should set all other wheels to maximum possible date', async () => { | |||
| await setMaximumDate(secondOfJanuary2001) | |||
| await scrollWheel(0, 1) // set month to feb | |||
| await scrollWheel(2, 1) | |||
| await expectDate("2001-01-02 00:00:00") | |||
| }) | |||
| }) | |||
| describe('time mode', () => { | |||
| before(async () => { | |||
| await setMode("time") | |||
| await setMaximumDate(initialDate) | |||
| }) | |||
| it('overshooting hour wheel should reverse to highest possible time', async () => { | |||
| await scrollWheel(0, 5) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('overshooting minute wheel should reverse to highest possible time', async () => { | |||
| await scrollWheel(1, 5) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| it('overshooting am/pm wheel should reverse to highest possible time', async () => { | |||
| await scrollWheel(2, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| }) | |||
| }) | |||
| }) | |||
+ 134
- 0
examples/detox/e2e/tests/minimumDate.spec.js
View File
| @ -0,0 +1,134 @@ | |||
| const { setDate, scrollWheel, expectDate, setMinimumDate, setMode } = require("../utils") | |||
| const oneMinuteBeforeJanuary2 = new Date(2000, 0, 1, 23, 59, 0); | |||
| describe('Minimum date', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| beforeEach(async () => { | |||
| await setDate(oneMinuteBeforeJanuary2.toISOString()) | |||
| }) | |||
| describe('cannot pass min date - mode: ', () => { | |||
| describe('datetime', () => { | |||
| before(async () => { | |||
| await setMode("datetime") | |||
| await setMinimumDate(oneMinuteBeforeJanuary2) | |||
| }) | |||
| it('day wheel', async () => { | |||
| await scrollWheel(0, -2) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('hour wheel', async () => { | |||
| await scrollWheel(1, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('minute wheel', async () => { | |||
| await scrollWheel(2, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| }) | |||
| describe('date', () => { | |||
| before(async () => { | |||
| await setMode("date") | |||
| await setMinimumDate(oneMinuteBeforeJanuary2) | |||
| }) | |||
| it('month wheel', async () => { | |||
| await scrollWheel(0, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('date wheel', async () => { | |||
| await scrollWheel(1, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('year wheel', async () => { | |||
| await scrollWheel(2, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| }) | |||
| }) | |||
| describe('overshooting min date - mode:', () => { | |||
| before(async () => { | |||
| await setMinimumDate(oneMinuteBeforeJanuary2) | |||
| }) | |||
| describe('datetime', () => { | |||
| before(async () => { | |||
| await setMode("datetime") | |||
| }) | |||
| it('day wheel should not be possible to overshoot since it is not wrapping (no invalid dates exists)', async () => { | |||
| await scrollWheel(0, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| await scrollWheel(0, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| }) | |||
| describe('date', () => { | |||
| before(async () => { | |||
| await setMode("date") | |||
| }) | |||
| it('overshooting month wheel should set all other wheels to minimum possible date', async () => { | |||
| await scrollWheel(0, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('overshooting date wheel should reverse to minimum possible date', async () => { | |||
| await scrollWheel(1, -5) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| }) | |||
| describe('time mode', () => { | |||
| before(async () => { | |||
| await setMode("time") | |||
| await setMinimumDate(oneMinuteBeforeJanuary2) | |||
| }) | |||
| it('overshooting hour wheel should reverse to minimum possible time', async () => { | |||
| await scrollWheel(0, -5) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('overshooting minute wheel should reverse to minimum possible time', async () => { | |||
| await scrollWheel(1, -5) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| it('overshooting am/pm wheel should reverse to minimum possible time', async () => { | |||
| await scrollWheel(2, -1) | |||
| await expectDate("2000-01-01 23:59:00") | |||
| }) | |||
| }) | |||
| }) | |||
| }) | |||
+ 34
- 0
examples/detox/e2e/tests/minuteInterval.spec.js
View File
| @ -0,0 +1,34 @@ | |||
| const { scrollWheel, expectDate, setMinuteInterval } = require("../utils") | |||
| const scrollMinuteWheel = () => scrollWheel(2, 1) | |||
| describe('Minute interval', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| it('1 minute (default)', async () => { | |||
| await setMinuteInterval(1) | |||
| await scrollMinuteWheel() | |||
| await expectDate("2000-01-01 00:01:00") | |||
| }) | |||
| it('5 minutes', async () => { | |||
| await setMinuteInterval(5) | |||
| await scrollMinuteWheel() | |||
| await expectDate("2000-01-01 00:05:00") | |||
| }) | |||
| it('15 minutes', async () => { | |||
| await setMinuteInterval(15) | |||
| await scrollMinuteWheel() | |||
| await expectDate("2000-01-01 00:15:00") | |||
| await scrollMinuteWheel() | |||
| await expectDate("2000-01-01 00:30:00") | |||
| await scrollMinuteWheel() | |||
| await expectDate("2000-01-01 00:45:00") | |||
| }) | |||
| }) | |||
+ 49
- 0
examples/detox/e2e/tests/mode.spec.js
View File
| @ -0,0 +1,49 @@ | |||
| const { setMode } = require("../utils") | |||
| describe('Modes', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| it('datetime', async () => { | |||
| await setMode("datetime") | |||
| await expect(element(by.id('day'))).toBeVisible() | |||
| await expect(element(by.id('minutes'))).toBeVisible() | |||
| await expect(element(by.id('hour'))).toBeVisible() | |||
| await expect(element(by.id('ampm'))).toBeVisible() | |||
| await expect(element(by.id('month'))).toNotExist() | |||
| await expect(element(by.id('date'))).toNotExist() | |||
| await expect(element(by.id('year'))).toNotExist() | |||
| }) | |||
| it('date', async () => { | |||
| await setMode("date") | |||
| await expect(element(by.id('month'))).toBeVisible() | |||
| await expect(element(by.id('date'))).toBeVisible() | |||
| await expect(element(by.id('year'))).toBeVisible() | |||
| await expect(element(by.id('day'))).toNotExist() | |||
| await expect(element(by.id('minutes'))).toNotExist() | |||
| await expect(element(by.id('hour'))).toNotExist() | |||
| await expect(element(by.id('ampm'))).toNotExist() | |||
| }) | |||
| it('time', async () => { | |||
| await setMode("time") | |||
| await expect(element(by.id('minutes'))).toBeVisible() | |||
| await expect(element(by.id('hour'))).toBeVisible() | |||
| await expect(element(by.id('ampm'))).toBeVisible() | |||
| await expect(element(by.id('day'))).toNotExist() | |||
| await expect(element(by.id('month'))).toNotExist() | |||
| await expect(element(by.id('date'))).toNotExist() | |||
| await expect(element(by.id('year'))).toNotExist() | |||
| }) | |||
| }) | |||
+ 45
- 0
examples/detox/e2e/tests/scrollAround.spec.js
View File
| @ -0,0 +1,45 @@ | |||
| const { scrollWheel, expectDate } = require("../utils") | |||
| describe('Scroll around', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| }) | |||
| it.skip('Hour wheel should scroll all way around and switch AM/PM when passing 12', async () => { | |||
| await scroll3HoursAndExpect("2000-01-01 03:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 06:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 09:00:00") | |||
| await scrollWheel(1, 2) | |||
| await expectDate("2000-01-01 11:00:00") | |||
| await scrollWheel(1, 2) | |||
| await expectDate("2000-01-01 13:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 16:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 19:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 22:00:00") | |||
| await scroll3HoursAndExpect("2000-01-01 01:00:00") | |||
| }) | |||
| it('Minute wheel should be possible to scroll all way around', async () => { | |||
| await scrollWheel(2, 55) | |||
| await expectDate("2000-01-01 00:55:00") | |||
| await scrollWheel(2, 10) | |||
| await expectDate("2000-01-01 00:05:00") | |||
| }) | |||
| it('Day wheel should change year when passing new year', async () => { | |||
| await scrollWheel(0, -1) | |||
| await expectDate("1999-12-31 00:00:00") | |||
| await scrollWheel(0, 1) | |||
| await expectDate("2000-01-01 00:00:00") | |||
| }) | |||
| const scroll3HoursAndExpect = async (date) => { | |||
| await scrollWheel(1, 3) | |||
| await expectDate(date) | |||
| } | |||
| }) | |||
+ 95
- 0
examples/detox/e2e/tests/wheelOrder.spec.js
View File
| @ -0,0 +1,95 @@ | |||
| const { scrollWheelWithIndexAndExpectDate, setMode, setLocale, setMaximumDate } = require("../utils") | |||
| describe('Wheel order', () => { | |||
| before(async () => { | |||
| await device.reloadReactNative() | |||
| await element(by.text('Advanced')).tap() | |||
| await setMaximumDate("undefined") | |||
| }) | |||
| describe('datetime', () => { | |||
| before(async () => { | |||
| await setMode("datetime") | |||
| }) | |||
| it('US', async () => { | |||
| await setLocale("en-US") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-02 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-01 01:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-01 00:01:00") | |||
| await scrollWheelWithIndexAndExpectDate(3, "2000-01-01 12:00:00") | |||
| }) | |||
| it('Korean', async () => { | |||
| await setLocale("ko-KR") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-02 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-01 12:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-01 01:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(3, "2000-01-01 00:01:00") | |||
| }) | |||
| }) | |||
| describe('date', () => { | |||
| before(async () => { | |||
| await setMode("date") | |||
| }) | |||
| it('US', async () => { | |||
| await setLocale("en-US") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-02-01 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-02 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2001-01-01 00:00:00") | |||
| }) | |||
| it('UK', async () => { | |||
| await setLocale("en-GB") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-02 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-02-01 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2001-01-01 00:00:00") | |||
| }) | |||
| it('Korean', async () => { | |||
| await setLocale("ko-KR") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2001-01-01 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-02-01 00:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-02 00:00:00") | |||
| }) | |||
| }) | |||
| describe('time', () => { | |||
| before(async () => { | |||
| await setMode("time") | |||
| }) | |||
| it('US', async () => { | |||
| await setLocale("en-US") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-01 01:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-01 00:01:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-01 12:00:00") | |||
| }) | |||
| it('UK', async () => { | |||
| await setLocale("en-GB") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-01 01:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-01 00:01:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-01 12:00:00") | |||
| }) | |||
| it('Korean', async () => { | |||
| await setLocale("ko-KR") | |||
| await scrollWheelWithIndexAndExpectDate(0, "2000-01-01 12:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(1, "2000-01-01 01:00:00") | |||
| await scrollWheelWithIndexAndExpectDate(2, "2000-01-01 00:01:00") | |||
| }) | |||
| }) | |||
| }) | |||
+ 39
- 0
examples/detox/e2e/utils.js
View File
| @ -0,0 +1,39 @@ | |||
| const expectDate = async (date) => { | |||
| await expect(element(by.id('dateOutput'))).toHaveText(date) | |||
| } | |||
| const reset = async () => { | |||
| await element(by.id('props/scroll')).tap() | |||
| await element(by.id('reset')).tap() | |||
| } | |||
| const scrollWheel = async (index, times) => { | |||
| await element(by.id('props/scroll')).tap() | |||
| await element(by.id('wheelIndex')).replaceText(`${index}`) | |||
| await element(by.id('scrollTimes')).replaceText(`${times}`) | |||
| await element(by.id('doScroll')).tap() | |||
| } | |||
| const changeProp = name => async value => { | |||
| await element(by.id('propName')).replaceText(name) | |||
| await element(by.id('propValue')).replaceText(`${value}`) | |||
| await element(by.id('changeProp')).tap() | |||
| } | |||
| const scrollWheelWithIndexAndExpectDate = async (index, expectedDate) => { | |||
| await scrollWheel(index, 1) | |||
| await expectDate(expectedDate) | |||
| await reset() | |||
| } | |||
| exports.setDate = changeProp("date") | |||
| exports.setLocale = changeProp("locale") | |||
| exports.setMinimumDate = changeProp("minimumDate") | |||
| exports.setMaximumDate = changeProp("maximumDate") | |||
| exports.setMinuteInterval = changeProp("minuteInterval") | |||
| exports.setMode = changeProp("mode") | |||
| exports.scrollWheel = scrollWheel | |||
| exports.expectDate = expectDate | |||
| exports.scrollWheelWithIndexAndExpectDate = scrollWheelWithIndexAndExpectDate | |||
| exports.reset = reset | |||
+ 1
- 1
examples/detox/index.android.js
View File
| @ -1 +1 @@ | |||
| require('./app') | |||
| require('./src/App') | |||
+ 1
- 1
examples/detox/index.js
View File
| @ -1 +1 @@ | |||
| require('./app') | |||
| require('./src/App') | |||
+ 29
- 19
examples/detox/ios/example.xcodeproj/project.pbxproj
View File
+ 29
- 0
examples/detox/metro.config.js
View File
| @ -0,0 +1,29 @@ | |||
| /** | |||
| * Metro configuration for React Native | |||
| * https://github.com/facebook/react-native | |||
| * | |||
| * @format | |||
| */ | |||
| const path = require('path') | |||
| const blacklist = require('metro-config/src/defaults/blacklist') | |||
| const reactNativeLib = path.resolve(__dirname, '../..') | |||
| module.exports = { | |||
| watchFolders: [path.resolve(__dirname, 'node_modules'), reactNativeLib], | |||
| resolver: { | |||
| blacklistRE: blacklist([ | |||
| new RegExp(`${reactNativeLib}/node_modules/react-native/.*`), | |||
| ]), | |||
| }, | |||
| transformer: { | |||
| getTransformOptions: async () => ({ | |||
| transform: { | |||
| experimentalImportSupport: false, | |||
| inlineRequires: false, | |||
| }, | |||
| }), | |||
| }, | |||
| maxWorkers: 2, | |||
| } | |||
+ 23
- 31
examples/detox/package.json
View File
+ 84
- 0
examples/detox/src/App.js
View File
| @ -0,0 +1,84 @@ | |||
| import React, { Component } from 'react' | |||
| import { ScrollView, AppRegistry, StyleSheet, Text, TouchableOpacity } from 'react-native' | |||
| import examples from './examples' | |||
| class App extends Component { | |||
| state = { | |||
| picker: undefined, | |||
| backgroundColor: '#ffffff', | |||
| } | |||
| render() { | |||
| return ( | |||
| <ScrollView | |||
| style={[ | |||
| styles.container, | |||
| { backgroundColor: this.state.backgroundColor }, | |||
| ]} | |||
| contentContainerStyle={styles.content} | |||
| > | |||
| <Text style={styles.header}>{!this.state.picker && 'Examples'}</Text> | |||
| {!this.state.picker && this.renderButtons()} | |||
| {!!this.state.picker && this.renderBackButton()} | |||
| {!!this.state.picker && this.renderPicker()} | |||
| </ScrollView> | |||
| ) | |||
| } | |||
| setBackgroundColor = backgroundColor => this.setState({ backgroundColor }) | |||
| renderPicker = () => { | |||
| const Picker = examples[this.state.picker].component | |||
| return ( | |||
| <Picker | |||
| backgroundColor={this.state.backgroundColor} | |||
| setBackground={this.setBackgroundColor} | |||
| /> | |||
| ) | |||
| } | |||
| renderButtons = () => | |||
| Object.keys(examples) | |||
| .filter(key => key !== this.state.picker) | |||
| .map(this.renderButton) | |||
| renderButton = key => ( | |||
| <TouchableOpacity | |||
| key={key} | |||
| onPress={() => this.setState({ picker: key })} | |||
| style={{ margin: 10 }} | |||
| > | |||
| <Text style={styles.text}>{examples[key].buttonTitle}</Text> | |||
| </TouchableOpacity> | |||
| ) | |||
| renderBackButton = key => ( | |||
| <TouchableOpacity | |||
| onPress={() => this.setState({ picker: undefined })} | |||
| style={{ margin: 10, position: 'absolute', top: 0, left: 10 }} | |||
| > | |||
| <Text style={styles.text}>Back</Text> | |||
| </TouchableOpacity> | |||
| ) | |||
| } | |||
| const styles = StyleSheet.create({ | |||
| container: { | |||
| paddingTop: 15, | |||
| borderWidth: 1, | |||
| }, | |||
| content: { | |||
| alignItems: 'center', | |||
| }, | |||
| text: { | |||
| color: 'dodgerblue', | |||
| fontSize: 16, | |||
| }, | |||
| header: { | |||
| color: 'black', | |||
| fontSize: 22, | |||
| margin: 20, | |||
| }, | |||
| }) | |||
| AppRegistry.registerComponent('example', () => App) | |||
+ 49
- 0
examples/detox/src/CustomPropValue.js
View File
| @ -0,0 +1,49 @@ | |||
| import React, { useState } from 'react' | |||
| import { Button, TextInput, Text, View, TouchableOpacity } from 'react-native' | |||
| export default function CustomPropValue(props) { | |||
| const [propName, setPropName] = useState("") | |||
| const [propValue, setPropValue] = useState("") | |||
| const getPropValue = () => { | |||
| if (propValue === "undefined") return undefined | |||
| if (propName === "minuteInterval") return parseInt(propValue) | |||
| if (["date", "maximumDate", "minimumDate"].includes(propName)) return new Date(propValue) | |||
| return propValue | |||
| } | |||
| return ( | |||
| <View style={{ marginBottom: 15, alignItems: "center" }}> | |||
| <View style={{ flexDirection: 'row' }}> | |||
| <Text>Prop name</Text> | |||
| <TextInput | |||
| testID="propName" | |||
| style={input} | |||
| onChangeText={setPropName} | |||
| value={propName} | |||
| /> | |||
| <Text>Prop value</Text> | |||
| <TextInput | |||
| testID="propValue" | |||
| style={input} | |||
| onChangeText={setPropValue} | |||
| value={propValue} | |||
| /> | |||
| </View> | |||
| <TouchableOpacity | |||
| testID={"changeProp"} | |||
| onPress={() => props.changeProp({ propName, propValue: getPropValue() })} | |||
| ><Text style={{ color: "blue" }}>Change</Text></TouchableOpacity> | |||
| </View> | |||
| ) | |||
| } | |||
| const input = { | |||
| height: 30, | |||
| borderColor: 'gray', | |||
| borderWidth: 0.5, | |||
| margin: 2, | |||
| padding: 0, | |||
| alignItems: "center", | |||
| textAlign: "center" | |||
| } | |||
+ 6
- 0
examples/detox/src/PropButton.js
View File
| @ -0,0 +1,6 @@ | |||
| import React, { Component } from 'react' | |||
| import { Button } from 'react-native' | |||
| export const PropButton = ({ title, value, onChange }) => ( | |||
| <Button title={title} onPress={() => onChange(value)} /> | |||
| ) | |||
+ 64
- 0
examples/detox/src/PropSlider.js
View File
| @ -0,0 +1,64 @@ | |||
| import React, { Component } from 'react' | |||
| import { | |||
| Dimensions, | |||
| FlatList, | |||
| StyleSheet, | |||
| Text, | |||
| TouchableOpacity, | |||
| } from 'react-native' | |||
| const { width, height } = Dimensions.get('screen') | |||
| export default class PropSlider extends Component { | |||
| render() { | |||
| return ( | |||
| <FlatList | |||
| horizontal | |||
| style={styles.list} | |||
| data={this.data()} | |||
| renderItem={this.renderItem} | |||
| contentContainerStyle={styles.content} | |||
| keyExtractor={item => item.name} | |||
| /> | |||
| ) | |||
| } | |||
| data = () => | |||
| this.props.data.map( | |||
| prop => ((prop.selected = this.props.selectedProp === prop.name), prop) | |||
| ) | |||
| onPress = index => () => this.props.onSelect(this.props.data[index].name) | |||
| renderItem = ({ item, index }) => ( | |||
| <TouchableOpacity | |||
| testID={`${this.props.testID}/${item.name}`} | |||
| key={item.name} | |||
| style={[styles.item, this.getStyle(item)]} | |||
| onPress={this.onPress(index)} | |||
| > | |||
| <Text key={item.name}>{item.name}</Text> | |||
| </TouchableOpacity> | |||
| ) | |||
| getStyle = item => ({ | |||
| backgroundColor: item.selected ? '#82e584' : '#abcdef', | |||
| width: this.props.width ? this.props.width : 100, | |||
| height: 30, | |||
| }) | |||
| } | |||
| const styles = StyleSheet.create({ | |||
| list: { | |||
| width, | |||
| }, | |||
| content: { | |||
| padding: 20, | |||
| }, | |||
| item: { | |||
| justifyContent: 'center', | |||
| alignItems: 'center', | |||
| marginHorizontal: 5, | |||
| borderRadius: 10, | |||
| }, | |||
| }) | |||
+ 6
- 0
examples/detox/src/exampleKeys.js
View File
| @ -0,0 +1,6 @@ | |||
| export const EXAMPLE_KEYS = { | |||
| MINIMAL: 'MINIMAL', | |||
| ADVANCED: 'ADVANCED', | |||
| TIME_MODE: 'TIME_MODE', | |||
| DATE_MODE: 'DATE_MODE', | |||
| } | |||
+ 25
- 0
examples/detox/src/examples.js
View File
| @ -0,0 +1,25 @@ | |||
| import React, { Component } from 'react' | |||
| import Minimal from './examples/Minimal' | |||
| import Advanced from './examples/Advanced' | |||
| import TimeMode from './examples/TimeMode' | |||
| import { EXAMPLE_KEYS } from './exampleKeys' | |||
| import DateMode from './examples/DateMode' | |||
| export default { | |||
| [EXAMPLE_KEYS.MINIMAL]: { | |||
| buttonTitle: 'Minimal', | |||
| component: Minimal, | |||
| }, | |||
| [EXAMPLE_KEYS.ADVANCED]: { | |||
| buttonTitle: 'Advanced', | |||
| component: Advanced, | |||
| }, | |||
| [EXAMPLE_KEYS.TIME_MODE]: { | |||
| buttonTitle: 'Time mode', | |||
| component: TimeMode, | |||
| }, | |||
| [EXAMPLE_KEYS.DATE_MODE]: { | |||
| buttonTitle: 'Date mode', | |||
| component: DateMode, | |||
| }, | |||
| } | |||
+ 225
- 0
examples/detox/src/examples/Advanced.js
View File
| @ -0,0 +1,225 @@ | |||
| import React, { Component } from 'react' | |||
| import { StyleSheet, Text, View, UIManager, findNodeHandle } from 'react-native' | |||
| import DatePicker from 'react-native-date-picker' | |||
| import DateChange from '../propPickers/DateChange' | |||
| import FadeToColor from '../propPickers/FadeToColor' | |||
| import LocalePicker from '../propPickers/LocalePicker' | |||
| import MinMaxDateChange from '../propPickers/MinMaxDateChange' | |||
| import ModePicker from '../propPickers/ModePicker' | |||
| import TextColor from '../propPickers/TextColor' | |||
| import TimeZoneOffsetInMinutes from '../propPickers/TimeZoneOffsetInMinutes' | |||
| import PropSlider from '../PropSlider' | |||
| import MinuteInterval from '../propPickers/MinuteInterval' | |||
| import Scroll from '../propPickers/Scroll' | |||
| import CustomPropValue from '../CustomPropValue' | |||
| Date.prototype.addHours = function (h) { | |||
| this.setTime(this.getTime() + h * 60 * 60 * 1000) | |||
| return this | |||
| } | |||
| const getInitialDate = () => new Date(2000, 0, 1, 0, 0); | |||
| export const defaultMinDate = getInitialDate().addHours(-24 * 5) | |||
| export const defaultMaxDate = getInitialDate().addHours(24 * 5) | |||
| export const readableUtcDate = date => | |||
| date | |||
| ? date | |||
| .toISOString() | |||
| .substr(0, 19) | |||
| .replace('T', ' ') | |||
| : 'undefined' | |||
| export const readableDate = (d) => { | |||
| if (!d) return undefined | |||
| return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}` | |||
| } | |||
| function pad2(string) { | |||
| return (`0${string}`).slice(-2) | |||
| } | |||
| export default class Advanced extends Component { | |||
| state = { | |||
| date: getInitialDate(), | |||
| searchTerm: '', | |||
| textColor: '#000000', | |||
| selectedProp: 'mode', | |||
| locale: 'en-US', | |||
| mode: 'datetime', | |||
| minimumDate: defaultMinDate, | |||
| maximumDate: defaultMaxDate, | |||
| timeZoneOffsetInMinutes: undefined, | |||
| minuteInterval: 1, | |||
| } | |||
| render() { | |||
| return ( | |||
| <View style={styles.container}> | |||
| <CustomPropValue | |||
| changeProp={({ propName, propValue }) => this.setState({ [propName]: propValue })} | |||
| /> | |||
| <DatePicker | |||
| ref={ref => this.ref = ref} | |||
| date={this.state.date} | |||
| onDateChange={this.setDate} | |||
| locale={this.state.locale} | |||
| minuteInterval={this.state.minuteInterval} | |||
| minimumDate={this.state.minimumDate} | |||
| maximumDate={this.state.maximumDate} | |||
| fadeToColor={this.props.backgroundColor} | |||
| textColor={this.state.textColor} | |||
| mode={this.state.mode} | |||
| timeZoneOffsetInMinutes={this.state.timeZoneOffsetInMinutes} | |||
| /> | |||
| <Text testID={"dateOutput"}>{readableDate(this.state.date)}</Text> | |||
| <Text /> | |||
| <Text>Change prop: </Text> | |||
| <Text /> | |||
| <PropSlider | |||
| testID={"props"} | |||
| selectedProp={this.state.selectedProp} | |||
| onSelect={this.onSelect} | |||
| data={this.propertyList()} | |||
| /> | |||
| <Text>Prop value:</Text> | |||
| {this.selectedPropData().component} | |||
| </View> | |||
| ) | |||
| } | |||
| propertyList = () => [ | |||
| { | |||
| name: 'scroll', | |||
| component: ( | |||
| <Scroll scroll={this.scroll} reset={() => this.setState({ date: getInitialDate() })} /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'mode', | |||
| component: ( | |||
| <ModePicker | |||
| selected={this.state.mode} | |||
| onChange={mode => this.setState({ mode })} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'locale', | |||
| component: ( | |||
| <LocalePicker | |||
| locale={this.state.locale} | |||
| onChange={locale => this.setState({ locale })} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'timeZoneOffset', | |||
| component: ( | |||
| <TimeZoneOffsetInMinutes | |||
| onChange={timeZoneOffsetInMinutes => | |||
| this.setState({ timeZoneOffsetInMinutes }) | |||
| } | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'date', | |||
| component: ( | |||
| <DateChange | |||
| value={this.state.date} | |||
| onChange={date => this.setState({ date })} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'minuteInterval', | |||
| component: ( | |||
| <MinuteInterval | |||
| value={this.state.minuteInterval} | |||
| onChange={minuteInterval => this.setState({ minuteInterval })} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'minDate', | |||
| component: ( | |||
| <MinMaxDateChange | |||
| value={this.state.minimumDate} | |||
| onChange={minDate => this.setState({ minDate })} | |||
| defaultDate={defaultMinDate} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'maxDate', | |||
| component: ( | |||
| <MinMaxDateChange | |||
| value={this.state.maximumDate} | |||
| onChange={maxDate => this.setState({ maxDate })} | |||
| defaultDate={defaultMaxDate} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'fadeToColor', | |||
| component: ( | |||
| <FadeToColor onChange={() => this.props.setBackground(randomColor())} /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'textColor', | |||
| component: ( | |||
| <TextColor | |||
| onChange={() => this.setState({ textColor: randomColor() })} | |||
| /> | |||
| ), | |||
| }, | |||
| ] | |||
| selectedPropData = () => { | |||
| return this.propertyList().find(p => p.name === this.state.selectedProp) | |||
| } | |||
| onSelect = selectedProp => this.setState({ selectedProp }) | |||
| setDate = date => this.setState({ date }) | |||
| scroll = ({ wheelIndex, scrollTimes }) => { | |||
| if (!this.ref) return | |||
| UIManager.dispatchViewManagerCommand( | |||
| findNodeHandle(this.ref), | |||
| UIManager.getViewManagerConfig("DatePickerManager").Commands.scroll, | |||
| [wheelIndex, scrollTimes], | |||
| ); | |||
| } | |||
| } | |||
| const styles = StyleSheet.create({ | |||
| container: { | |||
| alignItems: 'center', | |||
| justifyContent: 'center', | |||
| backgroundColor: 'transparent', | |||
| flex: 1, | |||
| }, | |||
| item: { | |||
| borderWidth: 1, | |||
| marginTop: -1, | |||
| borderColor: 'rgba(0,0,0,1)', | |||
| padding: 3, | |||
| width: 100, | |||
| alignItems: 'center', | |||
| }, | |||
| }) | |||
| const randomColor = () => | |||
| '#' + pad(Math.floor(Math.random() * 16777215).toString(16), 6) | |||
| function pad(n, width) { | |||
| n = n + '' | |||
| return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n | |||
| } | |||
+ 14
- 0
examples/detox/src/examples/DateMode.js
View File
| @ -0,0 +1,14 @@ | |||
| import React, { Component } from 'react' | |||
| import DatePicker from 'react-native-date-picker' | |||
| export default class DateMode extends Component { | |||
| state = { date: new Date() } | |||
| render = () => ( | |||
| <DatePicker | |||
| date={this.state.date} | |||
| onDateChange={date => this.setState({ date })} | |||
| mode={'date'} | |||
| /> | |||
| ) | |||
| } | |||
+ 13
- 0
examples/detox/src/examples/Minimal.js
View File
| @ -0,0 +1,13 @@ | |||
| import React, { Component } from 'react' | |||
| import DatePicker from 'react-native-date-picker' | |||
| export default class MinimalExample extends Component { | |||
| state = { date: new Date() } | |||
| render = () => ( | |||
| <DatePicker | |||
| date={this.state.date} | |||
| onDateChange={date => this.setState({ date })} | |||
| /> | |||
| ) | |||
| } | |||
+ 14
- 0
examples/detox/src/examples/TimeMode.js
View File
| @ -0,0 +1,14 @@ | |||
| import React, { Component } from 'react' | |||
| import DatePicker from 'react-native-date-picker' | |||
| export default class TimeMode extends Component { | |||
| state = { date: new Date() } | |||
| render = () => ( | |||
| <DatePicker | |||
| date={this.state.date} | |||
| onDateChange={date => this.setState({ date })} | |||
| mode={'time'} | |||
| /> | |||
| ) | |||
| } | |||
+ 212
- 0
examples/detox/src/locales.js
View File
| @ -0,0 +1,212 @@ | |||
| export default [ | |||
| 'af-ZA', | |||
| 'am-ET', | |||
| 'ar-AE', | |||
| 'ar-BH', | |||
| 'ar-DZ', | |||
| 'ar-EG', | |||
| 'ar-IQ', | |||
| 'ar-JO', | |||
| 'ar-KW', | |||
| 'ar-LB', | |||
| 'ar-LY', | |||
| 'ar-MA', | |||
| 'arn-CL', | |||
| 'ar-OM', | |||
| 'ar-QA', | |||
| 'ar-SA', | |||
| 'ar-SY', | |||
| 'ar-TN', | |||
| 'ar-YE', | |||
| 'as-IN', | |||
| 'az-Cyrl-AZ', | |||
| 'az-Latn-AZ', | |||
| 'ba-RU', | |||
| 'be-BY', | |||
| 'bg-BG', | |||
| 'bn-BD', | |||
| 'bn-IN', | |||
| 'bo-CN', | |||
| 'br-FR', | |||
| 'bs-Cyrl-BA', | |||
| 'bs-Latn-BA', | |||
| 'ca-ES', | |||
| 'co-FR', | |||
| 'cs-CZ', | |||
| 'cy-GB', | |||
| 'da-DK', | |||
| 'de-AT', | |||
| 'de-CH', | |||
| 'de-DE', | |||
| 'de-LI', | |||
| 'de-LU', | |||
| 'dsb-DE', | |||
| 'dv-MV', | |||
| 'el-GR', | |||
| 'en-029', | |||
| 'en-AU', | |||
| 'en-BZ', | |||
| 'en-CA', | |||
| 'en-GB', | |||
| 'en-IE', | |||
| 'en-IN', | |||
| 'en-JM', | |||
| 'en-MY', | |||
| 'en-NZ', | |||
| 'en-PH', | |||
| 'en-SG', | |||
| 'en-TT', | |||
| 'en-US', | |||
| 'en-ZA', | |||
| 'en-ZW', | |||
| 'es-AR', | |||
| 'es-BO', | |||
| 'es-CL', | |||
| 'es-CO', | |||
| 'es-CR', | |||
| 'es-DO', | |||
| 'es-EC', | |||
| 'es-ES', | |||
| 'es-GT', | |||
| 'es-HN', | |||
| 'es-MX', | |||
| 'es-NI', | |||
| 'es-PA', | |||
| 'es-PE', | |||
| 'es-PR', | |||
| 'es-PY', | |||
| 'es-SV', | |||
| 'es-US', | |||
| 'es-UY', | |||
| 'es-VE', | |||
| 'et-EE', | |||
| 'eu-ES', | |||
| 'fa-IR', | |||
| 'fi-FI', | |||
| 'fil-PH', | |||
| 'fo-FO', | |||
| 'fr-BE', | |||
| 'fr-CA', | |||
| 'fr-CH', | |||
| 'fr-FR', | |||
| 'fr-LU', | |||
| 'fr-MC', | |||
| 'fy-NL', | |||
| 'ga-IE', | |||
| 'gd-GB', | |||
| 'gl-ES', | |||
| 'gsw-FR', | |||
| 'gu-IN', | |||
| 'ha-Latn-NG', | |||
| 'he-IL', | |||
| 'hi-IN', | |||
| 'hr-BA', | |||
| 'hr-HR', | |||
| 'hsb-DE', | |||
| 'hu-HU', | |||
| 'hy-AM', | |||
| 'id-ID', | |||
| 'ig-NG', | |||
| 'ii-CN', | |||
| 'is-IS', | |||
| 'it-CH', | |||
| 'it-IT', | |||
| 'iu-Cans-CA', | |||
| 'iu-Latn-CA', | |||
| 'ja-JP', | |||
| 'ka-GE', | |||
| 'kk-KZ', | |||
| 'kl-GL', | |||
| 'km-KH', | |||
| 'kn-IN', | |||
| 'kok-IN', | |||
| 'ko-KR', | |||
| 'ky-KG', | |||
| 'lb-LU', | |||
| 'lo-LA', | |||
| 'lt-LT', | |||
| 'lv-LV', | |||
| 'mi-NZ', | |||
| 'mk-MK', | |||
| 'ml-IN', | |||
| 'mn-MN', | |||
| 'mn-Mong-CN', | |||
| 'moh-CA', | |||
| 'mr-IN', | |||
| 'ms-BN', | |||
| 'ms-MY', | |||
| 'mt-MT', | |||
| 'nb-NO', | |||
| 'ne-NP', | |||
| 'nl-BE', | |||
| 'nl-NL', | |||
| 'nn-NO', | |||
| 'nso-ZA', | |||
| 'oc-FR', | |||
| 'or-IN', | |||
| 'pa-IN', | |||
| 'pl-PL', | |||
| 'prs-AF', | |||
| 'ps-AF', | |||
| 'pt-BR', | |||
| 'pt-PT', | |||
| 'qut-GT', | |||
| 'quz-BO', | |||
| 'quz-EC', | |||
| 'quz-PE', | |||
| 'rm-CH', | |||
| 'ro-RO', | |||
| 'ru-RU', | |||
| 'rw-RW', | |||
| 'sah-RU', | |||
| 'sa-IN', | |||
| 'se-FI', | |||
| 'se-NO', | |||
| 'se-SE', | |||
| 'si-LK', | |||
| 'sk-SK', | |||
| 'sl-SI', | |||
| 'sma-NO', | |||
| 'sma-SE', | |||
| 'smj-NO', | |||
| 'smj-SE', | |||
| 'smn-FI', | |||
| 'sms-FI', | |||
| 'sq-AL', | |||
| 'sr-Cyrl-BA', | |||
| 'sr-Cyrl-CS', | |||
| 'sr-Cyrl-ME', | |||
| 'sr-Cyrl-RS', | |||
| 'sr-Latn-BA', | |||
| 'sr-Latn-CS', | |||
| 'sr-Latn-ME', | |||
| 'sr-Latn-RS', | |||
| 'sv-FI', | |||
| 'sv-SE', | |||
| 'sw-KE', | |||
| 'syr-SY', | |||
| 'ta-IN', | |||
| 'te-IN', | |||
| 'tg-Cyrl-TJ', | |||
| 'th-TH', | |||
| 'tk-TM', | |||
| 'tn-ZA', | |||
| 'tr-TR', | |||
| 'tt-RU', | |||
| 'tzm-Latn-DZ', | |||
| 'ug-CN', | |||
| 'uk-UA', | |||
| 'ur-PK', | |||
| 'uz-Cyrl-UZ', | |||
| 'uz-Latn-UZ', | |||
| 'vi-VN', | |||
| 'wo-SN', | |||
| 'xh-ZA', | |||
| 'yo-NG', | |||
| 'zh-CN', | |||
| 'zh-HK', | |||
| 'zh-MO', | |||
| 'zh-SG', | |||
| 'zh-TW', | |||
| 'zu-ZA', | |||
| ] | |||
+ 45
- 0
examples/detox/src/propPickers/DateChange.js
View File
| @ -0,0 +1,45 @@ | |||
| import React, { Component } from 'react' | |||
| import { | |||
| Dimensions, | |||
| Button, | |||
| View, | |||
| StyleSheet, | |||
| ScrollView, | |||
| Text, | |||
| TouchableOpacity, | |||
| } from 'react-native' | |||
| export default class extends Component { | |||
| render() { | |||
| return ( | |||
| <React.Fragment> | |||
| <Button | |||
| title="Add 1 min" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 1000) | |||
| ) | |||
| } | |||
| /> | |||
| <Text /> | |||
| <Button | |||
| title="Add 1 hour" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 60 * 1000) | |||
| ) | |||
| } | |||
| /> | |||
| <Text /> | |||
| <Button | |||
| title="Add 24 hours" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 60 * 24 * 1000) | |||
| ) | |||
| } | |||
| /> | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| } | |||
+ 8
- 0
examples/detox/src/propPickers/FadeToColor.js
View File
| @ -0,0 +1,8 @@ | |||
| import React, { Component } from 'react' | |||
| import { Button } from 'react-native' | |||
| export default class extends Component { | |||
| render() { | |||
| return <Button title={'Change color'} onPress={this.props.onChange} /> | |||
| } | |||
| } | |||
+ 39
- 0
examples/detox/src/propPickers/LocalePicker.js
View File
| @ -0,0 +1,39 @@ | |||
| import React, { Component } from 'react' | |||
| import locales from '../locales' | |||
| import PropSlider from '../PropSlider' | |||
| const data = locales.map(key => ({ name: key })) | |||
| const split1 = Math.floor(data.length / 3) | |||
| const split2 = Math.floor((2 * data.length) / 3) | |||
| const data1 = data.slice(0, split1) | |||
| const data2 = data.slice(split1, split2) | |||
| const data3 = data.slice(split2) | |||
| export default class LocalPicker extends Component { | |||
| render() { | |||
| return ( | |||
| <React.Fragment> | |||
| <PropSlider | |||
| selectedProp={this.props.locale} | |||
| onSelect={this.props.onChange} | |||
| data={data1} | |||
| width={50} | |||
| /> | |||
| <PropSlider | |||
| selectedProp={this.props.locale} | |||
| onSelect={this.props.onChange} | |||
| data={data2} | |||
| width={50} | |||
| /> | |||
| <PropSlider | |||
| selectedProp={this.props.locale} | |||
| onSelect={this.props.onChange} | |||
| data={data3} | |||
| width={50} | |||
| /> | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| } | |||
+ 55
- 0
examples/detox/src/propPickers/MinMaxDateChange.js
View File
| @ -0,0 +1,55 @@ | |||
| import React, { Component } from 'react' | |||
| import { Text, Button, View, StyleSheet } from 'react-native' | |||
| import { readableDate } from '../examples/Advanced' | |||
| import { PropButton } from '../PropButton' | |||
| export default class extends Component { | |||
| render() { | |||
| const { onChange, defaultDate } = this.props | |||
| return ( | |||
| <React.Fragment> | |||
| <Text>{readableDate(this.props.value)}</Text> | |||
| <View style={styles.row}> | |||
| {this.renderButton('-1 hour', -1)} | |||
| {this.renderButton('+1 hour', 1)} | |||
| </View> | |||
| <View style={styles.row}> | |||
| {this.renderButton('-1 day', -24)} | |||
| {this.renderButton('+1 day', 24)} | |||
| </View> | |||
| <View style={styles.row}> | |||
| <PropButton | |||
| title="Set undefined" | |||
| value={undefined} | |||
| onChange={onChange} | |||
| /> | |||
| <PropButton | |||
| title="Set default" | |||
| value={defaultDate} | |||
| onChange={onChange} | |||
| /> | |||
| </View> | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| renderButton = (title, hourDiff) => ( | |||
| <PropButton | |||
| title={title} | |||
| onChange={this.props.onChange} | |||
| value={ | |||
| this.props.value && | |||
| new Date(this.props.value.getTime()).addHours(hourDiff) | |||
| } | |||
| /> | |||
| ) | |||
| } | |||
| const styles = StyleSheet.create({ | |||
| row: { | |||
| flexDirection: 'row', | |||
| width: 300, | |||
| justifyContent: 'space-between', | |||
| margin: 5, | |||
| }, | |||
| }) | |||
+ 18
- 0
examples/detox/src/propPickers/MinuteInterval.js
View File
| @ -0,0 +1,18 @@ | |||
| import React, { Component } from 'react' | |||
| import { Button } from 'react-native' | |||
| export default class extends Component { | |||
| render() { | |||
| return ( | |||
| <React.Fragment> | |||
| {[1, 5, 10, 15].map(minutes => ( | |||
| <Button | |||
| key={minutes} | |||
| title={minutes + ' min'} | |||
| onPress={() => this.props.onChange(minutes)} | |||
| /> | |||
| ))} | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| } | |||
+ 18
- 0
examples/detox/src/propPickers/ModePicker.js
View File
| @ -0,0 +1,18 @@ | |||
| import React, { Component } from 'react' | |||
| import PropSlider from '../PropSlider' | |||
| const data = [{ name: 'datetime' }, { name: 'date' }, { name: 'time' }] | |||
| export default class extends Component { | |||
| render() { | |||
| return ( | |||
| <PropSlider | |||
| testID={"mode"} | |||
| selectedProp={this.props.selected} | |||
| onSelect={this.props.onChange} | |||
| data={data} | |||
| width={100} | |||
| /> | |||
| ) | |||
| } | |||
| } | |||
+ 40
- 0
examples/detox/src/propPickers/Scroll.js
View File
| @ -0,0 +1,40 @@ | |||
| import React, { useState } from 'react' | |||
| import { Button, TextInput, Text, View } from 'react-native' | |||
| export default function Scroll(props) { | |||
| const [wheelIndex, setWheelIndex] = useState("0") | |||
| const [scrollTimes, setScrollTimes] = useState("1") | |||
| return ( | |||
| <View> | |||
| <View style={{ flexDirection: "row" }}> | |||
| <Text>Wheel index</Text> | |||
| <TextInput | |||
| testID="wheelIndex" | |||
| style={style} | |||
| onChangeText={setWheelIndex} | |||
| value={wheelIndex} | |||
| /> | |||
| <Text>Scroll times</Text> | |||
| <TextInput | |||
| testID="scrollTimes" | |||
| style={style} | |||
| onChangeText={setScrollTimes} | |||
| value={scrollTimes} | |||
| /> | |||
| </View> | |||
| <Button | |||
| testID={"doScroll"} | |||
| title={`Scroll`} | |||
| onPress={() => props.scroll({ wheelIndex: Number.parseInt(wheelIndex), scrollTimes: Number.parseInt(scrollTimes) })} | |||
| /> | |||
| <Button | |||
| testID={"reset"} | |||
| title={`Reset`} | |||
| onPress={props.reset} | |||
| /> | |||
| </View> | |||
| ) | |||
| } | |||
| const style = { height: 40, borderColor: 'gray', borderWidth: 1 } | |||
+ 8
- 0
examples/detox/src/propPickers/TextColor.js
View File
| @ -0,0 +1,8 @@ | |||
| import React, { Component } from 'react' | |||
| import { Button } from 'react-native' | |||
| export default class extends Component { | |||
| render() { | |||
| return <Button title={'Change color'} onPress={this.props.onChange} /> | |||
| } | |||
| } | |||
+ 20
- 0
examples/detox/src/propPickers/TimeZoneOffsetInMinutes.js
View File
| @ -0,0 +1,20 @@ | |||
| import React, { Component } from 'react' | |||
| import { PropButton } from '../PropButton' | |||
| export default class extends Component { | |||
| render() { | |||
| const { onChange } = this.props | |||
| return ( | |||
| <React.Fragment> | |||
| <PropButton | |||
| title="Set undefined" | |||
| value={undefined} | |||
| onChange={onChange} | |||
| /> | |||
| <PropButton title="Set 0" value={0} onChange={onChange} /> | |||
| <PropButton title="Set 180" value={180} onChange={onChange} /> | |||
| <PropButton title="Set -180" value={-180} onChange={onChange} /> | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| } | |||