├── .gitattributes ├── .gitignore ├── .travis.yml ├── .vscode ├── settings.json └── tasks.json ├── LICENSE ├── README.md ├── angular ├── index.ts ├── package.json └── tsconfig.json ├── demo-ng ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── angular.json ├── nativescript.config.ts ├── package-lock.json ├── package.json ├── references.d.ts ├── src │ ├── app.css │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── item │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ └── main.ts ├── tsconfig.json ├── tsfmt.json └── webpack.config.js ├── demo ├── .editorconfig ├── .gitignore ├── .vscode │ └── extensions.json ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ │ ├── values-v29 │ │ │ └── styles.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-20.png │ │ │ ├── icon-20@2x.png │ │ │ ├── icon-20@3x.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ └── LaunchScreen-AspectFill@3x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ └── LaunchScreen-Center@3x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── app │ ├── app-root.xml │ ├── app.css │ ├── app.ts │ ├── main-page.ts │ ├── main-page.xml │ └── main-view-model.ts ├── nativescript.config.ts ├── package-lock.json ├── package.json ├── references.d.ts ├── tsconfig.json ├── tsfmt.json └── webpack.config.js ├── docs └── screenshot.png ├── drop-down-common.ts ├── drop-down.android.ts ├── drop-down.d.ts ├── drop-down.ios.ts ├── gruntfile.js ├── package-lock.json ├── package.json ├── references.d.ts ├── tsconfig.json └── tslint.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | 45 | bin 46 | obj 47 | .vs 48 | .tscache 49 | *.user 50 | *.js 51 | *.map 52 | !gruntfile.js 53 | node_modules 54 | *.tmp.* 55 | platforms 56 | demo/lib 57 | *.log 58 | !webpack.*.js 59 | report 60 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | android: 4 | components: 5 | - tools 6 | - platform-tools 7 | - build-tools-28.0.3 8 | - android-23 9 | - android-28 10 | - extra-android-m2repository 11 | 12 | before_cache: 13 | - rm -f $HOME/.gradle/caches/modules-2/modules-2.lock 14 | 15 | cache: 16 | directories: 17 | - .nvm 18 | - $HOME/.gradle/caches/ 19 | - $HOME/.gradle/wrapper/ 20 | 21 | install: 22 | - echo no | npm install -g nativescript 23 | - tns usage-reporting disable 24 | - tns error-reporting disable 25 | - echo no | npm install -g grunt-cli 26 | - npm install 27 | - grunt compile 28 | 29 | matrix: 30 | include: 31 | - stage: lint 32 | language: node_js 33 | os: linux 34 | node_js: "10" 35 | script: grunt lint 36 | 37 | - stage: deploy 38 | if: branch = release 39 | language: node_js 40 | node_js: "10" 41 | before_deploy: 42 | - cd bin/dist 43 | deploy: 44 | provider: npm 45 | email: "peter@tangrasoft.com" 46 | api_key: 47 | secure: "nACxYVvAQqzzg7NuWG93BmaX8PtOpmi4GMF4w9QSqqoy6W5mmpVHZ6ZzAnGD7k/kU+OQ6MqLi3Yn7vU/rFqth9chTA/5GSUhfkzUnRGa9/K3E0/3rGiH+LIuCgelq3zdeSlWCRhZMu7pnNJdGSZkostzPX97K+KiNjMogc8IHIOkkvJDt/yITW2+p93imb2p6uxoykIvlWGmStYAUI0mHdikHxLw+dIdnTZDYVt5XIhoa5a3VkQ0QhTPXwlYDOjPa9wSGIp5U83UFgb8+va1gJUUgllcqluP1TKoBbPE6l2zJv/NiGFPBA61hmXOZ8G8XT/ErPgiw2jTxYW1JRg+OGnUfuL4Uo9twOKfCluCWaipirJfVLEMPpt0BR0WEM392vjLOgT3lGIwa5M5bZK2B5aY5/+B/Rruv+hzYeDTEcVGhTChvA6YvQzs7mCTQ/ODVJd9unB/yfnYw6u9Vr0voJCsVkrhqThIWoYb8Yu4GnMKjGg/bv5l0k5shE1qzmpzB/PMecdDcUbdGPA2+uYvORuHhnkk1Ct8CC6iM/66kF/VTkBsaQel1nMVWnPlsNbMd62Yr8c9T+6pKUY7jjZ7qFbEDHdvFeWiD9wM6vD59Xnx1o87WxZNuGgY2ysfVWGdCc0USrz4zIgW51tSUD2BuukTKR0f/8cSvWpTw9TvRZk=" 48 | skip_cleanup: true 49 | on: 50 | branch: release 51 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "**/.git": true, 5 | "**/.DS_Store": true, 6 | }, 7 | "typescript.tsdk": "node_modules/typescript/lib" 8 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "command": "grunt", 6 | "args": [ 7 | "--no-color" 8 | ], 9 | 10 | "tasks": [ 11 | { 12 | "label": "build", 13 | "type": "grunt", 14 | "task": "--no-color", 15 | "problemMatcher": [ 16 | "$tsc", 17 | { 18 | "base": "$tslint4", 19 | "fileLocation": "relative" 20 | } 21 | ], 22 | "group": { 23 | "_id": "build", 24 | "isDefault": false 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2016-2018 Tangra Inc. 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | __The author of this plugin will continue to support it in a separate repo exclusively as part of [ProPlugins](https://proplugins.org). This repo will remain supported by the NativeScript community.__ 2 | 3 | # Contribution - help wanted 4 | This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues [here](https://github.com/PeterStaev/nativescript-image-swipe/issues). 5 | 6 | ## Creating a PR checklist: 7 | - Fork the repo 8 | - Add new functionality or fix an issue and push it to your fork 9 | - Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android) 10 | - From your fork create a PR targeting the 'master' branch of this repository 11 | 12 | Thank you for your contribution. 13 | 14 | # NativeScript DropDown widget 15 | [![Build Status](https://travis-ci.org/PeterStaev/NativeScript-Drop-Down.svg?branch=master)](https://travis-ci.org/PeterStaev/NativeScript-Drop-Down) 16 | [![npm downloads](https://img.shields.io/npm/dm/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down) 17 | [![npm downloads](https://img.shields.io/npm/dt/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down) 18 | [![npm](https://img.shields.io/npm/v/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down) 19 | 20 | A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a [UILabel](https://developer.apple.com/reference/uikit/uilabel) with an `inputView` set to an [UIPickerView](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIPickerView_Class/index.html) which displays the items. For Android it wraps up the [Spinner](http://developer.android.com/reference/android/widget/Spinner.html) widget. 21 | 22 | ## Screenshot 23 | ![Screenshot of iOS and Android](https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/master/docs/screenshot.png) 24 | 25 | ## Installation 26 | Run the following command from the root of your project: 27 | 28 | `tns plugin add nativescript-drop-down` 29 | 30 | This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file. 31 | 32 | ## Configuration 33 | There is no additional configuration needed! 34 | 35 | ## API 36 | 37 | ### Events 38 | * **opened** 39 | Triggered when the DropDown is opened. 40 | 41 | * **closed** 42 | Triggered when the DropDown is closed. 43 | 44 | * **selectedIndexChanged** 45 | Triggered when the user changes the selection in the DropDown 46 | 47 | ### Static Properties 48 | * **openedEvent** - *String* 49 | String value used when hooking to opened event. 50 | 51 | * **closedEvent** - *String* 52 | String value used when hooking to closed event. 53 | 54 | * **selectedIndexChangedEvent** - *String* 55 | String value used when hooking to selectedIndexChanged event. 56 | 57 | ### Instance Properties 58 | * **ios** - *[UILabel](https://developer.apple.com/reference/uikit/uilabel)* 59 | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. 60 | 61 | * **android** - *[android.widget.Spinner](http://developer.android.com/reference/android/widget/Spinner.html)* 62 | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. 63 | 64 | * **items** - *Array | ItemsSource* 65 | Gets or sets the items collection of the DropDown. The items property can be set to an array or an object defining length and getItem(index) method. 66 | 67 | * **selectedIndex** - *Number* 68 | Gets or sets the selected index of the DropDown. 69 | 70 | * **hint** - *String* 71 | Gets or sets the hint for the DropDown. 72 | 73 | * **isEnabled** - *boolean* 74 | Gets or sets whether the drop down is enabled. If you want to apply a specific style you can use the `:disabled` pseudo css selector. 75 | 76 | * **accessoryViewVisible** - *boolean* (Default: true) 77 | Gets/sets whether there will be an accessory view (toolbar with Done button) under iOS. Valid only when running on iOS. 78 | 79 | * **itemsTextAlignment** - *String* 80 | Gets or sets the alignment for items in the DropDown. 81 | 82 | * **itemsPadding** - *String* 83 | Gets or sets the padding for items in the DropDown. 84 | 85 | ### Methods 86 | * **open(): void** 87 | Opens the drop down. 88 | 89 | * **close(): void** 90 | Closes the drop down. 91 | 92 | ## Usage 93 | You need to add `xmlns:dd="nativescript-drop-down"` to your page tag, and then simply use `` in order to add the widget to your page. 94 | 95 | ```xml 96 | 97 | 98 | 99 | 103 | 106 | 107 | ``` 108 | 109 | ```ts 110 | // test-page.ts 111 | import observable = require("data/observable"); 112 | import observableArray = require("data/observable-array"); 113 | import pages = require("ui/page"); 114 | import { SelectedIndexChangedEventData } from "nativescript-drop-down"; 115 | 116 | var viewModel: observable.Observable; 117 | 118 | export function pageLoaded(args: observable.EventData) { 119 | var page = args.object; 120 | var items = new observableArray.ObservableArray(); 121 | 122 | viewModel = new observable.Observable(); 123 | 124 | for (var loop = 0; loop < 20; loop++) { 125 | items.push("Item " + loop.toString()); 126 | } 127 | 128 | viewModel.set("items", items); 129 | viewModel.set("selectedIndex", 15); 130 | 131 | page.bindingContext = viewModel; 132 | } 133 | 134 | export function dropDownOpened(args: EventData) { 135 | console.log("Drop Down opened"); 136 | } 137 | 138 | export function dropDownClosed(args: EventData) { 139 | console.log("Drop Down closed"); 140 | } 141 | 142 | export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) { 143 | console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`); 144 | } 145 | ``` 146 | 147 | ## Usage in Angular 148 | 149 | ##### Migration to 3.0+ 150 | 151 | - Remove: 152 | ```typescript 153 | registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);` 154 | ``` 155 | - Import `DropDownModule` in `NgModule`: 156 | ```typescript 157 | import { DropDownModule } from "nativescript-drop-down/angular"; 158 | //...... 159 | @NgModule({ 160 | //...... 161 | imports: [ 162 | //...... 163 | DropDownModule, 164 | //...... 165 | ], 166 | //...... 167 | }) 168 | ``` 169 | 170 | ##### Example Usage 171 | ```ts 172 | // main.ts 173 | import { NgModule } from "@angular/core"; 174 | import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 175 | import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 176 | import { DropDownModule } from "nativescript-drop-down/angular"; 177 | import { AppComponent } from "./app.component"; 178 | 179 | @NgModule({ 180 | declarations: [ AppComponent ], 181 | bootstrap: [ AppComponent ], 182 | imports: [ 183 | NativeScriptModule, 184 | DropDownModule, 185 | ], 186 | }) 187 | class AppComponentModule { 188 | } 189 | 190 | platformNativeScriptDynamic().bootstrapModule(AppComponentModule); 191 | ``` 192 | 193 | ```html 194 | 195 | 196 | 198 | 208 | 213 | 216 | 217 | 218 | ``` 219 | 220 | ```ts 221 | // app.component.ts 222 | import { Component } from "@angular/core"; 223 | import { SelectedIndexChangedEventData } from "nativescript-drop-down"; 224 | 225 | @Component({ 226 | selector: "my-app", 227 | templateUrl:"app.component.html", 228 | }) 229 | export class AppComponent { 230 | public selectedIndex = 1; 231 | public items: Array; 232 | 233 | constructor() { 234 | this.items = []; 235 | for (var i = 0; i < 5; i++) { 236 | this.items.push("data item " + i); 237 | } 238 | } 239 | 240 | public onchange(args: SelectedIndexChangedEventData) { 241 | console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`); 242 | } 243 | 244 | public onopen() { 245 | console.log("Drop Down opened."); 246 | } 247 | 248 | public onclose() { 249 | console.log("Drop Down closed."); 250 | } 251 | } 252 | ``` 253 | 254 | ##### Set the selectedIndex value in Angular 255 | 256 | Get an instance of the child drop down component like this: 257 | 258 | ``` 259 | @ViewChild('dd') dropDown: ElementRef; 260 | // set the index programatically from the parent component 261 | this.dropDown.nativeElement.selectedIndex = 262 | ``` 263 | 264 | ## Working with value and display members 265 | It is a common case that you want to have one thing displayed in the drop down and then get some backend value 266 | tied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida) 267 | and then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be 268 | set to either Array of objects or a custom object that implements `getItem(index: number): any` function and `length` proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario: 269 | 270 | ```ts 271 | import { ValueList } from "nativescript-drop-down"; 272 | ``` 273 | 274 | Then you can set the `items` property of the DropDown to an instance of ValueList: 275 | ```ts 276 | let dd = page.getViewById("dd"); 277 | let itemSource = new ValueList([ 278 | { value: "FL", display: "Florida" }, 279 | { value: "MI", display: "Michigan" } 280 | ]); 281 | dd.items = itemSource; 282 | ``` 283 | 284 | This enables you to do things like: 285 | 1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with: 286 | ```ts 287 | dd.selectedIndex = itemSource.getIndex("FL"); 288 | ``` 289 | 2.You can get the backend value of what the user selected using: 290 | ```ts 291 | let selectedValue = itemSource.getValue(dd.selectedIndex); 292 | ``` 293 | 294 | ## Demos 295 | This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell: 296 | ```shell 297 | $ git clone https://github.com/peterstaev/nativescript-drop-down 298 | $ cd nativescript-drop-down 299 | $ npm install 300 | $ npm run demo-ios 301 | ``` 302 | This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the `-android` instead of the `-ios` sufix. 303 | 304 | If you want to run the Angular demo simply use the `demo-ng-` prefix instead of `demo-`. 305 | 306 | 307 | ## Donate 308 | [![Donate](https://img.shields.io/badge/paypal-donate-brightgreen.svg)](https://bit.ly/2AS9QKB) 309 | 310 | `bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC` 311 | 312 | ![Donate](https://www.tangrainc.com/qr.png) 313 | -------------------------------------------------------------------------------- /angular/index.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Directive, ElementRef, HostListener, Inject, NgModule, forwardRef } from "@angular/core"; 2 | import { NG_VALUE_ACCESSOR, FormsModule } from "@angular/forms"; 3 | import { BaseValueAccessor, registerElement } from "@nativescript/angular"; 4 | import { View } from "@nativescript/core"; 5 | import { DropDown } from "nativescript-drop-down"; 6 | 7 | registerElement("DropDown", () => DropDown); 8 | 9 | const SELECTED_INDEX_VALUE_ACCESSOR = { 10 | provide: NG_VALUE_ACCESSOR, 11 | useExisting: forwardRef(() => SelectedIndexValueAccessor), multi: true 12 | }; 13 | 14 | export type SelectableView = { selectedIndex: number } & View; 15 | 16 | /** 17 | * The accessor for setting a selectedIndex and listening to changes that is used by the 18 | * {@link NgModel} directives. 19 | * 20 | * ### Example 21 | * ``` 22 | * 23 | * ``` 24 | */ 25 | @Directive({ 26 | // tslint:disable-next-line:max-line-length directive-selector 27 | selector: "DropDown[ngModel], DropDown[formControl], DropDown[formControlName], dropDown[ngModel], dropDown[formControl], dropDown[formControlName], drop-down[ngModel], drop-down[formControl], drop-down[formControlName]", 28 | providers: [SELECTED_INDEX_VALUE_ACCESSOR] 29 | }) 30 | export class SelectedIndexValueAccessor extends BaseValueAccessor implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix 31 | 32 | private _normalizedValue: number; 33 | private viewInitialized: boolean; 34 | 35 | constructor(@Inject(ElementRef) elementRef: ElementRef) { 36 | super(elementRef.nativeElement); 37 | } 38 | 39 | @HostListener("selectedIndexChange", ["$event"]) 40 | public selectedIndexChangeListener(event: any) { 41 | this.onChange(event.value); 42 | } 43 | 44 | // tslint:disable-next-line:no-empty 45 | public onTouched = () => { }; 46 | 47 | public writeValue(value: any): void { 48 | if (value === undefined || value === null || value === "") { 49 | this._normalizedValue = null; 50 | } 51 | else { 52 | this._normalizedValue = value; 53 | } 54 | 55 | if (this.viewInitialized) { 56 | this.view.selectedIndex = this._normalizedValue; 57 | } 58 | } 59 | 60 | public ngAfterViewInit() { 61 | this.viewInitialized = true; 62 | this.view.selectedIndex = this._normalizedValue; 63 | } 64 | 65 | public registerOnTouched(fn: () => void): void { this.onTouched = fn; } 66 | } 67 | 68 | @NgModule({ 69 | declarations: [SelectedIndexValueAccessor], 70 | providers: [], 71 | imports: [ 72 | FormsModule 73 | ], 74 | exports: [ 75 | SelectedIndexValueAccessor, 76 | FormsModule 77 | ] 78 | }) 79 | export class DropDownModule { 80 | } 81 | -------------------------------------------------------------------------------- /angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativescript-drop-down-angular", 3 | "main": "index.js", 4 | "ngPackage": { 5 | "dest": "../bin/dist/angular", 6 | "lib": { 7 | "entryFile": "index.ts", 8 | "umdModuleIds": { 9 | "@nativescript/core": "ns-core", 10 | "@nativescript/angular": "ns-angular", 11 | "nativescript-drop-down": "ns-drop-down" 12 | } 13 | }, 14 | "whitelistedNonPeerDependencies": [ 15 | "." 16 | ] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "types": ["node"], 5 | "rootDir": ".", 6 | "baseUrl": ".", 7 | "experimentalDecorators": true, 8 | "paths": { 9 | "nativescript-drop-down": [ 10 | "../bin/dist" 11 | ] 12 | } 13 | }, 14 | "include": ["./**/*.ts", "../references.d.ts"], 15 | "exclude": ["../node_modules"] 16 | } -------------------------------------------------------------------------------- /demo-ng/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | 9 | [*.json] 10 | indent_style = space 11 | indent_size = 2 12 | 13 | [*.ts] 14 | indent_style = space 15 | indent_size = 4 16 | -------------------------------------------------------------------------------- /demo-ng/.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms/ 5 | 6 | # NativeScript Template 7 | *.js.map 8 | *.js 9 | !ngcc.config.js 10 | !webpack.config.js 11 | 12 | # Logs 13 | logs 14 | *.log 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # General 20 | .DS_Store 21 | .AppleDouble 22 | .LSOverride 23 | .idea 24 | .cloud 25 | .project 26 | tmp/ 27 | typings/ 28 | 29 | # Visual Studio Code 30 | .vscode/* 31 | !.vscode/settings.json 32 | !.vscode/tasks.json 33 | !.vscode/launch.json 34 | !.vscode/extensions.json 35 | -------------------------------------------------------------------------------- /demo-ng/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nativescript.nativescript" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // implementation 'com.android.support:recyclerview-v7:+' 6 | //} 7 | 8 | // If you want to add something to be applied before applying plugins' include.gradle files 9 | // e.g. project.ext.googlePlayServicesVersion = "15.0.1" 10 | // create a file named before-plugins.gradle in the current directory and place it there 11 | 12 | android { 13 | defaultConfig { 14 | minSdkVersion 17 15 | generatedDensities = [] 16 | } 17 | aaptOptions { 18 | additionalParameters "--no-version-vectors" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-hdpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-ldpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-mdpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/values-v21/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3d5afe 4 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/values-v29/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #F5F5F5 4 | #757575 5 | #33B5E5 6 | #272734 7 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/Android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 21 | 22 | 23 | 31 | 32 | 34 | 35 | 36 | 42 | 43 | 45 | 46 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "icon-20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "icon-20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "icon-29.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "icon-29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "icon-29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "icon-40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "icon-40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "icon-60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "icon-60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "icon-20.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "icon-20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "icon-29.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "icon-29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "icon-40.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "icon-40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "icon-76.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "icon-76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "icon-83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "icon-1024.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-AspectFill@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-Center@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo-ng/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ${PRODUCT_NAME} 9 | CFBundleExecutable 10 | ${EXECUTABLE_NAME} 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | ${PRODUCT_NAME} 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiresFullScreen 28 | 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UISupportedInterfaceOrientations~ipad 40 | 41 | UIInterfaceOrientationPortrait 42 | UIInterfaceOrientationPortraitUpsideDown 43 | UIInterfaceOrientationLandscapeLeft 44 | UIInterfaceOrientationLandscapeRight 45 | 46 | UIUserInterfaceStyle 47 | Light 48 | 49 | 50 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /demo-ng/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | -------------------------------------------------------------------------------- /demo-ng/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "cli": { 6 | "defaultCollection": "@nativescript/schematics" 7 | }, 8 | "projects": { 9 | "hello-world": { 10 | "root": "", 11 | "sourceRoot": "src", 12 | "projectType": "application", 13 | "prefix": "ns" 14 | } 15 | }, 16 | "defaultProject": "hello-world" 17 | } 18 | -------------------------------------------------------------------------------- /demo-ng/nativescript.config.ts: -------------------------------------------------------------------------------- 1 | import { NativeScriptConfig } from '@nativescript/core'; 2 | 3 | export default { 4 | id: 'com.tangrainc.dropdownsample.ng', 5 | appPath: 'src', 6 | appResourcesPath: 'App_Resources', 7 | android: { 8 | v8Flags: '--expose_gc', 9 | markingMode: 'none' 10 | } 11 | } as NativeScriptConfig; -------------------------------------------------------------------------------- /demo-ng/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript/template-hello-world-ng", 3 | "main": "main.js", 4 | "version": "7.0.9", 5 | "author": "NativeScript Team ", 6 | "description": "NativeScript Application", 7 | "license": "SEE LICENSE IN ", 8 | "publishConfig": { 9 | "access": "public" 10 | }, 11 | "keywords": [ 12 | "nativescript", 13 | "mobile", 14 | "angular", 15 | "{N}", 16 | "template" 17 | ], 18 | "repository": "", 19 | "bugs": { 20 | "url": "https://github.com/NativeScript/NativeScript/issues" 21 | }, 22 | "dependencies": { 23 | "@angular/animations": "~11.0.0", 24 | "@angular/common": "~11.0.0", 25 | "@angular/compiler": "~11.0.0", 26 | "@angular/core": "~11.0.0", 27 | "@angular/forms": "~11.0.0", 28 | "@angular/platform-browser": "~11.0.0", 29 | "@angular/platform-browser-dynamic": "~11.0.0", 30 | "@angular/router": "~11.0.0", 31 | "@nativescript/angular": "~11.0.0", 32 | "@nativescript/core": "~7.1.0", 33 | "@nativescript/theme": "~3.0.0", 34 | "nativescript-drop-down": "file:../bin/dist", 35 | "reflect-metadata": "~0.1.12", 36 | "rxjs": "^6.6.0", 37 | "zone.js": "~0.11.1" 38 | }, 39 | "devDependencies": { 40 | "@angular/compiler-cli": "~11.0.0", 41 | "@nativescript/android": "7.0.1", 42 | "@nativescript/types": "~7.0.0", 43 | "@nativescript/webpack": "~4.0.0", 44 | "@ngtools/webpack": "~11.0.0", 45 | "typescript": "~4.0.0" 46 | }, 47 | "private": "true", 48 | "readme": "NativeScript Application" 49 | } 50 | -------------------------------------------------------------------------------- /demo-ng/references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /demo-ng/src/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.css file is where you place CSS rules that 3 | you would like to apply to your entire application. Check out 4 | http://docs.nativescript.org/ui/styling for a full list of the CSS 5 | selectors and properties you can use to style UI components. 6 | 7 | /* 8 | In many cases you may want to use the NativeScript core theme instead 9 | of writing your own CSS rules. You can learn more about the 10 | NativeScript core theme at https://github.com/nativescript/theme 11 | The imported CSS rules must precede all other types of rules. 12 | */ 13 | @import "~@nativescript/theme/css/core.css"; 14 | @import "~@nativescript/theme/css/default.css"; 15 | 16 | /* Place any CSS rules you want to apply on both iOS and Android here. 17 | This is where the vast majority of your CSS code goes. */ 18 | 19 | /* 20 | The following CSS rule changes the font size of all Buttons that have the 21 | "-primary" class modifier. 22 | */ 23 | Button.-primary { 24 | font-size: 18; 25 | } 26 | -------------------------------------------------------------------------------- /demo-ng/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { Routes } from "@angular/router"; 3 | import { NativeScriptRouterModule } from "@nativescript/angular"; 4 | 5 | import { ItemsComponent } from "./item/items.component"; 6 | 7 | const routes: Routes = [ 8 | { path: "", redirectTo: "/items", pathMatch: "full" }, 9 | { path: "items", component: ItemsComponent }, 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [NativeScriptRouterModule.forRoot(routes)], 14 | exports: [NativeScriptRouterModule] 15 | }) 16 | export class AppRoutingModule { } 17 | -------------------------------------------------------------------------------- /demo-ng/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /demo-ng/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | selector: "ns-app", 5 | templateUrl: "./app.component.html" 6 | }) 7 | export class AppComponent { } 8 | -------------------------------------------------------------------------------- /demo-ng/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 2 | import { NativeScriptModule } from "@nativescript/angular"; 3 | import { DropDownModule } from 'nativescript-drop-down/angular'; 4 | import { AppRoutingModule } from "./app-routing.module"; 5 | import { AppComponent } from "./app.component"; 6 | import { ItemsComponent } from "./item/items.component"; 7 | 8 | @NgModule({ 9 | bootstrap: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | NativeScriptModule, 14 | AppRoutingModule, 15 | DropDownModule 16 | ], 17 | declarations: [ 18 | AppComponent, 19 | ItemsComponent, 20 | ], 21 | providers: [], 22 | schemas: [ 23 | NO_ERRORS_SCHEMA 24 | ] 25 | }) 26 | export class AppModule { } 27 | -------------------------------------------------------------------------------- /demo-ng/src/app/item/items.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /demo-ng/src/app/item/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import { SelectedIndexChangedEventData, ValueList } from "nativescript-drop-down"; 3 | 4 | @Component({ 5 | selector: "ns-items", 6 | templateUrl: "./items.component.html" 7 | }) 8 | export class ItemsComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | public selectedIndex: number = null; 13 | public hint = "My Hint"; 14 | public items: ValueList; 15 | public cssClass: string = "default"; 16 | 17 | public ngOnInit() { 18 | this.items = new ValueList(); 19 | for (let loop = 0; loop < 200; loop++) { 20 | this.items.push({ 21 | value: `I${loop}`, 22 | display: `Item ${loop}`, 23 | }); 24 | } 25 | } 26 | 27 | public onchange(args: SelectedIndexChangedEventData) { 28 | console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}. New value is "${this.items.getValue( 29 | args.newIndex)}"`); 30 | } 31 | 32 | public onopen() { 33 | console.log("Drop Down opened."); 34 | } 35 | 36 | public onclose() { 37 | console.log("Drop Down closed."); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /demo-ng/src/main.ts: -------------------------------------------------------------------------------- 1 | // this import should be first in order to load some required settings (like globals and reflect-metadata) 2 | import { platformNativeScriptDynamic } from "@nativescript/angular"; 3 | 4 | import { AppModule } from "./app/app.module"; 5 | 6 | // A traditional NativeScript application starts by initializing global objects, 7 | // setting up global CSS rules, creating, and navigating to the main page. 8 | // Angular applications need to take care of their own initialization: 9 | // modules, components, directives, routes, DI providers. 10 | // A NativeScript Angular app needs to make both paradigms work together, 11 | // so we provide a wrapper platform object, platformNativeScriptDynamic, 12 | // that sets up a NativeScript application and can bootstrap the Angular framework. 13 | platformNativeScriptDynamic().bootstrapModule(AppModule); 14 | -------------------------------------------------------------------------------- /demo-ng/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es2017", 5 | "moduleResolution": "node", 6 | "experimentalDecorators": true, 7 | "emitDecoratorMetadata": true, 8 | "noEmitHelpers": true, 9 | "noEmitOnError": true, 10 | "skipLibCheck": true, 11 | "lib": [ 12 | "es6", 13 | "dom", 14 | "es2015.iterable" 15 | ], 16 | "baseUrl": ".", 17 | "paths": { 18 | "~/*": [ 19 | "app/*" 20 | ] 21 | } 22 | }, 23 | "include": [ 24 | "src/tests/**/*.ts", 25 | "src/**/*.ios.ts", 26 | "src/**/*.android.ts" 27 | ], 28 | "files": [ 29 | "./references.d.ts", 30 | "./src/main.ts" 31 | ], 32 | "exclude": [ 33 | "node_modules", 34 | "platforms", 35 | "e2e" 36 | ] 37 | } -------------------------------------------------------------------------------- /demo-ng/tsfmt.json: -------------------------------------------------------------------------------- 1 | { 2 | "indentSize": 2, 3 | "tabSize": 2 4 | } 5 | -------------------------------------------------------------------------------- /demo-ng/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { join, relative, resolve, sep, dirname } = require('path'); 2 | const fs = require('fs'); 3 | 4 | const webpack = require('webpack'); 5 | const nsWebpack = require('@nativescript/webpack'); 6 | const nativescriptTarget = require('@nativescript/webpack/nativescript-target'); 7 | const { 8 | nsSupportHmrNg 9 | } = require('@nativescript/webpack/transformers/ns-support-hmr-ng'); 10 | const { nsTransformNativeClassesNg } = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng"); 11 | const { 12 | parseWorkspaceConfig, hasConfigurations 13 | } = require('@nativescript/webpack/helpers/angular-config-parser'); 14 | const { 15 | getMainModulePath 16 | } = require('@nativescript/webpack/utils/ast-utils'); 17 | const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils"); 18 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 19 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 20 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 21 | const { 22 | NativeScriptWorkerPlugin 23 | } = require('nativescript-worker-loader/NativeScriptWorkerPlugin'); 24 | const TerserPlugin = require('terser-webpack-plugin'); 25 | const { 26 | getAngularCompilerPlugin 27 | } = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin'); 28 | const hashSalt = Date.now().toString(); 29 | 30 | module.exports = env => { 31 | // Add your custom Activities, Services and other Android app components here. 32 | const appComponents = [ 33 | "@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity" 34 | ]; 35 | 36 | const platform = env && ((env.android && 'android') || (env.ios && 'ios')); 37 | if (!platform) { 38 | throw new Error('You need to provide a target platform!'); 39 | } 40 | 41 | const AngularCompilerPlugin = getAngularCompilerPlugin(platform); 42 | const projectRoot = __dirname; 43 | 44 | // Default destination inside platforms//... 45 | const dist = resolve( 46 | projectRoot, 47 | nsWebpack.getAppPath(platform, projectRoot) 48 | ); 49 | 50 | const { 51 | // The 'appPath' and 'appResourcesPath' values are fetched from 52 | // the nsconfig.json configuration file 53 | // when bundling with `tns run android|ios --bundle`. 54 | appPath = 'src', 55 | appResourcesPath = 'App_Resources', 56 | 57 | // You can provide the following flags when running 'tns run android|ios' 58 | snapshot, // --env.snapshot, 59 | production, // --env.production 60 | configuration, // --env.configuration (consistent with angular cli usage) 61 | projectName, // --env.projectName (drive configuration through angular projects) 62 | uglify, // --env.uglify 63 | report, // --env.report 64 | sourceMap, // --env.sourceMap 65 | hiddenSourceMap, // --env.hiddenSourceMap 66 | hmr, // --env.hmr, 67 | unitTesting, // --env.unitTesting 68 | testing, // --env.testing 69 | verbose, // --env.verbose 70 | ci, // --env.ci 71 | snapshotInDocker, // --env.snapshotInDocker 72 | skipSnapshotTools, // --env.skipSnapshotTools 73 | compileSnapshot // --env.compileSnapshot 74 | } = env; 75 | 76 | const { fileReplacements, copyReplacements } = parseWorkspaceConfig(platform, configuration, projectName); 77 | 78 | const useLibs = compileSnapshot; 79 | const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; 80 | const externals = nsWebpack.getConvertedExternals(env.externals); 81 | const appFullPath = resolve(projectRoot, appPath); 82 | const appResourcesFullPath = resolve(projectRoot, appResourcesPath); 83 | let tsConfigName = 'tsconfig.json'; 84 | let tsConfigPath = resolve(projectRoot, tsConfigName); 85 | const tsConfigTnsName = 'tsconfig.tns.json'; 86 | const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName); 87 | if (fs.existsSync(tsConfigTnsPath)) { 88 | // support shared angular app configurations 89 | tsConfigName = tsConfigTnsName; 90 | tsConfigPath = tsConfigTnsPath; 91 | } 92 | const tsConfigEnvName = 'tsconfig.env.json'; 93 | const tsConfigEnvPath = resolve(projectRoot, tsConfigEnvName); 94 | if (hasConfigurations(configuration) && fs.existsSync(tsConfigEnvPath)) { 95 | // when configurations are used, switch to environments supported config 96 | tsConfigName = tsConfigEnvName; 97 | tsConfigPath = tsConfigEnvPath; 98 | } 99 | const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; 100 | const entryPath = `.${sep}${entryModule}`; 101 | const entries = { bundle: entryPath }; 102 | const areCoreModulesExternal = 103 | Array.isArray(env.externals) && 104 | env.externals.some(e => e.indexOf('@nativescript') > -1); 105 | if (platform === 'ios' && !areCoreModulesExternal && !testing) { 106 | entries['tns_modules/@nativescript/core/inspector_modules'] = 107 | 'inspector_modules'; 108 | } 109 | 110 | const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); 111 | nsWebpack.processTsPathsForScopedModules({ compilerOptions }); 112 | nsWebpack.processTsPathsForScopedAngular({ compilerOptions }); 113 | 114 | const ngCompilerTransformers = [nsTransformNativeClassesNg]; 115 | const additionalLazyModuleResources = []; 116 | 117 | const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }; 118 | const copyTargets = [ 119 | { from: { glob: 'assets/**', dot: false } }, 120 | { from: { glob: 'fonts/**', dot: false } }, 121 | ...copyReplacements, 122 | ]; 123 | 124 | if (!production) { 125 | // for development purposes only 126 | // for example, include mock json folder 127 | // copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' }); 128 | 129 | if (hmr) { 130 | ngCompilerTransformers.push(nsSupportHmrNg); 131 | } 132 | } 133 | 134 | // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used 135 | // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes 136 | // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 137 | if (env.externals && env.externals.indexOf('@angular/core') > -1) { 138 | const appModuleRelativePath = getMainModulePath( 139 | resolve(appFullPath, entryModule), 140 | tsConfigName 141 | ); 142 | if (appModuleRelativePath) { 143 | const appModuleFolderPath = dirname( 144 | resolve(appFullPath, appModuleRelativePath) 145 | ); 146 | // include the new lazy loader path in the allowed ones 147 | additionalLazyModuleResources.push(appModuleFolderPath); 148 | } 149 | } 150 | 151 | const ngCompilerPlugin = new AngularCompilerPlugin({ 152 | hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']), 153 | platformTransformers: ngCompilerTransformers.map(t => 154 | t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot) 155 | ), 156 | mainPath: join(appFullPath, entryModule), 157 | tsConfigPath, 158 | skipCodeGeneration: false, 159 | sourceMap: !!isAnySourceMapEnabled, 160 | additionalLazyModuleResources: additionalLazyModuleResources, 161 | compilerOptions: { paths: compilerOptions.paths } 162 | }); 163 | 164 | let sourceMapFilename = nsWebpack.getSourceMapFilename( 165 | hiddenSourceMap, 166 | __dirname, 167 | dist 168 | ); 169 | 170 | const itemsToClean = [`${dist}/**/*`]; 171 | if (platform === 'android') { 172 | itemsToClean.push( 173 | `${join( 174 | projectRoot, 175 | 'platforms', 176 | 'android', 177 | 'app', 178 | 'src', 179 | 'main', 180 | 'assets', 181 | 'snapshots' 182 | )}` 183 | ); 184 | itemsToClean.push( 185 | `${join( 186 | projectRoot, 187 | 'platforms', 188 | 'android', 189 | 'app', 190 | 'build', 191 | 'configurations', 192 | 'nativescript-android-snapshot' 193 | )}` 194 | ); 195 | } 196 | 197 | const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName); 198 | 199 | nsWebpack.processAppComponents(appComponents, platform); 200 | const config = { 201 | mode: production ? 'production' : 'development', 202 | context: appFullPath, 203 | externals, 204 | watchOptions: { 205 | ignored: [ 206 | appResourcesFullPath, 207 | // Don't watch hidden files 208 | '**/.*' 209 | ] 210 | }, 211 | target: nativescriptTarget, 212 | entry: entries, 213 | output: { 214 | pathinfo: false, 215 | path: dist, 216 | sourceMapFilename, 217 | libraryTarget: 'commonjs2', 218 | filename: '[name].js', 219 | globalObject: 'global', 220 | hashSalt 221 | }, 222 | resolve: { 223 | extensions: ['.ts', '.js', '.scss', '.css'], 224 | // Resolve {N} system modules from @nativescript/core 225 | modules: [ 226 | resolve(__dirname, 'node_modules/@nativescript/core'), 227 | resolve(__dirname, 'node_modules'), 228 | 'node_modules/@nativescript/core', 229 | 'node_modules' 230 | ], 231 | alias: { 232 | '~/package.json': resolve(projectRoot, 'package.json'), 233 | '~': appFullPath, 234 | "tns-core-modules": "@nativescript/core", 235 | "nativescript-angular": "@nativescript/angular", 236 | ...fileReplacements 237 | }, 238 | symlinks: true 239 | }, 240 | resolveLoader: { 241 | symlinks: false 242 | }, 243 | node: { 244 | // Disable node shims that conflict with NativeScript 245 | http: false, 246 | timers: false, 247 | setImmediate: false, 248 | fs: 'empty', 249 | __dirname: false 250 | }, 251 | devtool: hiddenSourceMap 252 | ? 'hidden-source-map' 253 | : sourceMap 254 | ? 'inline-source-map' 255 | : 'none', 256 | optimization: { 257 | runtimeChunk: 'single', 258 | noEmitOnErrors: noEmitOnErrorFromTSConfig, 259 | splitChunks: { 260 | cacheGroups: { 261 | vendor: { 262 | name: 'vendor', 263 | chunks: 'all', 264 | test: (module, chunks) => { 265 | const moduleName = module.nameForCondition 266 | ? module.nameForCondition() 267 | : ''; 268 | return ( 269 | /[\\/]node_modules[\\/]/.test(moduleName) || 270 | appComponents.some(comp => comp === moduleName) 271 | ); 272 | }, 273 | enforce: true 274 | } 275 | } 276 | }, 277 | minimize: !!uglify, 278 | minimizer: [ 279 | new TerserPlugin({ 280 | parallel: true, 281 | cache: !ci, 282 | sourceMap: isAnySourceMapEnabled, 283 | terserOptions: { 284 | output: { 285 | comments: false, 286 | semicolons: !isAnySourceMapEnabled 287 | }, 288 | compress: { 289 | // The Android SBG has problems parsing the output 290 | // when these options are enabled 291 | collapse_vars: platform !== 'android', 292 | sequences: platform !== 'android', 293 | // custom 294 | drop_console: true, 295 | drop_debugger: true, 296 | ecma: 6, 297 | keep_infinity: platform === 'android', // for Chrome/V8 298 | reduce_funcs: platform !== 'android', // for Chrome/V8 299 | global_defs: { 300 | __UGLIFIED__: true 301 | } 302 | }, 303 | // custom 304 | ecma: 6, 305 | safari10: platform !== 'android' 306 | } 307 | }) 308 | ] 309 | }, 310 | module: { 311 | rules: [ 312 | { 313 | include: join(appFullPath, entryPath), 314 | use: [ 315 | // Require all Android app components 316 | platform === 'android' && { 317 | loader: '@nativescript/webpack/helpers/android-app-components-loader', 318 | options: { modules: appComponents } 319 | }, 320 | 321 | { 322 | loader: '@nativescript/webpack/bundle-config-loader', 323 | options: { 324 | angular: true, 325 | loadCss: !snapshot, // load the application css if in debug mode 326 | unitTesting, 327 | appFullPath, 328 | projectRoot, 329 | ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) 330 | } 331 | } 332 | ].filter(loader => !!loader) 333 | }, 334 | 335 | { test: /\.html$|\.xml$/, use: 'raw-loader' }, 336 | 337 | { 338 | test: /[\/|\\]app\.css$/, 339 | use: [ 340 | '@nativescript/webpack/helpers/style-hot-loader', 341 | { 342 | loader: "@nativescript/webpack/helpers/css2json-loader", 343 | options: { useForImports: true } 344 | }, 345 | ], 346 | }, 347 | { 348 | test: /[\/|\\]app\.scss$/, 349 | use: [ 350 | '@nativescript/webpack/helpers/style-hot-loader', 351 | { 352 | loader: "@nativescript/webpack/helpers/css2json-loader", 353 | options: { useForImports: true } 354 | }, 355 | 'sass-loader', 356 | ], 357 | }, 358 | 359 | // Angular components reference css files and their imports using raw-loader 360 | { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: 'raw-loader' }, 361 | { 362 | test: /\.scss$/, 363 | exclude: /[\/|\\]app\.scss$/, 364 | use: ['raw-loader', 'resolve-url-loader', 'sass-loader'] 365 | }, 366 | 367 | { 368 | test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, 369 | use: [ 370 | '@nativescript/webpack/helpers/moduleid-compat-loader', 371 | '@nativescript/webpack/helpers/lazy-ngmodule-hot-loader', 372 | '@ngtools/webpack' 373 | ] 374 | }, 375 | 376 | // Mark files inside `@angular/core` as using SystemJS style dynamic imports. 377 | // Removing this will cause deprecation warnings to appear. 378 | { 379 | test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, 380 | parser: { system: true } 381 | } 382 | ] 383 | }, 384 | plugins: [ 385 | // Define useful constants like TNS_WEBPACK 386 | new webpack.DefinePlugin({ 387 | 'global.TNS_WEBPACK': 'true', 388 | 'global.isAndroid': platform === 'android', 389 | 'global.isIOS': platform === 'ios', 390 | process: 'global.process' 391 | }), 392 | // Remove all files from the out dir. 393 | new CleanWebpackPlugin({ 394 | cleanOnceBeforeBuildPatterns: itemsToClean, 395 | verbose: !!verbose 396 | }), 397 | // Copy assets 398 | new CopyWebpackPlugin([ 399 | ...copyTargets, 400 | { from: { glob: '**/*.jpg', dot: false } }, 401 | { from: { glob: '**/*.png', dot: false } }, 402 | ], copyIgnore), 403 | new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'), 404 | // For instructions on how to set up workers with webpack 405 | // check out https://github.com/nativescript/worker-loader 406 | new NativeScriptWorkerPlugin(), 407 | ngCompilerPlugin, 408 | // Does IPC communication with the {N} CLI to notify events when running in watch mode. 409 | new nsWebpack.WatchStateLoggerPlugin() 410 | ] 411 | }; 412 | 413 | if (report) { 414 | // Generate report files for bundles content 415 | config.plugins.push( 416 | new BundleAnalyzerPlugin({ 417 | analyzerMode: 'static', 418 | openAnalyzer: false, 419 | generateStatsFile: true, 420 | reportFilename: resolve(projectRoot, 'report', `report.html`), 421 | statsFilename: resolve(projectRoot, 'report', `stats.json`) 422 | }) 423 | ); 424 | } 425 | 426 | if (snapshot) { 427 | config.plugins.push( 428 | new nsWebpack.NativeScriptSnapshotPlugin({ 429 | chunk: 'vendor', 430 | angular: true, 431 | requireModules: [ 432 | 'reflect-metadata', 433 | '@angular/platform-browser', 434 | '@angular/core', 435 | '@angular/common', 436 | '@angular/router', 437 | '@nativescript/angular' 438 | ], 439 | projectRoot, 440 | webpackConfig: config, 441 | snapshotInDocker, 442 | skipSnapshotTools, 443 | useLibs 444 | }) 445 | ); 446 | } 447 | 448 | if (!production && hmr) { 449 | config.plugins.push(new webpack.HotModuleReplacementPlugin()); 450 | } 451 | 452 | return config; 453 | }; -------------------------------------------------------------------------------- /demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | 9 | [*.json] 10 | indent_style = space 11 | indent_size = 2 12 | 13 | [*.ts] 14 | indent_style = tab 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms/ 5 | 6 | # NativeScript Template 7 | *.js.map 8 | *.js 9 | !webpack.config.js 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # General 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | .idea 23 | .cloud 24 | .project 25 | tmp/ 26 | typings/ 27 | 28 | # Visual Studio Code 29 | .vscode/* 30 | !.vscode/settings.json 31 | !.vscode/tasks.json 32 | !.vscode/launch.json 33 | !.vscode/extensions.json 34 | -------------------------------------------------------------------------------- /demo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nativescript.nativescript" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // implementation 'com.android.support:recyclerview-v7:+' 6 | //} 7 | 8 | // If you want to add something to be applied before applying plugins' include.gradle files 9 | // e.g. project.ext.googlePlayServicesVersion = "15.0.1" 10 | // create a file named before-plugins.gradle in the current directory and place it there 11 | 12 | android { 13 | defaultConfig { 14 | minSdkVersion 17 15 | generatedDensities = [] 16 | } 17 | aaptOptions { 18 | additionalParameters "--no-version-vectors" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-hdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-hdpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-hdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-hdpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-ldpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-ldpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-ldpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-ldpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-mdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-mdpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-mdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-mdpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xhdpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/values-v21/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3d5afe 4 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/values-v29/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #F5F5F5 4 | #757575 5 | #33B5E5 6 | #272734 7 | -------------------------------------------------------------------------------- /demo/App_Resources/Android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 21 | 22 | 23 | 31 | 32 | 34 | 35 | 36 | 42 | 43 | 45 | 46 | -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "icon-20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "icon-20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "icon-29.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "icon-29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "icon-29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "icon-40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "icon-40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "icon-60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "icon-60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "icon-20.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "icon-20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "icon-29.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "icon-29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "icon-40.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "icon-40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "icon-76.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "icon-76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "icon-83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "icon-1024.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-AspectFill@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchScreen-Center@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/demo/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png -------------------------------------------------------------------------------- /demo/App_Resources/iOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ${PRODUCT_NAME} 9 | CFBundleExecutable 10 | ${EXECUTABLE_NAME} 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | ${PRODUCT_NAME} 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiresFullScreen 28 | 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UISupportedInterfaceOrientations~ipad 40 | 41 | UIInterfaceOrientationPortrait 42 | UIInterfaceOrientationPortraitUpsideDown 43 | UIInterfaceOrientationLandscapeLeft 44 | UIInterfaceOrientationLandscapeRight 45 | 46 | UIUserInterfaceStyle 47 | Light 48 | 49 | 50 | -------------------------------------------------------------------------------- /demo/App_Resources/iOS/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /demo/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with XCode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | -------------------------------------------------------------------------------- /demo/app/app-root.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /demo/app/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.css file is where you place CSS rules that 3 | you would like to apply to your entire application. Check out 4 | http://docs.nativescript.org/ui/styling for a full list of the CSS 5 | selectors and properties you can use to style UI components. 6 | 7 | /* 8 | In many cases you may want to use the NativeScript core theme instead 9 | of writing your own CSS rules. You can learn more about the 10 | NativeScript core theme at https://github.com/nativescript/theme 11 | The imported CSS rules must precede all other types of rules. 12 | */ 13 | @import '~@nativescript/theme/css/core.css'; 14 | @import '~@nativescript/theme/css/default.css'; 15 | 16 | /* Place any CSS rules you want to apply on both iOS and Android here. 17 | This is where the vast majority of your CSS code goes. */ 18 | 19 | /* 20 | The following CSS rule changes the font size of all Buttons that have the 21 | '-primary' class modifier. 22 | */ 23 | Button.-primary { 24 | font-size: 18; 25 | } 26 | 27 | * { 28 | font-size: 20; 29 | } 30 | -------------------------------------------------------------------------------- /demo/app/app.ts: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.ts file is the entry point to your application. 3 | You can use this file to perform app-level initialization, but the primary 4 | purpose of the file is to pass control to the app’s first module. 5 | */ 6 | 7 | import { Application } from '@nativescript/core'; 8 | 9 | Application.run({ moduleName: 'app-root' }); 10 | 11 | /* 12 | Do not place any code after the application has been started as it will not 13 | be executed on iOS. 14 | */ 15 | -------------------------------------------------------------------------------- /demo/app/main-page.ts: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, a file with the same name as an XML file is known as 3 | a code-behind file. The code-behind is a great place to place your view 4 | logic, and to set up your page’s data binding. 5 | */ 6 | 7 | import { EventData, Page } from '@nativescript/core'; 8 | import { HelloWorldModel } from './main-view-model'; 9 | 10 | // Event handler for Page 'navigatingTo' event attached in main-page.xml 11 | export function navigatingTo(args: EventData) { 12 | /* 13 | This gets a reference this page’s UI component. You can 14 | view the API reference of the Page to see what’s available at 15 | https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html 16 | */ 17 | const page = args.object; 18 | 19 | /* 20 | A page’s bindingContext is an object that should be used to perform 21 | data binding between XML markup and TypeScript code. Properties 22 | on the bindingContext can be accessed using the {{ }} syntax in XML. 23 | In this example, the {{ message }} and {{ onTap }} bindings are resolved 24 | against the object returned by createViewModel(). 25 | 26 | You can learn more about data binding in NativeScript at 27 | https://docs.nativescript.org/core-concepts/data-binding. 28 | */ 29 | page.bindingContext = new HelloWorldModel(); 30 | } 31 | -------------------------------------------------------------------------------- /demo/app/main-page.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 16 | 19 | 20 | -------------------------------------------------------------------------------- /demo/app/main-view-model.ts: -------------------------------------------------------------------------------- 1 | import { EventData, Observable, ObservableArray } from '@nativescript/core'; 2 | import { SelectedIndexChangedEventData, ValueList } from "nativescript-drop-down"; 3 | 4 | export class HelloWorldModel extends Observable { 5 | public items = new ObservableArray(); 6 | public selectedIndex; 7 | 8 | constructor() { 9 | super(); 10 | 11 | for (var loop = 0; loop < 20; loop++) { 12 | this.items.push("Item " + loop.toString()); 13 | } 14 | 15 | let itemSource = new ValueList([ 16 | { value: "FL", display: "Florida" }, 17 | { value: "MI", display: "Michigan" } 18 | ]); 19 | } 20 | 21 | dropDownOpened(args: EventData) { 22 | console.log("Drop Down opened"); 23 | } 24 | 25 | dropDownClosed(args: EventData) { 26 | console.log("Drop Down closed"); 27 | } 28 | 29 | dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) { 30 | console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /demo/nativescript.config.ts: -------------------------------------------------------------------------------- 1 | import { NativeScriptConfig } from '@nativescript/core'; 2 | 3 | export default { 4 | id: 'com.tangrainc.dropdownsample', 5 | appPath: 'app', 6 | appResourcesPath: 'App_Resources', 7 | android: { 8 | v8Flags: '--expose_gc', 9 | markingMode: 'none' 10 | } 11 | } as NativeScriptConfig; -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript/template-hello-world-ts", 3 | "main": "app.js", 4 | "version": "7.0.6", 5 | "author": "NativeScript Team ", 6 | "description": "NativeScript Application", 7 | "license": "SEE LICENSE IN ", 8 | "publishConfig": { 9 | "access": "public" 10 | }, 11 | "keywords": [ 12 | "nativescript", 13 | "mobile", 14 | "{N}", 15 | "template" 16 | ], 17 | "repository": "", 18 | "bugs": { 19 | "url": "https://github.com/NativeScript/NativeScript/issues" 20 | }, 21 | "homepage": "https://github.com/NativeScript/nativescript-app-templates", 22 | "dependencies": { 23 | "@nativescript/core": "~7.1.0", 24 | "@nativescript/theme": "~2.3.0", 25 | "nativescript-drop-down": "file:../bin/dist" 26 | }, 27 | "devDependencies": { 28 | "@nativescript/android": "7.0.1", 29 | "@nativescript/ios": "8.1.0", 30 | "@nativescript/types": "~7.0.0", 31 | "@nativescript/webpack": "~4.0.0", 32 | "typescript": "~3.9.0" 33 | }, 34 | "private": "true", 35 | "readme": "NativeScript Application" 36 | } 37 | -------------------------------------------------------------------------------- /demo/references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es2017", 5 | "moduleResolution": "node", 6 | "experimentalDecorators": true, 7 | "emitDecoratorMetadata": true, 8 | "noEmitHelpers": true, 9 | "noEmitOnError": true, 10 | "skipLibCheck": true, 11 | "lib": [ 12 | "es2017", 13 | "dom", 14 | "es6" 15 | ], 16 | "baseUrl": ".", 17 | "paths": { 18 | "~/*": [ 19 | "app/*" 20 | ] 21 | } 22 | }, 23 | "exclude": [ 24 | "node_modules", 25 | "platforms" 26 | ] 27 | } -------------------------------------------------------------------------------- /demo/tsfmt.json: -------------------------------------------------------------------------------- 1 | { 2 | "indentSize": 2, 3 | "tabSize": 2 4 | } 5 | -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { join, relative, resolve, sep } = require("path"); 2 | const fs = require('fs'); 3 | 4 | const webpack = require("webpack"); 5 | const nsWebpack = require("@nativescript/webpack"); 6 | const nativescriptTarget = require("@nativescript/webpack/nativescript-target"); 7 | const { getNoEmitOnErrorFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils"); 8 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 9 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 10 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); 11 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); 12 | const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); 13 | const TerserPlugin = require("terser-webpack-plugin"); 14 | const hashSalt = Date.now().toString(); 15 | 16 | module.exports = env => { 17 | // Add your custom Activities, Services and other Android app components here. 18 | const appComponents = env.appComponents || []; 19 | appComponents.push(...[ 20 | "@nativescript/core/ui/frame", 21 | "@nativescript/core/ui/frame/activity", 22 | ]); 23 | 24 | const platform = env && (env.android && "android" || env.ios && "ios" || env.platform); 25 | if (!platform) { 26 | throw new Error("You need to provide a target platform!"); 27 | } 28 | 29 | const platforms = ["ios", "android"]; 30 | const projectRoot = __dirname; 31 | 32 | if (env.platform) { 33 | platforms.push(env.platform); 34 | } 35 | 36 | // Default destination inside platforms//... 37 | const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); 38 | 39 | const { 40 | // The 'appPath' and 'appResourcesPath' values are fetched from 41 | // the nsconfig.json configuration file. 42 | appPath = "src", 43 | appResourcesPath = "App_Resources", 44 | 45 | // You can provide the following flags when running 'tns run android|ios' 46 | snapshot, // --env.snapshot 47 | production, // --env.production 48 | uglify, // --env.uglify 49 | report, // --env.report 50 | sourceMap, // --env.sourceMap 51 | hiddenSourceMap, // --env.hiddenSourceMap 52 | hmr, // --env.hmr, 53 | unitTesting, // --env.unitTesting, 54 | testing, // --env.testing 55 | verbose, // --env.verbose 56 | snapshotInDocker, // --env.snapshotInDocker 57 | skipSnapshotTools, // --env.skipSnapshotTools 58 | compileSnapshot // --env.compileSnapshot 59 | } = env; 60 | 61 | const useLibs = compileSnapshot; 62 | const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; 63 | const externals = nsWebpack.getConvertedExternals(env.externals); 64 | 65 | let appFullPath = resolve(projectRoot, appPath); 66 | if (!fs.existsSync(appFullPath)) { 67 | // some apps use 'app' directory 68 | appFullPath = resolve(projectRoot, 'app'); 69 | } 70 | const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); 71 | let coreModulesPackageName = "tns-core-modules"; 72 | const alias = env.alias || {}; 73 | alias['~/package.json'] = resolve(projectRoot, 'package.json'); 74 | alias['~'] = appFullPath; 75 | 76 | if (hasRootLevelScopedModules) { 77 | coreModulesPackageName = "@nativescript/core"; 78 | alias["tns-core-modules"] = coreModulesPackageName; 79 | } 80 | const appResourcesFullPath = resolve(projectRoot, appResourcesPath); 81 | 82 | const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }; 83 | 84 | const entryModule = nsWebpack.getEntryModule(appFullPath, platform); 85 | const entryPath = `.${sep}${entryModule}.ts`; 86 | const entries = env.entries || {}; 87 | entries.bundle = entryPath; 88 | 89 | const tsConfigPath = resolve(projectRoot, "tsconfig.json"); 90 | 91 | const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1); 92 | if (platform === "ios" && !areCoreModulesExternal && !testing) { 93 | entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules"; 94 | }; 95 | 96 | let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist); 97 | 98 | const itemsToClean = [`${dist}/**/*`]; 99 | if (platform === "android") { 100 | itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`); 101 | itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`); 102 | } 103 | 104 | const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath); 105 | 106 | nsWebpack.processAppComponents(appComponents, platform); 107 | const config = { 108 | mode: production ? "production" : "development", 109 | context: appFullPath, 110 | externals, 111 | watchOptions: { 112 | ignored: [ 113 | appResourcesFullPath, 114 | // Don't watch hidden files 115 | "**/.*", 116 | ] 117 | }, 118 | target: nativescriptTarget, 119 | entry: entries, 120 | output: { 121 | pathinfo: false, 122 | path: dist, 123 | sourceMapFilename, 124 | libraryTarget: "commonjs2", 125 | filename: "[name].js", 126 | globalObject: "global", 127 | hashSalt 128 | }, 129 | resolve: { 130 | extensions: [".ts", ".js", ".scss", ".css"], 131 | // Resolve {N} system modules from @nativescript/core 132 | modules: [ 133 | resolve(__dirname, `node_modules/${coreModulesPackageName}`), 134 | resolve(__dirname, "node_modules"), 135 | `node_modules/${coreModulesPackageName}`, 136 | "node_modules", 137 | ], 138 | alias, 139 | // resolve symlinks to symlinked modules 140 | symlinks: true 141 | }, 142 | resolveLoader: { 143 | // don't resolve symlinks to symlinked loaders 144 | symlinks: false 145 | }, 146 | node: { 147 | // Disable node shims that conflict with NativeScript 148 | "http": false, 149 | "timers": false, 150 | "setImmediate": false, 151 | "fs": "empty", 152 | "__dirname": false, 153 | }, 154 | devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), 155 | optimization: { 156 | runtimeChunk: "single", 157 | noEmitOnErrors: noEmitOnErrorFromTSConfig, 158 | splitChunks: { 159 | cacheGroups: { 160 | vendor: { 161 | name: "vendor", 162 | chunks: "all", 163 | test: (module, chunks) => { 164 | const moduleName = module.nameForCondition ? module.nameForCondition() : ''; 165 | return /[\\/]node_modules[\\/]/.test(moduleName) || 166 | appComponents.some(comp => comp === moduleName); 167 | 168 | }, 169 | enforce: true, 170 | }, 171 | } 172 | }, 173 | minimize: !!uglify, 174 | minimizer: [ 175 | new TerserPlugin({ 176 | parallel: true, 177 | cache: true, 178 | sourceMap: isAnySourceMapEnabled, 179 | terserOptions: { 180 | output: { 181 | comments: false, 182 | semicolons: !isAnySourceMapEnabled 183 | }, 184 | compress: { 185 | // The Android SBG has problems parsing the output 186 | // when these options are enabled 187 | 'collapse_vars': platform !== "android", 188 | sequences: platform !== "android", 189 | } 190 | } 191 | }) 192 | ], 193 | }, 194 | module: { 195 | rules: [ 196 | { 197 | include: join(appFullPath, entryPath), 198 | use: [ 199 | // Require all Android app components 200 | platform === "android" && { 201 | loader: "@nativescript/webpack/helpers/android-app-components-loader", 202 | options: { modules: appComponents } 203 | }, 204 | 205 | { 206 | loader: "@nativescript/webpack/bundle-config-loader", 207 | options: { 208 | loadCss: !snapshot, // load the application css if in debug mode 209 | unitTesting, 210 | appFullPath, 211 | projectRoot, 212 | ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) 213 | } 214 | }, 215 | ].filter(loader => !!loader) 216 | }, 217 | 218 | { 219 | test: /\.(ts|css|scss|html|xml)$/, 220 | use: "@nativescript/webpack/hmr/hot-loader" 221 | }, 222 | 223 | { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" }, 224 | 225 | { 226 | test: /\.css$/, 227 | use: "@nativescript/webpack/helpers/css2json-loader" 228 | }, 229 | 230 | { 231 | test: /\.scss$/, 232 | use: [ 233 | "@nativescript/webpack/helpers/css2json-loader", 234 | "sass-loader" 235 | ] 236 | }, 237 | 238 | { 239 | test: /\.ts$/, 240 | use: { 241 | loader: "ts-loader", 242 | options: { 243 | configFile: tsConfigPath, 244 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds 245 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement 246 | transpileOnly: true, 247 | allowTsInNodeModules: true, 248 | compilerOptions: { 249 | sourceMap: isAnySourceMapEnabled, 250 | declaration: false 251 | }, 252 | getCustomTransformers: (program) => ({ 253 | before: [ 254 | require("@nativescript/webpack/transformers/ns-transform-native-classes").default 255 | ] 256 | }) 257 | }, 258 | } 259 | }, 260 | ] 261 | }, 262 | plugins: [ 263 | // Define useful constants like TNS_WEBPACK 264 | new webpack.DefinePlugin({ 265 | "global.TNS_WEBPACK": "true", 266 | "global.isAndroid": platform === 'android', 267 | "global.isIOS": platform === 'ios', 268 | "process": "global.process", 269 | }), 270 | // Remove all files from the out dir. 271 | new CleanWebpackPlugin({ 272 | cleanOnceBeforeBuildPatterns: itemsToClean, 273 | verbose: !!verbose 274 | }), 275 | // Copy assets 276 | new CopyWebpackPlugin([ 277 | { from: { glob: 'assets/**', dot: false } }, 278 | { from: { glob: 'fonts/**', dot: false } }, 279 | { from: { glob: '**/*.jpg', dot: false } }, 280 | { from: { glob: '**/*.png', dot: false } }, 281 | ], copyIgnore), 282 | new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"), 283 | // For instructions on how to set up workers with webpack 284 | // check out https://github.com/nativescript/worker-loader 285 | new NativeScriptWorkerPlugin(), 286 | new nsWebpack.PlatformFSPlugin({ 287 | platform, 288 | platforms, 289 | }), 290 | // Does IPC communication with the {N} CLI to notify events when running in watch mode. 291 | new nsWebpack.WatchStateLoggerPlugin(), 292 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds 293 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement 294 | new ForkTsCheckerWebpackPlugin({ 295 | async: false, 296 | typescript: { 297 | configFile: tsConfigPath, 298 | memoryLimit: 4096, 299 | diagnosticOptions: { 300 | syntactic: true, 301 | semantic: true 302 | } 303 | } 304 | }) 305 | ], 306 | }; 307 | 308 | if (report) { 309 | // Generate report files for bundles content 310 | config.plugins.push(new BundleAnalyzerPlugin({ 311 | analyzerMode: "static", 312 | openAnalyzer: false, 313 | generateStatsFile: true, 314 | reportFilename: resolve(projectRoot, "report", `report.html`), 315 | statsFilename: resolve(projectRoot, "report", `stats.json`), 316 | })); 317 | } 318 | 319 | if (snapshot) { 320 | config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ 321 | chunk: "vendor", 322 | requireModules: [ 323 | "@nativescript/core/bundle-entry-points", 324 | ], 325 | projectRoot, 326 | webpackConfig: config, 327 | snapshotInDocker, 328 | skipSnapshotTools, 329 | useLibs 330 | })); 331 | } 332 | 333 | if (hmr) { 334 | config.plugins.push(new webpack.HotModuleReplacementPlugin()); 335 | } 336 | 337 | return config; 338 | }; 339 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/3e004287a63d28f75726426e095541652e90c60e/docs/screenshot.png -------------------------------------------------------------------------------- /drop-down-common.ts: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) 2018 Tangra Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | ***************************************************************************** */ 16 | import { 17 | CSSType, 18 | CoercibleProperty, 19 | EventData, 20 | ItemsSource, 21 | ObservableArray, 22 | Property, 23 | Utils, 24 | View, 25 | addWeakEventListener, 26 | makeParser, 27 | makeValidator, 28 | removeWeakEventListener 29 | } from "@nativescript/core"; 30 | import { TextAlignment } from "@nativescript/core/ui/text-base"; 31 | import { DropDown as DropDownDefinition, SelectedIndexChangedEventData, ValueItem, ValueList as ValueListDefinition } from "."; 32 | export { 33 | Length, 34 | Utils, 35 | backgroundColorProperty, 36 | colorProperty, 37 | fontInternalProperty, 38 | paddingBottomProperty, 39 | paddingLeftProperty, 40 | paddingRightProperty, 41 | paddingTopProperty 42 | } from "@nativescript/core"; 43 | 44 | @CSSType("DropDown") 45 | export abstract class DropDownBase extends View implements DropDownDefinition { 46 | public static openedEvent = "opened"; 47 | public static closedEvent = "closed"; 48 | public static selectedIndexChangedEvent = "selectedIndexChanged"; 49 | 50 | public hint: string; 51 | public itemsTextAlignment: TextAlignment; 52 | public itemsPadding: string; 53 | public selectedIndex: number; 54 | public items: any[] | ItemsSource; 55 | public accessoryViewVisible: boolean; 56 | public isItemsSourceIn: boolean; 57 | public isValueListIn: boolean; 58 | 59 | public abstract open(); 60 | public abstract close(); 61 | public abstract refresh(); 62 | 63 | public _getItemAsString(index: number) { 64 | const items = this.items; 65 | 66 | if (!items) { 67 | return " "; 68 | } 69 | 70 | if (Utils.isNullOrUndefined(index)) { 71 | return null; 72 | } 73 | 74 | if (this.isValueListIn) { 75 | return (items as ValueList).getDisplay(index); 76 | } 77 | 78 | const item = this.isItemsSourceIn ? (this.items as ItemsSource).getItem(index) : this.items[index]; 79 | return (item === undefined || item === null) ? index + "" : item + ""; 80 | } 81 | } 82 | 83 | export interface DropDownBase { 84 | on(eventNames: string, callback: (data: EventData) => void, thisArg?: any); 85 | on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any); 86 | } 87 | 88 | // @ts-ignore 89 | export class ValueList extends ObservableArray> implements ValueListDefinition { 90 | private _array: Array>; 91 | 92 | public getDisplay(index: number): string { 93 | if (Utils.isNullOrUndefined(index)) { 94 | return null; 95 | } 96 | 97 | if (index < 0 || index >= this.length) { 98 | return ""; 99 | } 100 | 101 | return this._array[index].display; 102 | } 103 | 104 | public getValue(index: number): T { 105 | if (Utils.isNullOrUndefined(index) || index < 0 || index >= this.length) { 106 | return null; 107 | } 108 | 109 | return this._array[index].value; 110 | } 111 | 112 | public getIndex(value: T): number { 113 | let loop: number; 114 | 115 | for (loop = 0; loop < this.length; loop++) { 116 | if (this.getValue(loop) === value) { 117 | return loop; 118 | } 119 | } 120 | 121 | return null; 122 | } 123 | } 124 | 125 | export const selectedIndexProperty = new CoercibleProperty({ 126 | name: "selectedIndex", 127 | defaultValue: null, 128 | valueConverter: (v) => { 129 | if (v === undefined || v === null) { 130 | return null; 131 | } 132 | 133 | return parseInt(v, 10); 134 | }, 135 | coerceValue: (target, value) => { 136 | const items = target.items; 137 | if (items && items.length !== 0) { 138 | const max = items.length - 1; 139 | if (value < 0) { 140 | value = 0; 141 | } 142 | if (value > max) { 143 | value = max; 144 | } 145 | } 146 | else { 147 | value = null; 148 | } 149 | 150 | return value; 151 | } 152 | }); 153 | selectedIndexProperty.register(DropDownBase); 154 | 155 | export const itemsProperty = new Property({ 156 | name: "items", 157 | valueChanged: (target, oldValue, newValue) => { 158 | const getItem = newValue && (newValue as ItemsSource).getItem; 159 | const getDisplay = newValue && (newValue as ValueList).getDisplay; 160 | 161 | target.isItemsSourceIn = typeof getItem === "function"; 162 | target.isValueListIn = typeof getDisplay === "function"; 163 | 164 | if (oldValue instanceof ObservableArray) { 165 | removeWeakEventListener(oldValue, ObservableArray.changeEvent, target.refresh, target); 166 | } 167 | 168 | if (newValue instanceof ObservableArray) { 169 | addWeakEventListener(newValue, ObservableArray.changeEvent, target.refresh, target); 170 | } 171 | } 172 | }); 173 | itemsProperty.register(DropDownBase); 174 | 175 | export const hintProperty = new Property({ 176 | name: "hint", 177 | defaultValue: "" 178 | }); 179 | hintProperty.register(DropDownBase); 180 | 181 | const textAlignmentConverter = makeParser(makeValidator("initial", "left", "center", "right")); 182 | export const itemsTextAlignmentProperty = new Property({ 183 | name: "itemsTextAlignment", 184 | defaultValue: "initial", 185 | valueConverter: textAlignmentConverter 186 | }); 187 | itemsTextAlignmentProperty.register(DropDownBase); 188 | 189 | export const itemsPaddingProperty = new Property({ 190 | name: "itemsPadding", 191 | defaultValue: "" 192 | }); 193 | itemsPaddingProperty.register(DropDownBase); 194 | -------------------------------------------------------------------------------- /drop-down.android.ts: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) 2018 Tangra Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | ***************************************************************************** */ 16 | import { 17 | Color, 18 | Font, 19 | ItemsSource, 20 | Label, 21 | StackLayout, 22 | Utils, 23 | View, 24 | fontInternalProperty, 25 | fontSizeProperty, 26 | placeholderColorProperty, 27 | textAlignmentProperty, 28 | textDecorationProperty 29 | } from "@nativescript/core"; 30 | import { TextAlignment, TextDecoration } from "@nativescript/core/ui/text-base"; 31 | import { 32 | DropDownBase, 33 | backgroundColorProperty, 34 | colorProperty, 35 | hintProperty, 36 | itemsPaddingProperty, 37 | itemsProperty, 38 | itemsTextAlignmentProperty, 39 | selectedIndexProperty 40 | } from "./drop-down-common"; 41 | 42 | export * from "./drop-down-common"; 43 | 44 | enum RealizedViewType { 45 | ItemView, 46 | DropDownView 47 | } 48 | 49 | const LABELVIEWID = "spinner-label"; 50 | 51 | export class DropDown extends DropDownBase { 52 | public nativeView: TNSSpinner; 53 | public _realizedItems = [ 54 | new Map(), 55 | new Map() 56 | ]; 57 | 58 | private _androidViewId: number; 59 | 60 | public createNativeView() { 61 | initializeTNSSpinner(); 62 | const spinner = new TNSSpinner(new WeakRef(this)); 63 | 64 | if (!this._androidViewId) { 65 | this._androidViewId = android.view.View.generateViewId(); 66 | } 67 | spinner.setId(this._androidViewId); 68 | 69 | initializeDropDownAdapter(); 70 | const adapter = new DropDownAdapter(new WeakRef(this)); 71 | spinner.setAdapter(adapter); 72 | spinner.adapter = adapter; 73 | 74 | initializeDropDownItemSelectedListener(); 75 | const itemSelectedListener = new DropDownItemSelectedListener(new WeakRef(this)); 76 | spinner.setOnItemSelectedListener(itemSelectedListener); 77 | spinner.itemSelectedListener = itemSelectedListener; 78 | 79 | return spinner; 80 | } 81 | 82 | public initNativeView() { 83 | super.initNativeView(); 84 | 85 | const nativeView = this.nativeView; 86 | nativeView.adapter.owner = new WeakRef(this); 87 | nativeView.itemSelectedListener.owner = new WeakRef(this); 88 | 89 | // When used in templates the selectedIndex changed event is fired before the native widget is init. 90 | // So here we must set the inital value (if any) 91 | if (!Utils.isNullOrUndefined(this.selectedIndex)) { 92 | this.android.setSelection(this.selectedIndex + 1); // +1 for the hint first element 93 | } 94 | nativeView.itemsTextAlignment = itemsTextAlignmentProperty.defaultValue; 95 | nativeView.itemsPadding = itemsPaddingProperty.defaultValue; 96 | } 97 | 98 | public disposeNativeView() { 99 | const nativeView = this.nativeView; 100 | nativeView.adapter.owner = null; 101 | nativeView.itemSelectedListener.owner = null; 102 | 103 | this._clearCache(RealizedViewType.DropDownView); 104 | this._clearCache(RealizedViewType.ItemView); 105 | 106 | super.disposeNativeView(); 107 | } 108 | 109 | // @ts-ignore 110 | get android(): android.widget.Spinner { 111 | return this.nativeView; 112 | } 113 | 114 | public open() { 115 | if (this.isEnabled) { 116 | this.nativeView.performClick(); 117 | } 118 | } 119 | 120 | public close() { 121 | this.nativeView.onDetachedFromWindowX(); 122 | } 123 | 124 | public refresh() { 125 | this._updateSelectedIndexOnItemsPropertyChanged(this.items); 126 | 127 | if (this.android && this.android.getAdapter()) { 128 | (this.android.getAdapter() as DropDownAdapter).notifyDataSetChanged(); 129 | } 130 | 131 | // Coerce selected index after we have set items to native view. 132 | selectedIndexProperty.coerce(this); 133 | } 134 | 135 | public [backgroundColorProperty.setNative](value: Color | number) { 136 | this._propagateStylePropertyToRealizedViews("backgroundColor", value, true); 137 | } 138 | 139 | public [colorProperty.setNative](value: Color | number) { 140 | if (!Utils.isNullOrUndefined(value)) { 141 | this._propagateStylePropertyToRealizedViews("color", value, false); 142 | } 143 | } 144 | 145 | public [fontInternalProperty.setNative](value: Font | android.graphics.Typeface) { 146 | this._propagateStylePropertyToRealizedViews("fontInternal", value, true); 147 | } 148 | 149 | public [fontSizeProperty.setNative](value: number | { nativeSize: number }) { 150 | if (!Utils.isNullOrUndefined(value)) { 151 | this._propagateStylePropertyToRealizedViews("fontSize", value, true); 152 | } 153 | } 154 | 155 | public [hintProperty.getDefault](): string { 156 | return ""; 157 | } 158 | public [hintProperty.setNative](value: string) { 159 | (this.android.getAdapter() as DropDownAdapter).notifyDataSetChanged(); 160 | } 161 | 162 | public [itemsPaddingProperty.getDefault](): string { 163 | return ""; 164 | } 165 | public [itemsPaddingProperty.setNative](value: string) { 166 | this.nativeView.itemsPadding = value; 167 | } 168 | 169 | public [itemsProperty.getDefault](): any[] { 170 | return null; 171 | } 172 | public [itemsProperty.setNative](value: any[] | ItemsSource) { 173 | this._updateSelectedIndexOnItemsPropertyChanged(value); 174 | (this.android.getAdapter() as DropDownAdapter).notifyDataSetChanged(); 175 | 176 | // Coerce selected index after we have set items to native view. 177 | selectedIndexProperty.coerce(this); 178 | } 179 | 180 | public [itemsTextAlignmentProperty.getDefault](): TextAlignment { 181 | return "initial"; 182 | } 183 | public [itemsTextAlignmentProperty.setNative](value: TextAlignment) { 184 | this.nativeView.itemsTextAlignment = value; 185 | } 186 | 187 | public [textDecorationProperty.getDefault](): TextDecoration { 188 | return "none"; 189 | } 190 | public [textDecorationProperty.setNative](value: TextDecoration) { 191 | this._propagateStylePropertyToRealizedViews("textDecoration", value, true); 192 | } 193 | 194 | public [textAlignmentProperty.getDefault](): TextAlignment { 195 | return "left"; 196 | } 197 | public [textAlignmentProperty.setNative](value: TextAlignment) { 198 | this._propagateStylePropertyToRealizedViews("textAlignment", value, true); 199 | } 200 | 201 | public [placeholderColorProperty.setNative](value: Color | number) { 202 | this._propagateStylePropertyToRealizedViews("placeholderColor", value, true); 203 | } 204 | 205 | public [selectedIndexProperty.getDefault](): number { 206 | return null; 207 | } 208 | public [selectedIndexProperty.setNative](value: number) { 209 | const actualIndex = (Utils.isNullOrUndefined(value) ? 0 : value + 1); 210 | this.nativeView.setSelection(actualIndex); 211 | } 212 | 213 | public _getRealizedView(convertView: android.view.View, realizedViewType: RealizedViewType): View { 214 | if (!convertView) { 215 | const view = new Label(); 216 | const layout = new StackLayout(); 217 | 218 | layout.style.horizontalAlignment = "stretch"; 219 | view.id = LABELVIEWID; 220 | 221 | layout.addChild(view); 222 | 223 | return layout; 224 | } 225 | 226 | return this._realizedItems[realizedViewType].get(convertView); 227 | } 228 | 229 | public _clearCache(realizedViewType: RealizedViewType) { 230 | const realizedItems = this._realizedItems[realizedViewType]; 231 | realizedItems.forEach((view) => { 232 | if (view.parent) { 233 | view.parent._removeView(view); 234 | } 235 | }); 236 | realizedItems.clear(); 237 | } 238 | 239 | private _propagateStylePropertyToRealizedViews(property: string, value: any, isIncludeHintIn = true) { 240 | const realizedItems = this._realizedItems; 241 | for (const item of realizedItems) { 242 | item.forEach((view) => { 243 | if (isIncludeHintIn || !(view as any).isHintViewIn) { 244 | if (property === "textAlignment" || property === "textDecoration" 245 | || property === "fontInternal" || property === "fontSize" 246 | || property === "color" 247 | || property === "placeholderColor") { 248 | const label = view.getViewById