Henning Hall
1 year ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
53 changed files with 1849 additions and 311 deletions
Split View
Diff Options
-
+52 -0.github/workflows/build-android.yml
-
+77 -0.github/workflows/build-ios.yml
-
+0 -39.github/workflows/e2e-tests.yml
-
+38 -0.github/workflows/pr.yml
-
+0 -0.github/workflows/publish.yml
-
+42 -0.github/workflows/test-android-e2e.yml
-
+26 -0.github/workflows/test-android-unit.yml
-
+54 -0.github/workflows/test-ios-e2e.yml
-
+24 -0.github/workflows/test-js.yml
-
+0 -53.github/workflows/unit-tests.yml
-
+2 -0.gitignore
-
+3 -1.maestro/display-text.yml
-
+23 -0.maestro/ios.yml
-
+72 -0.maestro/timezone-offset-in-minutes-daylight-saving.yml
-
+3 -71.maestro/timezone-offset-in-minutes.yml
-
+1 -1.maestro/utils/change-prop.yml
-
+1 -1.maestro/utils/launch.yml
-
+1 -1.maestro/utils/reset.yml
-
+5 -0.maestro/utils/swipe-wheel-1-modal.yml
-
+1 -1.maestro/utils/swipe-wheel-1.yml
-
+1 -1.maestro/utils/swipe-wheel-2.yml
-
+1 -1.maestro/utils/swipe-wheel-3.yml
-
+1 -1.maestro/utils/swipe-wheel-4.yml
-
+1 -0.xcode-version
-
+1 -0examples/Rn071/.ruby-version
-
+0 -131examples/Rn071/App.tsx
-
+1 -1examples/Rn071/index.js
-
+363 -5examples/Rn071/ios/Podfile.lock
-
+2 -2examples/Rn071/ios/Rn071.xcodeproj/project.pbxproj
-
+89 -0examples/Rn071/src/App.js
-
+59 -0examples/Rn071/src/CustomPropValue.js
-
+6 -0examples/Rn071/src/PropButton.js
-
+64 -0examples/Rn071/src/PropSlider.js
-
+6 -0examples/Rn071/src/exampleKeys.js
-
+29 -0examples/Rn071/src/examples.js
-
+230 -0examples/Rn071/src/examples/Advanced.js
-
+14 -0examples/Rn071/src/examples/DateMode.js
-
+13 -0examples/Rn071/src/examples/Minimal.js
-
+31 -0examples/Rn071/src/examples/Modal.js
-
+14 -0examples/Rn071/src/examples/TimeMode.js
-
+212 -0examples/Rn071/src/locales.js
-
+43 -0examples/Rn071/src/propPickers/DateChange.js
-
+11 -0examples/Rn071/src/propPickers/FadeToColor.js
-
+39 -0examples/Rn071/src/propPickers/LocalePicker.js
-
+55 -0examples/Rn071/src/propPickers/MinMaxDateChange.js
-
+18 -0examples/Rn071/src/propPickers/MinuteInterval.js
-
+18 -0examples/Rn071/src/propPickers/ModePicker.js
-
+40 -0examples/Rn071/src/propPickers/Scroll.js
-
+8 -0examples/Rn071/src/propPickers/TextColor.js
-
+20 -0examples/Rn071/src/propPickers/TimeZoneOffsetInMinutes.js
-
+18 -0examples/Rn071/src/propPickers/Variant.js
-
+13 -0examples/Rn071/src/utils.js
-
+3 -1package.json
+ 52
- 0
.github/workflows/build-android.yml
View File
| @ -0,0 +1,52 @@ | |||
| name: Build | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| env: | |||
| APP_PATH: examples/Rn071/android/app/build/outputs/apk/release/app-release.apk | |||
| PROJECT_NAME: Rn071 | |||
| EXAMPLE_SRC: ./examples/Rn071/src/** | |||
| jobs: | |||
| build-android: | |||
| name: Android | |||
| runs-on: ubuntu-latest | |||
| outputs: | |||
| app: app/build/outputs/apk/release | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/cache@v3 | |||
| id: cache-android | |||
| with: | |||
| path: ${{ env.APP_PATH }} | |||
| key: ${{ runner.os }}-${{ hashFiles('src/**', 'android/**', env.EXAMPLE_SRC, env.APP_PATH ) }} | |||
| - uses: actions/setup-node@v3 | |||
| if: steps.cache-android.outputs.cache-hit != 'true' | |||
| with: | |||
| node-version: 14.18.1 | |||
| cache: 'yarn' | |||
| - name: Install npm dependencies (example project) | |||
| if: steps.cache-android.outputs.cache-hit != 'true' | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/ | |||
| run: yarn install --frozen-lockfile | |||
| - name: Install npm dependencies (root) | |||
| if: steps.cache-android.outputs.cache-hit != 'true' | |||
| working-directory: ./ | |||
| run: yarn install --frozen-lockfile | |||
| - uses: actions/setup-java@v3 | |||
| if: steps.cache-android.outputs.cache-hit != 'true' | |||
| with: | |||
| java-version: 11 | |||
| distribution: 'temurin' | |||
| - name: build | |||
| if: steps.cache-android.outputs.cache-hit != 'true' | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/android | |||
| run: ./gradlew assembleRelease | |||
+ 77
- 0
.github/workflows/build-ios.yml
View File
| @ -0,0 +1,77 @@ | |||
| name: Build | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| env: | |||
| APP_PATH: ./examples/Rn071/ios/DerivedData/Build/Products/Release-iphonesimulator/Rn071.app | |||
| PROJECT_NAME: Rn071 | |||
| EXAMPLE_SRC: ./examples/Rn071/src/** | |||
| jobs: | |||
| build-ios: | |||
| name: iOS | |||
| runs-on: macos-13 | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/cache@v3 | |||
| id: cache | |||
| with: | |||
| path: | | |||
| ${{ env.APP_PATH }} | |||
| ${{ env.APP_PATH }}.dSYM | |||
| key: ${{ runner.os }}-${{ hashFiles('src/**', 'ios/**', env.EXAMPLE_SRC, env.APP_PATH ) }} | |||
| - uses: actions/setup-node@v3 | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| with: | |||
| node-version: 14.18.1 | |||
| cache: 'yarn' | |||
| - name: Install npm dependencies (example project) | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/ | |||
| run: yarn install --frozen-lockfile | |||
| - name: Install npm dependencies (root) | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| working-directory: ./ | |||
| run: yarn install --frozen-lockfile | |||
| - name: Setup Ruby | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| uses: ruby/setup-ruby@v1 | |||
| with: | |||
| bundler-cache: true | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/ | |||
| - name: setup-cocoapods | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| uses: maxim-lobanov/setup-cocoapods@v1 | |||
| with: | |||
| version: 1.11.3 | |||
| - name: Install CocoaPods | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/ | |||
| run: | | |||
| yarn pods | |||
| - name: Select Xcode | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| run: sudo xcode-select -s /Applications/Xcode_$(<.xcode-version).app/Contents/Developer | |||
| - name: Build | |||
| if: steps.cache.outputs.cache-hit != 'true' | |||
| working-directory: ./examples/${{ env.PROJECT_NAME }}/ios/ | |||
| run: | | |||
| set -o pipefail && xcodebuild \ | |||
| -workspace "${{ env.PROJECT_NAME }}.xcworkspace" \ | |||
| -scheme "${{ env.PROJECT_NAME }}" \ | |||
| -destination "platform=iOS Simulator,name=iPhone 14,OS=16.4" \ | |||
| -derivedDataPath "DerivedData" \ | |||
| -configuration "Release" \ | |||
| | tee xcodebuild.log | |||
+ 0
- 39
.github/workflows/e2e-tests.yml
View File
| @ -1,39 +0,0 @@ | |||
| name: E2E tests (maestro) | |||
| on: | |||
| workflow_dispatch: | |||
| jobs: | |||
| e2e-maestro: | |||
| runs-on: ubuntu-latest | |||
| outputs: | |||
| app: app/build/outputs/apk/release | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/setup-node@v3 | |||
| with: | |||
| node-version: 14.18.1 | |||
| cache: 'yarn' | |||
| - name: Install npm dependencies (example project) | |||
| working-directory: ./examples/Rn069/ | |||
| run: yarn install --frozen-lockfile | |||
| - name: Install npm dependencies (root) | |||
| working-directory: ./ | |||
| run: yarn install --frozen-lockfile | |||
| - uses: actions/setup-java@v3 | |||
| with: | |||
| java-version: 11 | |||
| distribution: 'temurin' | |||
| - name: build | |||
| working-directory: ./examples/Rn069/android | |||
| run: ./gradlew assembleRelease | |||
| - uses: mobile-dev-inc/action-maestro-cloud@v1.1.1 | |||
| with: | |||
| api-key: ${{ secrets.MAESTRO_CLOUD_API_KEY }} | |||
| app-file: examples/Rn069/android/app/build/outputs/apk/release/app-release.apk | |||
+ 38
- 0
.github/workflows/pr.yml
View File
| @ -0,0 +1,38 @@ | |||
| name: PR | |||
| on: | |||
| workflow_dispatch: | |||
| pull_request: | |||
| jobs: | |||
| build-ios: | |||
| name: Build | |||
| uses: ./.github/workflows/build-ios.yml | |||
| secrets: inherit | |||
| build-android: | |||
| name: Build | |||
| uses: ./.github/workflows/build-android.yml | |||
| secrets: inherit | |||
| test-ios-e2e: | |||
| name: Test | |||
| uses: ./.github/workflows/test-ios-e2e.yml | |||
| secrets: inherit | |||
| needs: [build-ios] | |||
| test-android-e2e: | |||
| name: Test | |||
| uses: ./.github/workflows/test-android-e2e.yml | |||
| secrets: inherit | |||
| needs: [build-android] | |||
| test-js: | |||
| name: Test | |||
| uses: ./.github/workflows/test-js.yml | |||
| secrets: inherit | |||
| test-android-unit: | |||
| name: Test | |||
| uses: ./.github/workflows/test-android-unit.yml | |||
| secrets: inherit | |||
.github/workflows/main.yml → .github/workflows/publish.yml
View File
+ 42
- 0
.github/workflows/test-android-e2e.yml
View File
| @ -0,0 +1,42 @@ | |||
| name: Test Android e2e | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| env: | |||
| APP_PATH: examples/Rn071/android/app/build/outputs/apk/release/app-release.apk | |||
| EXAMPLE_SRC: ./examples/Rn071/src/** | |||
| jobs: | |||
| test-android-e2e: | |||
| name: Android - e2e | |||
| runs-on: ubuntu-latest | |||
| environment: e2e Android | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/cache@v3 | |||
| id: cache-android | |||
| with: | |||
| path: ${{ env.APP_PATH }} | |||
| key: ${{ runner.os }}-${{ hashFiles('src/**', 'android/**', env.EXAMPLE_SRC, env.APP_PATH ) }} | |||
| - uses: mobile-dev-inc/action-maestro-cloud@v1.8.0 | |||
| id: upload | |||
| with: | |||
| api-key: ${{ secrets.MAESTRO_CLOUD_API_KEY }} | |||
| app-file: ${{ env.APP_PATH }} | |||
| include-tags: android | |||
| # Step can be removed when this is fixed: | |||
| # https://github.com/mobile-dev-inc/action-maestro-cloud/issues/28 | |||
| - name: Check for maestro errors | |||
| run: | | |||
| if [[ "$MAESTRO_CLOUD_FLOW_RESULTS" == *"ERROR"* || "$MAESTRO_CLOUD_FLOW_RESULTS" == *"CANCELED"* ]]; then | |||
| echo "One or more tests failed or were canceled." | |||
| exit 1 | |||
| fi | |||
| env: | |||
| MAESTRO_CLOUD_FLOW_RESULTS: ${{ steps.upload.outputs.MAESTRO_CLOUD_FLOW_RESULTS }} | |||
+ 26
- 0
.github/workflows/test-android-unit.yml
View File
| @ -0,0 +1,26 @@ | |||
| name: Test Android Unit | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| jobs: | |||
| test-android-unit: | |||
| name: Android - Unit | |||
| runs-on: ubuntu-latest | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/setup-java@v3 | |||
| with: | |||
| java-version: 11 | |||
| distribution: 'temurin' | |||
| - name: Install npm dependencies | |||
| working-directory: ./examples/Rn072 | |||
| run: yarn install --frozen-lockfile | |||
| - name: Run unit tests | |||
| working-directory: ./examples/Rn072/android | |||
| run: ./gradlew testDebugUnitTest | |||
+ 54
- 0
.github/workflows/test-ios-e2e.yml
View File
| @ -0,0 +1,54 @@ | |||
| name: E2E tests (ios) | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| env: | |||
| APP_PATH: ./examples/Rn071/ios/DerivedData/Build/Products/Release-iphonesimulator/Rn071.app | |||
| EXAMPLE_SRC: ./examples/Rn071/src/** | |||
| jobs: | |||
| test-ios-e2e: | |||
| name: iOS - e2e | |||
| runs-on: macos-13 | |||
| environment: e2e iOS | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/cache@v3 | |||
| id: cache | |||
| with: | |||
| path: | | |||
| ${{ env.APP_PATH }} | |||
| ${{ env.APP_PATH }}.dSYM | |||
| key: ${{ runner.os }}-${{ hashFiles('src/**', 'ios/**', env.EXAMPLE_SRC, env.APP_PATH ) }} | |||
| - uses: mobile-dev-inc/action-maestro-cloud@v1.8.0 | |||
| id: upload | |||
| with: | |||
| api-key: ${{ secrets.MAESTRO_CLOUD_API_KEY }} | |||
| app-file: ${{ env.APP_PATH }} | |||
| mapping-file: ${{ env.APP_PATH }}.dSYM | |||
| include-tags: ios | |||
| - name: Upload logs when workflow failed | |||
| uses: actions/upload-artifact@v3 | |||
| if: failure() | |||
| with: | |||
| name: BuildLogs | |||
| path: | | |||
| xcodebuild.log | |||
| DerivedData/Logs/Test/*.xcresult | |||
| # Step can be removed when this is fixed: | |||
| # https://github.com/mobile-dev-inc/action-maestro-cloud/issues/28 | |||
| - name: Check for maestro errors | |||
| run: | | |||
| if [[ "$MAESTRO_CLOUD_FLOW_RESULTS" == *"ERROR"* || "$MAESTRO_CLOUD_FLOW_RESULTS" == *"CANCELED"* ]]; then | |||
| echo "One or more tests failed or were canceled." | |||
| exit 1 | |||
| fi | |||
| env: | |||
| MAESTRO_CLOUD_FLOW_RESULTS: ${{ steps.upload.outputs.MAESTRO_CLOUD_FLOW_RESULTS }} | |||
+ 24
- 0
.github/workflows/test-js.yml
View File
| @ -0,0 +1,24 @@ | |||
| name: Test js | |||
| on: | |||
| workflow_call: | |||
| workflow_dispatch: | |||
| jobs: | |||
| test-js: | |||
| name: Javascript | |||
| runs-on: macos-latest | |||
| timeout-minutes: 5 | |||
| steps: | |||
| - name: Checkout | |||
| uses: actions/checkout@v3 | |||
| - name: Node | |||
| uses: actions/setup-node@v3 | |||
| - name: Install npm dependencies | |||
| run: yarn install --frozen-lockfile | |||
| - name: Run unit tests | |||
| run: yarn test | |||
+ 0
- 53
.github/workflows/unit-tests.yml
View File
| @ -1,53 +0,0 @@ | |||
| name: 'Build & Test' | |||
| on: | |||
| push: | |||
| branches: | |||
| - master | |||
| pull_request: | |||
| branches: | |||
| - master | |||
| jobs: | |||
| javascript_unit_tests: | |||
| name: Unit tests - javascript | |||
| runs-on: macos-latest | |||
| timeout-minutes: 5 | |||
| steps: | |||
| - name: Checkout | |||
| uses: actions/checkout@v1 | |||
| with: | |||
| fetch-depth: 1 | |||
| - name: Node | |||
| uses: actions/setup-node@v3 | |||
| - name: Install npm dependencies | |||
| run: | | |||
| yarn install --frozen-lockfile | |||
| - name: Run unit tests | |||
| run: | | |||
| yarn test | |||
| java_unit_tests: | |||
| name: Unit tests - java | |||
| runs-on: ubuntu-latest | |||
| steps: | |||
| - uses: actions/checkout@v3 | |||
| - uses: actions/setup-java@v3 | |||
| with: | |||
| java-version: 11 | |||
| distribution: 'temurin' | |||
| - name: Install npm dependencies | |||
| working-directory: ./examples/Rn072 | |||
| run: | | |||
| yarn install --frozen-lockfile | |||
| - name: Run unit tests | |||
| working-directory: ./examples/Rn072/android | |||
| run: ./gradlew testDebugUnitTest | |||
+ 2
- 0
.gitignore
View File
+ 3
- 1
.maestro/display-text.yml
View File
+ 23
- 0
.maestro/ios.yml
View File
| @ -0,0 +1,23 @@ | |||
| appId: com.rn071 | |||
| tags: | |||
| - ios | |||
| --- | |||
| # test: can use inline picker | |||
| - runFlow: utils/launch.yml | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: locale | |||
| VALUE: vi-VN | |||
| - runFlow: utils/swipe-wheel-1.yml | |||
| - assertVisible: | |||
| text: '2000-01-01 01:00:00' | |||
| # test: can use modal | |||
| - launchApp | |||
| - tapOn: Modal | |||
| - tapOn: Select date | |||
| - runFlow: utils/swipe-wheel-1-modal.yml | |||
| - tapOn: Confirm | |||
| - assertVisible: | |||
| text: '2000-01-02' | |||
+ 72
- 0
.maestro/timezone-offset-in-minutes-daylight-saving.yml
View File
| @ -0,0 +1,72 @@ | |||
| appId: com.rn071 | |||
| tags: | |||
| - android | |||
| --- | |||
| ########## describe: DAYLIGHT SAVING | |||
| - runFlow: | |||
| file: utils/set-timezone.yml | |||
| env: | |||
| REGION: Sweden | |||
| GMT: GMT+02:00 | |||
| STATE: '' | |||
| - runFlow: utils/launch.yml | |||
| # test: timezone offset undefined | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: maximumDate | |||
| VALUE: '2000-07-01T00:00:00' | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: date | |||
| VALUE: '2000-06-01T00:00:00+02:00' | |||
| - runFlow: utils/swipe-wheel-3.yml | |||
| - assertVisible: '2000-06-01 00:01:00' | |||
| - assertVisible: 'Thu Jun 11201 AM ' | |||
| - runFlow: utils/reset.yml | |||
| # # test: timezone offset 0 | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: maximumDate | |||
| VALUE: '2000-07-01T00:00:00' | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: date | |||
| VALUE: '2000-06-01T00:00:00+02:00' | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: timeZoneOffsetInMinutes | |||
| VALUE: 0 | |||
| - runFlow: utils/swipe-wheel-3.yml | |||
| - assertVisible: '2000-06-01 00:01:00' | |||
| - assertVisible: 'Wed May 311001 PM ' | |||
| - runFlow: utils/reset.yml | |||
| # test: timezone offset 180 | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: maximumDate | |||
| VALUE: '2000-07-01T00:00:00' | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: date | |||
| VALUE: '2000-06-01T00:00:00+02:00' | |||
| - runFlow: | |||
| file: utils/change-prop.yml | |||
| env: | |||
| PROP: timeZoneOffsetInMinutes | |||
| VALUE: 180 | |||
| - runFlow: utils/swipe-wheel-3.yml | |||
| - assertVisible: '2000-06-01 00:01:00' | |||
| - assertVisible: 'Thu Jun 1101 AM ' | |||
+ 3
- 71
.maestro/timezone-offset-in-minutes.yml
View File
+ 1
- 1
.maestro/utils/change-prop.yml
View File
+ 1
- 1
.maestro/utils/launch.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - launchApp: | |||
| stopApp: true | |||
+ 1
- 1
.maestro/utils/reset.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - tapOn: 'Go back' | |||
| - tapOn: Advanced | |||
+ 5
- 0
.maestro/utils/swipe-wheel-1-modal.yml
View File
| @ -0,0 +1,5 @@ | |||
| appId: com.rn071 | |||
| --- | |||
| - swipe: | |||
| start: 25%, 80% | |||
| end: 25%, 75% | |||
+ 1
- 1
.maestro/utils/swipe-wheel-1.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - swipe: | |||
| start: 25%, 40% | |||
+ 1
- 1
.maestro/utils/swipe-wheel-2.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - swipe: | |||
| start: 50%, 40% | |||
+ 1
- 1
.maestro/utils/swipe-wheel-3.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - swipe: | |||
| start: 63%, 40% | |||
+ 1
- 1
.maestro/utils/swipe-wheel-4.yml
View File
| @ -1,4 +1,4 @@ | |||
| appId: com.rn069 | |||
| appId: com.rn071 | |||
| --- | |||
| - swipe: | |||
| start: 75%, 40% | |||
+ 1
- 0
.xcode-version
View File
| @ -0,0 +1 @@ | |||
| 14.3.1 | |||
+ 1
- 0
examples/Rn071/.ruby-version
View File
| @ -0,0 +1 @@ | |||
| 2.7.5 | |||
+ 0
- 131
examples/Rn071/App.tsx
View File
| @ -1,131 +0,0 @@ | |||
| /** | |||
| * Sample React Native App | |||
| * https://github.com/facebook/react-native | |||
| * | |||
| * @format | |||
| */ | |||
| import type {PropsWithChildren} from 'react'; | |||
| import React, {useState} from 'react'; | |||
| import { | |||
| Button, | |||
| SafeAreaView, | |||
| ScrollView, | |||
| StatusBar, | |||
| StyleSheet, | |||
| Text, | |||
| useColorScheme, | |||
| View, | |||
| } from 'react-native'; | |||
| import DatePicker from 'react-native-date-picker'; | |||
| import { | |||
| Colors, | |||
| Header, | |||
| LearnMoreLinks, | |||
| } from 'react-native/Libraries/NewAppScreen'; | |||
| type SectionProps = PropsWithChildren<{ | |||
| title: string; | |||
| }>; | |||
| function Section({children, title}: SectionProps): JSX.Element { | |||
| const isDarkMode = useColorScheme() === 'dark'; | |||
| const [date, setDate] = useState(new Date()); | |||
| const [open, setOpen] = useState(false); | |||
| return ( | |||
| <View style={styles.sectionContainer} key={title}> | |||
| <Button title="open" onPress={() => setOpen(true)} /> | |||
| <DatePicker | |||
| date={new Date('2021-01-01T2:00:00Z')} | |||
| modal | |||
| mode="date" | |||
| onConfirm={date => { | |||
| setDate(date); | |||
| setOpen(false); | |||
| }} | |||
| onCancel={() => { | |||
| setOpen(false); | |||
| }} | |||
| open={open} | |||
| /> | |||
| <DatePicker | |||
| date={date} | |||
| maximumDate={new Date('2000-02-01')} | |||
| minimumDate={new Date('2000-01-01')} | |||
| onDateChange={setDate} | |||
| androidVariant="nativeAndroid" | |||
| /> | |||
| <Text | |||
| style={[ | |||
| styles.sectionTitle, | |||
| { | |||
| color: isDarkMode ? Colors.white : Colors.black, | |||
| }, | |||
| ]}> | |||
| {date.toISOString()} | |||
| </Text> | |||
| <Text | |||
| style={[ | |||
| styles.sectionDescription, | |||
| { | |||
| color: isDarkMode ? Colors.light : Colors.dark, | |||
| }, | |||
| ]}> | |||
| {children} | |||
| </Text> | |||
| </View> | |||
| ); | |||
| } | |||
| function App(): JSX.Element { | |||
| const isDarkMode = useColorScheme() === 'dark'; | |||
| const backgroundStyle = { | |||
| backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, | |||
| }; | |||
| return ( | |||
| <SafeAreaView style={backgroundStyle}> | |||
| <StatusBar | |||
| barStyle={isDarkMode ? 'light-content' : 'dark-content'} | |||
| backgroundColor={backgroundStyle.backgroundColor} | |||
| /> | |||
| <ScrollView | |||
| contentInsetAdjustmentBehavior="automatic" | |||
| style={backgroundStyle}> | |||
| <Header /> | |||
| <View | |||
| style={{ | |||
| backgroundColor: isDarkMode ? Colors.black : Colors.white, | |||
| }}> | |||
| <Section title="Learn More"> | |||
| Read the docs to discover what to do next: | |||
| </Section> | |||
| <LearnMoreLinks /> | |||
| </View> | |||
| </ScrollView> | |||
| </SafeAreaView> | |||
| ); | |||
| } | |||
| const styles = StyleSheet.create({ | |||
| sectionContainer: { | |||
| marginTop: 32, | |||
| paddingHorizontal: 24, | |||
| }, | |||
| sectionTitle: { | |||
| fontSize: 24, | |||
| fontWeight: '600', | |||
| }, | |||
| sectionDescription: { | |||
| marginTop: 8, | |||
| fontSize: 18, | |||
| fontWeight: '400', | |||
| }, | |||
| highlight: { | |||
| fontWeight: '700', | |||
| }, | |||
| }); | |||
| export default App; | |||
+ 1
- 1
examples/Rn071/index.js
View File
+ 363
- 5
examples/Rn071/ios/Podfile.lock
View File
+ 2
- 2
examples/Rn071/ios/Rn071.xcodeproj/project.pbxproj
View File
+ 89
- 0
examples/Rn071/src/App.js
View File
| @ -0,0 +1,89 @@ | |||
| import React, {Component} from 'react'; | |||
| import { | |||
| ScrollView, | |||
| StyleSheet, | |||
| Text, | |||
| TouchableOpacity, | |||
| SafeAreaView, | |||
| } from 'react-native'; | |||
| import examples from './examples'; | |||
| export default class App extends Component { | |||
| state = { | |||
| picker: undefined, | |||
| }; | |||
| render() { | |||
| return ( | |||
| <ScrollView | |||
| style={[ | |||
| styles.container, | |||
| {backgroundColor: this.state.backgroundColor || 'white'}, | |||
| ]} | |||
| contentContainerStyle={styles.content} | |||
| > | |||
| <SafeAreaView> | |||
| <Text style={styles.header}>{!this.state.picker && 'Examples'}</Text> | |||
| {!this.state.picker && this.renderButtons()} | |||
| {!!this.state.picker && this.renderBackButton()} | |||
| {!!this.state.picker && this.renderPicker()} | |||
| </SafeAreaView> | |||
| </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: 30, left: 0}} | |||
| > | |||
| <Text style={styles.text}>Go 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, | |||
| }, | |||
| }); | |||
+ 59
- 0
examples/Rn071/src/CustomPropValue.js
View File
| @ -0,0 +1,59 @@ | |||
| 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 (propName === "timeZoneOffsetInMinutes") 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 style={{width: 20}}/> | |||
| <TouchableOpacity | |||
| onPress={() => { | |||
| setPropName(''); | |||
| setPropValue(''); | |||
| }} | |||
| > | |||
| <Text style={{color: 'blue'}}>Clear</Text> | |||
| </TouchableOpacity> | |||
| </View> | |||
| ) | |||
| } | |||
| const input = { | |||
| height: 30, | |||
| borderColor: 'gray', | |||
| borderWidth: 0.5, | |||
| margin: 2, | |||
| padding: 0, | |||
| alignItems: "center", | |||
| textAlign: "center" | |||
| } | |||
+ 6
- 0
examples/Rn071/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/Rn071/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/Rn071/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', | |||
| } | |||
+ 29
- 0
examples/Rn071/src/examples.js
View File
| @ -0,0 +1,29 @@ | |||
| import Minimal from './examples/Minimal'; | |||
| import Modal from './examples/Modal'; | |||
| 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, | |||
| }, | |||
| [EXAMPLE_KEYS.MODAL]: { | |||
| buttonTitle: 'Modal', | |||
| component: Modal, | |||
| }, | |||
| }; | |||
+ 230
- 0
examples/Rn071/src/examples/Advanced.js
View File
| @ -0,0 +1,230 @@ | |||
| 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'; | |||
| import {readableDate} from '../utils'; | |||
| import Variant from '../propPickers/Variant'; | |||
| 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 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, | |||
| dateString: '', | |||
| androidVariant: 'iosClone', | |||
| }; | |||
| render() { | |||
| return ( | |||
| <View style={styles.container}> | |||
| <CustomPropValue | |||
| changeProp={({propName, propValue}) => | |||
| this.setState({[propName]: propValue}) | |||
| } | |||
| /> | |||
| <DatePicker | |||
| innerRef={ref => (this.ref = ref)} | |||
| date={this.state.date} | |||
| onDateChange={this.setDate} | |||
| onDateStringChange={this.setDateString} | |||
| androidVariant={this.state.androidVariant} | |||
| 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 testID={'dateStringOutput'}>{this.state.dateString}</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: 'androidVariant', | |||
| component: ( | |||
| <Variant | |||
| selected={this.state.androidVariant} | |||
| onChange={androidVariant => this.setState({androidVariant})} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| 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={minimumDate => this.setState({minimumDate})} | |||
| defaultDate={defaultMinDate} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'maxDate', | |||
| component: ( | |||
| <MinMaxDateChange | |||
| value={this.state.maximumDate} | |||
| onChange={maximumDate => { | |||
| this.setState({maximumDate}); | |||
| }} | |||
| defaultDate={defaultMaxDate} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| name: 'fadeToColor', | |||
| component: ( | |||
| <FadeToColor | |||
| onChange={() => this.props.setBackground(randomColor())} | |||
| setNone={() => this.props.setBackground('none')} | |||
| /> | |||
| ), | |||
| }, | |||
| { | |||
| 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}); | |||
| setDateString = dateString => this.setState({dateString}); | |||
| 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/Rn071/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/Rn071/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 })} | |||
| /> | |||
| ) | |||
| } | |||
+ 31
- 0
examples/Rn071/src/examples/Modal.js
View File
| @ -0,0 +1,31 @@ | |||
| import React from 'react'; | |||
| import {Button, View, Text} from 'react-native'; | |||
| import DatePicker from 'react-native-date-picker'; | |||
| export default class ModalExample extends React.Component { | |||
| state = {date: new Date('2000-01-01'), open: false}; | |||
| render = () => ( | |||
| <View style={{alignItems: 'center'}}> | |||
| <Button | |||
| testID="openModal" | |||
| title="Select date" | |||
| onPress={() => this.setState({open: true})} | |||
| /> | |||
| <DatePicker | |||
| modal | |||
| open={this.state.open} | |||
| date={this.state.date} | |||
| onConfirm={date => this.setState({date, open: false})} | |||
| onCancel={() => this.setState({open: false})} | |||
| androidVariant="nativeAndroid" | |||
| /> | |||
| <Text style={{marginTop: 20, fontSize: 26}}> | |||
| {this.state.date.toISOString().substr(0, 10)} | |||
| </Text> | |||
| <Text style={{marginTop: 20, fontSize: 26}}> | |||
| {this.state.date.toLocaleTimeString()} | |||
| </Text> | |||
| </View> | |||
| ); | |||
| } | |||
+ 14
- 0
examples/Rn071/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/Rn071/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', | |||
| ] | |||
+ 43
- 0
examples/Rn071/src/propPickers/DateChange.js
View File
| @ -0,0 +1,43 @@ | |||
| import React, { Component } from 'react' | |||
| import { Button, Text } 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) | |||
| ) | |||
| } | |||
| /> | |||
| <Button | |||
| title="Add 1 hour" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 60 * 1000) | |||
| ) | |||
| } | |||
| /> | |||
| <Button | |||
| title="Add 24 hours" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 60 * 24 * 1000) | |||
| ) | |||
| } | |||
| /> | |||
| <Button | |||
| title="Add 1 year" | |||
| onPress={() => | |||
| this.props.onChange( | |||
| new Date(this.props.value.getTime() + 60 * 60 * 24 * 1000 * 365) | |||
| ) | |||
| } | |||
| /> | |||
| </React.Fragment> | |||
| ) | |||
| } | |||
| } | |||
+ 11
- 0
examples/Rn071/src/propPickers/FadeToColor.js
View File
| @ -0,0 +1,11 @@ | |||
| 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} /> | |||
| <Button title={'Set "none"'} onPress={this.props.setNone} /> | |||
| </> | |||
| } | |||
| } | |||
+ 39
- 0
examples/Rn071/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/Rn071/src/propPickers/MinMaxDateChange.js
View File
| @ -0,0 +1,55 @@ | |||
| import React, { Component } from 'react' | |||
| import { Text, Button, View, StyleSheet } from 'react-native' | |||
| import { PropButton } from '../PropButton' | |||
| import { readableDate } from '../utils' | |||
| 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/Rn071/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/Rn071/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/Rn071/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/Rn071/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/Rn071/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> | |||
| ) | |||
| } | |||
| } | |||
+ 18
- 0
examples/Rn071/src/propPickers/Variant.js
View File
| @ -0,0 +1,18 @@ | |||
| import React, { Component } from 'react' | |||
| import PropSlider from '../PropSlider' | |||
| const data = [{ name: 'iosClone' }, { name: 'nativeAndroid' }] | |||
| export default class extends Component { | |||
| render() { | |||
| return ( | |||
| <PropSlider | |||
| testID={'variant'} | |||
| selectedProp={this.props.selected} | |||
| onSelect={this.props.onChange} | |||
| data={data} | |||
| width={100} | |||
| /> | |||
| ) | |||
| } | |||
| } | |||
+ 13
- 0
examples/Rn071/src/utils.js
View File
| @ -0,0 +1,13 @@ | |||
| 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); | |||
| } | |||